frontend-design-extractor
Installation
SKILL.md
Frontend Design Extractor
Overview
Extract a reusable UI/UX design spec from a frontend codebase by inventorying UI sources, documenting foundations, cataloging components, and capturing page-level patterns and behaviors. Exclude business logic and domain-specific workflows. Framework-agnostic: adapt to the actual stack in the target repo.
Quick start
- Confirm mode: new project (greenfield) or refactor existing. Clarify that business logic is out of scope.
- If existing repo: run
scripts/scan_ui_sources.shto scan the repo root (no directory layout assumptions). It uses common globs + keyword hits, and ignores common build/cache dirs and extraction output folders by default. - Optionally:
scripts/scan_ui_sources.sh <repo_root> [out_file] [extra_glob ...]or--root/--out/--ignorefor nonstandard layouts. - Create the output folder (default
./ui-ux-spec) viascripts/generate_output_skeleton.shand write all extraction results inside it. - Produce outputs in the default structure (see "Output structure").
Modes (choose one)
A) Greenfield (from blank)
Goal: create a reusable UI/UX foundation and starter UI without business logic.
Related skills