By name: ui-patterns description: Patrones de UI probados con Tailwind + shadcn/ui + Framer Motion. Layouts responsive, dashboards, tablas de datos, modals, navegación, empty states, loading patterns. Activar ante "layout", "dashboard", "sidebar", "tabla", "modal", "navegación", "landing", "responsive", "diseño", "UI", "interfaz", "pantalla". license: MIT compatibility: Requires Tailwind CSS v4, shadcn/ui, Framer Motion, and Lucide React. metadata: author: netxa version: "3.4" model: opus
UI Patterns — Tailwind + shadcn/ui + Framer Motion
Principios (OBLIGATORIO)
- Mobile-first siempre: diseñar para móvil, ampliar con
sm:,md:,lg:. - shadcn/ui primero: usar componentes existentes antes de crear custom.
- Verificar instalados:
ls packages/ui/src/components/ui/antes de usar. - Clases con
cn(): nunca template literals para clases condicionales. - Animaciones sutiles: Framer Motion para transiciones, no decoración.
- Estados completos: loading → skeleton, error → fallback, empty → ilustración + CTA.
Catálogo de Patrones
Para layouts y navegación (sidebar, topbar, responsive shell): ver references/LAYOUTS.md
Para tablas de datos (filtros, paginación, sorting, selección): ver references/DATA-TABLES.md
Para feedback y estados (loading, empty, error, toasts, modals, confirmaciones): ver references/FEEDBACK.md
Para patrones de página (dashboard, landing, detail, settings, auth): ver references/PAGES.md
Cuándo Consultar Este Skill
- Antes de crear un layout nuevo → verificar si existe patrón.
- Antes de crear componentes de navegación → usar patrón de shell.
- Cuando una página necesita tabla de datos → usar patrón completo.
- Cuando necesitas estados de feedback → skeleton + error + empty.