jason904/ui-skill-lab/spec-compliance-review

Version: 2.0.0

spec-compliance-review

Audit implemented frontend code against the approved visual contract and design system.

This skill verifies that implementation code complies with:

• 03_visual_spec/
• 04_visual_spec_review/
• 05_design_system/
• OpenSpec design.md and tasks.md
• source / strictness rules
• UI Type, Layout Paradigm, and Asset Strategy

It does not modify code and does not perform screenshot-based visual acceptance.

Trigger Conditions

Use this skill when:

• Codex has produced or modified frontend implementation
• implementation is ready for code-level review
• visual acceptance has not yet started
• the user asks to check whether implementation complies with visual specs
• the user asks to review UI implementation against tokens, component tree, or design system

Required Inputs

Read implementation code:

src/
app/
components/
styles/
package.json
tailwind.config.*
vite.config.*
next.config.*
playwright.config.*

Actual project paths may vary.

Read UI workflow files:

ui/03_visual_spec/
  visual-analysis.md
  layout-spec.md
  component-tree.md
  DESIGN.md
  tokens.json
  implementation-risks.md
  human-review-needed.md
 
ui/04_visual_spec_review/
  spec-review-report.md
  conflict-log.md
  revised-files-needed.md
 
ui/05_design_system/
  MASTER.md
  pages/target-page.md
  ux-checklist.md
  component-state-spec.md
  responsive-spec.md
  accessibility-spec.md
  implementation-constraints.md

Recommended OpenSpec files:

proposal.md
spec.md
design.md
tasks.md
change-summary.md

Preflight

If ui/04_visual_spec_review/spec-review-report.md says Fail, stop and output a blocked compliance report.

Do not audit implementation against failed visual specs.

Source of Truth

1. PRD / OpenSpec spec.md
2. reference.png
3. visual-analysis.md / UI Type Classification
4. layout-spec.md / Layout Paradigm
5. implementation-risks.md / Asset Strategy
6. component-tree.md
7. tokens.json
8. 05_design_system/
9. OpenSpec design.md and tasks.md
10. Implementation code

Main Workflow

1. Run preflight.
2. Read UI Type, Layout Paradigm, Asset Strategy, Rejected Assumptions, Forbidden Layouts, and Prohibited Components.
3. Scan implementation files for token usage.
4. Compare component structure against component-tree.md.
5. Check UI Type / Layout Paradigm / Asset Strategy preservation.
6. Check design-system states.
7. Check responsive behavior from code and config.
8. Check accessibility implementation.
9. Check OpenSpec design/tasks compliance.
10. Produce reports under 06_spec_review/.

Hard Rules

• Do not modify code.
• Do not modify visual spec files.
• Do not modify design system files.
• Do not modify OpenSpec files.
• Do not perform screenshot visual acceptance.
• Do not treat passing tests as sufficient.
• Do not treat internal spec consistency as sufficient.
• Do not override source / strictness labels.
• Do not let generic web guidelines override project-specific visual contract.
• If implementation changes UI Type, Layout Paradigm, or Asset Strategy, mark as error.
• If implementation adds Prohibited Components or Forbidden Layouts, mark as error.

Output

Write:

06_spec_review/
  compliance-report.md
  violation-list.json
  source-traceability-report.md
  forbidden-regression-report.md
  recommended-fixes.md

Supporting Files

Read these references directly:

• references/compliance-workflow.md
• references/review-checklists.md
• references/token-compliance-rules.md
• references/ui-type-layout-asset-rules.md
• references/component-state-responsive-a11y-rules.md
• references/openspec-compliance-rules.md
• references/violation-schema.md
• references/severity-rules.md
• references/external-quality-gates.md
• references/output-files.md

Examples:

• examples/compliance-report.example.md
• examples/violation-list.example.json
• examples/source-traceability-report.example.md
• examples/forbidden-regression-report.example.md
• examples/recommended-fixes.example.md