La importancia de los skills en herramientas como Opencode
Cuando usas un agente de IA como Opencode, la diferencia entre un resultado genérico y uno realmente bueno casi nunca está en el modelo: está en las instrucciones que le das. Los skills son exactamente eso: paquetes de instrucciones especializadas que le enseñan al agente cómo abordar una tarea concreta, antes de que escriba una sola línea.
Qué es un skill
Un skill es un conjunto de instrucciones y contexto que se activa según la tarea. En lugar de decirle al modelo "hazme una página web bonita", un skill de diseño le indica cosas como:
- qué paleta usar y por qué
- cómo estructurar la tipografía y la escala
- qué patrones de layout funcionan y cuáles son clichés que evitar
- cómo manejar animación, accesibilidad y responsive
El resultado es que el agente no decide el estilo desde cero cada vez: lo decide siguiendo un criterio consistente.
El experimento
Para comprobarlo, generé tres veces la misma página con el mismo prompt base y el mismo modelo, pero activando tres skills distintos: frontend-skill, getDesign-skill y ui-ux-pro-ultimate. El resto de variables quedaron igual.
El prompt fue exactamente este:
I want to create a splash page for a dental bussiness
Solo eso. Sin especificaciones de estilo, paleta ni estructura. Toda la diferencia en los resultados proviene de las instrucciones que cada skill añade al prompt.
Con frontend-skill
El resultado más pulido a nivel visual. Un sistema de diseño completo y coherente: paleta de papel y verde azulado, tipografía con tres familias (Sora para títulos, Inter para texto, JetBrains Mono para etiquetas) y una animación de "sonrisa" dibujada en SVG que le da una personalidad clara. Todo en un solo archivo HTML autocontenido, con validación de formulario funcional y soporte para prefers-reduced-motion.
Con getDesign-skill
Este skill no solo produce el sitio: primero entrega un documento de diseño (DESIGN.md) con el análisis de marca, paleta, escala tipográfica y sistema de espaciado. En esta prueba se usó la versión Ferrari: el documento de diseño parte de un análisis de la marca Ferrari (lienzo casi negro, el rojo Rosso Corsa como acento único y una estética cinematográfica y editorial). La página resultante tiene más profundidad de contenido: una franja de especificaciones clínicas, una sección de "anatomía de la sonrisa" y equipo con fotografías reales. El tono es más editorial y el archivo está dividido en HTML, CSS y JS por separado.
Con ui-ux-pro-ultimate
El enfoque más centrado en UX y accesibilidad. Incluye skip links, estados de foco visibles, ARIA en los controles, una mascota de diente animada con burbujas de valoración y un header pegajoso con estado al hacer scroll. El sitio se siente más como un producto con identidad de marca que como una página decorativa.
Comparativa
| Skill | Enfoque | Archivos | Puntos fuertes |
|---|---|---|---|
| frontend-skill | Visual / sistema de diseño | 1 archivo autocontenido | Coherencia estética, animación, pulido |
| getDesign-skill | Documentación + editorial | DESIGN.md + HTML/CSS/JS | Profundidad de contenido, análisis de marca |
| ui-ux-pro-ultimate | UX / accesibilidad | 1 archivo autocontenido | Accesibilidad, interacción, foco en el usuario |
Conclusión
El modelo es el mismo en los tres casos; lo que cambió fue el criterio que recibió. Un skill no hace el trabajo por ti, pero sí decide qué tipo de resultado quieres antes de empezar: una página con identidad visual fuerte, una con contenido editorial profundo o una pensada como producto accesible.
Si usas herramientas con agentes de IA, elegir (o escribir) buenos skills es tan importante como el prompt en sí. Es la diferencia entre pedir una página bonita y pedirla siguiendo un sistema, una y otra vez, con consistencia.