home/skills/design/frontend-design-extractor

Frontend Design Extractor

ClawHub

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.

skillDesignui-designclawhubSource โ†’
frontenddesignextractorextractreusablesystemscodebasestokensglobalstyles
# 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.

## Discovery Metadata
- Category: `design`
- Framework: `ClawHub`
- Tags: `frontend`, `design`, `extractor`, `extract`, `reusable`, `systems`, `codebases`, `tokens`, `global`, `styles`

## Agent Execution Policy

This listing is **discovery metadata only**. Canonical instructions are maintained by ClawHub.

### Before Executing Actions

1. **Fetch canonical instructions** from: https://clawhub.ai/skill/frontend-design-extractor
2. **Parse the skill page** for setup, usage, and input/output requirements.
3. **Only proceed** after successfully loading and understanding the full instructions.

### If Fetch Fails

- Return `instruction_unavailable` with reason.
- Do **not** attempt to infer or improvise execution steps from this metadata alone.

## Source

- ClawHub listing: https://clawhub.ai/skill/frontend-design-extractor
๐Ÿงช Found this useful?
The $SKILL experiment is building the agent skill distribution layer. Every skill you discover through this directory is part of the experiment.