# Spec Compliance Review

> This skill should be used after Codex implements a UI change and before visual acceptance review. It audits source code against project-specific visual specs, design tokens, component tree, design-system rules, OpenSpec implementation strategy, UI type, layout paradigm, and asset strategy. It reports violations without redesigning or modifying code.

- Skill: `jason904/spec-compliance-review` (Agent Skill, multi-file: 17 files)
- Install (CLI): `npx skillmds@latest add jason904/spec-compliance-review`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jason904/spec-compliance-review/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: jason904 (https://skillmd.com/u/jason904)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jason904/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:

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

Actual project paths may vary.

Read UI workflow files:

```text
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:

```text
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:

```text
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`