Communitygithub.com

ui-styling

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

O que é ui-styling?

Esta habilidade abrangente permite criar interfaces de usuário modernas, acessíveis e visualmente impressionantes, combinando três camadas poderosas: componentes shadcn/ui (construídos sobre primitivas Radix UI e estilizados com Tailwind CSS), estilização utilitária Tailwind CSS para controle granular e consistência de design, e um sistema de design visual baseado em canvas para composições sofisticadas. Ela suporta frameworks React como Next.js, Vite, Remix e Astro, fornecendo guias detalhados para instalação, uso de componentes, personalização de temas, implementação de modo escuro, padrões de acessibilidade, design responsivo e automação via scripts Python. A habilidade é útil para desenvolvedores que desejam prototipar rapidamente, construir sistemas de design consistentes, ou gerar materiais visuais de alta qualidade, seguindo as melhores práticas de componentização, estilo utilitário-first, mobile-first e acessibilidade-first.

Funciona com✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/alhurwitz/alberts-agentic-arsenal/tree/HEAD/skills/ui-styling
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

Habilidade de Estilização de UI

Habilidade abrangente para criar interfaces de usuário bonitas e acessíveis, combinando componentes shadcn/ui, estilização utilitária Tailwind CSS e sistemas de design visual baseados em canvas.

Referência

Quando Usar Esta Habilidade

Use quando:

  • Construir UI com frameworks baseados em React (Next.js, Vite, Remix, Astro)
  • Implementar componentes acessíveis (diálogos, formulários, tabelas, navegação)
  • Estilizar com abordagem CSS utilitária-first
  • Criar layouts responsivos mobile-first
  • Implementar modo escuro e personalização de temas
  • Construir sistemas de design com tokens consistentes
  • Gerar designs visuais, pôsteres ou materiais de marca
  • Prototipar rapidamente com feedback visual imediato
  • Adicionar padrões de UI complexos (tabelas de dados, gráficos, paletas de comando)

Stack Principal

Camada de Componentes: shadcn/ui

  • Componentes acessíveis pré-construídos via primitivas Radix UI
  • Modelo de distribuição copiar-colar (componentes vivem em seu código)
  • TypeScript-first com segurança de tipos completa
  • Primitivas componíveis para UIs complexas
  • Instalação e gerenciamento baseados em CLI

Camada de Estilização: Tailwind CSS

  • Framework CSS utilitário-first
  • Processamento em tempo de build com zero overhead em runtime
  • Design responsivo mobile-first
  • Tokens de design consistentes (cores, espaçamento, tipografia)
  • Eliminação automática de código morto

Camada de Design Visual: Canvas

  • Composições visuais com qualidade de museu
  • Abordagem de design orientada por filosofia
  • Comunicação visual sofisticada
  • Texto mínimo, máximo impacto visual
  • Padrões sistemáticos e estética refinada

Início Rápido

Configuração de Componente + Estilização

Instalar shadcn/ui com Tailwind:

npx shadcn@latest init

O CLI pergunta sobre o framework, TypeScript, caminhos e preferências de tema. Isso configura tanto shadcn/ui quanto Tailwind CSS.

Adicionar componentes:

npx shadcn@latest add button card dialog form

Usar componentes com estilização utilitária:

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export function Dashboard() {
  return (
    <div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="hover:shadow-lg transition-shadow">
        <CardHeader>
          <CardTitle className="text-2xl font-bold">Analytics</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-muted-foreground">Veja suas métricas</p>
          <Button variant="default" className="w-full">
            Ver Detalhes
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}

Alternativa: Configuração Somente Tailwind

Projetos Vite:

npm install -D tailwindcss @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }

/* src/index.css */
@import "tailwindcss";

Guia da Biblioteca de Componentes

Catálogo abrangente de componentes com padrões de uso, instalação e exemplos de composição.

Veja: references/shadcn-components.md

Cobre:

  • Componentes de formulário e entrada (Button, Input, Select, Checkbox, Date Picker, validação de Form)
  • Layout e navegação (Card, Tabs, Accordion, Navigation Menu)
  • Overlays e diálogos (Dialog, Drawer, Popover, Toast, Command)
  • Feedback e status (Alert, Progress, Skeleton)
  • Componentes de exibição (Table, Data Table, Avatar, Badge)

Tema e Personalização

Configuração de tema, variáveis CSS, implementação de modo escuro e personalização de componentes.

Veja: references/shadcn-theming.md

Cobre:

  • Configuração de modo escuro com next-themes
  • Sistema de variáveis CSS
  • Personalização de cores e paletas
  • Personalização de variantes de componentes
  • Implementação de alternador de tema

Padrões de Acessibilidade

