/recipe-front-design
Execute from codebase analysis to frontend design document creation
$ npx -y skills add shinpr/claude-code-workflows --skill recipe-front-design --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/recipe-front-design
Context preview
The summary Claude sees to decide when to auto-load this skill.
Execute from codebase analysis to frontend design document creation
Repeatable software development workflows for Claude Code that keep design decisions traceable through implementation, tests, and review. Each phase runs in a fresh agent context and hands off through explicit artifacts.
Repo: shinpr/claude-code-workflows
Other skills on claude-code-workflows.
- /ai-development-guide
Applies language-agnostic and backend technical decision criteria, anti-pattern detection, debugging, and quality gates. Use when reviewing general/backend implementation choices, code smells, failures, or implementation completeness.
Open skill - /coding-principles
Language-agnostic coding principles for maintainability, readability, and quality. Use when implementing features, refactoring code, or reviewing code quality.
Open skill - /documentation-criteria
Documentation creation criteria including PRD, ADR, Design Doc, and Work Plan requirements with templates. Use when creating or reviewing technical documents, or determining which documents are required.
Open skill - /external-resource-context
Captures and persists access methods for resources outside the repository (design source, design system, API schema, IaC source, secret store) so downstream work can reach them deterministically. Use when work depends on external resources, or when the user mentions design
Open skill - /frontend-ai-guide
Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates. Use when reviewing components, hooks, browser behavior, or frontend implementation completeness.
Open skill - /implementation-approach
Implementation strategy selection framework. Use when planning implementation strategy, selecting development approach, or defining verification criteria.
Open skill