Communitygithub.com

samhvw8/ui-design-system

Sistemas de componentes React UI com TailwindCSS + Radix + shadcn/ui.

O que é ui-design-system?

Esse skill capacita um agente a criar, revisar e refinar sistemas de componentes React UI usando uma stack moderna: TailwindCSS para estilização, Radix UI para primitivas acessíveis e shadcn/ui para componentes reutilizáveis. É ideal para desenvolvedores que trabalham com React, Next.js ou qualquer framework compatível. O skill vai além do design visual: ele entende de arquitetura de design systems, componentes acessíveis (com suporte a ARIA), layouts responsivos, temas claro/escuro, e composição de componentes. Com ele, você pode revisar a arquitetura de componentes existentes, sugerir melhorias, construir novos componentes seguindo boas práticas, e implementar design tokens e variantes (como variant, slot). O skill é especialmente útil para quem está montando uma biblioteca de componentes do zero, adotando shadcn/ui, ou adicionando temas e dark mode a um projeto existente. Ele funciona como um assistente especializado em UI, garantindo que cada parte do sistema seja consistente, acessível e alinhada com princípios de design atômico.

Funciona com~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→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

O que ui-design-system faz?

Sistemas de componentes React UI com TailwindCSS + Radix + shadcn/ui. Stack: TailwindCSS (estilização), Radix UI (primitivas), shadcn/ui (componentes), React/Next.js. Capacidades: arquitetura de design system, componentes acessíveis, layouts responsivos, temas, modo escuro, composição de componentes. Ações: revisar, projetar, construir, melhorar, refatorar componentes UI. Palavras-chave: TailwindCSS, Radix UI, shadcn/ui, design system, biblioteca de componentes, acessibilidade, ARIA, responsivo, modo escuro, temas, variáveis CSS, arquitetura de componentes, design atômico, design tokens, variante, slot, composição. Use quando: construindo bibliotecas de componentes, implementando shadcn/ui, criando UIs acessíveis, configurando design systems, adicionando modo escuro/temas, revisando arquitetura de componentes UI.

Habilidades Relacionadas

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