Component Standards & Generation — refactor-chain · do-the-work (web lane, step 03/05)

Bundle: refactor-chain (self-diagnosing, self-healing fix-it pipeline). Phase: do-the-work (web lane, step 03 of 05) · Prerequisite: refactor-web-02-modules · Next: refactor-web-04-layout. Adaptivity / conditional: framework-adaptive via the harness signals registry — audit selectors and generated code use the detected ecosystem's vocabulary (React JSX/hooks, Vue SFCs, Svelte components, Angular templates). Token-driven: colors and sizes resolve to the project's semantic tokens (from refactor-ui-tokens when it has run); dimensional caps are configurable thresholds, not magic numbers.

Purpose

Make every screen-level component follow one visual contract. The skill audits components against five rule categories — color, typography, buttons, input controls, tables — with three severity tiers, and generates new composite components from templates that are themselves checked against the same rules before delivery. Nothing is expressed as a hard-coded hex or pixel value: rules reference the project's semantic token layer (--color-primary, --color-danger, --font-size-body, …), so the standard travels with the design system instead of freezing one palette.

When to use

• "Component standard check" / "UI full check" / "color check" / "typography check" / "button standard" / "input standard" / "table standard".
• "Generate a data table" / "generate a query panel" / "generate a form card" / "scaffold a detail view".
• "Why does this button hard-code a blue?" / "our tables all look different".
• Automatically, as step 3 of the web lane once module boundaries (step 02) are settled.