ui-stylingpor nextlevelbuilder

UI Styling Skill.

Uma skill de Claude Code e Codex para design de UI: estilização de UI acessível com shadcn/ui, Tailwind CSS e visuais baseados em canvas.

Web & UI
Código de UI

Baixar OpenDesign Ver guia de uso

nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/ui-styling/SKILL.mdSKILL.md

--- name: ui-styling description: Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and … --- ## When to Use This Skill ## Core Stack ## Script Paths ## Quick Start ## Component Library Guide ## Theme & Customization

Front matter e títulos de seção lidos do arquivo upstream em 14/09/2026 · 10.626 caracteres no total

01 O que faz

O Que a Skill ui-styling Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Esta skill constrói interfaces de usuário React acessíveis combinando componentes shadcn/ui (primitivos Radix UI com Tailwind CSS), estilização utility-first com Tailwind CSS e sistemas de design visual baseados em canvas. Ela atende projetos Next.js, Vite, Remix e Astro. Os componentes são copiados para o seu código-fonte via CLI, dando a você controle total e segurança de tipos com TypeScript.

A skill cobre layouts responsivos, modo escuro, tokens de design, validação de formulários, tabelas de dados e composições visuais de qualidade museológica. Ela inclui documentação de referência para padrões de componentes, temas, acessibilidade (ARIA, navegação por teclado), breakpoints responsivos e customização do Tailwind. Scripts Python automatizam a instalação de componentes e a geração de configurações.

O que ele produz

tailwind.config.js gerado com tokens de tema personalizados, cores, fontes, espaçamento e extensões de breakpoint.

Veja o exemplo de prompt ↗

Como funciona

01
Inicializar o Shadcn/ui com Tailwind
Execute npx shadcn@latest init para configurar tanto o shadcn/ui quanto o Tailwind CSS, solicitando preferências de framework, TypeScript, caminhos e tema.
02
Adicionar Componentes ao Seu Código-fonte
Instale componentes com npx shadcn@latest add button card dialog form, que os copia para o seu projeto para controle e customização total.
03
Compor com Classes Utilitárias
Combine componentes shadcn/ui com classes utilitárias do Tailwind para layouts responsivos, espaçamento, cores e estados de hover diretamente nos atributos className do JSX.
04
Aplicar Variantes de Modo Escuro
Use o next-themes para alternância de tema e adicione classes utilitárias com prefixo dark: a todos os elementos temáticos para suporte consistente ao modo escuro.
05
Aproveitar a Acessibilidade do Radix
Os primitivos Radix UI fornecem padrões ARIA integrados, navegação por teclado e gerenciamento de foco sem configuração adicional.

02 Encontre o ideal para você

Quando Usar a Skill ui-styling

Use a skill ui-styling no Claude Code ou Codex quando o trabalho for design de UI desse tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Construção de UI com frameworks baseados em React, como Next.js, Vite, Remix ou Astro.
Implementação de componentes acessíveis, como diálogos, formulários, tabelas e navegação.
Criação de layouts responsivos, mobile-first, com abordagem de CSS utility-first.
Construção de sistemas de design com tokens consistentes e suporte a modo escuro.
Geração de designs visuais, pôsteres ou materiais de marca com workflows baseados em canvas.

Conheça os Limites

Requer shadcn/ui, Tailwind CSSO SKILL.md nomeia esta dependência; a skill não funciona sem ela no seu projeto.

O Que Fornecer

Nomes de componentes para instalaçãoPasse nomes de componentes para shadcn_add.py ou npx shadcn@latest add para instalar com tratamento de dependências.
Tokens de tema personalizadosForneça cores e fontes personalizadas para tailwind_config_gen.py para gerar o tailwind.config.js com tema estendido.

03 Dentro da skill

Regras Que a Skill ui-styling Dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Responsivo Mobile-first
Comece com estilos mobile e adicione variantes responsivas usando breakpoints (sm, md, lg, xl, 2xl). O Tailwind processa mobile-first por padrão.
Extração Utility-first
Use classes do Tailwind diretamente no JSX. Extraia componentes apenas para repetição real, não para padrões de uso único.
Caminhos de Script Relativos ao Diretório do Skill
Os caminhos de script neste skill são relativos ao diretório que contém o SKILL.md, não à raiz do projeto.
Uso de Componentes com Acessibilidade em Primeiro Lugar
Aproveite os primitivos do Radix UI para padrões ARIA, adicione estados de foco a elementos interativos e use HTML semântico. O suporte a leitores de tela já vem integrado aos componentes do shadcn/ui.
Tokens de Design para Consistência
Use uma escala de espaçamento consistente, paletas de cores e um sistema de tipografia definidos na configuração do Tailwind. Aplique variáveis de tema em vez de valores arbitrários.
Segurança de Tipos com TypeScript
Todos os componentes são TypeScript-first com segurança de tipos completa. Use props tipadas e schemas de formulário para uma melhor experiência de desenvolvimento.
Evite Nomes de Classe Dinâmicos
A purga automática de CSS do Tailwind exige nomes de classe estáticos. A construção dinâmica de classes impede a eliminação de código morto.
Padrão de Excelência Técnica
Cada detalhe importa — trate a UI como um ofício. Aplique execução com qualidade de museu às composições visuais, com padrões sistemáticos e estética refinada.

