design-arsenal

Design Arsenal — الأداة الموحدة لتصميم الواجهات

Uma ferramenta. Um ponto de entrada. Onze módulos. Esta é uma habilidade única — tudo é executado através deste arquivo. Sete ferramentas upstream de nível mundial e quatro módulos originais não são mais habilidades separadas; são módulos internos, cada um documentado em um MANUAL.md que você lê do disco quando a tarefa exigir.

EXTRAIR  →  DIRECIONAR  →  CONSTRUIR  →  MOVIMENTO  →  POLIR  →  VERIFICAR
 extrair     direcionar    codificar     gsap /        impeccable   playwright-cli
 + design-tokens              react-bits    transitions
rtl-arabe (camada de contexto — qualquer conteúdo árabe)
a11y (portões em cada estágio)        web-vitals (orçamentos em cada estágio)

نظام أداة واحدة: تُنصَّب هذه المهارة مرة واحدة كأداة واحدة باسم design-arsenal، وكل ما تفعله يمر عبر هذا الملف. الأدوات السبع السابقة أصبحت وحدات داخلية (مع 4 وحدات أصلية: rtl-arabic وa11y وdesign-tokens وweb-vitals) — لا تُنصَّب منفردة ولا تظهر كأدوات مستقلة، بل تُقرأ أدلة استخدامها (MANUAL.md) من القرص عند الحاجة فقط.

---

🧭 Despacho de módulos — leia esta tabela primeiro

Identifique UM módulo da tarefa, leia seu MANUAL.md do disco (caminhos relativos ao diretório deste arquivo) e siga-o. Nunca carregue mais de dois módulos para uma única tarefa.

#	Sinal da tarefa (o que o usuário pede)	Módulo	Ler do disco
1	Copiar o design de um site: "extrair design do stripe.com", "quais tokens/cores/fontes este site usa", "transformar esta URL em um tema Tailwind"	extrair (designlang)	skills/extract-design/MANUAL.md
2	Direção de arte e anti-slop antes de construir: "criar uma landing page", "design que não pareça template", "escolher uma paleta/direção tipográfica"	direcionar (taste-skill v2)	skills/taste/MANUAL.md
3	Refinar, revisar ou endurecer UI existente: "polir", "auditar", "criticar", "mais ousado", "mais suave", "tipografar", "colorir", "endurecer", "destilar"	polir (impeccable, 24 comandos)	skills/impeccable/MANUAL.md
4	Animação programática avançada: "GSAP", "animação de scroll", "linha do tempo", "ScrollTrigger", "stagger", "pinning"	movimento/gsap (8 módulos)	skills/gsap/gsap-<modulo>/MANUAL.md
5	Componentes React animados prontos: "hero animado", "efeito de texto", "fundo animado", "glare hover", "splitscreen"	componentes (react-bits, 218)	skills/react-bits/CATALOG.md
6	Micro-interações e movimento de UI em CSS: "transição de modal", "toast", "badge de notificação", "skeleton loader", "check de sucesso", "estado de pensamento de IA"	movimento/transicoes (43+ snippets)	skills/transitions/transitions-dev/MANUAL.md
7	Verificar ou automatizar: "testar no navegador", "captura de tela", "verificar se o fluxo funciona", "gravar um vídeo", "clicar pelo fluxo"	verificar (playwright-cli)	skills/playwright-cli/MANUAL.md
8	Interface Árabe/RTL: "UI Árabe", "RTL", "عربي", "direita-para-esquerda", "bidi", qualquer conteúdo contendo árabe	rtl-arabe (original)	skills/rtl-arabic/MANUAL.md
9	Acessibilidade: "a11y", "acessível", "WCAG", "contraste", "aria", "leitor de tela", "teclado"	a11y (original)	skills/a11y/MANUAL.md
10	Tokens de design: "design tokens", "DTCG", "tokens de tema", "variáveis CSS tema", "converter paleta para Tailwind", "arquitetura de tokens"	tokens (original)	skills/design-tokens/MANUAL.md
11	Desempenho: "página lenta", "lighthouse", "core web vitals", "LCP", "INP", "CLS", "orçamento de perf", "render-blocking", "أداء", "بطيء", "سرعة"	web-vitals (original)	skills/web-vitals/MANUAL.md

Sobreposições → critérios de desempate:

