frontend-design-extractor
Extrayez des systèmes de conception UI/UX réutilisables à partir des bases de code frontend : jetons de conception, styles globaux, composants, modèles d'interaction et modèles de page. À utiliser lors de l'analyse de n'importe quel référentiel frontend (React/Vue/Angular/Next/Vite/etc.) pour documenter ou migrer l'UI/UX pour une réutilisation dans plusieurs projets. Concentrez-vous uniquement sur l'UI/UX ; ignorez explicitement la logique métier et les workflows de domaine.
Installation
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.
Faits (prêts à citer)
Champs et commandes stables pour les citations IA/recherche.
- Commande d'installation
npx skills add https://github.com/xsir0/xsir-skills --skill frontend-design-extractor- Source
- xsir0/xsir-skills
- Catégorie
- </>Développement
- Vérifié
- —
- Première apparition
- 2026-02-01
- Mis à jour
- 2026-02-18
Réponses rapides
Qu'est-ce que frontend-design-extractor ?
Extrayez des systèmes de conception UI/UX réutilisables à partir des bases de code frontend : jetons de conception, styles globaux, composants, modèles d'interaction et modèles de page. À utiliser lors de l'analyse de n'importe quel référentiel frontend (React/Vue/Angular/Next/Vite/etc.) pour documenter ou migrer l'UI/UX pour une réutilisation dans plusieurs projets. Concentrez-vous uniquement sur l'UI/UX ; ignorez explicitement la logique métier et les workflows de domaine. Source : xsir0/xsir-skills.
Comment installer frontend-design-extractor ?
Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/xsir0/xsir-skills --skill frontend-design-extractor Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code ou Cursor
Où se trouve le dépôt source ?
https://github.com/xsir0/xsir-skills
Détails
- Catégorie
- </>Développement
- Source
- user
- Première apparition
- 2026-02-01