Padrões ARIA, navegação por teclado, suporte a leitores de tela e uso de componentes acessíveis.

Veja: references/shadcn-accessibility.md

Cobre:

  • Recursos de acessibilidade do Radix UI
  • Padrões de navegação por teclado
  • Gerenciamento de foco
  • Anúncios para leitores de tela
  • Acessibilidade em validação de formulários

Utilitários Tailwind

Classes utilitárias principais para layout, espaçamento, tipografia, cores, bordas e sombras.

Veja: references/tailwind-utilities.md

Cobre:

  • Utilitários de layout (Flexbox, Grid, posicionamento)
  • Sistema de espaçamento (padding, margin, gap)
  • Tipografia (tamanhos de fonte, pesos, alinhamento, altura de linha)
  • Cores e fundos
  • Bordas e sombras
  • Valores arbitrários para estilização personalizada

Design Responsivo

Breakpoints mobile-first, utilitários responsivos e layouts adaptativos.

Veja: references/tailwind-responsive.md

Cobre:

  • Abordagem mobile-first
  • Sistema de breakpoints (sm, md, lg, xl, 2xl)
  • Padrões de utilitários responsivos
  • Consultas de contêiner
  • Consultas de largura máxima
  • Breakpoints personalizados

Personalização do Tailwind

Estrutura do arquivo de configuração, utilitários personalizados, plugins e extensões de tema.

Veja: references/tailwind-customization.md

Cobre:

  • Diretiva @theme para tokens personalizados
  • Cores e fontes personalizadas
  • Extensões de espaçamento e breakpoints
  • Criação de utilitários personalizados
  • Variantes personalizadas
  • Organização de camadas (@layer base, components, utilities)
  • Diretiva Apply para extração de componentes

Sistema de Design Visual

Filosofia de design baseada em canvas, princípios de comunicação visual e composições sofisticadas.

Veja: references/canvas-design-system.md

Cobre:

  • Abordagem de filosofia de design
  • Comunicação visual sobre texto
  • Padrões sistemáticos e composição
  • Design de cor, forma e espaço
  • Integração mínima de texto
  • Execução com qualidade de museu
  • Sistemas de design em várias páginas

Scripts Utilitários

Automação Python para instalação de componentes e geração de configuração.

shadcn_add.py

Adicionar componentes shadcn/ui com tratamento de dependências:

python scripts/shadcn_add.py button card dialog

tailwind_config_gen.py

Gerar tailwind.config.js com tema personalizado:

python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter

Melhores Práticas

  1. Composição de Componentes: Construa UIs complexas a partir de primitivas simples e componíveis.
  2. Estilização Utilitária-First: Use classes Tailwind diretamente; extraia componentes apenas para repetição verdadeira.
  3. Responsivo Mobile-First: Comece com estilos mobile, adicione variantes responsivas.
  4. Acessibilidade-First: Aproveite primitivas Radix UI, adicione estados de foco, use HTML semântico.
  5. Tokens de Design: Use escala de espaçamento consistente, paletas de cores, sistema de tipografia.
  6. Consistência do Modo Escuro: Aplique variantes dark a todos os elementos temáticos.
  7. Desempenho: Aproveite a eliminação automática de CSS, evite nomes de classes dinâmicos.
  8. TypeScript: Use segurança de tipos total para melhor DX.
  9. Hierarquia Visual: Deixe a composição guiar a atenção, use espaçamento e cor intencionalmente.
  10. Artesanato Especializado: Cada detalhe importa - trate a UI como um ofício.

Navegação de Referências

Biblioteca de Componentes

  • references/shadcn-components.md - Catálogo completo de componentes
  • references/shadcn-theming.md - Temas e personalização
  • references/shadcn-accessibility.md - Padrões de acessibilidade

Sistema de Estilização

  • references/tailwind-utilities.md - Classes utilitárias principais
  • references/tailwind-responsive.md - Design responsivo
  • references/tailwind-customization.md - Configuração e extensões

Design Visual

  • references/canvas-design-system.md - Filosofia de design e fluxos de trabalho em canvas

Automação

  • scripts/shadcn_add.py - Instalação de componentes
  • scripts/tailwind_config_gen.py - Geração de configuração

Padrões Comuns

Formulário com validação:

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
})

export function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: "", password: "" }
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
        <FormField control={form.control} name="email" render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <Input type="email" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit" className="w-full">Entrar</Button>
      </form>
    </Form>
  )
}

Layout responsivo com modo escuro:

<div className="min-h-screen bg-white dark:bg-gray-900">
  <div className="container mx-auto px-4 py-8">
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
        <CardContent className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
            Conteúdo
          </h3>
        </CardContent>
      </Card>
    </div>
  </div>
</div>

Recursos

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

ui-demo

Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.

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