skills.rest
shinpr
shinprCOMMUNITY
Explore all skills by this author →
Website𝕏@shinpr_pGitHub

recipe-front-plan

Plan frontend implementation steps and test skeletons from design documents.

29|4|Updated Mar 17, 2026
Search Tags:#design-docs#work-plans#test-skeletons#ui-planning#frontend-planning
One-click install
npx skills add https://github.com/shinpr/codex-workflows --skill recipe-front-plan-shinpr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: recipe-front-plan
Source: https://github.com/shinpr/codex-workflows/tree/main/.agents/skills/recipe-front-plan
Command: npx skills add https://github.com/shinpr/codex-workflows --skill recipe-front-plan-shinpr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts frontend design documents into a concrete, executable work plan with test skeletons, reducing back-and-forth and ensuring traceability from design to implementation.

Core Features & Use Cases

  • Design document selection and prioritization
  • Test skeleton generation for frontend work
  • Work plan creation with structured review workflow
  • Work plan review with traceability to the Design Doc and UI spec
  • Plan approval workflow and handoff to implementation

Quick Start

Provide a frontend design document and I will generate a complete work plan with test skeletons.

Frequently Asked Questions about recipe-front-plan

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

FAQPage Schema
How do I convert a frontend design doc into a structured work plan?▼

Turning a frontend design doc into a work plan requires placing the document in docs/design/. The tool then generates a structured work plan with traceable implementation steps and test skeletons for UI planning.

What is the best way to generate test skeletons from UI planning documents?▼

Generating test skeletons from UI planning documents is done by translating design specs into a structured work plan. This decomposes frontend tasks while maintaining direct traceability to the design doc.

Do I need a specific directory structure for frontend planning and task decomposition?▼

Yes, frontend planning requires design documents to be located in the docs/design/ directory. This specific file path is necessary to parse the UI spec and generate the structured work plan.

Can I review the work plan traceability before starting frontend implementation?▼

Yes, you can review work plan traceability before implementation. The process includes a structured review workflow mapping implementation steps and test skeletons directly back to the design doc and UI spec.

What are the limitations of design-to-implementation workflows for frontend projects?▼

Limitations of design-to-implementation workflows include a strict dependency on having pre-existing design documents in docs/design/. Without a structured UI spec, task decomposition and test skeleton generation cannot proceed.

Related Skills

Explore More Software Engineering Skills→
darsoohoodarsoohoo

recipe-front-plan

Generate frontend work plans and test skeletons from design documents.

Community
Advanced
photonics-dhlphotonics-dhl

writing-plans

Convert project requirements into a task-level implementation plan with file paths, code skeletons, and tests.

Community
Advanced
OKHP3OKHP3
2

okhp3-foundry-repo-creator

Convert AI-driven assets and ideas into standardized GitHub repositories.

Community
Advanced
MileniumTickMileniumTick

sdd-tasks

Break down specifications into phased, dependency-aware task plans.

Community
Advanced