skills.rest
darsoohoo
darsoohooCOMMUNITY
Explore all skills by this author →
GitHub

recipe-front-design

Analyze a codebase to generate UI specs, ADRs, and design documents.

Updated Jun 8, 2026
Search Tags:#adr#orchestrate#design-doc#frontend-design#codebase-analysis#ui-spec
One-click install
npx skills add https://github.com/darsoohoo/intake-bot --skill recipe-front-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: recipe-front-design
Source: https://github.com/darsoohoo/intake-bot/tree/main/.agents/skills/recipe-front-design
Command: npx skills add https://github.com/darsoohoo/intake-bot --skill recipe-front-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Coordinates end-to-end frontend design work by analyzing a codebase to produce UI specs, ADRs, and DesignDocs.

Core Features & Use Cases

  • Codebase analysis and seed bootstrap for frontend scope
  • UI fact gathering and UI specification creation
  • ADR and Design Doc generation with trade-off analysis
  • External resource hearing and design validation

Quick Start

Run recipe-front-design to generate a frontend design scope, UI spec, and ADR for the target codebase.

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 frontend design docs from an existing codebase?▼

To generate frontend design docs from a codebase, you can run this skill to analyze your source code and orchestrate the creation of UI specs, ADRs, and design notes automatically.

What is the process for turning codebase analysis into a UI specification?▼

Turning codebase analysis into a UI specification involves bootstrapping the frontend scope, gathering UI facts from the source code, and validating external resources to produce the final specification.

Can I use this to create ADRs for a frontend redesign?▼

Yes, you can create ADRs for a frontend redesign by applying this skill to your feature team's codebase, which generates architecture decision records with built-in trade-off analysis.

Does this skill handle end-to-end UI specification or just codebase analysis?▼

This skill handles end-to-end UI specification by coordinating the entire workflow, spanning scope bootstrap, codebase analysis, UI fact gathering, and final design document creation.

What's the best way to document UI surfaces for new feature teams?▼

The best way to document UI surfaces for new feature teams is to orchestrate end-to-end frontend design documentation, guiding scope, artifacts, and validation across codebase, UX, and architecture.

When do I need to generate multiple design document alternatives for a frontend project?▼

You need to generate multiple design document alternatives when performing frontend redesigns or building new UI surfaces, allowing your feature team to evaluate trade-offs across architecture and UX options.

Related Skills

Explore More Design & Creative Skills→
darsoohoodarsoohoo

recipe-design

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

Community
Advanced
zangjeicyzangjeicy

design-md

Lint and export Google DESIGN.md design tokens to Tailwind theme JSON.

Community
Intermediate
darsoohoodarsoohoo

recipe-front-adjust

Coordinate external-resource context and verification workflows to adjust frontend UI components.

Community
Advanced
darsoohoodarsoohoo

recipe-reverse-engineer

Generate PRD and Design Docs from an existing codebase.

Community
Advanced