04 Coloque em prática

Instale ui-styling no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar ui-styling ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

Forma genérica do CLI skills para .claude/skills/ui-styling/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Design de UI

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Build a responsive dashboard with a three-column card grid layout that shows analytics metrics. Add a data table component with sorting and filtering for user records. Implement dark mode using next-themes with consistent color variants across all cards and table elements. Include a form dialog with email and password validation using react-hook-form and zod schema. Make sure all interactive elements have proper focus states and keyboard navigation.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Teste os breakpoints responsivos em sm, md, lg, xl e 2xl para garantir que o layout mobile-first se adapte corretamente.
Valide a acessibilidade testando a navegação por teclado, o gerenciamento de foco e os anúncios de leitores de tela em diálogos e formulários.
Revise a validação de formulários com react-hook-form e o resolver zod para garantir que as mensagens de erro sejam exibidas corretamente.

No OpenDesign, importe o ui-styling a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: nextlevelbuilder
Repository: github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
Arquivo da skill: .claude/skills/ui-styling/SKILL.md Checksum de conteúdo registrado na verificação; commit 7f69fed
License: Apache-2.0 Do .claude/skills/ui-styling/LICENSE.txt; SKILL.md diz "MIT". O LICENSE.txt no nível de arquivo diz Apache-2.0 enquanto o front matter diz MIT; listado pela licença no nível de arquivo.
Estrelas do repositório: 127.450 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório nextlevelbuilder/ui-ux-pro-max-skill, que contém 7 skills neste catálogo. Não é uma classificação ou contagem de uso para ui-styling.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Quando Usar Este SkillLista cenários: frameworks React, componentes acessíveis, layouts responsivos, modo escuro, sistemas de design, designs visuais.
Stack PrincipalDescreve os componentes do shadcn/ui, a estilização com utilitários do Tailwind e as camadas de design visual em canvas.
Caminhos de ScriptExplica que os caminhos de script são relativos ao diretório do skill, não à raiz do projeto.
Início RápidoMostra a inicialização do shadcn/ui, a instalação de componentes e a configuração apenas com Tailwind para o Vite.
Guia da Biblioteca de ComponentesAponta para o shadcn-components.md, que aborda componentes de formulários, layouts, overlays, feedback e exibição.
Tema e PersonalizaçãoAponta para shadcn-theming.md para modo escuro, variáveis CSS, cores e variantes de componentes.
Padrões de AcessibilidadeAponta para shadcn-accessibility.md para ARIA, navegação por teclado, gerenciamento de foco e leitores de tela.
Utilitários TailwindAponta para tailwind-utilities.md para layout, espaçamento, tipografia, cores, bordas e sombras.
Design ResponsivoAponta para tailwind-responsive.md para breakpoints mobile-first e padrões de utilitários responsivos.
Personalização TailwindAponta para tailwind-customization.md para estrutura de config, utilitários customizados, plugins e extensões de tema.
Sistema de Design VisualAponta para canvas-design-system.md para filosofia de design, comunicação visual e composições sofisticadas.
Scripts UtilitáriosDescreve o shadcn_add.py para instalação de componentes e o tailwind_config_gen.py para geração de config.

A Descrição da Própria Skill

Crie interfaces de usuário bonitas e acessíveis com componentes shadcn/ui (construídos sobre Radix UI + Tailwind), estilização utility-first do Tailwind CSS e designs visuais baseados em canvas. Use ao criar interfaces de usuário, implementar sistemas de design, criar layouts responsivos, adicionar componentes acessíveis (diálogos, dropdowns, formulários, tabelas), personalizar temas e cores, implementar modo escuro, gerar designs visuais e pôsteres ou estabelecer padrões de estilização consistentes entre aplicações.

Descrição do cabeçalho do SKILL.md. O arquivo completo tem cerca de 10.626 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre o Skill ui-styling

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Quais formatos de saída o sistema de design visual produz?

A camada de design visual baseada em canvas cria composições de qualidade de museu para designs visuais, pôsteres e materiais de marca. Segue uma abordagem orientada por filosofia, com texto mínimo e máximo impacto visual.

Estilo da Interface

Execute o ui-styling em uma Tarefa Real de Design de UI.

Baixe o OpenDesign, importe ui-styling a partir do link SKILL.md dele, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

O Que a Skill ui-styling Faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando Usar a Skill ui-styling

Boa Combinação

Conheça os Limites

O Que Fornecer

Regras Que a Skill ui-styling Dá ao Claude Code e ao Codex

Responsivo Mobile-first

Extração Utility-first

Caminhos de Script Relativos ao Diretório do Skill

Uso de Componentes com Acessibilidade em Primeiro Lugar

Tokens de Design para Consistência

Segurança de Tipos com TypeScript

Evite Nomes de Classe Dinâmicos

Padrão de Excelência Técnica