Опишете задачата
Към всички skills

frontend-design-extractor

sundial-org · Дизайн

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; expl

Оригинален текст · няма потвърден превод на български
Платформи: ClaudeНиво: НапредналоВ индекса: 04.03.2026 г.Обновен в GitHub: 19.02.2026 г.

Първо прочетете инструкцията.

Файлът се зарежда от посочения източник само по ваше действие. Можете да го прочетете тук, да го копирате или да го запазите като .md.

Оригинален SKILL.md
GitHub хранилище
Звезди на репото
370
Лиценз
Не е посочен. Проверете в репозитория.
Последна проверка на записа
Няма посочена дата

Добавете в своя инструмент.

Командата отваря избора на skills от репозитория. Прочетете файла и условията на автора преди изпълнение.

npx skills add sundial-org/awesome-openclaw-skills

Страницата копира текст. Не инсталира и не изпълнява нищо на устройството ви.

Откъс от 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.

  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/generate_output_skeleton.sh [out_root] to scaffold folders and empty templates. Default output root is ./ui-ux-spec.

Deliverables:

  • Design tokens doc + global styles spec
  • Component catalog with variants/states/a11y
  • Page templates with layout rules
  • Engineering constraints (naming, CSS approach, theming)

B) Refactor existing project

Goal: extract current UI/UX, normalize tokens, and plan safe, incremental improvements.

  1. Inventory UI sources (scan script + manual inspection).
  2. Normalize tokens and map existing styles to them.
  3. Identify high-impact components/patterns for first pass.
  4. Plan migration with minimal diffs (wrappers, theme adapters, gradual replacement).
  5. Document behavioral and a11y gaps to fix progressively.

Целият SKILL.md в GitHub