Communitygithub.com

samhvw8/ui-design-system

Sistemas de componentes React UI con TailwindCSS + Radix + shadcn/ui. Permite revisar, diseñar, construir, mejorar y refactorizar componentes de interfaz de usuario.

¿Qué es ui-design-system?

Esta habilidad está diseñada para asistentes de IA que trabajan en el desarrollo de interfaces de usuario con React, Next.js y el ecosistema de componentes moderno. Combina TailwindCSS para el estilado, Radix UI como base de primitivas accesibles, y shadcn/ui para construir componentes reutilizables y personalizables. Es especialmente útil para establecer sistemas de diseño, componentes accesibles (ARIA/WCAG), diseño responsivo, modo oscuro, tematización y composición de componentes. Soporta acciones como revisar, diseñar, construir, mejorar y refactorizar componentes. Se recomienda usar al trabajar con librerías de componentes, implementar shadcn/ui, crear interfaces accesibles, configurar sistemas de diseño o agregar modo oscuro y tematización.

Compatible con~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/samhvw8/dot-claude/tree/main/skills/ui-design-system
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

¿Qué hace ui-design-system?

Sistemas de componentes React UI con TailwindCSS + Radix + shadcn/ui. Stack: TailwindCSS (estilado), Radix UI (primitivas), shadcn/ui (componentes), React/Next.js. Capacidades: arquitectura de sistemas de diseño, componentes accesibles, diseños responsivos, tematización, modo oscuro, composición de componentes. Acciones: revisar, diseñar, construir, mejorar, refactorizar componentes UI. Palabras clave: TailwindCSS, Radix UI, shadcn/ui, sistema de diseño, biblioteca de componentes, accesibilidad, ARIA, responsivo, modo oscuro, tematización, variables CSS, arquitectura de componentes, diseño atómico, tokens de diseño, variante, slot, composición. Usar cuando: se construyan bibliotecas de componentes, se implemente shadcn/ui, se creen interfaces accesibles, se configuren sistemas de diseño, se añada modo oscuro/tematización, o se revise la arquitectura de componentes UI.

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community