Sistema de Design para Aplicações Web Ant Design (Prioridade para Back-Office)

Este skill fornece uma implementação comprovada de React 19 + TypeScript + Ant Design 6, juntamente com um template completo e executável. Seu núcleo não é um conjunto específico de páginas, mas sim:

Um sistema de design configurável baseado nos Design Tokens oficiais do Ant Design;
Dois shells de aplicação intercambiáveis (sidebar / topo);
Um conjunto comprovado de receitas de página, cobrindo 36 formas de aplicação, como back-office, portal, documentação, dashboard, AI Workstation, etc.;
Uma regra obrigatória de reutilização de componentes: primeiro procure no antd / bibliotecas existentes / componentes existentes, depois crie manualmente.

O objetivo é a sensação de "antd nativo": componentes, espaçamentos, estados e temas provenientes do Ant Design, e não a recriação de um sistema de design sobre o antd.

Ao carregar o skill, o bloco de recursos fornecerá o caminho absoluto do skill. Abaixo, ele é representado como <SKILL_DIR>. Substitua pelo caminho real antes de executar os comandos. O diretório do skill contém:

SKILL.md
design.md                               # Linguagem de design legível por máquina (implementação do design.md oficial)
scripts/scaffold.mjs                    # Geração de projeto com um clique (renomear + instalação opcional)
scripts/scan-ui.mjs                     # Escaneamento de componentes/dependências/uso do antd existentes, antes de qualquer código UI
scripts/fetch-antd-docs.mjs             # Atualização em lote do snapshot da documentação dos componentes de acordo com a versão do antd no projeto
scripts/check-antd-docs.mjs             # Autoverificação inicial: versão do antd no projeto vs. snapshot da documentação
assets/template/                        # Template completo e executável (sem node_modules / dist)
assets/preview/                         # Imagens de pré-visualização
references/antd-official.md            # Linguagem de design oficial do Ant Design e informações básicas (incluídas diretamente)
references/for-agents.md                # Prompts oficiais For Agents, fluxos de trabalho CLI / MCP / LLMs
references/ecosystem.md                 # Biblioteca oficial do ecossistema e recomendações da comunidade, ordem de seleção
references/antd-design-language.md      # Linguagem de design oficial, tokens, mapeamento de configuração
references/component-reuse.md           # Obrigatório: pesquisa de reutilização, mapeamento de componentes antd, regras personalizadas
references/app-patterns/README.md       # Índice de formas: leia este primeiro, selecione apenas uma
references/app-patterns/_common.md      # Shell comum/largura/densidade/estado/aceitação
references/app-patterns/*.md            # 36 arquivos de tipo, leia apenas os itens correspondentes à tarefa
references/architecture.md              # Provider, autenticação, shell, camada de serviço
references/fullstack-design.md          # Separação front-end/back-end, contrato de API, modelo de dados, propriedade de estado no React
references/backend-design.md            # Paradigma de back-end: camadas, autenticação, transações, idempotência, auditoria, segurança
references/ant-motion.md                # Especificação de animação Ant Motion, integração de componentes, desempenho e acessibilidade
references/code-quality.md              # Diretrizes de front-end Alibaba + lista de verificação de qualidade de código e revisão para React 19/TS
references/components/README.md         # Índice de snapshots de documentação de 36 componentes comuns (leia 1-2 conforme necessário)
references/components/manifest.json     # Versão do snapshot, tamanho do arquivo e SHA-256, base para autoverificação
references/components/*.md              # Snapshot da documentação em chinês dos componentes antd 6.7.0
references/ux-scenarios.md              # Cenários de UI/UX: carregamento/vazio/erro/lote/tarefa longa/permissão, etc.
references/page-recipes.md              # Receitas para listas/modais/detalhes/permissões/dashboards
references/design-rules.md              # Especificações visuais e de interação

Limites de Invocação (Prioritário em Relação às Receitas Abaixo)

Uso Global Exclusivamente Explícito: O usuário deve solicitar explicitamente a adoção da linguagem de design Ant Design / antd, ou nomear $antd-admin-template, para que este skill possa ser carregado e executado. Quando o usuário define explicitamente que "o trabalho de design deve usar este skill" para um projeto específico, o arquivo AGENTS.md do projeto pode registrar essa autorização contínua; o trabalho de design daquele projeto deve ler e usar este skill como auxílio, e outros projetos não herdam essa exceção.
Design front-end comum, painel de administração, documentação, portal, dashboard, CRUD, configuração de tema, "não usar Tailwind", ou projeto já dependente de antd, não constituem autorização de invocação. Não selecione este skill por conta própria devido a essas palavras-chave.
A autorização é determinada pelo escopo da tarefa atual. Uma invocação não significa que todas as tarefas de design futuras usarão antd; a autorização contínua do projeto só é válida dentro de seu escopo explícito; mencionar, instalar ou revisar este skill também não significa que ele deve ser usado para projetar a interface.
Respeite o posicionamento do produto, DESIGN.md, AGENTS.md, sistema de componentes e gerenciador de pacotes do projeto existente; use apenas as referências necessárias dentro do escopo autorizado, não migre automaticamente a linguagem de design ou copie o template inteiro.
As receitas de página e itens de aceitação de novos projetos abaixo devem ser adotados conforme a necessidade real; modificações parciais em projetos existentes não devem impor login, RBAC, várias páginas de negócios, configurações de design ou shell de back-office. Portais e páginas de marketing não devem forçar o uso de BasicLayout.
agents/openai.yaml define policy.allow_implicit_invocation: false. Não altere para invocação automática, nem instale em diretórios de skills compartilhados entre ferramentas.

Inspiração e Fontes de Informação

A organização do design amigável para IA deste skill foi inspirada pelo Ant Design site oficial For Agents: permitir que o Agente consulte o conhecimento do componente da versão real, em vez de adivinhar a API apenas com base na memória de treinamento; e faz referência a LLMs.txt e design.md para fornecer conhecimento do componente, estrutura semântica e linguagem de design como materiais que podem ser lidos sob demanda.

Este é um skill da comunidade organizado de forma independente, não é um skill oficial do Ant Design ou um projeto endossado por ele. Os snapshots são referências arquivadas e não representam a versão mais recente atual; ao usar, verifique a dependência real do projeto de destino. Materiais de documentação oficial incluídos e licenças estão em THIRD_PARTY_NOTICES.md.

Padrões de Entrega

Abaixo estão os itens de aceitação de referência para aplicações novas e completas; selecione de acordo com a forma de aplicação e escopo autorizados. Projetos existentes devem seguir suas próprias restrições:

pnpm typecheck e pnpm build devem passar.
A forma da aplicação e o shell devem corresponder: back-office usa navegação lateral; portal/ferramentas podem usar navegação superior; largura e densidade do conteúdo devem ser razoáveis.
Back-office completo que requer gerenciamento de identidade e permissão: forneça login, layout protegido, páginas de negócios e 403/404 conforme necessário; conteúdo público ou modificações parciais não devem impor essas estruturas.
Deve funcionar corretamente em larguras de 1440px e 390px; em dispositivos móveis, a barra lateral se transforma em gaveta.
Tema claro/escuro, cor primária, layout de navegação, largura do conteúdo, densidade e bordas arredondadas devem ser configuráveis e persistidos.
Não introduza Tailwind, shadcn ou uma segunda biblioteca de componentes; as cores devem vir dos Tokens.
O texto da página deve estar no idioma do usuário (padrão chinês).
Para novos domínios, defina os limites front-end/back-end, o contrato de API e o modelo de dados; ao usar Mock, especifique claramente os pontos de substituição.
Páginas assíncronas devem cobrir os estados de loading / empty / error / forbidden; operações perigosas devem ter confirmação secundária, tarefas longas devem ser rastreáveis.
Antes de escrever páginas, leia design.md; a API do componente deve ser verificada com o CLI oficial ou documentação da versão correspondente (se não houver CLI, indique a versão).
Ao entrar em um projeto existente, execute primeiro a autoverificação do snapshot da documentação do componente; se a versão for diferente, atualize ou indique claramente a diferença, não use um snapshot antigo para fingir ser a API atual.
O código deve estar em conformidade com references/code-quality.md: sem any por preguiça, dependências de Hooks completas, tratamento de estado/erro/permissão completo, sem sobrescrita profunda de .ant-*; se houver script de lint, lint deve passar.
A animação deve seguir references/ant-motion.md: animações de componente em back-office ≤300ms, suporte a prefers-reduced-motion; não introduza bibliotecas de animação rc-* antigas apenas para decoração.

Linha de Base Oficial do Ant Design (Incluída Diretamente)

antd é uma biblioteca de componentes React UI baseada no sistema de design Ant Design, adequada para aplicações empresariais de back-office e sites desktop. O template atual usa antd 6.7 + @ant-design/icons 6.3 + React 19. antd 6 requer React >= 18, suporta apenas navegadores modernos, habilita CSS Variables por padrão e suporta SSR e Electron.

Quatro Valores Fundamentais de Design:

Natural: Intuitivo, reduzindo custo cognitivo; menos invenção, menos decoração.
Determinístico: Componentes, Tokens e padrões de página unificados, consistentes em todas as páginas.
Significativo: Cada interface serve a um objetivo de trabalho claro, ação principal única, feedback imediato.
Crescimento: Combinável, extensível, evoluindo com o negócio e o crescimento do usuário.

Linha de Base Visual (Normas do Site Oficial):

Item	Linha de Base
Tela / Grid	1440px; grade base de 4px, ritmo principal de 8px; grid de 24 colunas
Fonte Principal	14px / 22px; pilha de fontes do sistema; peso da fonte 400/600
Cor Primária	`#1677ff` (6ª cor na paleta azul básica)
Cores Funcionais	Sucesso `#52c41a` / Aviso `#faad14` / Erro `#ff4d4f`
Cores Neutras	88% / 65% / 45% / 25%; Borda `#d9d9d9`; Fundo `#f5f5f5`
Bordas Arredondadas	2 / 4 / 6 / 8; Padrão 6
Espaçamento	4 / 8 / 16 / 24 / 32 (grid de 4px)
Layout	Esquerda-Direita (navegação fixa) ou Cima-Baixo (centro redimensionável)
Animação	Contida, 0.1–0.3s; back-office sem animações decorativas

Três Camadas de Token: Seed (marca/arredondamento/tamanho da fonte) → Map (cores derivadas/texto/borda) → Alias (nível de componente). A página deve usar apenas theme.useToken(), sem codificar valores visuais.

Ecossistema Oficial (veja references/ecosystem.md):

Biblioteca	Uso
`antd` + `@ant-design/icons`	Componentes e ícones principais (antd 6 ↔ icons 6)
`@ant-design/pro-components`	ProLayout / ProTable / ProForm; versão estável 2.x peer ainda é antd ^5, antd 6 precisa da 3.x beta e travar a versão
`@ant-design/charts`	Gráficos estatísticos complexos; sem peer antd, tema precisa ser alinhado manualmente
`@ant-design/x` + `@ant-design/x-markdown`	Diálogo IA / Copilot / Markdown em streaming; peer `antd ^6.1.1`
`@xyflow/react`	Fluxo de trabalho/Canvas topológico; substituto para Pro Flow cujo peer ainda é v5 no antd 6
`antd-mobile`	H5 para dispositivos móveis (linha de produto independente)
`antd-mini`	Mini-programas Alipay/WeChat
`@ant-design/web3`	Web3 / Carteira
Ant Design CLI	Verificação de projeto e migração v5→v6
Ant Motion / Landing / Pro	Efeitos de animação, template de página inicial, scaffold completo

Consulte references/ecosystem.md para seleção de ecossistema, matriz de versões, tamanho e verificações de compatibilidade. Não rebaixe o antd para v5 por causa de uma Table; nem instale Pro Flow / Pro Chat / Pro Editor diretamente no antd 6.

Contrato de Design: design.md é a versão legível por máquina; leia antes de escrever páginas; a tabela visual neste arquivo é um resumo; em caso de conflito, prevalece design.md + a versão real do antd no projeto.

Links oficiais: ant.design · Valores de Design · Cores · Layout · Fonte · Recomendações da Comunidade · CLI · For Agents · design.md.

Especificação Oficial For Agents (Obrigatório)

A documentação oficial afirma claramente: A versão atual pode conter alterações disruptivas; a API do componente, convenções e estrutura de arquivos podem ser diferentes dos dados de treinamento; leia as especificações antes de escrever código, não escreva a API do antd de memória.

Antes de escrever qualquer UI:

Leia design.md e references/for-agents.md.
Confirme a versão real do projeto: antd info --version, ou leia package.json.

Consulte a API do componente e Demo executável:

npx -y @ant-design/cli info <Component> --format json
npx -y @ant-design/cli demo <Component> <demo-name>
npx -y @ant-design/cli token <Component> --format json
npx -y @ant-design/cli semantic <Component> --format json

Quando possível instalar o skill oficial, execute npx skills add ant-design/ant-design-cli; para integrar com MCP, veja references/for-agents.md.
Antes de entregar, execute npx -y @ant-design/cli lint ./src; depois pnpm typecheck && pnpm build.

Ordem de depuração: antd env → antd doctor → antd info --version → antd lint. Ordem de migração: antd migrate → antd changelog → antd lint. Se não houver CLI, use https://ant.design/components/<name>.md e o design.md local como fallback, e indique a versão real na entrega.

O texto original do prompt oficial, a tabela de comandos completa, a configuração MCP e o fluxo de fallback estão em references/for-agents.md.

CLI em Todo o Ciclo de Vida:

Fase	Comando	Objetivo
Alinhamento de Design	`npx -y @ant-design/cli design.md`	Obter a linguagem de design da versão atual; comparar com o `design.md` deste skill
Seleção/Consulta de API	`info` / `demo` / `token` / `semantic`	Ver primeiro os props reais, demo executável, token do componente e DOM semântico
Escrita de Código	Leia `references/components/<component>.md`	Snapshot offline como fallback; leia apenas 1-2 componentes correspondentes
Verificação de Entrega	`lint` + `typecheck` + `build`	Verificar API obsoleta, tipos e build de uma só vez
Migração	`migrate` → `changelog` → `lint`	Atualização v5→v6 ou entre versões
Diagnóstico	`env` → `doctor` → `info --version` → `usage`	Verificar ambiente, versão, uso de componentes

Animação e Qualidade de Código (Obrigatório)

Animação

Antes de escrever qualquer efeito de transição/entrada/rolagem, leia references/ant-motion.md. Estratégia padrão:

Back-office/Ferramenta/SaaS: Use apenas animação embutida do antd + CSS token; nível de componente 100/200/300ms, nível de página não exceda 300ms; sem transições de tela cheia.
Portal/Site Oficial/Página de Campanha: Pode usar uma pequena quantidade de efeitos narrativos de animação, nível de página 150/300/450/600ms; mantenha apenas uma linha do tempo principal por tela.
Biblioteca de Componentes Ant Motion: rc-tween-one / rc-queue-anim / rc-scroll-anim / rc-banner-anim foram descontinuados em 2022, peer não declara React 19 e depende de findDOMNode; não instale por padrão no back-office principal do antd 6. Se for necessário efeitos de animação de marketing, fixe a versão, faça testes reais em navegadores e prepare um fallback CSS/IntersectionObserver.
Deve suportar prefers-reduced-motion; não use animação para transmitir a única informação; não permita que a animação bloqueie entrada/rota/carregamento.

Qualidade de Código

Antes de escrever código, leia references/code-quality.md. Ele adapta as diretrizes de front-end Alibaba (nomenclatura, TypeScript, React Hooks, acessibilidade, padrões de engenharia) para React 19 + antd 6:

strict + sem usar any por preguiça; sem @ts-ignore ou asserções não nulas sem motivo.
Componentes de função + Hooks chamados no topo; array de dependências completo; não use effect para derivar estado.
Chave de lista estável; cinco estados de página assíncrona completos; confirmação de operação perigosa; dados do servidor não entram no store global.
Cores/espaçamento/bordas arredondadas do token; não sobrescreva a estrutura profunda .ant-*; sem estouro horizontal em 390px.
Elementos interativos devem ser operáveis por teclado, ter foco visível e nome legível; contraste atende WCAG AA.
Quando o projeto tem lint, execute pnpm lint / pnpm stylelint antes de entregar; se não tiver lint, faça a revisão manual de acordo com code-quality.md §11 e indique "lint não configurado" na nota de entrega.

Ferramenta oficial F2E opcional:

npx f2elint
# Selecione React + TypeScript, ative ESLint / Stylelint / Prettier / lint-staged / commitlint conforme necessário

Não sobrescreva configurações ESLint/Stylelint existentes; primeiro mescle as regras; as regras de class component / ReactDOM.render na documentação do F2E não se aplicam ao React 19.

Autoverificação Inicial (Faça Primeiro ao Entrar em Projeto Existente)

O skill inclui 36 snapshots da documentação de componentes antd 6.7.0 em chinês, localizados em references/components/. A versão do antd no projeto pode ser diferente, não assuma que o snapshot representa a API atual por padrão.

# 1) Alinhar a versão do antd instalada no projeto com o snapshot
node <SKILL_DIR>/scripts/check-antd-docs.mjs <diretório-do-projeto>

# 2) Se inconsistente, atualizar para a versão do projeto (requer CLI oficial; pode especificar CLI local se a rede/sandbox for restrita)
node <SKILL_DIR>/scripts/fetch-antd-docs.mjs --project <diretório-do-projeto>
# ou explicitamente: --version 6.7.0

Código de saída 0: Versão consistente e 36 arquivos com tamanho/hash íntegros.
Código de saída 1: Versão inconsistente ou arquivos modificados; siga as instruções para atualizar ou alinhe o antd do projeto com a versão do snapshot.
Código de saída 2: Não foi possível determinar a versão do antd no projeto; execute pnpm install primeiro ou use --target.
Se o CLI falhar ao escrever HOME no sandbox/CI, defina ANTD_CLI_HOME=/tmp/antd-home; se houver um CLI local, use ANTD_CLI_BIN=/path/to/antd.
Após a autoverificação passar, leia o índice em references/components/README.md, abra apenas 1-2 componentes que precisa escrever agora, não carregue tudo.

Portão de Reutilização de Componentes (Obrigatório, Antes de Qualquer Código UI)

Antes de escrever JSX, você deve completar na seguinte ordem:

Escaneie o projeto: Execute node <SKILL_DIR>/scripts/scan-ui.mjs <diretório-do-projeto> para ver dependências UI instaladas, componentes existentes em src/components / src/layouts e frequência de uso do antd.
Pesquise componentes existentes: Use ferramentas para pesquisar src/components, diretórios de funcionalidades, páginas semelhantes; se puder reutilizar, não crie novos.
Verifique o antd: Table / Form / Modal / Drawer / Descriptions / Tree / Upload / Empty / Result etc. já cobrem o necessário? Se houver CLI, execute antd info <Component> / antd demo <Component> primeiro, depois selecione de acordo com a tabela de mapeamento em references/component-reuse.md.
Verifique extensões oficiais: @ant-design/pro-components, @ant-design/charts, @ant-design/x, antd-mobile; depois considere bibliotecas de terceiros maduras.
Por último, crie customizações: Coloque em src/components, use theme.useToken() e justifique por que não foi possível reutilizar.

Pular as etapas 1-4 e escrever diretamente dropdowns, tabelas, modais, switches, seletores de data, toasts ou estados vazios é considerado incompleto. Na entrega, você deve declarar "o que foi reutilizado / quais componentes customizados foram adicionados".

Regras detalhadas, mapeamento de componentes e anti-padrões estão em references/component-reuse.md.

Fluxo de Trabalho

0. Autoverificação Inicial

Ao entrar em um projeto existente, execute primeiro:

node <SKILL_DIR>/scripts/check-antd-docs.mjs <diretório-do-projeto>

Se não passar, atualize o snapshot ou alinhe a versão do antd primeiro; não escreva API de componente com versão desalinhada. Para novos projetos, execute novamente após o scaffold e a conclusão da instalação das dependências.

1. Alinhe Primeiro Cinco Coisas

Quando a informação for insuficiente, faça apenas as perguntas necessárias, não interrogue:

Nome da Marca: Usado para APP_NAME, página de login, título.
Forma da Aplicação: Back-office / Portal / SaaS de ferramentas / Dashboard de dados / Documentação / AI Workstation / Kanban de projetos / E-commerce / Atendimento ao cliente / Central de configurações, etc.
Objetos de Negócio e Páginas: Por exemplo, "Lista de Pedidos + Detalhes do Pedido + Aprovação de Reembolso".
Papéis e Permissões: Pelo menos diferencie entre administrador e membro comum; decida se é necessária uma árvore de permissões.
Fonte de Dados: Usar Mock em memória primeiro ou conectar diretamente à API real.

Quando a informação for suficiente, comece diretamente; não pare na fase de proposta.

2. Defina a Arquitetura, Modelo de Dados e Limite de Estado do React

Se envolver um back-end real, novos objetos de domínio ou interações complexas, leia primeiro references/fullstack-design.md; se precisar projetar/revisar o servidor, leia references/backend-design.md antes de escrever páginas. Pelo menos produza:

3–6 entidades principais: Relacionamentos, restrições de unicidade, isolamento de inquilino, máquina de estado, campos de auditoria.
Contrato de API: Listagem/detalhes/operações de escrita, paginação, códigos de erro, idempotência, controle de concorrência.
Propriedade do Estado: URL (filtro/paginação), cache do servidor, formulário, UI local, sessão global – o que vai onde.
Restrições do Back-end: Autenticação no servidor, limites de transação, chave de idempotência, bloqueio otimista, tabela de auditoria, erro não vaza informações internas.
Assinatura de Mock: Implemente primeiro de acordo com a forma real da interface; depois, substitua apenas o interior do serviço.

Escrever JSX sem um contrato é considerado incompleto. A permissão no front-end é apenas para exibição; o servidor deve reautenticar; a aceitação do back-end segue a lista de verificação §14 em backend-design.md.

3. Escolha o Shell e a Pré-configuração

Primeiro, siga as quatro perguntas em references/app-patterns/README.md para selecionar a forma; leia apenas o(s) arquivo(s) de tipo correspondente(s) + _common.md, não carregue tudo:

Forma	Pré-configuração / Shell	Largura	Densidade	Receita de Página
Back-office / Operações	Back-office padrão · Sidebar	Fluida	Padrão	Lista + Detalhes + Permissões
Portal / Site Oficial	Portal Site · Topo	Largura fixa 1200	Confortável	Primeira tela + Capacidades + CTA
SaaS de Ferramentas	Topo · Personalizado	Fluida/Fixa	Compacta	Área de trabalho + Histórico + Configurações
Dashboard de Dados / Monitoramento	Dados densos · Sidebar/Sem shell	Fluida	Compacta	Métricas + Gráficos + Rankings
Documentação / Base de Conhecimento	Portal · Topo	Largura fixa	Padrão	Árvore esquerda + Corpo + Índice direito
Projeto / Kanban	Back-office padrão · Sidebar	Fluida	Compacta	Colunas horizontais de kanban
Diálogo IA / Copilot	Topo/Sem shell	Fixa/Fluida	Padrão	Sessão + Fluxo de mensagens + Contexto
E-commerce / Produto	Portal · Topo	Largura fixa	Padrão	Grid de produtos + Detalhes + Checkout
Atendimento ao Cliente / Ticket	Dados densos · Sidebar	Fluida	Compacta	Fila + Sessão + Detalhes
Login / Onboarding	Sem shell	Largura fixa 420/720	Padrão	Formulário + Steps

Módulos de primeiro nível ≤ 5: priorize navegação superior; muitos módulos que precisam de alternância de longo prazo: navegação lateral. Não transforme "todas as aplicações" em back-office com barra lateral. As 36 formas completas, diagramas de layout e seleção de componentes estão em references/app-patterns/README.md.

Protocolo de Leitura Sob Demanda:

Localize a forma apenas na tabela geral de README.md; não abra o arquivo de tipo primeiro.
Leia _common.md uma vez para determinar shell, largura, densidade e estado geral.
Abra apenas 1 arquivo de tipo correspondente; no máximo 2 para formas mistas, e justifique a combinação.
Leia page-recipes.md apenas quando precisar de um esqueleto de código; não invente do zero.
Não afirme na entrega que leu arquivos de tipo que não abriu.

4. Gere o Projeto

# Substitua <SKILL_DIR> pelo caminho absoluto do bloco de recursos do skill
node <SKILL_DIR>/scripts/scaffold.mjs <diretório-destino> --name "<Nome da Marca>"
# Se quiser instalar dependências junto:
node <SKILL_DIR>/scripts/scaffold.mjs <diretório-destino> --name "<Nome da Marca>" --install

O script copiará o template, substituirá APP_NAME, o nome do pacote e o prefixo localStorage. Não pule o script para copiar o template manualmente e renomear arquivo por arquivo.

Após a geração, execute uma vez:

cd <diretório-destino>
pnpm typecheck
pnpm dev

Faça login com a conta de demonstração admin / admin123, confirme que a linha de base está funcional e depois modifique o negócio.

5. Modifique a Marca e a Arquitetura da Informação

Nome da Marca: APP_NAME em src/config/constants.ts (já escrito pelo scaffold).
Design padrão: DEFAULT_APP_CONFIG e DESIGN_PRESETS em src/config/design.ts.
Menu: siderMenuItems em src/config/menu.tsx; pesquisa rápida: appPages no mesmo arquivo.
Rotas: src/router/index.tsx, cada rota de negócio deve ter handle: { title: 'Nome da Página' }.
Conta de demonstração para login: src/services/auth.ts.

Menu e rotas devem estar sincronizados: a key do item de menu deve ser igual ao caminho da rota, caso contrário, o destaque e a navegação falharão.

6. Ajuste as Configurações de Design

As configurações padrão e pré-definições estão concentradas em src/config/design.ts:

interface AppConfig {
  mode: 'light' | 'dark' | 'system';
  primaryColor: string;
  navLayout: 'side' | 'top';
  siderTheme: 'dark' | 'light';
  contentWidth: 'fluid' | 'fixed';
  density: 'compact' | 'default' | 'comfortable';
  borderRadius: number;
  grayMode: boolean;
}

Para alterar a forma padrão do produto: modifique DEFAULT_APP_CONFIG.
Para alterar combinações recomendadas: modifique DESIGN_PRESETS.
Para adicionar novos itens de configuração: estenda AppConfig → adicione valor padrão → exponha setter em AppConfigContext → adicione controle em DesignDrawer → consuma em App.tsx / layout.
A configuração é persistida no localStorage (padrão nova-admin:design).
Se o produto não permitir que o usuário altere o layout, remova o Segmented correspondente do DesignDrawer, não esconda o painel inteiro.

7. Implemente Páginas de Negócio

Siga o esqueleto em references/page-recipes.md para escrever; não reinvente a roda a cada vez:

Página de lista = PageContainer + Card de filtro + Card de tabela (barra de ferramentas, ações em lote, paginação).
Criar/Editar = Componente Modal independente + validação Form + chamada de camada de serviço.
Página de detalhes = Descriptions + Timeline + Tag de estado.
Dashboard = cartões de métrica + gráficos + registros recentes; o template vem com gráficos SVG sem dependências.
Permissões = tabela de papéis + gaveta Tree de permissões.
Página de portal/ferramenta = navegação superior + conteúdo de largura fixa; blocos de marketing podem ser construídos manualmente, mas ainda use Token e componentes do antd.
Consulte a API do componente primeiro em references/components/README.md ou no CLI oficial; leia apenas o componente atual, não escreva props de memória.
Detalhes de interação: consulte references/ux-scenarios.md para selecionar cenários; cubra primeiro os cinco estados, depois adicione lote, tarefa longa, conflito, solicitação de permissão, etc.
Animação: siga references/ant-motion.md: back-office padrão apenas com feedback de componente de 100–300ms; sem animações de entrada linha por linha, parallax ou transições de tela cheia.
Qualidade de código: siga references/code-quality.md: tipos, Hooks, acessibilidade, tratamento de erros, nomenclatura e limites de arquivo, tudo junto; não empilhe páginas primeiro e depois corrija.
O template inclui três exemplos de extensão: /welcome portal/site oficial, /workspace/board kanban de projeto, /docs central de documentação; podem ser referenciados para reutilização em formas de IA, e-commerce, atendimento ao cliente, CRM, RH, finanças, IoT, etc.

Ao adicionar dados de um novo domínio, atualize simultaneamente src/types, src/services, as páginas e, se necessário, o menu e as rotas.

Scripts do Skill

`scaffold.mjs`

Gera um novo projeto React 19 + TypeScript + Ant Design 6.

node <SKILL_DIR>/scripts/scaffold.mjs <diretório-destino> [--name "Nome da Marca"] [--install]

`scan-ui.mjs`

Escaneia os componentes, layouts e dependências existentes em um projeto. Saída recomendada para ser passada ao Agente como contexto.

node <SKILL_DIR>/scripts/scan-ui.mjs <diretório-do-projeto>

`check-antd-docs.mjs`

Verifica se a versão do antd no projeto corresponde à versão do snapshot da documentação incluída neste skill.

node <SKILL_DIR>/scripts/check-antd-docs.mjs <diretório-do-projeto> [--target <versão>]

`fetch-antd-docs.mjs`

Atualiza os snapshots da documentação dos componentes para uma versão específica do antd (requer CLI oficial).

node <SKILL_DIR>/scripts/fetch-antd-docs.mjs --project <diretório-do-projeto> [--version <versão>]

Skill da comunidade, não oficial do Ant Design.

lzhbhlrPython/antd-admin-template

O que é antd-admin-template?

Perguntar na sua IA favorita

Documentação