---

name: review-frontend description: Reviews and updates frontend.md documentation to strictly follow frontend architecture rules and ensure simplicity. Typically runs automatically after frontend-architect in the /feature workflow. context: fork agent: general-purpose allowed-tools: Task, Read, Write, Glob user-invocable: true

Review Frontend Architecture Documentation

This skill invokes the frontend-reviewer agent to review and update the frontend.md architecture document, ensuring it strictly follows project rules and stays simple.

When to Use This

This skill typically runs automatically during the /feature workflow after the frontend-architect generates frontend.md.

You can also run it manually to re-review documentation:

Copy/review-frontend payment-processing

Workflow Steps

Step 1: Get Feature Name

If provided with the command:

Copy/review-frontend payment-processing

If not provided:

1. Check recent feature directories
2. Ask the user which feature to review

Step 2: Verify Documentation Exists

Check that both documents exist:

• docs/features/<feature-name>/specs.md
• docs/features/<feature-name>/frontend.md

If missing:

• Report the issue
• Instruct user to run /feature <feature-name> first
• Do not proceed

Step 3: Invoke Frontend Documentation Reviewer Agent

Use the Task tool to invoke the frontend-reviewer agent:

CopyTask tool with:
- subagent_type: general-purpose
- description: "Review frontend documentation for <feature-name>"
- prompt: "You are now acting as the frontend-reviewer agent.

Read the agent instructions at .claude/agents/frontend-reviewer.md and follow them precisely.

The feature is '<feature-name>'.

Your task:
1. Read CLAUDE.md, docs/ai-rules/frontend.md, and docs/ai-rules/clean-code.md
2. Read docs/features/<feature-name>/specs.md to understand requirements
3. Read docs/features/<feature-name>/frontend.md - the document to review
4. Use Glob to explore existing patterns in the codebase
5. Review frontend.md against strict architecture rules:
   - Single-action controllers ONLY (no resource controllers)
   - Inertia.js ONLY (no axios/fetch)
   - shadcn/ui components ONLY (no custom UI)
   - TypeScript interfaces for all props
   - Simplicity over complexity (no over-engineering)
6. UPDATE frontend.md directly to fix all violations
7. Report summary of changes made

Begin by reading the project rules and specs."

Wait for the agent to complete.

Step 4: Report Success

After the agent completes, relay its summary to the user.

Example output:

CopyFrontend architecture review complete for '<feature-name>'.

Updated: docs/features/<feature-name>/frontend.md

Changes applied:
  ✓ Replaced FeatureController with 3 single-action controllers
  ✓ Removed custom Button component, using shadcn/ui Button
  ✓ Simplified form submission to use Inertia router
  ✓ Added complete TypeScript interfaces for all pages

Architecture compliance:
✓ Single-action controllers only
✓ Inertia.js for all server communication
✓ shadcn/ui components exclusively
✓ TypeScript interfaces complete
✓ Simple, focused implementation

The documentation now strictly follows project rules and is ready for implementation.

Error Handling

Missing Documents

If specs.md or frontend.md don't exist:

CopyError: Required documentation not found.

Missing: docs/features/<feature-name>/[specs.md|frontend.md]

Please run: /feature <feature-name>

This will generate all architecture documents.

Feature Name Not Provided

If user doesn't provide feature name:

CopyWhich feature's frontend documentation would you like to review?

Recent features:
- payment-processing
- user-notifications

Specify: /review-frontend <feature-name>

Success Criteria

The workflow succeeds when:

• specs.md and frontend.md verified to exist
• frontend-reviewer agent invoked
• frontend.md updated with rule-compliant architecture
• Summary of changes reported to user

Tone & Style

• Be clear about changes made
• Show what violations were fixed
• Confirm architecture compliance
• Keep messages concise and actionable

Your role is to ensure the frontend documentation strictly follows Inertia.js/React patterns, uses shadcn/ui exclusively, and maintains simplicity before implementation begins.