prizmkit 1.1.53 → 1.1.55

package/bundled/skills/app-planner/references/rules/frontend/derivation-rules.md

@@ -0,0 +1,810 @@
+# Derivation Rules — Frontend Auto-Derivation Rule Mapping
+
+> This file defines the mapping "Phase 2 answers → rule blocks auto-injected into frontend-rules.md". The AI reads this file in Phase 3 — **do not ask the user again**.
+>
+> Usage: Each rule block has a unique ID (e.g., `D-TAILWIND-01`). After matching the user's answer, inject the "rule body" verbatim into the corresponding `{{ ... }}` placeholder in [frontend-rules.template.md](../templates/frontend-rules.template.md).
+
+---
+
+## Phase 2 Answer Direct-Fill Table (no derivation needed; copy the user's answer text directly into the placeholder)
+
+> These placeholders **don't need rule blocks**. In Phase 4, the AI directly writes the answers collected in Phase 2 into them.
+
+| Template Placeholder | Source | Example Fill |
+|---------------------|--------|-------------|
+| `{{ project_name }}` | Phase 0 auto-read from `package.json` `name` field; if unavailable, ask the user | `robot-svc` |
+| `{{ generated_at }}` | Phase 4, AI writes current ISO date | `2026-05-18` |
+| `{{ project_scope }}` | Phase 0 ask user ("Which directories/subprojects does this spec apply to?") | `apps/web, apps/admin` |
+| `{{ design_source }}` | Q8 answer | `Existing HTML prototype, path temp/` |
+| `{{ framework }}` | Q1 answer | `React 18+` |
+| `{{ meta_framework }}` | Q2 answer | `Next.js (App Router)` |
+| `{{ package_manager }}` | Q3 answer | `pnpm` |
+| `{{ style_solution }}` | Q4 answer | `Tailwind CSS` |
+| `{{ state_lib }}` | Q5 answer | `Zustand` |
+| `{{ server_state_lib }}` | Q6 answer | `TanStack Query` |
+| `{{ api_type_source }}` | Q7 answer | `OpenAPI auto-generated` |
+| `{{ token_layering }}` | Q9 answer | `Three-layer (primitive / semantic / component)` |
+| `{{ dark_mode }}` | Q10 answer | `Supported, CSS variable switching` |
+| `{{ responsive_strategy }}` | Q11 answer | `Mobile-first` |
+| `{{ breakpoint_scheme }}` | Q12 answer | `Tailwind defaults` |
+| `{{ i18n }}` | Q13 answer | `Chinese only` |
+| `{{ a11y_level }}` | Q14 answer | `WCAG 2.1 AA` |
+| `{{ test_coverage }}` | Q15 answer | `Shared components + critical path E2E` |
+| `{{ unit_test_framework }}` | Q16 answer | `Vitest` |
+| `{{ e2e_framework }}` | Q17 answer | `Playwright` |
+| `{{ ai_max_lines }}` | Q22 answer (number) | `300` |
+| `{{ lcp_target }}` | Q23 answer | `<2.5s` |
+| `{{ font_strategy }}` | Q4b answer | Direct fill |
+| `{{ bundle_size }}` | Q24 answer | `<300KB (<100KB gzipped)` |
+
+Appendix placeholders are auto-generated by AI in Phase 4:
+
+| Template Placeholder | Generation Method |
+|---------------------|-------------------|
+| `{{ deny_list_summary }}` | Extract all "❌ Forbid" entries from §1.5 / §3 / §7.4 / §9 |
+| `{{ recommended_libs }}` | Recommend ecosystem based on `framework` / `style_solution` / `state_lib` combinations |
+
+---
+
+## Trigger Map
+
+| Trigger (Phase 2 Answer) | Inject Rule Block ID | Inject Into Placeholder |
+|--------------------------|---------------------|------------------------|
+| Q1 = React | `D-REACT-01`, `D-REACT-02` | `{{ tech_stack_rules }}`, `{{ style_specific_rules }}` |
+| Q1 = Vue 3 | `D-VUE-01`, `D-VUE-02` | `{{ tech_stack_rules }}` |
+| Q1 = Svelte | `D-SVELTE-01` | `{{ tech_stack_rules }}` |
+| Q1 = Solid | `D-SOLID-01` | `{{ tech_stack_rules }}` |
+| Q1 = Custom | `D-CUSTOM-FW-01` | `{{ tech_stack_rules }}` |
+| Q2 = Next.js | `D-NEXT-01`, `D-NEXT-02` | `{{ tech_stack_rules }}` |
+| Q2 = Nuxt | `D-NUXT-01` | `{{ tech_stack_rules }}` |
+| Q2 = Remix | `D-REMIX-01` | `{{ tech_stack_rules }}` |
+| Q2 = Plain SPA (Vite) | `D-SPA-01` | `{{ tech_stack_rules }}` |
+| Q2 = Custom | `D-CUSTOM-META-01` | `{{ tech_stack_rules }}` |
+| Q3 = pnpm | `D-PNPM-01` | `{{ tech_stack_rules }}` |
+| Q3 = npm | `D-NPM-01` | `{{ tech_stack_rules }}` |
+| Q3 = yarn | `D-YARN-01` | `{{ tech_stack_rules }}` |
+| Q3 = bun | `D-BUN-01` | `{{ tech_stack_rules }}` |
+| Q4 = Tailwind | `D-TAILWIND-01`, `D-TAILWIND-02` | `{{ style_specific_rules }}` |
+| Q4 = CSS Modules | `D-CSSMOD-01` | `{{ style_specific_rules }}` |
+| Q4 = CSS-in-JS | `D-CSSINJS-01` | `{{ style_specific_rules }}` |
+| Q4 = UnoCSS | `D-UNO-01` | `{{ style_specific_rules }}` |
+| Q4 = Plain CSS + BEM | `D-BEM-01` | `{{ style_specific_rules }}` |
+| Q4b = Self-hosted, font-display: swap | `D-FONT-SELF-01` | `{{ performance_rules }}` |
+| Q4b = CDN, font-display: swap | `D-FONT-CDN-01` | `{{ performance_rules }}` |
+| Q4b = System font stack only | `D-FONT-SYSTEM-01` | `{{ performance_rules }}` |
+| Q4b = Not decided yet | `D-FONT-UNDECIDED-01` | `{{ performance_rules }}` |
+| Q5 = Zustand | `D-ZUSTAND-01` | `{{ state_rules }}` |
+| Q5 = Pinia | `D-PINIA-01` | `{{ state_rules }}` |
+| Q5 = Redux Toolkit | `D-RTK-01` | `{{ state_rules }}` |
+| Q5 = Jotai/Valtio | `D-JOTAI-01` | `{{ state_rules }}` |
+| Q5 = Context only | `D-CTX-01` | `{{ state_rules }}` |
+| Q6 = TanStack Query | `D-TANSTACK-01`, `D-TANSTACK-02` | `{{ server_state_rules }}` |
+| Q6 = SWR | `D-SWR-01` | `{{ server_state_rules }}` |
+| Q6 = RTK Query | `D-RTKQ-01` | `{{ server_state_rules }}` |
+| Q6 = Custom fetch hook wrapper | `D-CUSTOM-FETCH-01` | `{{ server_state_rules }}` |
+| Q7 = OpenAPI auto-gen | `D-OPENAPI-01` | `{{ server_state_rules }}` |
+| Q7 = Protobuf | `D-PROTO-01` | `{{ server_state_rules }}` |
+| Q7 = Hand-written .d.ts | `D-TYPES-MANUAL-01` | `{{ server_state_rules }}` |
+| Q7 = Shared monorepo type package | `D-TYPES-MONOREPO-01` | `{{ server_state_rules }}` |
+| Q9 = Three-layer Token | `D-TOKEN-3L-01` | `{{ token_layering_rules }}` |
+| Q9 = Two-layer Token | `D-TOKEN-2L-01` | `{{ token_layering_rules }}` |
+| Q9 = Single-layer Token | `D-TOKEN-1L-01` | `{{ token_layering_rules }}` |
+| Q10 = CSS variable dark | `D-DARK-CSSVAR-01` | `{{ dark_mode_rules }}` |
+| Q10 = class-based dark | `D-DARK-CLASS-01` | `{{ dark_mode_rules }}` |
+| Q10 = No dark mode | `D-DARK-NONE-01` | `{{ dark_mode_rules }}` |
+| Q11 = Mobile-first | `D-RESP-MF-01` | `{{ breakpoint_rules }}` |
+| Q11 = Desktop-first | `D-RESP-DF-01` | `{{ breakpoint_rules }}` |
+| Q11 = Desktop only | `D-RESP-DESKTOP-ONLY-01` | `{{ breakpoint_rules }}` |
+| Q11 = Mobile only | `D-RESP-MOBILE-ONLY-01` | `{{ breakpoint_rules }}` |
+| Q12 = Tailwind defaults | `D-BP-TW-01` | `{{ breakpoint_rules }}` |
+| Q12 = MD breakpoints | `D-BP-MD-01` | `{{ breakpoint_rules }}` |
+| Q12 = Custom breakpoints | `D-BP-CUSTOM-01` | `{{ breakpoint_rules }}` |
+| Q13 = Multi-language | `D-I18N-01` | `{{ i18n_rules }}` |
+| Q13 = Single-language, centralized | `D-I18N-NONE-01` | `{{ i18n_rules }}` |
+| Q13 = Single-language, hardcoding | `D-I18N-HARDCODE-01` | `{{ i18n_rules }}` |
+| Q14 = WCAG 2.1 AA | D-A11Y-AA-01 | `{{ a11y_extra_rules }}` |
+| Q14 = WCAG 2.1 AAA | `D-A11Y-AAA-01` | `{{ a11y_extra_rules }}` |
+| Q14 = Basic keyboard reachability only | `D-A11Y-BASIC-01` | `{{ a11y_extra_rules }}` |
+| Q15 + Q16/Q17 | `D-TEST-01` (dynamically assembled) | `{{ test_rules }}` |
+| Q18 = Enforce index sync | `D-AI-INDEX-STRICT-01` | `{{ ai_index_rule }}` |
+| Q18 = Not required | `D-AI-INDEX-LOOSE-01` | `{{ ai_index_rule }}` |
+| Q19 = No, forbid self-initiated | `D-AI-DEP-STRICT-01` | `{{ ai_dependency_rule }}` |
+| Q19 = Yes, with declaration | `D-AI-DEP-ANNOUNCE-01` | `{{ ai_dependency_rule }}` |
+| Q19 = No limit | `D-AI-DEP-FREE-01` | `{{ ai_dependency_rule }}` |
+| Q20 = Yes, must list callers | `D-AI-BREAK-STRICT-01` | `{{ ai_breaking_change_rule }}` |
+| Q20 = No | `D-AI-BREAK-LOOSE-01` | `{{ ai_breaking_change_rule }}` |
+| Q21 = Forbid; config files must be manually edited | `D-AI-CONFIG-FRONTEND-STRICT-01` | `{{ ai_config_rule }}` |
+| Q21 = Allowed, must explain each change | `D-AI-CONFIG-FRONTEND-LOOSE-01` | `{{ ai_config_rule }}` |
+| Q22 = Any value N | `D-AI-LINES-01` (replace `{{ ai_max_lines }}`) | `{{ ai_max_lines }}` |
+| Q23 = LCP <2.5s | `D-PERF-25-01` | `{{ performance_rules }}` |
+| Q23 = LCP <1.5s | `D-PERF-15-01` | `{{ performance_rules }}` |
+| Q23 = Not required yet | `D-PERF-NONE-01` | `{{ performance_rules }}` |
+| Q24 = chunk <300KB | `D-CHUNK-300-01` | `{{ performance_rules }}` |
+| Q24 = chunk <500KB | `D-CHUNK-500-01` | `{{ performance_rules }}` |
+| Q24 = No limit | `D-CHUNK-NONE-01` | `{{ performance_rules }}` |
+
+---
+
+## Rule Block Definitions
+
+### D-REACT-01
+**Trigger**: Q1 = React | **Inject into**: `{{ tech_stack_rules }}`
+
+- Framework: React 18+, use function components + Hooks. Forbid Class components.
+- Hooks rules:
+  - Custom Hook filenames start with `use` (`useUserProfile.ts`).
+  - Strictly forbid calling Hooks inside loops, conditions, or nested functions.
+  - `useEffect` dependency arrays must be complete. Forbid `// eslint-disable-next-line react-hooks/exhaustive-deps`.
+  - Side effect cleanup functions must be explicitly returned.
+- Performance:
+  - List rendering must provide a stable `key`. Forbid using `index` as key (unless the list is read-only and never reordered).
+  - Reusable callbacks use `useCallback`. Reusable objects use `useMemo`. But **prefer restructuring the component** over abusing memo.
+  - Large lists use virtualization (`react-window` / `react-virtuoso`).
+- Context:
+  - One Context carries only one concern.
+  - Frequently updated state must not go in Context. Use a dedicated store.
+
+### D-REACT-02
+**Trigger**: Q1 = React | **Inject into**: `{{ style_specific_rules }}` (only when Q4 is not CSS-in-JS)
+
+- React components use `clsx` / `classnames` to concatenate className. Forbid string concatenation.
+- Conditional styles must be expressed in `clsx`. Avoid ternary operator stacking.
+
+### D-VUE-01
+**Trigger**: Q1 = Vue 3 | **Inject into**: `{{ tech_stack_rules }}`
+
+- Framework: Vue 3 + `<script setup lang="ts">`. Forbid Options API (unless legacy code).
+- Composition API:
+  - `ref` / `reactive` selection rule: primitives use `ref`, objects/arrays use `reactive`.
+  - Cross-component reusable logic must be encapsulated as `useXxx` composables, named with the `use` prefix.
+  - `watch` must explicitly specify the data source. `watchEffect` only for pure reactive tracking.
+- Templates:
+  - `v-for` must include `:key`, and the `key` must be unique and stable.
+  - Strictly forbid `v-if` and `v-for` on the same element simultaneously.
+  - `v-html` only for trusted content. Must have a comment explaining the source.
+- Single-file component structure order: `<script setup>` → `<template>` → `<style scoped>`.
+
+### D-VUE-02
+**Trigger**: Q1 = Vue 3 | **Inject into**: `{{ tech_stack_rules }}`
+
+- Props/Emits must use `defineProps<T>()` / `defineEmits<T>()` TypeScript generic form.
+- Component Props must have default values (`withDefaults`).
+- Cross-component communication priority: props/emits > provide/inject > global store.
+
+### D-SVELTE-01
+**Trigger**: Q1 = Svelte | **Inject into**: `{{ tech_stack_rules }}`
+
+- Use Svelte 5 Runes (`$state`, `$derived`, `$effect`). Forbid mixing old `$:` reactive syntax.
+- Component filenames PascalCase. `<script lang="ts">` must enable TypeScript.
+
+### D-SOLID-01
+**Trigger**: Q1 = Solid | **Inject into**: `{{ tech_stack_rules }}`
+
+- Strictly forbid destructuring props (breaks reactivity). Must access as `props.foo`.
+- Side effects use `createEffect`. Derived state uses `createMemo`.
+
+### D-CUSTOM-FW-01
+**Trigger**: Q1 = Custom | **Inject into**: `{{ tech_stack_rules }}`
+
+- Record user's custom framework and version verbatim. Platform-specific rules deferred to user input.
+
+### D-CUSTOM-META-01
+**Trigger**: Q2 = Custom | **Inject into**: `{{ tech_stack_rules }}`
+
+- User selected a custom meta-framework. Record the user's exact description of the meta-framework and its conventions. No pre-authored rules exist for this option.
+
+### D-NEXT-01
+**Trigger**: Q2 = Next.js | **Inject into**: `{{ tech_stack_rules }}`
+
+- Use App Router (`app/` directory). Forbid adding new Pages Router pages.
+- Default to Server Components. Explicitly mark `'use client'` when interactivity is needed, and push it down to leaf nodes.
+- Server Action function files start with `'use server'`. Forbid exposing sensitive logic in Client Components.
+- Data fetching:
+  - Server Components directly `await fetch`, using Next.js caching strategies (`cache`, `revalidate`).
+  - Client Components use TanStack Query / SWR.
+- Route file naming follows Next.js conventions: `page.tsx`, `layout.tsx`, `loading.tsx`, `error.tsx`, `not-found.tsx`.
+
+### D-NEXT-02
+**Trigger**: Q2 = Next.js | **Inject into**: `{{ tech_stack_rules }}`
+
+- Images must use `next/image`. Forbid `<img>` (unless SVG inline).
+- Fonts must use `next/font`. Forbid external CDN font links.
+- Links must use `next/link`. Forbid using `<a>` for internal navigation.
+
+### D-NUXT-01
+**Trigger**: Q2 = Nuxt | **Inject into**: `{{ tech_stack_rules }}`
+
+- Use Nuxt 3+. Directory conventions: `pages/`, `components/`, `composables/`, `server/`.
+- Server-side data fetching uses `useFetch` / `useAsyncData`. Forbid direct `await fetch` in setup.
+- `definePageMeta` is used to declare route metadata (auth, layout).
+
+### D-REMIX-01
+**Trigger**: Q2 = Remix | **Inject into**: `{{ tech_stack_rules }}`
+
+- Data loading uses `loader`. Data writing uses `action`. Forbid writing fetch in components.
+- Prefer `<Form>` for forms. Follow Remix's progressive enhancement philosophy.
+- Error handling uses route-level `ErrorBoundary` exports.
+
+### D-PNPM-01
+**Trigger**: Q3 = pnpm | **Inject into**: `{{ tech_stack_rules }}`
+
+- Package manager locked to pnpm. Commit `pnpm-lock.yaml` to the repository root. Forbid committing `package-lock.json` / `yarn.lock`.
+- `package.json` declares `"packageManager": "pnpm@x.y.z"`. CI validates.
+- Monorepo uses `pnpm workspace`. Forbid global dependencies.
+
+### D-TAILWIND-01
+**Trigger**: Q4 = Tailwind | **Inject into**: `{{ style_specific_rules }}`
+
+- Use Tailwind CSS as the sole styling solution. Forbid mixing with CSS Modules / CSS-in-JS.
+- Colors, spacing, and font sizes must use tokens extended in `tailwind.config.{ts,js}`. Forbid arbitrary values (e.g., `bg-[#1a73e8]`, `p-[13px]`).
+  - Exception: only when a one-off non-token value is truly needed (e.g., integrating a third-party widget), and must have a comment explaining why.
+- Utility class stacks ≤ 5 write directly in JSX. Beyond 5, must:
+  - Extract as `@apply` component class (only for generic semantic components), or
+  - Split into sub-components.
+- State variant order fixed: `base → hover → focus → active → disabled → dark`.
+- Forbid writing complex conditional class string concatenation in templates. Must use `clsx` or `tailwind-variants` / `cva`.
+- Recommend installing and enabling `prettier-plugin-tailwindcss` for automatic utility class sorting.
+
+### D-TAILWIND-02
+**Trigger**: Q4 = Tailwind | **Inject into**: `{{ style_specific_rules }}`
+
+- Design tokens configured in `tailwind.config`'s `theme.extend` in layers:
+  - Must not write hex colors directly in `theme.colors`. Must reference CSS variables (e.g., `var(--color-primary-500)`).
+  - This naturally makes dark mode / multi-theme switching compatible.
+- Custom plugins centralized in `tailwind/plugins/` directory. One plugin per file, single responsibility.
+
+### D-CSSMOD-01
+**Trigger**: Q4 = CSS Modules | **Inject into**: `{{ style_specific_rules }}`
+
+- Each component gets a matching `Component.module.css`. Class naming uses simplified BEM: `block__element--modifier`.
+- Forbid using `:global` to cross-contaminate component styles (except global reset/typography files).
+- Reusable styles use `composes:`. Forbid copy-pasting style blocks.
+- Colors and spacing referenced via CSS variables. Forbid hardcoding.
+- Class names must be camelCase (auto-converted to kebab-case on export by the build tool).
+
+### D-CSSINJS-01
+**Trigger**: Q4 = CSS-in-JS (styled-components / emotion) | **Inject into**: `{{ style_specific_rules }}`
+
+- Theme object centralized in `src/theme/index.ts`. All colors/spacing/font sizes must be read from the theme.
+- Forbid hardcoding hex colors in styled template literals.
+- Dynamic styles must go through props (`${({ $primary }) => ...}`). Forbid using className switching.
+- Watch out for runtime performance: styled components reused in lists must be hoisted to the module level. Forbid defining inside render.
+- Recommend using `babel-plugin-styled-components` / `@emotion/babel-plugin` to optimize bundle size.
+
+### D-UNO-01
+**Trigger**: Q4 = UnoCSS | **Inject into**: `{{ style_specific_rules }}`
+
+- Use UnoCSS preset-uno + preset-attributify (on demand).
+- Shortcuts centralized in `uno.config.ts`'s `shortcuts` field. Named semantically.
+- Forbid writing more than 5 attributes in attributify mode. Beyond that, extract a shortcut.
+
+### D-ZUSTAND-01
+**Trigger**: Q5 = Zustand | **Inject into**: `{{ state_rules }}`
+
+- Global state uses Zustand. One store per file, path `src/stores/<domain>Store.ts`.
+- Stores must export selector functions. Forbid `useStore(state => state)` full subscription in components.
+- Async actions implemented in the store. Components only call actions, not process async directly.
+- Persistence uses `zustand/middleware persist`. Explicitly set `partialize` fields. Forbid full persistence of sensitive data.
+- Derived state uses `useShallow` or selector composition to avoid unnecessary re-renders.
+
+### D-PINIA-01
+**Trigger**: Q5 = Pinia | **Inject into**: `{{ state_rules }}`
+
+- Use Pinia setup store style (functional). Do not use options store style.
+- One store per file, path `src/stores/<domain>.ts`. Named `useXxxStore`.
+- Async action logic placed inside the store. Getters used only for derived computation. Forbid side effects.
+- Persistence uses `pinia-plugin-persistedstate`. Declare fields as needed.
+
+### D-RTK-01
+**Trigger**: Q5 = Redux Toolkit | **Inject into**: `{{ state_rules }}`
+
+- Use Redux Toolkit only. Forbid bare Redux + hand-written reducers.
+- Use `createSlice` to define reducers. Use `createAsyncThunk` for async.
+- Selectors must use `createSelector` (reselect) for memoization.
+- File structure: `src/features/<domain>/<domain>Slice.ts`.
+
+### D-JOTAI-01
+**Trigger**: Q5 = Jotai / Valtio | **Inject into**: `{{ state_rules }}`
+
+- Atom naming ends with `Atom` (`userAtom`, `themeAtom`).
+- Derived atoms use `atom((get) => ...)`. Forbid recalculating in components.
+- Async atoms must pair with loadable / Suspense handling.
+
+### D-CTX-01
+**Trigger**: Q5 = Context only | **Inject into**: `{{ state_rules }}`
+
+- No global state library used. State kept close to where it's used (component-local `useState`).
+- Cross-component sharing uses React Context + `useReducer`.
+- Single Context carries only one concern. Frequently updated state split into separate Contexts.
+- Provide selector hooks (e.g., `useAuthUser`) wrapping `useContext` to avoid components directly consuming Context.
+
+### D-TANSTACK-01
+**Trigger**: Q6 = TanStack Query | **Inject into**: `{{ server_state_rules }}`
+
+- Server state uniformly uses TanStack Query. Forbid the `useEffect + fetch` pattern in components.
+- queryKey naming convention: `[domain, resource, params?]`. Must be a stable, serializable array.
+  - Example: `['user', 'profile', { userId }]`, `['order', 'list', { page, status }]`.
+- Default config (set centrally in `QueryClient`):
+  - `staleTime: 60_000` (default 1 minute)
+  - `gcTime: 5 * 60_000` (default 5 minutes)
+  - `retry: 1` (write operations `retry: 0`)
+  - `refetchOnWindowFocus: false` (enable per business need)
+- Mutations must handle `onSuccess` to invalidate related queries (`queryClient.invalidateQueries`).
+- Error handling: use the global `QueryCache` `onError` hook for unified reporting. UI layer renders error state via the `error` field.
+
+### D-TANSTACK-02
+**Trigger**: Q6 = TanStack Query | **Inject into**: `{{ server_state_rules }}`
+
+- Each domain provides a `queryKeys` object for centralized key management. Avoid scattered strings:
+  ```ts
+  export const userKeys = {
+    all: ['user'] as const,
+    profile: (id: string) => [...userKeys.all, 'profile', id] as const,
+  };
+  ```
+- Custom hook wrapping: `useUserProfile(id)`, not `useQuery` directly in components.
+
+### D-SWR-01
+**Trigger**: Q6 = SWR | **Inject into**: `{{ server_state_rules }}`
+
+- Use SWR. Key naming convention: `/api/<resource>?<params>` or tuple `[resource, params]`.
+- Global config provided at the top level via `<SWRConfig>`, including fetcher, error handling, and refresh strategy.
+- Mutations use `useSWRMutation`. After write operations, call `mutate(key)` to invalidate cache.
+
+### D-RTKQ-01
+**Trigger**: Q6 = RTK Query | **Inject into**: `{{ server_state_rules }}`
+
+- Use RTK Query's `createApi` to centrally define endpoints. Split API slices by domain.
+- `tagTypes` must be explicitly declared. Mutations use `invalidatesTags` to invalidate related queries.
+- When paired with OpenAPI, use `@rtk-query/codegen-openapi` for auto-generation.
+
+### D-OPENAPI-01
+**Trigger**: Q7 = OpenAPI auto-gen | **Inject into**: `{{ server_state_rules }}`
+
+- API types auto-generated from backend OpenAPI/Swagger. Recommended tools: `openapi-typescript` or `orval`.
+- Generated type files placed in `src/api/generated/`. **Forbid manual modification**. File header adds `// AUTO-GENERATED, DO NOT EDIT`.
+- Generation command named `gen:api` in `package.json`. CI validates generated output matches the committed version.
+- Business code references generated types using type-only import: `import type { User } from '@/api/generated'`.
+
+### D-PROTO-01
+**Trigger**: Q7 = Protobuf | **Inject into**: `{{ server_state_rules }}`
+
+- Use protobuf-ts / ts-proto to generate TypeScript types and client.
+- Generated output placed in `src/api/proto/`. Forbid manual modification.
+
+### D-TOKEN-3L-01
+**Trigger**: Q9 = Three-layer Token | **Inject into**: `{{ token_layering_rules }}`
+
+- Tokens are divided into three layers (referencing Material Design / Tailwind design philosophy):
+  1. **Primitive layer**: pure color values/numbers, no semantics attached.
+     - `--color-blue-500: #1a73e8`
+     - `--space-4: 16px`
+  2. **Semantic layer**: business semantics, referencing Primitive.
+     - `--color-primary: var(--color-blue-500)`
+     - `--color-text-default: var(--color-gray-900)`
+  3. **Component layer**: component-specific, referencing Semantic.
+     - `--button-primary-bg: var(--color-primary)`
+     - `--card-padding: var(--space-4)`
+- Business code / component code **may only reference Semantic and Component layers**. Strictly forbid directly referencing Primitive.
+- Dark mode only switches Semantic layer values. Primitive layer remains unchanged.
+
+### D-TOKEN-2L-01
+**Trigger**: Q9 = Two-layer Token | **Inject into**: `{{ token_layering_rules }}`
+
+- Tokens divided into two layers:
+  1. **Base layer**: raw color values/spacing
+  2. **Semantic layer**: business semantics, referencing Base
+- Business code may only reference Semantic layer.
+- Dark mode switches Semantic layer values.
+
+### D-TOKEN-1L-01
+**Trigger**: Q9 = Single-layer Token | **Inject into**: `{{ token_layering_rules }}`
+
+- Tokens only have a semantic layer (e.g., `--color-primary`, `--color-bg-default`). No primitive layer.
+- Suitable for small projects. If dark mode or multi-theme support is added in the future, must upgrade to a two-layer structure.
+
+### D-DARK-CSSVAR-01
+**Trigger**: Q10 = CSS variable dark | **Inject into**: `{{ dark_mode_rules }}`
+
+- Dark mode uses CSS variable switching: `:root` defines light, `:root[data-theme="dark"]` defines dark.
+- Switch via `<html data-theme="dark">` attribute. To avoid FOUC (Flash of Unstyled Content), an inline script must set it early in `<head>`.
+- **Every Semantic Token must have both light and dark values**. CI validates for omissions.
+- User preference persisted to `localStorage` and supports following the system setting (`prefers-color-scheme`).
+
+### D-DARK-CLASS-01
+**Trigger**: Q10 = class-based dark | **Inject into**: `{{ dark_mode_rules }}`
+
+- Dark mode uses class switching (Tailwind `darkMode: 'class'`). Root element toggles `.dark`.
+- Components use `dark:` prefix utilities, which must appear in pairs with base classes.
+  - Example: `bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100`.
+- Before toggling, an inline script in `<head>` reads localStorage to set the initial class to avoid FOUC.
+- Supports following system theme (`prefers-color-scheme`).
+
+### D-DARK-NONE-01
+**Trigger**: Q10 = No dark mode | **Inject into**: `{{ dark_mode_rules }}`
+
+- Dark mode not supported at the current stage.
+- But Semantic Tokens must be defined using CSS variables to reserve expansion space for future switching.
+- Forbid hardcoding colors in components. All colors must go through Semantic Tokens.
+
+### D-RESP-MF-01
+**Trigger**: Q11 = Mobile-first | **Inject into**: `{{ breakpoint_rules }}`
+
+- Mobile-first: default styles target mobile. Use `min-width` media queries to expand upward.
+- Forbid using `max-width` media queries (unless a desktop-to-mobile downgrade scenario is truly needed).
+- Minimum touch target 44×44 CSS pixels.
+- Must consider iOS safe areas (`env(safe-area-inset-*)`).
+
+### D-RESP-DF-01
+**Trigger**: Q11 = Desktop-first | **Inject into**: `{{ breakpoint_rules }}`
+
+- Desktop-first: default styles target desktop. Use `max-width` media queries to adapt downward.
+- Mobile must be validated for landscape/portrait switching, keyboard popup, and scrolling scenarios.
+- Documentation must declare that this project only provides a full experience at ≥ XXX width.
+
+### D-BP-TW-01
+**Trigger**: Q12 = Tailwind defaults | **Inject into**: `{{ breakpoint_rules }}`
+
+- Breakpoints use Tailwind defaults:
+  - `sm` 640px
+  - `md` 768px
+  - `lg` 1024px
+  - `xl` 1280px
+  - `2xl` 1536px
+- Forbid using arbitrary non-breakpoint values in media queries.
+
+### D-BP-MD-01
+**Trigger**: Q12 = Material Design breakpoints | **Inject into**: `{{ breakpoint_rules }}`
+
+- Breakpoints use Material Design standards:
+  - `xs` 0
+  - `sm` 600px
+  - `md` 905px
+  - `lg` 1240px
+  - `xl` 1440px
+
+### D-I18N-01
+**Trigger**: Q13 = Multi-language | **Inject into**: `{{ i18n_rules }}`
+
+- i18n solution: React projects use `react-i18next` or `next-intl`. Vue projects use `vue-i18n`.
+- **Forbid hardcoding any user-visible text in JSX/templates**. Must use i18n keys.
+- Key naming convention: `<page>.<section>.<element>` three-segment format.
+  - Example: `login.form.submitButton`, `order.detail.priceLabel`.
+- Translation files split by language: `locales/zh-CN.json`, `locales/en-US.json`.
+- Plurals, dates, and currency use ICU MessageFormat. Forbid string concatenation.
+- Missing keys must cause CI errors. Translation files sorted by key for easy diffing.
+
+### D-I18N-NONE-01
+**Trigger**: Q13 = Single-language, centralized | **Inject into**: `{{ i18n_rules }}`
+
+- The current project does not need multi-language support, but user-visible text must still be **centrally managed** in `src/i18n/<lang>.ts`.
+- Forbid hardcoding text in JSX/templates to prepare for future i18n adoption.
+
+### D-I18N-HARDCODE-01
+**Trigger**: Q13 = Single-language, hardcoding | **Inject into**: `{{ i18n_rules }}`
+
+- User-visible text may be hardcoded. Recommend centralizing text before expanding to multi-language. No i18n infrastructure required at this stage.
+- Forbid mixing hardcoded text with partial i18n keys (all-or-nothing: either fully hardcoded or fully centralized).
+
+### D-A11Y-AAA-01
+**Trigger**: Q14 = WCAG 2.1 AAA | **Inject into**: `{{ a11y_extra_rules }}`
+
+- On top of the fixed-rules a11y baseline, additionally require:
+  - Text contrast ratio ≥ 7:1 (normal text) / 4.5:1 (large text).
+  - Provide text alternatives (audio captions, video sign language).
+  - Key workflows must provide "contextual help".
+  - Form errors must provide specific remediation suggestions.
+
+### D-TEST-01 (Dynamically Assembled)
+**Trigger**: Q15 + Q16 + Q17 combination | **Inject into**: `{{ test_rules }}`
+**Generation rule**: Dynamically assemble based on user selection. Omit the corresponding framework line when not asked (Q16 is only asked for Q15=A/B; Q17 is only asked for Q15=A/C).
+
+- Testing strategy: {{ Q15 description }}
+- Unit test framework: {{ Q16 choice }} (only if Q15=A or B; if Vitest: supplement with "use `vitest` + `@testing-library/{{ framework }}` + `@testing-library/jest-dom`")
+- E2E framework: {{ Q17 choice }} (only if Q15=A or C; if Playwright: supplement with "E2E cases in `e2e/` directory, named `*.spec.ts`, run headless in CI, `--ui` for local debugging")
+- Coverage targets: shared components ≥ 80%, business components ≥ 50%, utility functions ≥ 90%.
+- Unit test principles:
+  - Test behavior, not implementation.
+  - Prefer `getByRole` / `getByLabelText`, then `getByText`. Avoid `getByTestId` (unless no semantics available).
+  - Async assertions use `findBy*` or `waitFor`. Forbid `setTimeout`.
+- E2E principles (if enabled):
+  - Cases cover critical business paths (login, checkout, payment, etc.).
+  - Data isolation. Each case has independent setup/teardown.
+  - Screenshot comparison only for core visual components.
+
+### D-AI-DEP-STRICT-01
+**Trigger**: Q19 = No, forbid self-initiated | **Inject into**: `{{ ai_dependency_rule }}`
+
+- AI **must not modify** `dependencies` / `devDependencies` in `package.json` on its own.
+- If a new dependency is truly needed, AI must:
+  1. List in the PR description: package name, version, purpose, alternative comparison.
+  2. Await human review approval.
+  3. After approval, human executes `pnpm add`.
+- Exception: lockfile updates (`pnpm-lock.yaml`) may be modified by AI.
+
+### D-AI-DEP-ANNOUNCE-01
+**Trigger**: Q19 = Yes, with declaration | **Inject into**: `{{ ai_dependency_rule }}`
+
+- AI may introduce new dependencies, but must explicitly declare in the PR description:
+  - Package name / version / reason for introduction / bundle size impact.
+- Avoid introducing libraries with overlapping functionality to existing dependencies (check during review).
+
+### D-AI-DEP-FREE-01
+**Trigger**: Q19 = No limit | **Inject into**: `{{ ai_dependency_rule }}`
+
+- AI may freely introduce dependencies, but should prioritize:
+  - Actively maintained (commits in the last 6 months).
+  - Reasonable bundle size (< 50KB gzipped preferred).
+  - Complete TypeScript types.
+
+### D-AI-BREAK-STRICT-01
+**Trigger**: Q20 = Yes, must list callers | **Inject into**: `{{ ai_breaking_change_rule }}`
+
+- Before modifying any shared component under `src/components/`, `src/hooks/`, or `src/utils/`, AI must:
+  1. Full-text search for callers in the repository (grep / IDE reference finder).
+  2. List **all affected files** in the change description.
+  3. Assess whether existing usage is broken (API signature, behavior).
+- If it is a breaking change, must:
+  - Provide a codemod or migration guide.
+  - Prefix the PR title with `[BREAKING]`.
+  - Bump the major version number.
+
+### D-AI-BREAK-LOOSE-01
+**Trigger**: Q20 = No | **Inject into**: `{{ ai_breaking_change_rule }}`
+
+- AI does not need to force-list all callers when modifying shared modules, but should describe the change intent and potential impact in the PR description.
+
+### D-AI-INDEX-STRICT-01
+**Trigger**: Q18 = Enforce index sync | **Inject into**: `{{ ai_index_rule }}`
+
+- After adding any new shared component, it must be added to `src/components/index.ts` in the same commit.
+- Index file maintained in alphabetical order. New entries must include a JSDoc comment (one-line description of the component's purpose).
+- When deleting a component, it must be removed from the index synchronously, and all callers must be searched.
+- Before creating a new component, AI **must** first read `components/index.ts` to confirm there is no reusable component already.
+- CI should have a script to validate: all `*.tsx` files under `components/` must appear in `index.ts` exports (orphan files treated as build failure).
+
+### D-AI-INDEX-LOOSE-01
+**Trigger**: Q18 = Not required | **Inject into**: `{{ ai_index_rule }}`
+
+- New components may temporarily not be written to `components/index.ts`, but it is recommended to list new component additions in the PR description.
+- Before creating a new component, AI should still **search the `src/components/` directory** to avoid duplicating work.
+- The team should periodically (recommended: each milestone) organize `components/index.ts` and archive stable components.
+
+### D-AI-LINES-01
+**Trigger**: Q22 = N | **Inject into**: `{{ ai_max_lines }}`
+**Generation rule**: Directly replace the placeholder with the user's chosen value (200 / 300 / 500 / no limit).
+
+### D-PERF-25-01
+**Trigger**: Q23 = LCP < 2.5s | **Inject into**: `{{ performance_rules }}`
+
+- First screen LCP (Largest Contentful Paint) target < 2.5s (real 4G / mid-range device).
+- INP (Interaction to Next Paint) target < 200ms.
+- CLS (Cumulative Layout Shift) target < 0.1.
+- Critical path optimization:
+  - Critical CSS inlined. Non-critical CSS loaded asynchronously.
+  - First screen images `loading="eager"`. Others `loading="lazy"`.
+  - Fonts use `font-display: swap`. Preload critical fonts (`<link rel="preload">`).
+- CI integrates Lighthouse validation. PRs blocked if performance regresses by > 10%.
+
+### D-PERF-15-01
+**Trigger**: Q23 = LCP < 1.5s | **Inject into**: `{{ performance_rules }}`
+
+- Extreme performance requirements. On top of D-PERF-25-01, additionally:
+  - LCP < 1.5s.
+  - First screen JS bundle < 100KB gzipped.
+  - Must use SSR / SSG pre-rendering.
+  - Images must use AVIF/WebP and have LQIP placeholders.
+  - CDN enables HTTP/3, Brotli compression.
+
+### D-CHUNK-300-01
+**Trigger**: Q24 = chunk < 300KB | **Inject into**: `{{ performance_rules }}`
+
+- Single chunk gzipped size < 300KB. Beyond this, must code-split (`React.lazy` / dynamic `import()`).
+- Route-level lazy loading is the default requirement.
+- CI integrates `rollup-plugin-visualizer` / `vite-bundle-visualizer` for bundle size analysis.
+- Large dependencies (chart libraries, rich text editors, map SDKs) must be loaded on demand.
+
+### D-CHUNK-500-01
+**Trigger**: Q24 = chunk < 500KB | **Inject into**: `{{ performance_rules }}`
+
+- Single chunk gzipped size < 500KB.
+- Route-level lazy loading recommended.
+- CI integrates bundle size analysis.
+
+### D-BEM-01
+**Trigger**: Q4 = Plain CSS + BEM | **Inject into**: `{{ style_specific_rules }}`
+
+- Use BEM naming: Block__Element--Modifier.
+- Style files co-located with components.
+- Global styles in `src/styles/`.
+- Forbid `!important`.
+- Colors use CSS variables defined in `:root`.
+
+### D-FONT-SELF-01
+**Trigger**: Q4b = Self-hosted, font-display: swap | **Inject into**: `{{ performance_rules }}`
+
+- Fonts self-hosted in `src/assets/fonts/`. Use `font-display: swap`. Preload critical fonts in `<head>`. Subset to reduce file size. Formats: woff2 (primary) + woff (fallback).
+
+### D-FONT-CDN-01
+**Trigger**: Q4b = CDN, font-display: swap | **Inject into**: `{{ performance_rules }}`
+
+- Fonts loaded from CDN (Google Fonts or similar). Use `font-display: swap`. Preconnect to font CDN origin. Forbid blocking render on font load. Fallback font stack must match metrics closely.
+
+### D-FONT-SYSTEM-01
+**Trigger**: Q4b = System font stack only | **Inject into**: `{{ performance_rules }}`
+
+- System font stack only. No custom fonts loaded. Example: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`. Zero font download overhead.
+
+### D-FONT-UNDECIDED-01
+**Trigger**: Q4b = Not decided yet | **Inject into**: `{{ performance_rules }}`
+
+- Font strategy not yet decided. No font-specific rules injected. Revisit before production.
+
+### D-CUSTOM-FETCH-01
+**Trigger**: Q6 = Custom fetch hook wrapper | **Inject into**: `{{ server_state_rules }}`
+
+- Custom fetch hooks must be in `src/hooks/api/`.
+- Each hook must return `{ data, error, loading, refetch }`.
+- Forbid fetch calls directly in components.
+- Request cancellation via AbortController on unmount.
+
+### D-TYPES-MANUAL-01
+**Trigger**: Q7 = Hand-written .d.ts | **Inject into**: `{{ server_state_rules }}`
+
+- API types hand-written in `src/types/api/`.
+- File naming matches endpoint: `getUser.ts` -> `GetUserResponse`, `GetUserParams`.
+- Changes to API types must sync with backend team.
+
+### D-TYPES-MONOREPO-01
+**Trigger**: Q7 = Shared monorepo type package | **Inject into**: `{{ server_state_rules }}`
+
+- Types imported from shared monorepo package `@project/shared-types`.
+- Forbid local re-declaration of shared types.
+- Type package version bumps must be coordinated.
+
+### D-RESP-DESKTOP-ONLY-01
+**Trigger**: Q11 = Desktop only | **Inject into**: `{{ breakpoint_rules }}`
+
+- Target desktop only (>=1024px).
+- Forbid horizontal scroll on viewport < 1024px.
+- Min touch target waived.
+
+### D-RESP-MOBILE-ONLY-01
+**Trigger**: Q11 = Mobile only | **Inject into**: `{{ breakpoint_rules }}`
+
+- Target mobile only (<=428px).
+- Desktop shows centered mobile layout with `max-width: 428px`.
+
+### D-BP-CUSTOM-01
+**Trigger**: Q12 = Custom breakpoints | **Inject into**: `{{ breakpoint_rules }}`
+
+- Custom breakpoints defined in `src/styles/breakpoints.ts` as a constant object.
+- All media queries reference these constants.
+- Forbid hardcoded pixel values in media queries.
+
+### D-PERF-NONE-01
+**Trigger**: Q23 = Not required yet | **Inject into**: `{{ performance_rules }}`
+
+- Performance targets not yet defined.
+- Recommend setting LCP and CLS targets before production launch.
+- Current: no CI performance gates.
+
+### D-CHUNK-NONE-01
+**Trigger**: Q24 = No limit | **Inject into**: `{{ performance_rules }}`
+
+- No chunk size limit enforced.
+- Recommend setting a limit before production to prevent accidentally large bundles.
+
+### D-SPA-01
+**Trigger**: Q2 = Plain SPA (Vite) | **Inject into**: `{{ tech_stack_rules }}`
+
+- Plain SPA with Vite. No SSR/SSG.
+- Routing via react-router-dom or equivalent.
+- All rendering client-side.
+
+### D-NPM-01
+**Trigger**: Q3 = npm | **Inject into**: `{{ tech_stack_rules }}`
+
+- Package manager locked to npm. Commit `package-lock.json` to the repository root. Forbid committing `yarn.lock` / `pnpm-lock.yaml`.
+- `package.json` declares `"packageManager": "npm@x.y.z"`. CI validates.
+
+### D-YARN-01
+**Trigger**: Q3 = yarn | **Inject into**: `{{ tech_stack_rules }}`
+
+- Package manager locked to yarn. Commit `yarn.lock` to the repository root. Forbid committing `package-lock.json` / `pnpm-lock.yaml`.
+- `package.json` declares `"packageManager": "yarn@x.y.z"`. CI validates.
+
+### D-BUN-01
+**Trigger**: Q3 = bun | **Inject into**: `{{ tech_stack_rules }}`
+
+- Package manager locked to bun. Commit `bun.lockb` to the repository root. Forbid committing `package-lock.json` / `yarn.lock` / `pnpm-lock.yaml`.
+- `package.json` declares `"packageManager": "bun@x.y.z"`. CI validates.
+
+### D-A11Y-AA-01
+**Trigger**: Q14 = WCAG 2.1 AA | **Inject into**: `{{ a11y_extra_rules }}`
+
+- Text contrast ratio >= 4.5:1 (normal text) / 3:1 (large text >= 18px bold or >= 24px).
+- Focus indicators must be visible on all interactive elements (>= 2px outline or equivalent).
+- Heading hierarchy must be correct (h1 -> h2 -> h3, no skipping levels).
+- Landmark roles must be used (header, main, nav, footer).
+- Form errors must be announced to screen readers via aria-live or equivalent.
+
+### D-A11Y-BASIC-01
+**Trigger**: Q14 = Basic keyboard reachability only | **Inject into**: `{{ a11y_extra_rules }}`
+
+- No additional WCAG rules beyond the a11y baseline. Focus on keyboard reachability and focus management only.
+
+### D-AI-CONFIG-FRONTEND-STRICT-01
+**Trigger**: Q21 = Forbid; config files must be manually edited | **Inject into**: `{{ ai_config_rule }}`
+
+- AI must not modify config files (`tsconfig.json`, `vite.config.*`, `eslint.config.*`, `tailwind.config.*`) on its own.
+- Config changes require human review and explicit approval.
+- If a config change is truly needed, AI must explain each proposed change and await approval before applying.
+
+### D-AI-CONFIG-FRONTEND-LOOSE-01
+**Trigger**: Q21 = Allowed, must explain each change | **Inject into**: `{{ ai_config_rule }}`
+
+- AI may modify config files, but must explain each change in the PR description.
+- Each config change must include: which file, what was changed, why the change is needed, and potential impact on other developers.
+
+
+## Template Placeholder Coverage Self-Check Table (Mandatory Check Before Phase 4 Rendering)
+
+> This table lists **all** placeholders from [frontend-rules.template.md](../templates/frontend-rules.template.md) with their fill sources. The AI must check each item before Phase 4 rendering: every placeholder must hit at least one source. Otherwise, it's treated as an alignment failure.
+
+| Placeholder | Fill Source | Source Type |
+|-------------|------------|-------------|
+| `{{ project_name }}` | Phase 0 auto-read | Metadata |
+| `{{ generated_at }}` | Phase 4 writes current date | Metadata |
+| `{{ project_scope }}` | Phase 0 ask | Metadata |
+| `{{ design_source }}` | Q8 answer | Direct fill |
+| `{{ framework }}` | Q1 answer | Direct fill |
+| `{{ meta_framework }}` | Q2 answer | Direct fill |
+| `{{ package_manager }}` | Q3 answer | Direct fill |
+| `{{ style_solution }}` | Q4 answer | Direct fill |
+| `{{ font_strategy }}` | Q4b answer | Direct fill |
+| `{{ state_lib }}` | Q5 answer | Direct fill |
+| `{{ server_state_lib }}` | Q6 answer | Direct fill |
+| `{{ api_type_source }}` | Q7 answer | Direct fill |
+| `{{ token_layering }}` | Q9 answer | Direct fill |
+| `{{ dark_mode }}` | Q10 answer | Direct fill |
+| `{{ responsive_strategy }}` | Q11 answer | Direct fill |
+| `{{ breakpoint_scheme }}` | Q12 answer | Direct fill |
+| `{{ i18n }}` | Q13 answer | Direct fill |
+| `{{ a11y_level }}` | Q14 answer | Direct fill |
+| `{{ test_coverage }}` | Q15 answer | Direct fill |
+| `{{ unit_test_framework }}` | Q16 answer | Direct fill |
+| `{{ e2e_framework }}` | Q17 answer | Direct fill |
+| `{{ ai_max_lines }}` | Q22 answer | Direct fill (D-AI-LINES-01) |
+| `{{ lcp_target }}` | Q23 answer | Direct fill |
+| `{{ bundle_size }}` | Q24 answer | Direct fill |
+| `{{ token_layering_rules }}` | D-TOKEN-{1L/2L/3L}-01 | Derivation |
+| `{{ dark_mode_rules }}` | D-DARK-{CSSVAR/CLASS/NONE}-01 | Derivation |
+| `{{ breakpoint_rules }}` | D-RESP-{MF/DF/DESKTOP-ONLY/MOBILE-ONLY}-01 + D-BP-{TW/MD/CUSTOM}-01 | Derivation |
+| `{{ tech_stack_rules }}` | D-{REACT/VUE/SVELTE/SOLID}-01 + D-{NEXT/NUXT/REMIX}-01 + D-PNPM-01 | Derivation |
+| `{{ style_specific_rules }}` | D-{TAILWIND/CSSMOD/CSSINJS/UNO}-01 (+ D-REACT-02 optional) | Derivation |
+| `{{ state_rules }}` | D-{ZUSTAND/PINIA/RTK/JOTAI/CTX}-01 | Derivation |
+| `{{ server_state_rules }}` | D-{TANSTACK/SWR/RTKQ}-01 + D-{OPENAPI/PROTO}-01 | Derivation |
+| `{{ a11y_extra_rules }}` | Q14=AA injects D-A11Y-AA-01; Q14=AAA injects D-A11Y-AAA-01; Q14=Basic keyboard reachability only injects D-A11Y-BASIC-01 | Derivation |
+| `{{ i18n_rules }}` | D-I18N-01 / D-I18N-NONE-01 / D-I18N-HARDCODE-01 | Derivation |
+| `{{ performance_rules }}` | D-PERF-{25/15}-01 + D-CHUNK-{300/500}-01 + D-FONT-{SELF/CDN/SYSTEM}-01 | Derivation |
+| `{{ test_rules }}` | D-TEST-01 (dynamically assembled from Q15+Q16+Q17) | Derivation |
+| `{{ ai_dependency_rule }}` | D-AI-DEP-{STRICT/ANNOUNCE/FREE}-01 | Derivation |
+| `{{ ai_breaking_change_rule }}` | D-AI-BREAK-{STRICT/LOOSE}-01 | Derivation |
+| `{{ ai_config_rule }}` | D-AI-CONFIG-FRONTEND-{STRICT/LOOSE}-01 | Derivation |
+| `{{ ai_index_rule }}` | D-AI-INDEX-{STRICT/LOOSE}-01 | Derivation |
+| `{{ FIXED_RULES_COMPONENT_CONTRACT }}` | fixed-rules.md F3.1 | Fixed injection |
+| `{{ FIXED_RULES_I18N_BASELINE }}` | fixed-rules.md F4 | Fixed injection |
+| `{{ FIXED_RULES_ERROR_HANDLING }}` | fixed-rules.md F5 | Fixed injection |
+| `{{ FIXED_RULES_DENY_LIST }}` | fixed-rules.md F2 full body | Fixed injection |
+| `{{ FIXED_RULES_TYPESCRIPT }}` | fixed-rules.md F1.1 full body | Fixed injection |
+| `{{ FIXED_RULES_NAMING }}` | fixed-rules.md F1.3 full body | Fixed injection |
+| `{{ FIXED_RULES_A11Y }}` | fixed-rules.md F6 full body | Fixed injection |
+| `{{ FIXED_RULES_PERFORMANCE }}` | fixed-rules.md F10 full body | Fixed injection |
+| `{{ FIXED_RULES_AI_BASE }}` | fixed-rules.md F9 full body | Fixed injection |
+| `{{ FIXED_RULES_GIT }}` | fixed-rules.md F7 full body | Fixed injection |
+| `{{ FIXED_RULES_SECURITY }}` | fixed-rules.md F8 full body | Fixed injection |
+| `{{ deny_list_summary }}` | Phase 4 auto-extract all ❌ entries from §1.5/§3/§7.4/§9 | Auto-generated |
+| `{{ recommended_libs }}` | Phase 4 recommend based on framework + style_solution + state_lib | Auto-generated |
+
+**Self-check rule**: Before rendering, scan the output file. If any `{{ ... }}` string still remains, it's an alignment failure — must go back to Phase 2/3 to trace the issue.