Recipe Front Plan
shinpr/claude-code-workflowsCreate frontend work plan from design document and obtain plan approval
At a glance
This skill is for Coding and helps you create a frontend work plan from design, break down design into implementation tasks, and estimate frontend work from mockups.
/plugin marketplace add shinpr/claude-code-workflows
/plugin install recipe-front-plan
Setup, runtime and requirements describe shinpr/claude-code-workflows, the repo this skill ships in.
design-to-codeplanningEstimationapproval-workflowfrontendproject-management
Also in shinpr/claude-code-workflows
View the repoApplies language-agnostic and backend technical decision criteria, anti-pattern detection, debugging, and quality gates. Use when reviewing...
Language-agnostic coding principles for maintainability, readability, and quality. Use when implementing features, refactoring code, or revi...
Determines which of PRD, ADR, UI Spec, Design Doc, and Work Plan a change requires, and where each is stored. Use when deciding documentatio...
Records where resources outside the repository live (design source, design system, API schema, IaC source, secret store) and how design, imp...
Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates. Use when revie...
Implementation strategy selection framework. Use when planning implementation strategy, selecting development approach, or defining verifica...
Integration and E2E test design principles, ROI calculation, test skeleton specification, and review criteria. Use when designing integratio...
Clarifies inputs, outputs, success criteria, decisions, and unresolved conditions so downstream consumers can execute without guessing. Use...
Add integration/E2E tests to existing codebase using Design Docs
Execute materialized task files in autonomous execution mode
Execute from codebase-scoped analysis through optional ADR decisions to complete Design Doc approval
Investigate problem, verify findings, and derive solutions
Other Coding skills
Behavioral guidelines to reduce common LLM coding mistakes. Use when writing, reviewing, or refactoring code to avoid overcomplication, make...
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI be...
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-design...
Reference for the Claude API / Anthropic SDK — model ids, pricing, params, streaming, tool use, MCP, agents, caching, token counting, model...
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS,...
Create a detailed refactor plan with tiny commits via user interview, then file it as a GitHub issue. Use when user wants to plan a refactor...