can I used both of them, for example
use Importmaps to load any js library, and esbuild to load css libraries?

It looks a mess for me. Everyting tangle and connected and impossible to remove.
 - importmaps => no idea of css
 - esbuild
 - webpacker
 - sprockets
 - and another library to replace sprockets in 10 years.

a mess.

how this will work with slim-select for example
I try to add in application.sass.scss 

@use 'slim-select/dist/slimselect.css';
@import also
I try to also add it inside of the js
neither work.

any tips here?

@use 'slim-select/dist/slimselect.css';
@use 'bootstrap/scss/bootstrap';

using this will load all of them

my issue with this is that I have no clear scenarios, or best practice, or when to use frame vs stream etc.

if you have a custom field, 
it will have
name:
value: 
type:
default_value: 
validations:
example: {name: 'price', value: 12, type: integer, validation: [numeric, positive, max: 120, min: 1]}
that is the most basic stuff, if you want to be used by x people, filters, I will move the values to another table
field has many values via: field_values

field_values
field_id
current_user_id/user_id some FK to figure out who did it
value: 
created_at
update_at