Communitygithub.com

creativetimofficial/ui

Assistente da biblioteca de blocos UI da Creative Tim. Use ao adicionar, gerar ou modificar blocos/componentes/páginas do creative-tim.com/ui. Abrange filosofia de design (minimalismo, regra dos 95%, pesquisa primeiro), descoberta de blocos, ambos os métodos de instalação via CLI, configuração de chave PRO e regras de design da Creative Tim (marca laranja, base shadcn/ui, Tailwind v4). Gera blocos intencionais e contidos, não maximalistas.

O que é ui?

Esta skill disponibiliza uma biblioteca de blocos UI prontos para produção, construída sobre o shadcn/ui, com mais de 390 blocos divididos em mais de 40 categorias. Todos os blocos são em React + Tailwind CSS e compatíveis com Next.js (App Router), Remix e Vite. A skill é útil para desenvolvedores que desejam acelerar a criação de interfaces com consistência visual e boas práticas, seguindo a filosofia de design minimalista da Creative Tim — que prioriza blocos enxutos, intencionais e focados em casos de uso reais. Ela oferece dois métodos de instalação: via CLI proprietária da Creative Tim ou via CLI do shadcn, suportando blocos gratuitos e PRO (blocos premium que exigem chave de API). Além disso, a skill impõe regras rigorosas de design, como uso obrigatório da cor laranja como tom de destaque, proibição de valores arbitrários no Tailwind v4, preferência por padrões de componentes como Card e patterns de hidratação seguros para SSR. Ao seguir essas diretrizes, o desenvolvedor garante que o código gerado seja consistente, performático e alinhado com a identidade visual da Creative Tim.

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

Creative Tim UI

Uma biblioteca abrangente de blocos construída sobre o shadcn/ui, com mais de 390 blocos prontos para produção em mais de 40 categorias. Todos os blocos são React + Tailwind CSS, compatíveis com Next.js (App Router), Remix e Vite.

Navegue pela biblioteca completa: https://www.creative-tim.com/ui Índice legível por IA: https://www.creative-tim.com/ui/llms.txt

Instalar Esta Skill

# Instalar via CLI de skills (recomendado)
npx skills add creativetimofficial/ui

# Instalar globalmente (disponível em todos os projetos)
npx skills add creativetimofficial/ui -g

# Ou instalar apenas para um agente específico
npx skills add creativetimofficial/ui --agent claude-code

Página da skill: https://skills.sh/creativetimofficial/ui/creative-tim-ui

Filosofia de Design

Ao longo de mais de 300 produtos e categorias, a Creative Tim aplicou a mesma disciplina: identificar o que os desenvolvedores realmente precisam, construir isso excepcionalmente bem e cortar todo o resto. Essa contenção é o núcleo da biblioteca.

Ao gerar ou modificar blocos, siga estes princípios:

A Regra dos 95% — construa o caso comum excepcionalmente bem. Não adicione configuração, abstração ou flexibilidade para problemas que raramente existem. Um desenvolvedor deve ser capaz de ler um bloco e entender imediatamente o que ele faz.

O Princípio "Leve" — um bloco está pronto quando não há mais nada a remover, não quando não há mais nada a adicionar. Questione cada div wrapper, cada prop, cada animação, cada ícone. Se o bloco funciona sem, provavelmente deveria ficar sem.

Pesquise antes de renderizar — pergunte o que a pessoa olhando para esta tela está tentando fazer. Um painel destaca o número que alguém precisa para agir. Um formulário coleta informações com a menor resistência possível. Projete para o propósito, não para a superfície.

Construa sobre fundamentos — primitivas do shadcn/ui (Card, Table, Button, Badge) são bem projetadas e mantidas. Componha-as; não as reimplemente. A contribuição da Creative Tim está na composição e no julgamento, não nas primitivas.

Uso real, não uso de demonstração — o padrão é: uma equipe real enviaria isso em uma aplicação de produção? Evite complexidade visual que não carrega informação. Comunicação supera decoração sempre.

Detalhes completos com exemplos de código: rules/brand-philosophy.md

Quando Aplicar

Use esta skill quando:

  • Instalar ou personalizar um bloco UI da Creative Tim em um projeto
  • Gerar novos blocos que devem corresponder ao sistema de design da Creative Tim
  • Revisar código UI gerado para conformidade com a marca/estilo
  • Configurar acesso à chave de API PRO para blocos premium
  • Integrar um novo projeto para usar a biblioteca UI da Creative Tim

Categorias de Blocos

CategoriaSlugDescrição
Agentes de IAai-agentsInterfaces de chat, feeds de atividade, uso de ferramentas, transcrição
PáginaspagesLayouts completos de gerenciamento de agentes
ContaaccountPerfil, configurações, gerenciamento de faturamento
AutenticaçãoauthenticationFluxos de login, registro, 2FA
HeroheroSeções de hero para landing pages
PreçospricingTabelas de preços e planos de faturamento
GráficoschartsVisualização de dados
KPIkpiCartões de métricas e painéis
EstatísticasstatsSeções de estatísticas
TabelastableTabelas de dados com ordenação/filtragem
E-commerceecommerceListagens de produtos, carrinhos, checkout
BlogblogListas de artigos, layouts de postagens
DepoimentostestimonialsSeções de prova social
...[Lista completa em /ui/llms.txt]

