skills.rest
Tschonsen
TschonsenCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Tschonsen/spec-driven-claude-development --skill frontend-plan
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
TschonsenTschonsen

design-system-plan

Generate design/DESIGN_SYSTEM.md from an approved Ur-Plan.

Community
Advanced
leocostaleocosta
4

frontend-patterns

Standardize React, Next.js, and Vue frontend architecture with centralized component and data flow guidelines.

Community
Intermediate
TwuanMinnTwuanMinn

parallel-agents

Coordinate multiple specialized agents to analyze a codebase and produce a unified report.

Community
Advanced
codewithpassioncodewithpassion

cwp:system-architect

Transform product requirements into architecture blueprints with API contracts and data models.

Community
Advanced