LeandroBenjaminL Skill: frontend-css-styling
CSS moderno. Seleccioná la estrategia correcta y no mezcles todo.
Trigger
- Necesitás maquetar un componente o página
- No sabés si usar Tailwind, CSS Modules o CSS-in-JS
- Un layout no se comporta como esperás en mobile
- Hay estilos duplicados o que se pisan entre componentes
Workflow LEND
ANALIZAR ├── Stack: ¿Tailwind ya está en el proyecto? ¿CSS Modules? ├── Tipo: ¿layout global o componente aislado? ├── Estado: ¿estilos dinámicos (prop-driven) o estáticos? └── Escala: ¿proyecto chico o grande? Tailwind brilla en equipos grandes
OFRECER (Menú del Senior) ├── A) Tailwind CSS — utility-first, consistente, ideal para equipos ├── B) CSS Modules — scoped por componente, CSS puro, sin runtime └── C) CSS Global + BEM — para proyectos chicos o landing pages
ELEGIR → confirmación
HACER ├── Tailwind: config con colores, fonts, spacing en tailwind.config ├── CSS Modules: un archivo .module.css por componente ├── Layout: Grid para 2D, Flexbox para 1D. Container Queries para responsive por componente ├── Variables CSS para temas (--color-primary, --spacing-md) └── Mobile-first: min-width en media queries, no max-width
VERIFICAR ├── El layout se ve bien en mobile y desktop ├── No hay estilos que se pisan entre componentes └── Los breakpoints son consistentes (no 5 media queries distintos)