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

  1. Confirm mode: new project (greenfield) or refactor existing. Clarify that business logic is out of scope.
  2. If existing repo: run scripts/scan_ui_sources.sh to 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.
  3. Optionally: scripts/scan_ui_sources.sh <repo_root> [out_file] [extra_glob ...] or --root/--out/--ignore for nonstandard layouts.
  4. Create the output folder (default ./ui-ux-spec) via scripts/generate_output_skeleton.sh and write all extraction results inside it.
  5. 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
Installs
14
GitHub Stars
2
First Seen
Jan 28, 2026