Tailwind CSS

Usa la skill design-system para generar o auditar un sistema de UI, extraer tokens del código existente y revisar la consistencia visual en repos reales.

Usa la skill shadcn para revisar el contexto del proyecto, ejecutar los comandos CLI adecuados, instalar componentes y componer interfaces con patrones documentados para base vs radix, formularios, temas y registries.

frontend-design convierte ideas vagas de UI en interfaces distintivas y listas para producción, con código frontend real, una dirección estética clara y menos estilo genérico de IA.

ckm:ui-styling facilita la creación de interfaces accesibles y listas para producción utilizando shadcn/ui, Tailwind CSS y diseño visual basado en canvas. Es ideal para proyectos en React que requieren estructuras responsivas, componentes accesibles, modo oscuro y sistemas de diseño consistentes. Aprovecha ckm:ui-styling para diseño de UI, tematización y prototipado rápido con recomendaciones prácticas adaptadas al stack.

ckm:design-system te ayuda a crear tokens en tres capas, especificaciones de componentes, variables CSS, mapeos a Tailwind y slides de marca coherente a partir de una arquitectura clara de tokens.

Usa la skill tailwind-design-system para crear sistemas de diseño con Tailwind CSS v4, incluyendo tokens, theming, variantes, accesibilidad y guía de migración de v3 a v4.

Usa figma para extraer contexto de diseño, capturas, variables y recursos desde el servidor MCP de Figma, y luego traducir los nodos de Figma en decisiones de UI listas para implementar. Este skill de figma es ideal cuando tienes una URL de Figma o un ID de nodo y necesitas un uso preciso de figma para trabajo de diseño a código, configuración o diagnóstico.

frontend-dev es una skill de frontend-dev para crear páginas web pulidas y listas para producción con UI premium, motion cinematográfico, medios generados por IA, copy persuasivo y arte generativo. Úsala para landing pages, sitios de marketing, páginas de producto, dashboards y otros trabajos de frontend donde el diseño, el contenido y los detalles de implementación deben mantenerse alineados.

frontend-ui-dark-ts te ayuda a crear UI en React con tema oscuro usando TypeScript, Tailwind CSS, Framer Motion y tokens de diseño reutilizables. Está pensado para dashboards, paneles de administración, vistas de analítica y otras interfaces con mucha densidad de datos que necesitan una estética oscura pulida y patrones de componentes consistentes.

expo-tailwind-setup es una guía práctica para instalar y configurar Tailwind CSS v4 en Expo con react-native-css y NativeWind v5 para iOS, Android y web.

ui-web te ayuda a diseñar y dar estilo a componentes de interfaz web con comprobaciones WCAG 2.1 AA, contraste sólido, controles visibles y patrones de Tailwind amigables con el modo oscuro. Usa este skill ui-web para front ends de estilo React cuando necesites guía práctica de diseño de UI que mejore la accesibilidad y reduzca las dudas.

La skill redesign-existing-projects mejora sitios web y apps existentes para llevarlos a un nivel premium. Audita el diseño actual, detecta patrones genéricos de IA y aplica una implementación visual de alto nivel sin romper la funcionalidad. Funciona con cualquier framework CSS o con CSS puro.

baseline-ui ayuda a revisar o generar UI basada en Tailwind frente a una base opinada para espaciado, tipografía, accesibilidad y motion. Usa la skill baseline-ui cuando necesites resultados de componentes más seguros, decisiones de diseño de UI más claras y menos desviación de los primitivos existentes. Es ideal para flujos de trabajo con React/Tailwind y para comprobaciones prácticas de la guía baseline-ui.

La skill de shadcn-ui te ayuda a planificar, instalar y adaptar componentes shadcn/ui en una aplicación real. Usa esta guía de shadcn-ui para implementación de diseño, descubrimiento de componentes, personalización y uso práctico de shadcn-ui en formularios, tablas, flujos de autenticación y layouts.

web-artifacts-builder te ayuda a iniciar un proyecto con React, Tailwind CSS y shadcn/ui, desarrollarlo con normalidad y empaquetarlo luego en un único `bundle.html`. Es ideal para artifacts frontend complejos con estado, rutas o una UI más rica; no tanto para demos simples de un solo archivo.