Implementa frontends Next.js (App Router) com UI alinhada ao design system, Atomic Design, TypeScript, SCSS, ShadCN sem Tailwind, DTOs Zod, React Hook Form, middleware/auth, RBAC na UI, estados de carregamento/erro e SSE quando o produto exigir. Use ao criar ou alterar páginas, componentes, hooks, integração com API ou qualquer UI neste repositório.
Documento único: regras para humanos e para o agente de IA. Mantém o mesmo conteúdo de referência.
Quando esta skill se aplica
Qualquer trabalho no frontend: novas telas, componentes, hooks, camada de API, fluxos de autenticação, tempo real (SSE) ou refatorações que toquem na UI.
Alinhamento com o agente
Para implementação, siga as mesmas regras do agente frontend-engineer. Leia e respeite docs/agents/frontend-engineer.md antes de escrever código (stack, o que evitar, organização de pastas).
Resumo
Usar o perfil frontend-engineer para implementação (link acima).
Respeitar a estrutura do monorepo em frontend/.
Não introduzir Tailwind nem expandir o seu uso.
SCSS e componentes no estilo ShadCN/Radix já adaptados ao projeto.
Acessibilidade e estados de UI (carregamento, erro, vazio, retry) sempre explícitos.
Regras obrigatórias
Arquitetura: estrutura por feature; separação clara entre UI, lógica de aplicação e serviços (cliente HTTP em frontend/src/services/, barril conforme convenção do repositório).
Estilo: SCSS + padrões ShadCN já usados. Não introduzir Tailwind.
Tipos nas fronteiras: DTOs tipados com Zod (validar entradas da API e variáveis de ambiente quando fizer sentido).
Acessibilidade: HTML semântico, rótulos, teclado, foco em overlays; ARIA só quando a semântica nativa não bastar.
UX: estados explícitos de carregamento, vazio, erro e retry — nunca falha silenciosa nem tela em branco.
Checklist de entrega de feature
Use como guia ao construir uma feature:
Pasta da feature — features/<feature>/ (ou convenção do projeto): UI, hooks, tipos e serviços específicos colocados juntos.
Componentes de UI — peças enxutas e apresentacionais; reutilizar primitivos do design system.
Lógica — hooks e/ou serviços pequenos para dados, validação e efeitos colaterais (não dentro de árvores JSX grandes).
Camada de API — cliente centralizado; requisições/respostas tipadas (Zod); evitar fetch espalhado sem padrão.
Carregamento / erro — UI de pendência e falha; política de reconexão se usar streams.
Acessibilidade — teclado e leitor de ecrã nas partes interativas.
SSE — só se o produto exigir push no servidor: reutilizar ou criar hook/serviço com backoff, reconexão e erro visível.
Sempre incluir (quando relevante)
Pastas claras — limites entre components/, hooks/serviços por feature; API + Zod por domínio em services/<domínio>/ (*-api.ts, *-schema.ts); tipos locais na feature quando fizer sentido.
Middleware / auth — middleware do Next.js em rotas protegidas; sessão ou JWT conforme padrão do projeto.
UI por papéis — menus, ações e rotas condicionadas a papéis/permissões; centralizar verificações de capacidade; evitar strings mágicas duplicadas.
Stack técnica (estrita)
Usar
Não usar
Next.js App Router, TypeScript
Tailwind (novo ou expansão)
SCSS para estilo
Lógica de negócio inchada em componentes de UI
ShadCN adaptado a SCSS
Acoplamento forte a detalhes internos do backend
Zod para DTOs / validação
—
React Hook Form + resolvers Zod
—
Expectativas de saída
Seguir naming, layout de ficheiros e estilo de imports já existentes no repositório.
Texto voltado ao utilizador em português (Brasil) quando o produto for em português.
Explicar só estrutura ou limites de estado não óbvios; priorizar código que funciona.
1---2name: frontend-skill3description: Implementa frontends Next.js (App Router) com UI alinhada ao design system, Atomic Design, TypeScript, SCSS, ShadCN sem Tailwind, DTOs Zod, React Hook Form, middleware/auth, RBAC na UI, estados de carregamento/erro e SSE quando o produto exigir. Use ao criar ou alterar páginas, componentes, hooks, integração com API ou qualquer UI neste repositório.4---56# Skill — Frontend (Next.js, monorepo EmpregaNet)
78Documento único: regras para humanos e para o agente de IA. Mantém o mesmo conteúdo de referência.
910## Quando esta skill se aplica
1112Qualquer trabalho no frontend: novas telas, componentes, hooks, camada de API, fluxos de autenticação, tempo real (SSE) ou refatorações que toquem na UI.
1314## Alinhamento com o agente
1516Para **implementação**, siga as mesmas regras do agente **`frontend-engineer`**. Leia e respeite [`docs/agents/frontend-engineer.md`](../../agents/frontend-engineer.md) antes de escrever código (stack, o que evitar, organização de pastas).
1718## Resumo
1920- Usar o perfil **`frontend-engineer`** para implementação (link acima).
21- Respeitar a estrutura do monorepo em `frontend/`.
22- **Não** introduzir Tailwind nem expandir o seu uso.
23- **SCSS** e componentes no estilo ShadCN/Radix já adaptados ao projeto.
24- Acessibilidade e estados de UI (carregamento, erro, vazio, retry) sempre explícitos.
2526## Regras obrigatórias
2728- **Arquitetura**: estrutura por **feature**; separação clara entre UI, lógica de aplicação e **serviços** (cliente HTTP em `frontend/src/services/`, barril conforme convenção do repositório).
29- **Estilo**: **SCSS** + padrões ShadCN já usados. **Não introduzir Tailwind.**
30- **Tipos nas fronteiras**: DTOs tipados com **Zod** (validar entradas da API e variáveis de ambiente quando fizer sentido).
31- **Acessibilidade**: HTML semântico, rótulos, teclado, foco em overlays; ARIA só quando a semântica nativa não bastar.
32- **UX**: estados explícitos de **carregamento**, **vazio**, **erro** e **retry** — nunca falha silenciosa nem tela em branco.
3334## Checklist de entrega de feature
3536Use como guia ao construir uma feature:
37381. [ ] **Pasta da feature** — `features/<feature>/` (ou convenção do projeto): UI, hooks, tipos e serviços específicos colocados juntos.
392. [ ] **Componentes de UI** — peças enxutas e apresentacionais; reutilizar primitivos do design system.
403. [ ] **Lógica** — hooks e/ou serviços pequenos para dados, validação e efeitos colaterais (não dentro de árvores JSX grandes).
414. [ ] **Camada de API** — cliente centralizado; requisições/respostas tipadas (Zod); evitar `fetch` espalhado sem padrão.
425. [ ] **Carregamento / erro** — UI de pendência e falha; política de reconexão se usar streams.
436. [ ] **Acessibilidade** — teclado e leitor de ecrã nas partes interativas.
447. [ ] **SSE** — só se o produto exigir push no servidor: reutilizar ou criar hook/serviço com backoff, reconexão e erro visível.
4546## Sempre incluir (quando relevante)
4748- **Pastas claras** — limites entre `components/`, hooks/serviços por feature; API + Zod por domínio em `services/<domínio>/` (`*-api.ts`, `*-schema.ts`); tipos locais na feature quando fizer sentido.
49- **Middleware / auth** — middleware do Next.js em rotas protegidas; sessão ou JWT conforme padrão do projeto.
50- **UI por papéis** — menus, ações e rotas condicionadas a papéis/permissões; centralizar verificações de capacidade; evitar strings mágicas duplicadas.
5152## Stack técnica (estrita)
5354| Usar | Não usar |
55|------|----------|
56| Next.js App Router, TypeScript | Tailwind (novo ou expansão) |
57| SCSS para estilo | Lógica de negócio inchada em componentes de UI |
58| ShadCN adaptado a SCSS | Acoplamento forte a detalhes internos do backend |
59| Zod para DTOs / validação | — |
60| React Hook Form + resolvers Zod | — |
6162## Expectativas de saída
6364- Seguir naming, layout de ficheiros e estilo de imports já existentes no repositório.
65- Texto voltado ao utilizador em **português (Brasil)** quando o produto for em português.
66- Explicar só estrutura ou limites de estado não óbvios; priorizar código que funciona.
Run npx skillmds@latest add aibot88/frontend-skill in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Implementa frontends Next.js (App Router) com UI alinhada ao design system, Atomic Design, TypeScript, SCSS, ShadCN sem Tailwind, DTOs Zod, React Hook Form, middleware/auth, RBAC na UI, estados de carregamento/erro e SSE quando o produto exigir. Use ao criar ou alterar páginas, componentes, hooks, integração com API ou qualquer UI neste repositório. It is listed under Design & Media on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
aibot88 (@aibot88) published this skill. Their other Agent Skills are listed on their SkillMD profile.
aibot88