por Juanjo LunaDiseñar componentes web reutilizables
Te ayuda a crear componentes de interfaz en React, Vue o Svelte con patrones reutilizables. Sirve cuando construyes bibliotecas de componentes, defines APIs de UI o montas un sistema de diseño frontend.
Descripción original (inglés)
web-component-design: Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
Cómo instalarla
Una skill es una carpeta con un fichero SKILL.md. Para instalarla basta con copiar la carpeta web-component-design en el sitio donde tu agente busca sus skills.
- Sin terminal: abre la carpeta en GitHub, descárgala y cópiala en la carpeta de tu agente (tabla de abajo).
- Con terminal (macOS, Linux o Git Bash en Windows): elige tu agente y copia los comandos.
git clone --depth 1 https://github.com/wshobson/agents.git /tmp/skill-src
mkdir -p ~/.claude/skills
cp -r "/tmp/skill-src/plugins/ui-design/skills/web-component-design" ~/.claude/skills/web-component-design
rm -rf /tmp/skill-src| Agente | Para todos tus proyectos | Solo un proyecto |
|---|---|---|
| Claude Code | ~/.claude/skills | .claude/skills |
| GitHub Copilot | ~/.copilot/skills | .github/skills |
| Codex | ~/.agents/skills | .agents/skills |
| Gemini CLI | ~/.gemini/skills | .gemini/skills |
Muchos agentes leen también .agents/skills. Reinicia el agente después de instalar. Antes de instalar una skill, revisa su SKILL.md y los scripts que incluya: se ejecutan con tus permisos.
Más skills de wshobson/agents
- Crear interfaces accesibles accessibility-compliance
- Detectar deuda técnica de IA ai-debt-detector
- Migrar de AngularJS a Angular angular-migration
- Técnicas anti-reversing anti-reversing-techniques
- Diseñar APIs REST y GraphQL api-design-principles
- Documentar decisiones técnicas architecture-decision-records
- Patrones de arquitectura backend architecture-patterns
- Programar con asyncio en Python async-python-patterns
Explicación redactada con ayuda de IA a partir de la descripción original.