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

Ready to run

npx skills add https://github.com/darsoohoo/intake-bot --skill recipe-front-design

💬 Prompt for ChatGPT / Claude Chat▼

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.