Índice de Regras de Conformidade de Frontend
Esta página é um índice, não uma segunda cópia do contrato. O Contrato de UI Portável é dono dos enunciados normativos das regras; os links abaixo fornecem orientação detalhada de implementação.
| Regra | Orientação detalhada | Resultado determinístico |
|---|---|---|
| FE-PORT-001 | Contrato de UI Portável | Rejeitar suposições privadas de portabilidade |
| FE-UI-001 | Contrato de UI Portável | Rejeitar controles padrão crus ou feitos à mão |
| FE-UI-002 | Contrato de UI Portável | Exigir análise de affordance |
| FE-UI-003 | Contrato de UI Portável | Exigir contrato de irmãos e evidência de tema alternativo |
| FE-UI-004 | Contrato de UI Portável | Exigir configuração do PrimeVue quando houver controles |
| FE-UI-005 | Contrato de UI Portável | Rejeitar props e APIs inventadas |
| FE-TW-001 | Contrato Tailwind | Resolver o preset Wippy selecionado |
| FE-TW-002 | Contrato Tailwind | Rejeitar valores de tempo de compilação documentados como runtime |
| FE-TW-003 | Contrato Tailwind | Rejeitar valores fixos de irmãos sem classificação de invariante |
| FE-TW-004 | Contrato Tailwind | Rejeitar sobrescritas de mapeamento protegido |
| FE-TOKEN-001 | Catálogo de Tokens | Rejeitar referências --p-* não declaradas |
| FE-TOKEN-002 | Catálogo de Tokens | Rejeitar nomes de token deduzidos ou inventados |
| FE-STYLE-001 | Autoria de Temas | Rejeitar classes privadas da facade e temas .p-* locais ao módulo |
| FE-A11Y-001 | Contrato de UI Portável | Rejeitar controles customizados inválidos ou inacessíveis |
Grupos de verificadores obrigatórios
- CSS de tokens parseado com PostCSS; snapshot de tokens gerado comparado byte a byte.
- Configuração real do Tailwind resolvida e utilitários representativos compilados.
- Declarações emitidas classificadas como variável de runtime, constante compilada, literal arbitrário ou interno/transitório.
- Controles crus, configuração ausente do PrimeVue, sobrescritas de mapeamento protegido, tokens não declarados, dependências privadas de facade e drift de hash de contrato são rejeitados.
- Externals do import map comparados com o snapshot completo e pinado.
- Saída do build verificada contra o registry configurado e o asset servido.
- A troca de tema usa
host.setThemeMode()e verifica o estado propagado do AppConfig; manipulação direta de classes de tema e wires internos do proxy são rejeitados. - Catálogos gerados verificados quanto a proveniência, tupla de versão e hashes de origem.
- Exemplos copiáveis parseados, compilados quando aplicável, e verificados quanto a conteúdo interativo aninhado.
- O modo vinculado a projeto retorna exatamente
UNSUPPORTED, e o CI padrão falha.
O Promptmap pode gerar pistas. Ele não é evidência de existência de token, resolução de utilitário, alcançabilidade ou remoção.
Gates de publicação para conteúdo gerado
As seções geradas de tokens e Tailwind não podem conter um marcador pendente na publicação. Todo novo token de runtime precisa de um consumidor CSS real do Wippy, um teste de mutação de estilo computado e um propósito documentado de consumidor portável.
A publicação mantém a evidência de runtime fora do repositório. Defina:
WIPPY_THEME_ROOTcomo o pacote@wippy-fe/themeselecionado.WIPPY_FE_EVIDENCE_ROOTcomo o diretório de evidências da release contendoruntime-acceptance-evidence.json,visual-evidence-index.json, seus manifestos relativos de cenário e as capturas de tela.WIPPY_FE_RUNTIME_EVIDENCE_SHA256como o SHA-256 em minúsculas dos bytes exatos deruntime-acceptance-evidence.json.
FRONTEND_DOCS_PUBLICATION=1 node scripts/check-frontend-docs.mjs invoca o
verificador canônico de aceitação do tema selecionado com esse caminho de
evidência e hash, e então valida e recalcula a evidência visual. Verificações
normais de atualidade da documentação não exigem evidência local de release.
Verificação visual determinística
Todo componente afetado por uma mudança de aparência tem um manifesto de cenário e evidência imutável de antes/depois/diff. A baseline e a candidata usam o mesmo build de navegador, device-pixel ratio, fontes, dados de fixture, tema, viewport, configuração de movimento reduzido e regra de estabilização. Capture todos os estados aplicáveis, incluindo temas claro e escuro, estados de interação, overlays, estados desabilitado/erro e os layouts de desktop que o produto suporta. Não invente um requisito estreito/mobile para um produto exclusivo de desktop.
Cada cenário captura o recorte do componente e o contexto da aplicação ao redor. Ele também captura a página inteira quando um overlay, um overflow ou o layout da página pode ser afetado. Um índice de componente declara a matriz aplicável completa e aponta para um manifesto imutável por cenário:
{
"schemaVersion": "1.0.0",
"componentId": "module.component",
"applicability": {
"themes": ["light", "dark"],
"viewports": [{ "id": "desktop", "width": 1440, "height": 900 }],
"states": ["default"],
"overlay": false
},
"finalBuild": {
"candidateCommit": "generated-candidate-commit",
"candidateBuildHash": "sha256:generated-candidate-build-hash",
"recapturedAfterBuild": true
},
"scenarios": [
{
"scenarioId": "module.component.light.default",
"theme": "light",
"viewport": "desktop",
"state": "default",
"manifest": "scenarios/module.component.light.default.json"
},
{
"scenarioId": "module.component.dark.default",
"theme": "dark",
"viewport": "desktop",
"state": "default",
"manifest": "scenarios/module.component.dark.default.json"
}
]
}
O verificador expande o produto cartesiano de aplicabilidade e falha se qualquer
tema, viewport ou estado declarado não tiver um cenário único. Quando overlay é
true, todo cenário também exige o escopo de captura full-page. O commit e o
hash do build final precisam corresponder à candidata de cada cenário, e
recapturedAfterBuild precisa ser true.
Cada manifesto de cenário registra hashes em vez de confiar em nomes de arquivo:
{
"schemaVersion": "1.0.0",
"scenarioId": "module.component.light.default",
"componentId": "module.component",
"state": {
"theme": "light",
"viewport": { "width": 1440, "height": 900 },
"interaction": "default"
},
"runtime": {
"browserVersion": "pinned-browser-version",
"devicePixelRatio": 1,
"fontsHash": "sha256:generated-font-set-hash",
"fixtureHash": "sha256:generated-fixture-hash"
},
"baseline": {
"commit": "generated-baseline-commit",
"buildHash": "sha256:generated-baseline-build-hash"
},
"candidate": {
"commit": "generated-candidate-commit",
"buildHash": "sha256:generated-candidate-build-hash",
"recapturedAfterBuild": true
},
"requiredScopes": ["component", "context"],
"captures": [
{
"scope": "component",
"before": {
"artifactId": "component-before",
"path": "screenshots/component-before.png",
"sha256": "sha256:generated-before-hash"
},
"after": {
"artifactId": "component-after",
"path": "screenshots/component-after.png",
"sha256": "sha256:generated-after-hash"
},
"diff": {
"artifactId": "component-diff",
"path": "screenshots/component-diff.png",
"sha256": "sha256:generated-diff-hash"
}
},
{
"scope": "context",
"before": {
"artifactId": "context-before",
"path": "screenshots/context-before.png",
"sha256": "sha256:generated-before-hash"
},
"after": {
"artifactId": "context-after",
"path": "screenshots/context-after.png",
"sha256": "sha256:generated-after-hash"
},
"diff": {
"artifactId": "context-diff",
"path": "screenshots/context-diff.png",
"sha256": "sha256:generated-diff-hash"
}
}
],
"diff": {
"changedPixels": 0,
"totalPixels": 1296000,
"changedRatio": 0,
"pixelDeltaThreshold": 8,
"changedRatioThreshold": 0.001,
"disposition": "within-threshold",
"result": "passed",
"waiver": null
},
"console": { "unexpectedErrors": [] },
"fixtureCleanup": { "temporaryArtifactsRemaining": [], "verified": true }
}
Os valores acima mostram o formato exigido, não uma evidência válida. A publicação falha quando um componente alterado ou um estado obrigatório não tem cenário, um escopo de captura obrigatório está ausente, uma imagem ou hash referenciado está faltando, builds estão desatualizados, restam erros inesperados de console, resta código temporário de fixture, ou o diff excede a tolerância sem um waiver de design revisado. Um waiver registra os pixels exatamente alterados, a razão de design, o revisor e o cenário afetado; ele não pode dispensar capturas ausentes, erros de console ou limpeza de fixture.