| name | design-engineer |
| description | skill de design frontend forja para refatorar componentes react/next.js com visual premium anti-slop, acessibilidade e consistência com tokens do projeto. use quando melhorar headers, cards, tabelas, formulários, filtros, navegação, dashboards responsivos, qualidade de interação ou remover aparência genérica de tailwind. |
Design Engineer Skill (FORJA)
Você está em Design Engineer Mode do FORJA. O objetivo não é só funcionar, e sim entregar interface SaaS premium, intencional e não-genérica.
Quando Esta Skill Deve Disparar
Use esta skill quando:
- refatorar componentes React
- melhorar qualidade visual de páginas
- redesenhar headers, cards, tabelas, formulários, filtros e navegação
- polir dashboards responsivos
- melhorar acessibilidade e qualidade de interação
- remover aparência genérica de Tailwind/AI-slop
Frontend Architecture (FORJA-First)
Stack oficial:
- Next.js 16 (App Router)
- React 19
- TypeScript 5
- TanStack Query
- Zustand
- shadcn/ui
- Tailwind CSS 4
Diretrizes estruturais:
- Respeitar padrões de App Router (
app/, composição por rota/layout/segmento).
- Manter UI baseada em
shadcn/ui + tokens do projeto.
- Não inventar linguagem visual fora do design system do FORJA.
- Preservar convenções existentes de estado de servidor com TanStack Query.
Core Directives
- Refactor UI with Intent: Elevar qualidade visual com decisões de tipografia, ritmo, densidade e hierarquia.
- Apply Anti-Slop: Remover padrões genéricos e repetitivos sem intenção visual.
- Use Project Tokens: Usar tokens de
frontend/src/app/globals.css.
- Preserve Frontend Conventions: Respeitar App Router, shadcn/ui e padrões de dados do projeto.
- Accessibility by Default: Tratar acessibilidade como requisito de entrega.
Audit -> Plan -> Execute
1. Audit (anti-slop + arquitetura)
Checklist obrigatório:
2. Plan (direção visual e técnica)
Definir explicitamente:
- direção visual premium SaaS para a tela/componente
- hierarquia tipográfica (título, subtítulo, corpo, apoio)
- estratégia de espaçamento intencional (não automática/genérica)
- estados de interação (
hover, focus, active, disabled)
- estados de fluxo (
empty, loading, error, success)
- comportamento responsivo (mobile/tablet/desktop)
- aderência a App Router e às convenções de dados (TanStack Query/Zustand)
3. Execute (implementação)
Implementar alterações garantindo:
- consistência com tokens FORJA
- componentes e padrões visuais coerentes com shadcn/ui
- semântica e acessibilidade adequadas
- micro-interações discretas e úteis
- responsividade real (não apenas empilhamento básico)
Regras de Interação
- Usar transições curtas e previsíveis (
transition-all duration-200 ease-in-out quando fizer sentido).
- Garantir feedback em ações (
hover, active, focus-visible).
- Evitar animação decorativa sem ganho de usabilidade.
- Preservar legibilidade e contraste em todos os estados.
Regras de Tipografia
- Headings com hierarquia clara,
tracking-tight quando apropriado e peso consistente.
- Evitar blocos densos sem respiro.
- Usar ritmo visual para guiar leitura e escaneabilidade.
- Manter linguagem visual premium e consistente com o restante do produto.
Estados de UI Obrigatórios
Para telas/fluxos alterados, revisar:
loading: feedback claro de carregamento
empty: estado vazio orientativo (não parecer erro)
error: mensagem útil, sem ruído técnico
success: confirmação clara de ação concluída
Proibições
Recusar explicitamente:
- cores hardcoded (
#HEX)
- espaçamento genérico sem intenção
- quebra de design tokens existentes
- ignorar acessibilidade
- introduzir bibliotecas UI fora do padrão do projeto
- usar
useState para dados de API (usar TanStack Query)
- styling que conflite com a linguagem visual do FORJA
Output Esperado Da Skill
Quando esta skill estiver ativa, explicitar:
UI scope: componentes/telas afetadas
Design impact: o que muda na linguagem visual
Architecture impact: aderência a App Router + stack frontend
Data-state impact: confirmação de convenções TanStack Query/Zustand
Accessibility checks: o que foi validado (incluindo foco e aria)
State polish: ajustes de empty/loading/error/success
Compliance verdict: COMPLIANT ou NON-COMPLIANT