Agent skill · design visual · sundial-org
frontend-design-extractor
Extract reusable UI/UX design systems from frontend codebases: design tokens, global styles, components, interaction patterns, and page templates. Use when analyzing any frontend repo (React/Vue/Angular/Next/Vite/etc.) to document or migrate UI/UX for reuse across projects. Focus on UI/UX only; explicitly ignore business logic and domain workflows.
Why this skill is useful
Provides a structured approach to extracting and documenting UI/UX design systems from various frontend frameworks, which the AI wouldn't reliably generate on its own.
What it needs
Requires bash installed locally. About 4k tokens when loaded. Last updated 2026-03-07. 639 stars on the source repository.
What this skill does
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/scanuisources.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/scanuisources.sh <reporoot> [outfile] [extraglob ...] or --root/--out/--ignore for nonstandard layouts. 4) Create the output folder (default ./ui-ux-spec) via scripts/generateoutputskeleton.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. 1) Define foundations: tokens (color/typography/spacing/radius/shadow/motion), global styles, breakpoints, layout shell. 2) Create a baseline component set: Button, Input, Select, Card, Modal, Table/List, Tabs, Toast, EmptyState. 3) Create page templates: list/detail/form/dashboard skeletons with placeholder data. 4) Provide implementation notes for the target framework (CSS architecture, theming mechanism, file structure). 5) Optionally run scripts/generateoutputskeleton.sh [outroot] to scaffold folders and empty templates. Default output root is ./ui-ux-spec. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sundial-org/frontend-design-extractor