frontend-plan

Generate a frontend architecture plan from approved Ur-Plan and Backend-Plan documents.

Updated Apr 19, 2026

Search Tags:#planning #frontend #routing #design-system #ui-architecture #component-tree

Ready to run

npx skills add https://github.com/Tschonsen/spec-driven-claude-development --skill frontend-plan

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-plan
Source: https://github.com/Tschonsen/spec-driven-claude-development/tree/main/plugin/sdcd/skills/frontend-plan
Command: npx skills add https://github.com/Tschonsen/spec-driven-claude-development --skill frontend-plan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to align UI planning with upstream Ur-Plan and Backend-Plan, causing misaligned routes, components, and data flows. This Skill derives a cohesive Frontend-Plan from validated upstream plans to ensure architecture coherence and faster delivery.

Core Features & Use Cases

Load Ur-Plan.md, BACKEND_PLAN.md, and DESIGN_SYSTEM.md (if present); validate gaps and dependencies.
Draft design/FRONTEND_PLAN.md covering routes, component tree, state model, data fetching, forms, error handling, accessibility, and responsive considerations.
Dispatch Challenger quartet (security, performance, UX, accessibility) and synthesize a unified plan with a pause-and-review step.

Quick Start

Plan the frontend for a project by combining UR_PLAN.md and BACKEND_PLAN.md to generate design/FRONTEND_PLAN.md.

Frequently Asked Questions about frontend-plan

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I plan frontend architecture from upstream plans?▼

To plan frontend architecture from upstream plans, you derive a comprehensive frontend plan from approved Ur-Plan and Backend-Plan documents, ensuring alignment and traceability across routes, component trees, and data flows.

What is a frontend plan and what does it include?▼

A frontend plan is a comprehensive document detailing routes, component tree, state model, data fetching, forms, error handling, accessibility, and responsiveness, with all requirements tracing back to the API contract.

How do I align UI planning with backend API contracts?▼

You align UI planning with backend API contracts by reading the BACKEND_PLAN.md and deriving frontend requirements with strict traceability, ensuring all data fetching and state models match the validated upstream contract.

Do I need a design system file to plan frontend architecture?▼

You do not strictly need a design system file to plan frontend architecture, as the tool reads DESIGN_SYSTEM.md when present, but having it ensures strict design-system token references in the output.

What is the best way to ensure accessibility in frontend planning?▼

The best way to ensure accessibility in frontend planning is to derive the plan using a Challenger quartet that includes accessibility review, enforcing strict accessibility standards and design-system token references throughout the output.