frontend-design-extractor
フロントエンド コードベースから再利用可能な UI/UX デザイン システム (デザイン トークン、グローバル スタイル、コンポーネント、インタラクション パターン、ページ テンプレート) を抽出します。フロントエンド リポジトリ (React/Vue/Angular/Next/Vite など) を分析して、プロジェクト間で再利用できるように UI/UX を文書化または移行するときに使用します。 UI/UX のみに焦点を当てます。ビジネス ロジックとドメイン ワークフローを明示的に無視します。
SKILL.md
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 [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.
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/xsir0/xsir-skills --skill frontend-design-extractor- カテゴリ
- </>開発ツール
- 認証済み
- —
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
frontend-design-extractor とは？
フロントエンド コードベースから再利用可能な UI/UX デザイン システム (デザイン トークン、グローバル スタイル、コンポーネント、インタラクション パターン、ページ テンプレート) を抽出します。フロントエンド リポジトリ (React/Vue/Angular/Next/Vite など) を分析して、プロジェクト間で再利用できるように UI/UX を文書化または移行するときに使用します。 UI/UX のみに焦点を当てます。ビジネス ロジックとドメイン ワークフローを明示的に無視します。 ソース: xsir0/xsir-skills。
frontend-design-extractor のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/xsir0/xsir-skills --skill frontend-design-extractor インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/xsir0/xsir-skills