skills.rest
shinpr
shinprCOMMUNITY
Explore all skills by this author โ†’
Website๐•@shinpr_pGitHub

recipe-front-design

Orchestrate frontend design agents to produce ADRs and UI specs from a codebase.

29|4|Updated Mar 17, 2026
Search Tags:#architecture#documentation#frontend#review#design-doc#codebase-analysis#ui-spec
One-click install
npx skills add https://github.com/shinpr/codex-workflows --skill recipe-front-design-shinpr
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: recipe-front-design
Source: https://github.com/shinpr/codex-workflows/tree/main/.agents/skills/recipe-front-design
Command: npx skills add https://github.com/shinpr/codex-workflows --skill recipe-front-design-shinpr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend projects often require coordinating requirements, architecture choices, and UI decisions across multiple teams. This skill streamlines that process by orchestrating codebase analysis, scope confirmation, UI fact gathering, and documentation creation to produce ADRs and Design Docs.

Core Features & Use Cases

  • Orchestrates scope bootstrap from user requirements and seeds seed files for frontend analysis.
  • Analyzes the codebase to identify components, state paths, and data flows for UI surface planning.
  • Produces UI Spec and Design Doc artifacts, with review steps and stakeholder approvals.
  • Supports both ADR and Design Doc workflows and handles decision traceability across iterations.

Quick Start

Use this skill to initiate frontend design work from a codebase, guiding the team through analysis, documentation, and review steps.

Frequently Asked Questions about recipe-front-design

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

FAQPage Schema
How do I generate UI specs and ADRs from an existing frontend codebase?โ–ผ

To generate UI specs and ADRs from a frontend codebase, this skill orchestrates cross-functional agents to analyze components, state paths, and data flows, producing traceable design documents through stakeholder review workflows.

What is the best way to coordinate frontend architecture decisions across multiple teams?โ–ผ

Coordinating frontend architecture decisions across teams is handled by orchestrating scope bootstrap, codebase analysis, and stakeholder confirmation workflows to ensure decision traceability throughout the design process.

How do I trace UI decisions back to frontend codebase analysis?โ–ผ

Tracing UI decisions back to a frontend codebase analysis requires artifact-versioning and design document creation. This skill enforces review workflows that maintain decision traceability across iterations.

Can I use this skill to plan UI surfaces by analyzing state paths and data flows?โ–ผ

Yes, you can use this skill to plan UI surfaces. It analyzes the codebase to identify components, state paths, and data flows, then seeds files for frontend analysis and scope confirmation.

Does frontend design documentation require stakeholder approval before finalizing?โ–ผ

Frontend design documentation requires stakeholder approval. This skill enforces stakeholder confirmation and review workflows throughout the process, producing UI Spec and Design Doc artifacts with versioning.

Related Skills

Explore More Design & Creative Skillsโ†’
darsoohoodarsoohoo

recipe-design

Orchestrate codebase analysis, ADR creation, and design documentation workflows.

Community
Advanced
KentoShimizuKentoShimizu
7

figma-handoff

Generate engineering-ready handoff packages from approved Figma designs.

Community
Intermediate
kimjuyoung1127kimjuyoung1127

labeling-feature-add

Integrate modular annotation features into the labeling workspace dashboard workflow.

Community
Advanced
Tai-ch0802Tai-ch0802
2

architecture

Analyze architectural requirements, evaluate trade-offs, and document decisions with ADRs.

Community
Intermediate