Instalação de Blocos

Dois métodos são totalmente suportados — escolha o que se adequa à sua configuração.

Opção 1 — CLI da Creative Tim (recomendada)

npx @creative-tim/ui@latest add <nome-do-bloco>

Inicialize um novo projeto primeiro (detecta automaticamente Next.js / Vite / Remix / Astro):

npx @creative-tim/ui@latest init

Exemplos:

npx @creative-tim/ui@latest add hero-01
npx @creative-tim/ui@latest add ai-agent-activity-01
npx @creative-tim/ui@latest add agent-management-list-01

O pacote também inclui binários nomeados (creative-tim-ui, creative-tim) — mesmos comandos:

npx creative-tim-ui add hero-01
npx creative-tim add hero-01

Opção 2 — CLI shadcn (URL completa)

npx shadcn@latest add https://www.creative-tim.com/ui/r/<nome-do-bloco>.json

Exemplo:

npx shadcn@latest add https://www.creative-tim.com/ui/r/hero-01.json
npx shadcn@latest add https://www.creative-tim.com/ui/r/ai-agent-activity-01.json

Ambos os métodos copiam o código-fonte do componente para o seu projeto e instalam automaticamente todas as primitivas necessárias do shadcn/ui (Button, Card, Badge, etc.).

Blocos PRO (Chave de API)

Alguns blocos são marcados como PRO e requerem uma chave de API da Creative Tim. Você pode obter uma chave gratuita em https://www.creative-tim.com/ui.

Configuração

Adicione a chave ao seu ambiente:

# .env.local
CREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx

Passe a chave ao usar qualquer CLI:

# CLI da Creative Tim
npx @creative-tim/ui@latest add nome-do-bloco-pro --api-key $CREATIVE_TIM_UI_API_KEY

# CLI shadcn — defina o cabeçalho Authorization via configuração do registro

Ou defina-a globalmente via configuração da CLI da Creative Tim:

npx @creative-tim/ui@latest login --api-key pk_live_xxxxxxxxxxxxxxxx

Depois de definir a chave, os blocos PRO são instalados de forma idêntica aos blocos gratuitos.

Regras de Design

Consulte os arquivos de regras individuais para detalhes completos. Resumo rápido:

Cores da Marca

  • Tom principal: laranja (orange-500 / orange-600) — cor da marca Creative Tim
  • Nunca use violet, purple ou indigo como cores de destaque — isso sinaliza padrões gerados por IA
  • Superfícies neutras: slate, gray, zinc
  • Status: emerald (sucesso), amber (aviso), red (erro), blue (informação)

Tipografia

  • text-sm para todo conteúdo de corpo legível — rótulos, descrições, células de tabela, itens de lista
  • text-xs apenas para: iniciais de avatar, timestamps font-mono, badges (status/prioridade), cabeçalhos de grupo da barra lateral (maiúsculas + tracking-wider), botões de ação pequenos (h-6/h-7)
  • Nunca use text-[10px], text-[11px] ou qualquer valor arbitrário de fonte

Tailwind v4 — Sem Valores Arbitrários

  • Use a escala numérica para espaçamento/tamanho: h-8, w-12, gap-3, p-4 — nunca h-[32px]
  • Use frações padrão para larguras: max-w-sm, max-w-2xl, w-1/2 — nunca max-w-[85%]
  • Apenas breakpoints responsivos: sm:, md:, lg:, xl: — nunca [@media(min-width:640px)]:

Padrões de Componentes

  • Prefira Card > CardHeader + CardContent para agrupar conteúdo
  • Cartões de KPI / estatísticas: CardContent className="px-4 py-0" (py-0, não py-6 padrão)
  • Use ScrollArea para qualquer lista que possa transbordar
  • Navegação da barra lateral: 64 (w-64), border-r, bg-muted/30
  • Evite style={} inline — sempre use classes Tailwind

Segurança de Hidratação

  • Nunca use new Date(), Date.now() ou toLocaleTimeString() em inicializadores de useState
  • Use strings estáticas/hardcoded para estado inicial seguro para SSR; mude para valores dinâmicos dentro de useEffect / setInterval

Guia Completo de Design

Para as regras completas com exemplos de código: AGENTS.md

Regras individuais:

rules/install-blocks.md     — Guia de instalação via CLI
rules/pro-api-key.md        — Configuração e autenticação de chave PRO
rules/design-brand.md       — Cores e identidade da marca
rules/tailwind-rules.md     — Restrições de codificação Tailwind v4
rules/component-patterns.md — Padrões de componentes preferidos
rules/hydration-safety.md   — Regras de hidratação SSR/CSR

Implantação Desta Skill

Esta skill reside no repositório em .claude/skills/creative-tim-ui/. Qualquer pessoa pode instalá-la em sua própria configuração do Claude Code executando:

claude skill install github.com/creativetimofficial/ui .claude/skills/creative-tim-ui

Ou clonando e vinculando manualmente:

# Clone ou copie o diretório de skills para o seu projeto
cp -r path/to/ui-repo/.claude/skills/creative-tim-ui .claude/skills/creative-tim-ui

Uma vez instalada, a skill está disponível como /creative-tim-ui em qualquer sessão do Claude Code dentro desse projeto.

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