diff --git a/templates/frontend/quality.md b/templates/frontend/quality.md index 839d79b3..1b37b391 100644 --- a/templates/frontend/quality.md +++ b/templates/frontend/quality.md @@ -5,32 +5,26 @@ ## Patterns -- Use error boundary, skeleton loading, optimistic update, virtual - scroll, debounced search, form validation, responsive switch, and - URL state sync patterns where appropriate +- Use the pattern each case names: an error boundary around a failing + subtree, a skeleton for loading, virtual scroll for long lists, a + debounce on search input, validation on form input, a responsive switch + at breakpoints, URL sync for shareable state ## Design patterns -Prefer these patterns for frontend concerns: - -- **Container / Presentational** — separate data-fetching and state logic - (container) from rendering (presentational); presentational components - receive only props, have no side effects, and are easy to test in isolation -- **Compound Component** — expose a set of related sub-components that share - implicit state (e.g. ``, ``, ``); prefer over deeply - nested prop drilling -- **Observer** — subscribe to external state changes (store, event bus, - WebSocket) via a single subscription point; unsubscribe on component unmount -- **Facade** — wrap third-party libraries (analytics, maps, payment SDKs) - behind a thin project-owned interface; never scatter SDK calls across - components -- **Optimistic Update** — apply the expected result of a mutation immediately - in the UI and roll back on failure; document the rollback path - -Avoid: - -- **Mediator / Event Bus** between components — use shared state or lifting - state up instead; an event bus between components creates invisible coupling +- Separate data fetching and state (container) from rendering + (presentational); give presentational components only props and no side + effects +- Expose related sub-components that share implicit state as a compound + component (``, ``, ``) rather than drill props +- Subscribe to external state (store, event bus, WebSocket) through one + subscription point, and unsubscribe on unmount +- Wrap a third-party library (analytics, maps, payment SDK) behind a thin + project-owned interface; never scatter its calls across components +- Apply a mutation's expected result at once and roll back on failure; + document the rollback path +- Never connect components through an event bus; share state or lift it + up instead ## State management @@ -59,19 +53,19 @@ Rules: ## Linting and formatting -- A linter MUST be configured for all JS/TS code -- Linter and formatter SHOULD run on save in the IDE — never rely on CI - alone to catch style issues -- No warnings or errors MUST appear in the browser console or test output - before a PR is merged — start every review on a clean slate -- Lint error count SHOULD go down over time — never increase it +- Configure a linter for all JS/TS code (MUST) +- Run the linter and formatter on save in the IDE (SHOULD); never rely on + CI alone for style +- Merge no PR with a warning or error in the browser console or test + output (MUST) +- Lower the lint error count over time, never raise it (SHOULD) ## CSS -- No inline styles except for dynamic/computed values -- No hardcoded colour or spacing values — always use CSS custom properties - from `:root` or design tokens -- Consistent naming convention (e.g. BEM-like `.component-element`) +- Use no inline styles except dynamic or computed values +- Use CSS custom properties from `:root` or design tokens for every colour + and spacing value; never hardcode one +- Use one class-naming convention (e.g. BEM-like `.component-element`) ## Performance @@ -93,4 +87,4 @@ Rules: ## Analytics (if applicable) -- No third-party tracking scripts without explicit user consent +- Load no third-party tracking script without explicit user consent diff --git a/tests/baselines/template-quality.txt b/tests/baselines/template-quality.txt index 9f0f55e6..7a2b2cc4 100644 --- a/tests/baselines/template-quality.txt +++ b/tests/baselines/template-quality.txt @@ -34,7 +34,7 @@ templates/data/data-migration.md 100.0 templates/data/data-modeling.md 100.0 templates/data/data-quality.md 100.0 templates/frontend/content.md 99.1 -templates/frontend/quality.md 93.5 +templates/frontend/quality.md 98.3 templates/frontend/ux.md 94.3 templates/infra/cicd.md 95.7 templates/infra/containers.md 95.2