메뉴
Meta-skill: React Quality Orchestrator for AFENDA-HYBRID. Coordinates architecture, performance, accessibility, and design-pattern skills for audits, scoring (Component Quality Index), and confidence-tiered refactors. Use for full-route reviews, legacy refactors, and governance checks.
Accessibility for React UIs in AFENDA-HYBRID: semantic HTML, ARIA, keyboard support, focus management, and testing. Use for grids, dialogs, bulk selection, notifications, and command surfaces.
React and Next.js App Router architecture for AFENDA-HYBRID: Server vs Client Components, composition, state placement, package layering (ui-core → view-engine → erp-view-pack → apps/web). Use when designing components, fixing import/layer violations, or RSC boundaries.
Implementation patterns for AFENDA-HYBRID React code: custom hooks, compound components, error boundaries / error.tsx, forms, server actions, and optimistic updates.
React performance for AFENDA-HYBRID: runtime rendering (re-renders, keys, virtualization) and build-time delivery (bundles, tree-shaking, code splitting, compiler directives). Use when fixing slow lists, grids, or large client bundles.
Official Storybook AI workflow — MCP server, manifests, MCP toolsets (development, docs, testing), and documentation best practices. Use when writing or fixing stories, connecting agents to Storybook, using design-system components without guessing props, or running Storybook tests from an agent. Sources are linked inline.
Vitest (Vite-powered) testing — Jest-compatible API, vi mocks, coverage, environments, projects/workspaces. Use when writing or fixing tests, vitest.config.ts, coverage, or monorepo test commands in AFENDA-HYBRID (@afenda/db, @afenda/ui-core, view-engine, erp-view-pack). Prefer https://vitest.dev for Vitest 4.x when reference snippets disagree.
| name | react-quality-engine |
| description | Meta-skill: React Quality Orchestrator for AFENDA-HYBRID. Coordinates architecture, performance, accessibility, and design-pattern skills for audits, scoring (Component Quality Index), and confidence-tiered refactors. Use for full-route reviews, legacy refactors, and governance checks. |
| metadata | {"author":"AFENDA team","version":"2026.03.23","source":"AFENDA-HYBRID governance + React docs","official_docs":"https://react.dev"} |
This skill coordinates:
Use AGENTS.md for routing (Skill Invocation Matrix) and repo-wide non-goals.
Automated package-layer gate: pnpm react-governance (see tools/react-governance/README.md; check --json reserves summary.score for scoring pipelines).
Provenance: see GENERATION.md.
AGENTS.md; pull secondaries only as needed.| Topic | Description | Reference |
|---|---|---|
| Scoring | Component Quality Index (0–100) | scoring-model |
| Safety | Confidence tiers A–D | refactor-safety-rules |
| Governance | Layers, imports, "use client" | architecture-governance |
| Complexity | Complexity index signals | complexity-index |
| Tooling | ESLint, TS, Biome, ts-morph, Python | tool-recommendations |
This skill does not:
| Area | Enforce |
|---|---|
| All React packages | Scoring and tiers apply; evidence should cite file paths and pattern docs |
| erp-view-pack | Cross-check _CONVENTIONS.md / _AUDIT_MATRIX.md when scoring pattern compliance |
| apps/web | Next.js boundaries and server actions weigh heavily under architecture + pattern consistency |
| db / non-UI | Out of scope except type safety or shared types touching UI |
Repository agents should start at AGENTS.md, then open this meta-skill when performing quality audits or guided refactors.