frontend-design-extractor
Extraiga sistemas de diseño UI/UX reutilizables de bases de código frontend: tokens de diseño, estilos globales, componentes, patrones de interacción y plantillas de página. Úselo al analizar cualquier repositorio de frontend (React/Vue/Angular/Next/Vite/etc.) para documentar o migrar UI/UX para su reutilización en todos los proyectos. Centrarse únicamente en UI/UX; ignore explícitamente la lógica empresarial y los flujos de trabajo de dominio.
Instalación
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.
Datos (listos para citar)
Campos y comandos estables para citas de IA/búsqueda.
- Comando de instalación
npx skills add https://github.com/xsir0/xsir-skills --skill frontend-design-extractor- Fuente
- xsir0/xsir-skills
- Categoría
- </>Desarrollo
- Verificado
- —
- Primera vez visto
- 2026-02-01
- Actualizado
- 2026-02-18
Respuestas rápidas
¿Qué es frontend-design-extractor?
Extraiga sistemas de diseño UI/UX reutilizables de bases de código frontend: tokens de diseño, estilos globales, componentes, patrones de interacción y plantillas de página. Úselo al analizar cualquier repositorio de frontend (React/Vue/Angular/Next/Vite/etc.) para documentar o migrar UI/UX para su reutilización en todos los proyectos. Centrarse únicamente en UI/UX; ignore explícitamente la lógica empresarial y los flujos de trabajo de dominio. Fuente: xsir0/xsir-skills.
¿Cómo instalo frontend-design-extractor?
Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/xsir0/xsir-skills --skill frontend-design-extractor Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code o Cursor
¿Dónde está el repositorio de origen?
https://github.com/xsir0/xsir-skills
Detalles
- Categoría
- </>Desarrollo
- Fuente
- user
- Primera vez visto
- 2026-02-01