• Construir algo novo → direcionar primeiro (direção), depois react-bits ou gsap durante a implementação.
• Redesenhar algo existente → polir auditoria/crítica primeiro, depois direcionar se uma nova direção for necessária.
• Micro-interação pura (um elemento, estado aberto/fechado) → transicoes (CSS, barato). Coreografia de cena completa, scroll ou física → gsap.
• Tokens legíveis por máquina (arquivos JSON/DTCG) → tokens. Brief de design em prosa de um site ao vivo → extrair. Captura de tela → tokens → tokens diretamente.
• Qualquer conteúdo árabe → ler rtl-arabe antes de estilizar, independentemente de qual módulo lidera.
• Movimento + questão de acessibilidade → as regras de movimento reduzido de a11y sempre vencem sobre a riqueza do movimento.
• Movimento + questão de desempenho → o orçamento da thread principal de web-vitals vence; animações são enviadas apenas em transform/opacity.
• "Página está lenta" → web-vitals lint estático primeiro (causas estruturais), depois medir (§8 do seu manual) — nunca adivinhar uma métrica.
• Após QUALQUER mudança de UI → oferecer verificação com verificar (captura de tela do resultado).

---

🌳 Árvore de decisão — roteie em quatro perguntas

Pergunte, em ordem, e pare na primeira correspondência:

1. O conteúdo contém árabe (ou outro script RTL)? → adicione rtl-arabe como camada de contexto, depois continue abaixo.
2. A entrada é um design existente para consumir? URL → extrair; captura de tela/mockup → tokens; arquivo de paleta → tokens.
3. A tarefa está criando algo novo, ou alterando algo que existe? Novo → direcionar → construir (puxe de react-bits/gsap/transicoes conforme necessário). Existente → polir auditoria primeiro (/impeccable audit), depois direcionar apenas se uma nova direção for necessária.
4. Com o que a tarefa termina? Enviando UI → executar portões a11y + lint web-vitals + capturas de tela verificar. Produzindo um arquivo de tema/token → exportações tokens + auditoria de pares de acessibilidade.

Leia no máximo dois arquivos MANUAL.md por tarefa; os quatro módulos originais podem ser empilhados com um módulo upstream (ex.: rtl-arabe + direcionar).

---

🚫 Registro de antipadrões — nunca envie estes

Proibições entre módulos coletadas dos manuais. Se sua saída contiver um, a tarefa não está concluída:

• Um <div onClick> em vez de um botão (a11y §3) — morto para teclado, invisível para leitor de tela.
• Texto cinza sobre cor, ou qualquer par fg/bg abaixo de 4.5:1 (a11y §2, proibição impeccable) — execute o script de contraste em vez de adivinhar.
• outline: none sem um anel de foco substituto (a11y §5).
• Animação sem uma proteção prefers-reduced-motion (a11y §7, regra de transições) — a regra mais rigorosa vence.
• letter-spacing em texto árabe (rtl-arabe §3) — quebra o script conectado.
• Propriedades CSS físicas left/right em uma página RTL (rtl-arabe §1) — use propriedades lógicas.
• Hex/px codificados em componentes quando um arquivo de token existe (tokens §7) — apenas arquivos de token carregam valores brutos.
• GSAP para um hover de um único elemento (use transicoes) ou transições CSS para uma cena coreografada por scroll (use gsap).
• Um nome de componente react-bits que não está em catalog.json — nunca invente um.
• Cards aninhados dentro de cards, easing de bounce em UI, e outros sinais de slop do impeccable — /impeccable audit os detecta.
• loading="lazy" na imagem hero/LCP (web-vitals §2) — o navegador descobre a requisição apenas após o layout.
• Um <img> ou <iframe> sem width/height explícitos (web-vitals §3) — mudança de layout garantida.
• Um <script src> clássico em <head> sem defer/async, ou qualquer document.write (web-vitals §7).
• Um @font-face sem font-display, ou uma folha de estilo Google-Fonts sem preconnect para fonts.gstatic.com (web-vitals §6).

---

📦 O que contém

design-arsenal/                  ← UMA habilidade, instalada uma vez
├── SKILL.md                     ← o ponto de entrada único (este arquivo)
├── index.json                   ← índice de módulos legível por máquina
├── install.sh                   ← instalador de um comando (todas as plataformas)
├── ATTRIBUTION.md               ← fontes e licenças
├── README.md                    ← الدليل الكامل بالعربية
├── demo/index.html              ← demonstração funcional da pilha de movimento
├── examples/gsap/               ← exemplos iniciais do GSAP (react/vue/nuxt/vanilla)
└── skills/                      ← módulos internos (apenas manuais de referência)
    ├── extract-design/          ← designlang: URL → sistema de design completo (17+ arquivos)
    ├── taste/                   ← taste-skill v2: 13 regras anti-slop + biblioteca + inspetor
    ├── impeccable/              ← impeccable: 24 comandos + 60+ regras de detector + scripts
    ├── gsap/                    ← 8 módulos GSAP: core/timeline/scrolltrigger/react/plugins/…
    ├── react-bits/              ← 218 componentes React animados (TS-CSS + TS-Tailwind) + catálogo
    ├── transitions/             ← transitions.dev: 18 referências de transição + tokens
    ├── playwright-cli/          ← módulo de automação de navegador + 10 referências
    ├── rtl-arabic/              ← original: interfaces Árabe/RTL (propriedades lógicas, tipografia, auditoria de 10 pontos)
    ├── a11y/                    ← original: portões WCAG 2.2 AA + script de contraste sem dependências
    ├── design-tokens/           ← original: arquitetura DTCG + conversor para múltiplos alvos
    └── web-vitals/              ← original: manual Core Web Vitals + linter HTML estático

