| name | frontend-project-style |
| description | Design system e style guide configurável para projetos frontend. Use SEMPRE que criar componentes, páginas ou UI em React/Next/Angular/Vue.
|
| source | vendored |
| upstream | https://github.com/FelipeOFF/frontend-project-style-skill |
| license | MIT |
| added | "2026-05-16T00:00:00.000Z" |
| vendored | "2026-06-05T00:00:00.000Z" |
Frontend Project Style — Skill
Esta skill garante que todo código frontend gerado siga o design system do projeto atual.
🚦 Passo 1 — Verificar configuração
Antes de qualquer coisa, verifique se existe o arquivo PROJECT_STYLE.md no diretório raiz do
projeto (onde o usuário está trabalhando) ou em ~/.claude/PROJECT_STYLE.md.
Se o arquivo existir → leia-o e siga as definições nele. Pule para o Passo 3.
Se o arquivo NÃO existir → execute o onboarding (Passo 2).
🛠️ Passo 2 — Onboarding (primeira vez)
Informe o usuário:
"Não encontrei um PROJECT_STYLE.md para este projeto. Vou fazer algumas perguntas rápidas
para configurar o design system. Você pode pular qualquer pergunta — usarei padrões modernos
para o que não for definido."
Então colete as informações abaixo em uma única mensagem com todas as perguntas,
não uma de cada vez. Agrupe-as de forma clara e amigável.
Perguntas de onboarding
1. PROJETO
- Qual o nome do projeto?
- Em uma frase, o que ele faz e para quem é?
- Qual o tom/personalidade? (ex: profissional, descontraído, técnico,
agressivo, minimalista, luxo, jovem, confiável...)
2. STACK
- Qual o framework? (Next.js / React / Angular / Vue / HTML puro / outro)
- Usa TypeScript? (sim/não)
- Biblioteca de componentes? (Shadcn/ui / MUI / Chakra / nenhuma / outra)
- Biblioteca de ícones? (Lucide / Heroicons / FontAwesome / outra)
- Animações? (Framer Motion / GSAP / CSS puro / nenhuma)
3. VISUAL
- Tem paleta de cores definida? Se sim, informe os hex das cores:
• Primária (botões, links, destaque)
• Background da página
• Background de cards/painéis
• Bordas
• Texto principal
• Texto secundário/muted
• Cor de sucesso / erro / aviso (opcional)
- Tem fontes definidas? Se sim:
• Fonte de headings/títulos (nome + origem: Google Fonts, local, etc.)
• Fonte de corpo/UI
- Prefere dark mode, light mode, ou suporte a ambos?
4. LAYOUT & TOKENS
- Qual o estilo de arredondamento?
(nenhum/quadrado | suave/moderno | bem arredondado | totalmente circular em badges)
- Densidade visual preferida?
(compacto | balanceado | espaçoso/arejado)
5. COMPONENTES ESPECÍFICOS (opcional)
- Há algum componente ou padrão de UI específico do seu domínio que devo
conhecer? (ex: card de produto, tela de quiz, feed de posts, etc.)
Após receber as respostas, gere o PROJECT_STYLE.md usando o template do Passo 2a
e salve no diretório raiz do projeto. Confirme ao usuário onde foi salvo.
📝 Passo 2a — Template do PROJECT_STYLE.md
# PROJECT_STYLE.md
# Design system deste projeto. Edite à vontade.
# Gerado em: [data]
## Projeto
name: [nome do projeto]
description: [descrição em uma frase]
tone: [tom/personalidade]
## Stack
framework: [Next.js 14 / React / Angular / Vue / HTML]
typescript: [sim / não]
component_library: [Shadcn/ui / MUI / nenhuma / outra]
icons: [Lucide / Heroicons / outra]
animations: [Framer Motion / CSS / nenhuma]
## Cores
primary: "#XXXXXX"
primary_hover: "#XXXXXX"
background: "#XXXXXX"
surface: "#XXXXXX"
border: "#XXXXXX"
text_primary: "#XXXXXX"
text_secondary: "#XXXXXX"
accent: "#XXXXXX"
success: "#10b981"
error: "#ef4444"
warning: "#f59e0b"
## Dark Mode
dark_mode: [light_only / dark_only / both]
# Se "both", adicione abaixo:
# dark_background: "#XXXXXX"
# dark_surface: "#XXXXXX"
# dark_border: "#XXXXXX"
# dark_text_primary: "#XXXXXX"
# dark_text_secondary: "#XXXXXX"
## Tipografia
font_heading: "[nome] — [origem: Google Fonts / local / sistema]"
font_body: "[nome] — [origem]"
font_mono: "JetBrains Mono — Google Fonts"
## Layout & Tokens
# Arredondamento: none | subtle (4-6px) | modern (8-12px) | rounded (16px+)
border_radius: modern
# Densidade: compact | balanced | spacious
density: balanced
## Componentes Específicos do Domínio
# Descreva componentes únicos do seu produto.
# Exemplo:
# - QuizCard: enunciado + alternativas A/B/C/D, estados: default/selected/correct/wrong
# - ProfileCard: avatar + nome + badge de disponibilidade + skills como tags
⚙️ Passo 3 — Aplicar o design system
Com o PROJECT_STYLE.md carregado, siga estas regras ao gerar qualquer código:
Cores
- Use CSS variables ou tokens Tailwind com nomes semânticos — nunca hex hardcoded
- Tailwind: configure no
tailwind.config com primary, surface, border, etc.
- CSS puro: use
var(--color-primary) etc.
Tipografia
| Token | Tailwind | Uso |
|---|
| xs | text-xs | labels, captions, badges |
| sm | text-sm | body secundário, metadados |
| base | text-base | body principal |
| lg/xl | text-lg/xl | subtítulos |
| 2xl–4xl | text-2xl+ | headings de seção |
| 5xl+ | text-5xl+ | display, heroes |
Arredondamento por border_radius
| Config | Botões | Cards | Badges | Avatares |
|---|
| none | rounded-none | rounded-none | rounded-none | rounded-none |
| subtle | rounded | rounded-md | rounded-md | rounded-full |
| modern | rounded-lg | rounded-xl | rounded-full | rounded-full |
| rounded | rounded-xl | rounded-2xl | rounded-full | rounded-full |
Densidade por density
| Config | Padding cards | Gap listas | Padding botões |
|---|
| compact | p-3 | gap-2 | px-3 py-1.5 |
| balanced | p-4 / p-6 | gap-3/4 | px-4 py-2 |
| spacious | p-6 / p-8 | gap-6 | px-6 py-3 |
Padrões de componente
Botão primário
<button className="bg-primary hover:bg-primary-hover text-white font-medium
transition-colors [border-radius] [padding]">
Card
<div className="bg-surface border border-border shadow-sm hover:shadow-md
transition-shadow [border-radius] [padding]">
Input
<input className="border border-border bg-background text-text-primary
placeholder:text-text-secondary focus:ring-2 focus:ring-primary
focus:border-transparent [border-radius] [padding]">
Regras de Qualidade
- TypeScript estrito — sem
any
- Props destruturas no parâmetro da função
- Eventos nomeados
handleNomeDoEvento
- Mobile-first: base mobile, depois
md: e lg:
- Touch targets ≥ 44×44px
- Imagens:
next/image (Next.js) ou loading="lazy" (HTML)
- Listas:
key com ID único, nunca índice do array
- Loading: skeleton
animate-pulse ou Loader2 animate-spin
- Empty state: sempre mostrar ícone + mensagem — nunca
null silencioso
- Dark mode: usar
dark: prefix quando dark_mode: both
Anti-Patterns Proibidos
- ❌
style={{ }} inline — usar Tailwind
- ❌
!important
- ❌ IDs CSS para estilização
- ❌ Componentes com mais de 200 linhas sem quebrar em subcomponentes
🔄 Atualizar configuração
Se o usuário pedir para atualizar o design system — leia o PROJECT_STYLE.md atual,
aplique as mudanças e salve o arquivo. Confirme o que foi alterado.
💡 Nota para distribuição
Skill genérica e sem configuração prévia. Na primeira vez que for usada em qualquer
projeto, o onboarding coleta as informações e gera o PROJECT_STYLE.md automaticamente.
O arquivo gerado fica no projeto e pode ser versionado junto com o código.
