agentskills

Programaciónplugin87/ux-ui-agent-skills★ 3.1k

Generar código de componentes UI

Crea código listo para usar de componentes o pantallas en frameworks como React, Vue, SwiftUI o Flutter. Sirve cuando necesitas una interfaz funcional, accesible y adaptada a una tecnología concreta.

Descripción original (inglés)

design-code: Generate production-ready, accessible, token-driven component code for ANY framework (React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS). Use when the user wants working UI code for a component or screen in a specific stack.

Cómo instalarla

Una skill es una carpeta con un fichero SKILL.md. Para instalarla basta con copiar la carpeta design-code en el sitio donde tu agente busca sus skills.

  1. Sin terminal: abre la carpeta en GitHub, descárgala y cópiala en la carpeta de tu agente (tabla de abajo).
  2. Con terminal (macOS, Linux o Git Bash en Windows): elige tu agente y copia los comandos.
Agente
Para
git clone --depth 1 https://github.com/plugin87/ux-ui-agent-skills.git /tmp/skill-src
mkdir -p ~/.claude/skills
cp -r "/tmp/skill-src/.claude/skills/design-code" ~/.claude/skills/design-code
rm -rf /tmp/skill-src
Carpetas de skills por agente
AgentePara todos tus proyectosSolo 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 plugin87/ux-ui-agent-skills

Explicación redactada con ayuda de IA a partir de la descripción original.