Cada diretório de módulo contém um MANUAL.md (anteriormente seu próprio SKILL.md). Como apenas este SKILL.md raiz existe, seu agente registra e carrega exatamente uma ferramenta — sem dispersão de habilidades, sem gatilhos duplicados, sem inchaço de contexto de sete habilidades instaladas.

---

🚀 Inícios rápidos

Do zero à landing page (o pipeline completo):

1. (Reconhecimento opcional) extrair em 1–2 URLs de concorrentes → tokens + padrões.
2. direcionar → ler o brief, inferir direção (tipo/paleta/família de layout), aplicar proibições.
3. Construir. Puxar movimento de transicoes, componentes prontos de react-bits, trabalho de cena de gsap.
4. polir → /impeccable polish + /impeccable audit antes de enviar.
5. verificar → captura de tela desktop + larguras mobile, confirmar que nada quebrou.

Apenas arrumando uma UI feia? → polir sozinho (começar: /impeccable audit <alvo>). Apenas animando? → transicoes para micro, gsap para cenas, nunca ambos no mesmo elemento. Página lenta / vitals falhando? → web-vitals: lint da marcação, aplicar o manual LCP/CLS/INP, depois medir (§8).

---

⚙️ Notas de ambiente única

• extrair precisa de Node 20+ e Playwright (npx designlang <url> lida com a instalação na primeira execução).
• Scripts polir são binários autocontidos em skills/impeccable/scripts/; no Windows sem sh, use impeccable.cmd.
• Scripts direcionar são Node sem dependências (node skills/taste/scripts/lint.mjs src/).
• Linter web-vitals é Node 18+ sem dependências (node skills/web-vitals/scripts/webvitals.mjs page.html).
• verificar precisa de npm install -g @playwright/cli + playwright-cli install-browser chromium.
• Fontes locais de componentes são arquivos simples — copiar de ts-tailwind/ (projetos Tailwind) ou ts-default/ (projetos CSS), ou usar o registro ao vivo: {"registries":{"@react-bits":"https://reactbits.dev/r/{nome}.json"}} em components.json.
• Exemplos GSAP estão em examples/gsap/{vanilla,react,vue,nuxt}.

🧠 Regras para o agente

1. Uma ferramenta, um ponto de entrada. Todas as requisições roteiam através deste arquivo. Se uma tarefa corresponder ao pipeline, trabalhe módulo por módulo na ordem do pipeline — não procure os módulos como habilidades separadas instaladas; eles são internos a este.
2. Ler do disco. Os caminhos dos módulos são relativos ao diretório deste arquivo. Leia o MANUAL.md do módulo completamente antes de agir.
3. Corresponder, não misturar. Uma tarefa → um módulo principal. Empilhe módulos apenas na ordem do pipeline acima.
4. Respeitar as proibições de cada módulo. direcionar proíbe aparências de template; impeccable proíbe cinza sobre cor, cards aninhados, easing de bounce; transicoes e a11y exigem proteções prefers-reduced-motion; rtl-arabe proíbe espaçamento de letras em árabe e left/right físicos em páginas RTL; web-vitals proíbe heroes lazy, mídia sem dimensões e scripts de cabeçalho que bloqueiam renderização. Quando as regras entrarem em conflito, a regra mais rigorosa vence — e as regras de segurança de a11y superam toda preferência estética.
5. Nunca inventar nomes de componentes. Para react-bits, use apenas nomes presentes em skills/react-bits/catalog.json; caso contrário, construir do zero sob as regras de direcionar.
6. Medir, não chutar. Alegações de contraste vêm de node skills/a11y/scripts/contrast.mjs; exportações de token vêm de node skills/design-tokens/scripts/convert.mjs; alegações de desempenho estrutural vêm de node skills/web-vitals/scripts/webvitals.mjs. Se os scripts discordarem do seu olho, os scripts vencem.
7. Conteúdo árabe roteia através de rtl-arabe. No momento em que uma tarefa contém conteúdo árabe ou RTL, leia skills/rtl-arabic/MANUAL.md antes de escrever qualquer CSS — mesmo que outro módulo lidere.
8. Atribuição. Os sete módulos upstream vêm de projetos open-source independentes — mantenha suas licenças intactas (veja ATTRIBUTION.md). Os quatro módulos originais (rtl-arabic, a11y, design-tokens, web-vitals) fazem parte deste pacote.