Skip to content
FunCoding

Search

Search docs, Skills and MCP

recipe-front-plan

Create frontend work plan from design document and obtain plan approval

前端开发692skills/recipe-front-plan/SKILL.md

Install

Send this to Claude Code, Codex or Cursor. The agent checks the Skill for safety first and installs it only after you confirm.

读取 https://funcoding.ai/skills/shinpr/claude-code-workflows/recipe-front-plan/install.md ,按里面的步骤帮我安装这个 Skill。

SKILL.md

Explicit User Instruction: The user explicitly instructs and authorizes every subagent call named in this recipe. Execute each applicable call when its prerequisites are met.

Execute Skill: llm-friendly-context before writing Agent prompts, handoffs, or generated artifacts. Execute Skill: subagents-orchestration-guide before making workflow decisions, invoking agents, or resolving findings.

Context: Dedicated to the frontend planning phase.

Orchestrator Definition

Core Identity: "I am an orchestrator." (see subagents-orchestration-guide skill)

Local authority gate: Make this recipe's workflow decisions and validate each returned result directly; delegate semantic deliverable production to the named specialist.

Review Resolution Gate [MANDATORY]: Resolve every actionable deliverable-review finding through subagents-orchestration-guide Review Resolution before correction or progression. Before the first finding disposition, read references/review-resolution.md from the loaded subagents-orchestration-guide skill.

Execution Protocol:

  1. Invoke named specialists for deliverable production — pass data between them and validate their results
  2. Follow subagents-orchestration-guide skill planning flow:
    • Execute steps defined below
    • Stop and obtain approval for plan content before completion
  3. Scope: See Scope Boundaries below

At each Agent invocation below, build the prompt as a mechanical extraction: copy the named source values into the exact fields, apply only the declared serialization, then invoke immediately.

Acceptance-test-generator is part of this planning flow and may return no selected lanes when the Design Doc has no justified integration/E2E proof boundary.

Scope Boundaries

Included in this skill:

  • Design document selection
  • Test skeleton generation with acceptance-test-generator
  • Work plan creation with work-planner
  • Work plan review with document-reviewer
  • Plan approval obtainment

Responsibility Boundary: This skill completes when the user authorizes implementation of the reviewed plan.

Follow the planning process below:

Execution Process

Step 1: Design Document Selection

  • Use the Design Doc explicitly supplied in $ARGUMENTS when present
  • Otherwise use the only Design Doc under docs/design/ when exactly one exists
  • Resolve the UI Spec only from the selected Design Doc's Referenced UI Spec path
  • Report when no Design Doc exists; when multiple Design Docs exist, present them for selection

Step 2: Test Skeleton Generation

  • Invoke acceptance-test-generator across all applicable lanes using Agent tool:
    • subagent_type: "dev-workflows-frontend:acceptance-test-generator"
    • description: "Test skeleton generation"
    • design_docs: [Design Doc path]
    • ui_spec: [UI Spec path] when one exists
    • confirmed_requirement_context: approved PRD path named by the Design Doc, or its unchanged Requirement Convergence record when no PRD exists
    • Follow subagents-orchestration-guide HC-06 for value_input_required and its unknown-value continuation
  • Pass every non-null generated skeleton path to work-planner; treat an evidence-backed empty lane as complete for that lane and continue to work-planner

Step 3: Work Plan Creation

Invoke work-planner using Agent tool:

  • subagent_type: "dev-workflows-frontend:work-planner"
  • description: "Work plan creation"
  • mode: create
  • designDoc: [selected Design Doc path]
  • uiSpec: [UI Spec path] when one exists
  • prd: [approved PRD path] when one exists
  • testSkeletons: [non-null generatedFiles paths]

Step 4: Work Plan Review

Invoke document-reviewer to review the work plan:

  • subagent_type: "dev-workflows-frontend:document-reviewer"
  • description: "Work plan review"
  • prompt: "doc_type: WorkPlan target: docs/plans/[plan-name].md. Review the Work Plan's own Implementation Scope, tasks, Completion Criteria, dependencies, execution order, exact source-anchor existence, executable verification, and Review Scope. Governing Documents paths are citation sources only; keep issues limited to violations of cited obligations."
  • Run the Review Resolution Gate through correction re-review, its parent requirement or authority exits, and convergence, using work-planner in update mode for rerouted corrections. Present the plan for approval only at its convergence condition.

Step 5: Present for Approval

  • Present the reviewed work plan to the user for batch approval. If the user requests changes, re-invoke work-planner with the user's requested changes verbatim and re-run Step 4.
  • Record unresolved technical evidence or external dependencies in the plan with their affected task and verification boundary. Return to the requirements gate only when confirmed outcome, desired-future requirements, and non-goals cannot all remain true without a user choice.

Response at Completion

Recommended: End with the following standard response after plan content approval

Frontend planning phase completed.
- Work plan: docs/plans/[plan-name].md
- Implementation authorization: granted for this task set

Please provide separate instructions for implementation.

When findings were declined during Work Plan review, append their IDs, governing reasons, and evidence to this completion response.

Similar Skills

frontend-design
anthropics/skills180k

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Frontend

web-artifacts-builder
anthropics/skills180k

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

Frontend

api-and-interface-design
addyosmani/agent-skills103k

api-and-interface-design

Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.

Frontend

frontend-ui-engineering
addyosmani/agent-skills103k

frontend-ui-engineering

Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.

Frontend

performance-optimization
addyosmani/agent-skills103k

performance-optimization

Optimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.

Frontend

html-ppt-graphify-dark-graph
nexu-io/open-design100k

html-ppt-graphify-dark-graph

OpenDesign's feature business case for the plugin marketplace: the user pain, options, tradeoffs, and the measure of success. Built as a decision-grade product management deck for PM, eng, design, leadership.

Frontend