Initial SeConectai briefing system
This commit is contained in:
@@ -0,0 +1,23 @@
|
||||
# Skill — Design System
|
||||
|
||||
Use esta skill quando precisar criar, organizar ou ampliar padrões visuais.
|
||||
|
||||
## Método
|
||||
1. Inventarie tokens existentes.
|
||||
2. Inventarie componentes compartilhados.
|
||||
3. Identifique duplicações.
|
||||
4. Normalize primeiro os padrões mais repetidos.
|
||||
5. Preserve API de componentes sempre que possível.
|
||||
6. Documente novas variantes e estados.
|
||||
|
||||
## Tokens semânticos
|
||||
Prefira nomes como `surface`, `foreground`, `primary`, `danger`, `border-muted` a nomes puramente visuais como `blue500` quando o projeto já usa semântica.
|
||||
|
||||
## Estados obrigatórios de componentes interativos
|
||||
- default;
|
||||
- hover quando aplicável;
|
||||
- focus-visible;
|
||||
- active;
|
||||
- disabled;
|
||||
- loading quando aplicável;
|
||||
- error/invalid quando aplicável.
|
||||
@@ -0,0 +1,14 @@
|
||||
# Skill — Form Engineering
|
||||
|
||||
## Checklist rápido
|
||||
- labels;
|
||||
- tipos corretos;
|
||||
- validação cliente e servidor;
|
||||
- mensagens específicas;
|
||||
- foco em erro;
|
||||
- prevenção de duplo submit;
|
||||
- loading;
|
||||
- preservação de valores;
|
||||
- autocomplete;
|
||||
- acessibilidade;
|
||||
- máscaras sem corromper payload.
|
||||
@@ -0,0 +1,13 @@
|
||||
# Skill — Next.js
|
||||
|
||||
## Verifique a arquitetura usada
|
||||
- App Router ou Pages Router;
|
||||
- Server/Client Components;
|
||||
- estratégia de data fetching;
|
||||
- cache/revalidation;
|
||||
- metadata;
|
||||
- route handlers;
|
||||
- imagens/fontes.
|
||||
|
||||
Não misture padrões de versões diferentes sem necessidade.
|
||||
Mantenha código cliente mínimo quando Server Components estiverem disponíveis e adequados.
|
||||
@@ -0,0 +1,13 @@
|
||||
# Skill — React
|
||||
|
||||
## Regras
|
||||
- componentes devem ser previsíveis e com efeitos controlados;
|
||||
- não use `useEffect` para estado derivável;
|
||||
- mantenha dependências de efeitos corretas;
|
||||
- não duplique fonte de verdade;
|
||||
- keys de listas devem ser estáveis;
|
||||
- handlers devem refletir intenção clara;
|
||||
- Context não deve virar store global por conveniência.
|
||||
|
||||
## Performance
|
||||
Memoização só quando há custo ou rerender relevante. Evite `useMemo`/`useCallback` indiscriminados.
|
||||
@@ -0,0 +1,15 @@
|
||||
# Skill — Responsive Engineering
|
||||
|
||||
## Processo
|
||||
1. Descubra breakpoints existentes.
|
||||
2. Ache containers com largura fixa problemática.
|
||||
3. Identifique componentes que dependem de hover.
|
||||
4. Teste navegação, tabelas, formulários e modais.
|
||||
5. Corrija primeiro estrutura, depois detalhes.
|
||||
|
||||
## Anti-padrões
|
||||
- esconder metade do sistema no mobile;
|
||||
- fonte minúscula para fazer caber;
|
||||
- `overflow-x: hidden` para mascarar layout quebrado;
|
||||
- breakpoints arbitrários espalhados;
|
||||
- largura fixa em componentes reutilizáveis.
|
||||
@@ -0,0 +1,18 @@
|
||||
# Skill — Data Tables
|
||||
|
||||
## Objetivo
|
||||
Tabelas devem favorecer comparação e operação, não apenas exibir dados.
|
||||
|
||||
## Avaliar
|
||||
- ordenação;
|
||||
- filtros;
|
||||
- busca;
|
||||
- paginação;
|
||||
- seleção;
|
||||
- ações;
|
||||
- densidade;
|
||||
- responsividade;
|
||||
- estados;
|
||||
- persistência de contexto.
|
||||
|
||||
Nunca remova coluna importante no mobile sem oferecer outra forma de acesso ao dado.
|
||||
@@ -0,0 +1,16 @@
|
||||
# Skill — Tailwind CSS
|
||||
|
||||
Use somente quando Tailwind já fizer parte do projeto ou houver decisão explícita de adotá-lo.
|
||||
|
||||
## Regras
|
||||
- reutilizar tokens/configuração do projeto;
|
||||
- evitar classes arbitrárias repetidas;
|
||||
- extrair componente quando sequência extensa representa padrão reutilizável;
|
||||
- não substituir toda folha CSS existente sem necessidade;
|
||||
- usar `cn`/merge de classes conforme convenção existente;
|
||||
- respeitar variantes e dark mode existentes.
|
||||
|
||||
## Evitar
|
||||
- dezenas de valores `[13px]`, `[17px]`, `[#123456]` sem sistema;
|
||||
- `!` modifiers para vencer conflitos mal compreendidos;
|
||||
- copiar blocos enormes de classes em várias telas.
|
||||
@@ -0,0 +1,9 @@
|
||||
# Skill — Vue
|
||||
|
||||
## Regras
|
||||
- respeitar Options API ou Composition API predominante;
|
||||
- evitar mutação inesperada de props;
|
||||
- usar computed para valores derivados;
|
||||
- watchers apenas quando efeito colateral é necessário;
|
||||
- manter emits e props explícitos;
|
||||
- preservar convenções de Pinia/Vue Router existentes.
|
||||
Reference in New Issue
Block a user