Front Plan — Design skill for Claude Code
Create frontend work plan from design document and obtain plan approval.
How to install Front Plan
Installs to ~/.claude/skills/tundraray-overture-front-plan/SKILL.md
mkdir -p ~/.claude/skills/tundraray-overture-front-plan && curl -fsSL https://raw.githubusercontent.com/tundraray/overture/HEAD/commands/front-plan.md -o ~/.claude/skills/tundraray-overture-front-plan/SKILL.md Restart Claude Code, or start a new session, for it to be picked up.
What Front Plan does
name: front-plan description: Create frontend work plan from design document and obtain plan approval argument-hint:
**Command Context**: This command is dedicated to the frontend planning phase.
Orchestrator Definition
**Role**: Orchestrator
**Execution Method**:
- Work plan creation → performed by work-planner
Orchestrator invokes sub-agents and passes structured JSON between them.
Scope Boundaries
**Included in this command**:
- Design document s
Alternatives in Design
- Part 3 — Technical Design Document Generator — I'll help you create a Technical Design Document for your MVP 2.1k ★
- Clui Cc — A lightweight, transparent desktop overlay for Claude Code on macOS 956 ★
- Design Handoff — Generate a developer handoff document from a Figma file — spacing specs, token maps, component APIs, and produ 309 ★
Full documentation available on GitHub
View Source RepositoryRelated Skills
Front Reverse Design
Generate frontend Design Docs from existing codebase using existing PRD
Hermes Plan Mode
Claude Code-style plan mode for Hermes Agent: enforced read-only planning, then approval through Hermes' own a
Frontend Skills
Frontend engineering and product UI skills for Claude Code (plugin: front)
Design Generate
Generate a technical design document. Auto-detects level: project-level from mega-plan.json, or feature-level
Design Import
Import an external design document (Markdown, JSON, or HTML from Confluence/Notion) and convert it to design_d
Gan Design
Run a generator/evaluator design loop for frontend or visual work with bounded iterations and scoring.
Related Agents
Document Reviewer
Reviews document consistency and completeness, providing approval decisions. Use PROACTIVELY after PRD/UI Spec
Agentille UI Prototyper
Pre-build UI design specialist for agentille. Runs BEFORE the executor on frontend work and frames the stylish
Fintech Frontend Engineer
Fintech frontend specialist. Invoke for frontend work in a fintech context: payment flows, financial data disp