Agent Skills para Desarrollo web

Despliega, gestiona, inspecciona y soluciona problemas de proyectos de Vercel desde el CLI, abarcando despliegues, variables de entorno, dominios, logs, métricas y Core Web Vitals.

por vercel/vercel

• Release

Crea, configura y despliega Azure Static Web Apps usando el SWA CLI, incluyendo emulación local, staticwebapp.config.json, Functions APIs y CI/CD con GitHub Actions.

por github/awesome-copilot

• Implementation
• Release

Guía la creación de aplicaciones full-stack con AWS Blocks, un framework de Infrastructure-from-Code que abarca APIs, almacenamiento, autenticación, tiempo real y despliegue.

por aws/agent-toolkit-for-aws

• Design
• Implementation
• Release

Automatización experta de navegador, depuración y análisis de rendimiento usando Chrome DevTools MCP: navegación, capturas de pantalla, inspección de red y perfilado de rendimiento.

por github/awesome-copilot

CLI de automatización de navegador para agents de IA: navegar páginas, rellenar formularios, hacer clic, capturar pantallas, extraer datos y probar aplicaciones web vía CDP.

por vercel-labs/agent-browser

• Testing

Hace que una app web se sienta nativa en teléfonos: corrige hover pegajoso, resaltados al tocar, errores de 100vh, zoom en inputs, áreas seguras e interacciones táctiles con CSS y meta etiquetas.

por emilkowalski/skills

Implementa sistemas de tipos avanzados de TypeScript, guardas de tipo personalizadas, tipos de utilidad, tipos branded y tRPC para seguridad de tipos de extremo a extremo.

por jeffallan/claude-skills

• Design
• Implementation

妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用协作者与协作权限设置、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要开发/新建一个系统·工具·平台·应用，或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接，或用 HTML 做页面·网站·部署到妙搭，或要设计 / design / mockup / prototype / wireframe / 做 PPT / deck / 视觉探索，或提到妙搭/Spark/Miaoda（应用运行时域名形如 *.aiforce.cloud）、应用数据库、应用文件存储、开放 API Key、可见范围、应用协作者/开发权限、应用角色/角色成员、线上日志、接口请求量、错误量、延迟、访问量、环境变量、给妙搭应用配自动化任务/定时触发/审批通过后自动触发时使用。不负责普通云盘文件上传（lark-drive）、飞书文档编辑（lark-doc）、原生幻灯片创建（lark-slides）。

por larksuite/cli

Establece el listón de calidad de un proyecto como un contrato escrito CONSTRAINTS.md con umbrales de cobertura, rendimiento y accesibilidad, y vigila los diffs en busca de comprobaciones debilitadas.

por addyosmani/agent-skills

Coordina el desarrollo paralelo de funcionalidades con estrategias de propiedad de archivos, evitación de conflictos, contratos de interfaz y patrones de integración para implementación multiagente.

por wshobson/agents

• Implementation

Guía las decisiones de integración de Stripe en la planificación de entornos de desarrollo y prueba (sandboxes separados vs el sandbox compartido de modo test), selección de API (Checkout Sessions vs PaymentIntents), configuración de la plataforma Connect (Accounts v2, propiedades del controller), facturación/suscripciones, impuestos y registros (Stripe Tax, automatic_tax, códigos de impuesto de producto), cuentas financieras de Treasury, opciones de integración (Checkout, Payment Element), migración desde APIs de Stripe obsoletas y mejores prácticas de seguridad (gestión de claves de API, permisos de claves de API, webhooks, OAuth). Úsalo al planificar, construir, modificar, probar o revisar cualquier integración de Stripe, incluida la elección de un entorno de desarrollo, la aceptación de pagos, la creación de marketplaces, la integración de Stripe, el procesamiento de pagos, la configuración de suscripciones, la recaudación de impuestos sobre ventas, IVA o GST, la creación de cuentas conectadas o la implementación de manejo seguro de claves.

por stripe/ai

Opera GitHub a través del CLI gh-axi: issues, pull requests, discusiones, PRs apilados, ejecuciones de workflow, releases y Projects.

por kunchenguid/gh-axi

Diseña pantallas de UI de aplicaciones móviles mediante la API de Sleek, creando proyectos y pantallas renderizadas a partir de descripciones en lenguaje natural, y luego implementándolas en HTML, React Native o SwiftUI.

por designed-by-ai/skills

Necesita (declarado): API key · Paid account

Construye, revisa, refactoriza o diseña aplicaciones web ASP.NET Core usando la guía oficial actual para el desarrollo web con .NET. Úsalo cuando trabajes en Blazor Web Apps, Razor Pages, MVC, Minimal APIs, Web APIs basadas en controladores, SignalR, gRPC, middleware, inyección de dependencias, configuración, autenticación, autorización, pruebas, rendimiento, despliegue o actualizaciones de ASP.NET Core.

por openai/skills

• Implementation

DEBE usarse para tareas de Vue.js. Recomienda encarecidamente la Composition API con `<script setup>` y TypeScript como enfoque estándar. Cubre Vue 3, SSR, Volar, vue-tsc. Cárgala para cualquier trabajo con Vue, archivos .vue, Vue Router, Pinia o Vite con Vue. USA SIEMPRE la Composition API a menos que el proyecto requiera explícitamente la Options API.

por vuejs-ai/skills

• Design

Crea aplicaciones web full-stack centradas en seguridad implementando componentes frontend y backend integrados con seguridad por capas en todos los niveles. Cubre el stack completo desde la base de datos hasta la UI, aplicando auth, validación de entrada, codificación de salida y consultas parametrizadas en todas las capas. Úsala…

por jeffallan/claude-skills

• Requirements
• Design
• Implementation

Guía para un diseño visual distintivo e intencional al construir una nueva UI o remodelar una existente. Ayuda con la dirección estética, la tipografía y a tomar decisiones que no se lean como valores predeterminados de plantilla.

por anthropics/skills

• Implementation

Traduce diseños de Figma a código de aplicación listo para producción con fidelidad visual 1:1. Úsalo al implementar código de UI a partir de archivos de Figma, cuando el usuario mencione "implementar diseño", "generar código", "implementar componente", proporcione URLs de Figma o pida crear componentes que coincidan con las especificaciones de Figma. Para escrituras en el lienzo de Figma mediante `use_figma`, usa `figma-use`.

por openai/skills

• Implementation

Necesita (declarado): Node.js

> Revisa y crea interfaces frontend distintivas y de nivel producción con alta calidad de diseño y cumplimiento del sistema de diseño. Evalúa con tres pilares: insight-to-action sin fricción, artesanía de calidad y construcción confiable. USE FOR: revisiones de PR, revisiones de diseño, auditorías de accesibilidad, verificaciones de cumplimiento del sistema de diseño, diseño frontend creativo, revisión de código UI, revisiones de componentes, verificaciones de diseño responsivo, pruebas de temas y creación de UI memorable. DO NOT USE FOR: revisiones de API backend, revisiones de esquemas de base de datos, trabajo de infraestructura o DevOps, lógica de negocio pura sin UI o código no frontend.

por microsoft/skills

• Requirements
• Implementation

Úsalo para pruebas de Vue.js. Cubre Vitest, Vue Test Utils, pruebas de componentes, mocking, patrones de prueba y Playwright para pruebas E2E.

por vuejs-ai/skills

Revisa el código de UI para el cumplimiento de las Web Interface Guidelines. Úsalo cuando te pidan "review my UI", "check accessibility", "audit design", "review UX" o "check my site against best practices".

por vercel-labs/agent-skills

Kit de herramientas para interactuar con aplicaciones web locales y probarlas usando Playwright. Permite verificar la funcionalidad frontend, depurar el comportamiento de la UI, capturar pantallas del navegador y ver los registros del navegador.

por anthropics/skills

• Implementation

Crea sistemas de diseño escalables con Tailwind CSS v4, tokens de diseño, bibliotecas de componentes y patrones responsivos. Úsalo al crear bibliotecas de componentes, implementar sistemas de diseño o estandarizar patrones de UI.

por wshobson/agents

Usa este skill cuando desarrolles, diseñes, construyas, despliegues, depures, migres o soluciones problemas de proyectos CloudBase (腾讯云开发, 云开发, TCB, 微信云开发) — Web, 微信小程序, 小程序, uni-app, móvil (iOS, Android, Flutter, React Native). Cubre UI (页面, 界面, 表单, dashboard, prototype, 原型); auth (登录, 注册, OAuth, publishable key);…

por tencentcloudbase/cloudbase-skills

• Requirements
• Implementation
• Release

Necesita (declarado): Credentials

Automatización de navegador guiada por visión usando Midscene. Opera desde capturas de pantalla — sin necesidad de DOM ni etiquetas de accesibilidad. Se ejecuta en Puppeteer headless — NO toma el control del ratón ni del teclado del usuario. También admite modo CDP y modo Bridge para conectarse a un Chrome existente. Usa este skill cuando el usuario…

por web-infra-dev/midscene-skills

• Implementation
• Testing

Convenciones de diseño estilo antfu, ampliadas. UnoCSS-first, tokens semánticos basados en clases con modo claro/oscuro dual para UIs de tooling y devtools, además de design-read, anti-slop y pulido de micro-interacciones para landing pages y superficies de producto. Úsalo al construir o refactorizar cualquier interfaz con UnoCSS.

por antfu/skills

Guía el diseño estable de API e interfaces. Úsalo al diseñar APIs, límites de módulos o cualquier interfaz pública. Úsalo al crear endpoints REST o GraphQL, definir contratos de tipos entre módulos o establecer límites entre frontend y backend.

por addyosmani/agent-skills

• Implementation

Úsalo al implementar cualquier funcionalidad o corrección de errores, antes de escribir el código de implementación

por obra/superpowers

• Requirements
• Implementation

Ejecuta pruebas de Playwright a escala usando Azure Playwright Workspaces (antes Microsoft Playwright Testing). Úsalo al escalar pruebas de navegador en navegadores alojados en la nube, integrar con pipelines de CI/CD o publicar resultados de pruebas en el portal de Azure.

por microsoft/skills

• Requirements
• Release

Genera reglas personalizadas de sistema de diseño para el código base del usuario. Úsala cuando el usuario diga "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines" o quiera establecer convenciones específicas del proyecto para flujos de trabajo de Figma a código. Requiere conexión con el servidor MCP de Figma.

por openai/skills

• Design

Necesita (declarado): MCP server

Usa esta skill junto con figma-use cuando la tarea implique trasladar una página, vista o diseño de varias secciones de una aplicación a Figma. Disparadores: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. Esta es la skill de flujo de trabajo preferida siempre que el usuario quiera crear o actualizar una página, pantalla o vista completa en Figma a partir de código o una descripción. Descubre componentes, variables y estilos del sistema de diseño mediante search_design_system, los importa y ensambla pantallas de forma incremental sección por sección usando tokens del sistema de diseño en lugar de valores codificados.

por openai/skills

• Implementation

Convierte especificaciones de Notion en planes de implementación, tareas y seguimiento del progreso; úsalo al implementar PRDs/especificaciones de funcionalidades y crear planes + tareas de Notion a partir de ellas.

por openai/skills

• Requirements

Extrae un archivo de documentación de diseño DESIGN.md desde un archivo Penpot: una especificación markdown portátil (frontmatter YAML con mapas de tokens de colores/tipografía/redondeo/espaciado/componentes + secciones en prosa: Overview, Colors, Typography, Layout, Shapes, Components, Do's & Don'ts, Iteration Guide, Known Gaps) en el formato design-md, basada en los tokens reales del archivo, los recursos de la biblioteca y los estilos de componentes muestreados — nunca inventados. Solo lectura en el lienzo; escribe un archivo markdown local. Disparadores: 'generate DESIGN.md', 'create a design.md', 'document the design system as markdown', 'export design guidelines', 'extract design documentation', 'design system spec file', 'make a style guide file from this design'.

por penpot/penpot-ai-kit

Revisa un diseño de Penpot frente a su código implementado (un componente fuente o una historia de Storybook) y emite un informe DRIFT estructurado. Úsalo cuando un ingeniero necesite confirmar que la implementación coincide con el diseño: extrae HTML/CSS de una selección, mapea sus tokens/estructura/estados al componente de código, los compara y enumera lo que le falta a cada lado con severidad y una reconciliación. Se degrada con elegancia a una comprobación de tokens del sistema de diseño cuando no se proporciona una fuente de código. Disparadores: 'design to code review', 'does my code match the design', 'design code parity', 'compare Penpot to my component', 'check this against Storybook', 'extract HTML/CSS from this selection', 'find design drift', 'design implementation diff'.

por penpot/penpot-ai-kit

Crea, prueba y despliega apps y agentes de Microsoft 365 para Teams y Copilot. Incluye sub-skills para creación de proyectos, pruebas locales, despliegue en la nube, solución de problemas y migración de Slack a Teams. USE FOR: Teams agent, bot, tab, message extension, Declarative Agents, Custom Engine Agents, local testing, Agents Playground, Azure resource provision, remote deployment, Slack to Teams migration, cross-platform bot development, Block Kit to Adaptive Cards conversion. DO NOT USE FOR: general web development, non-bot/non-Teams projects.

por microsoft/skills

• Release

Úsalo cuando la implementación esté completa, todas las pruebas pasen y necesites decidir cómo integrar el trabajo

por obra/superpowers

Fundamenta cada decisión de implementación en la documentación oficial. Úsalo cuando quieras verificar un enfoque contra los docs oficiales antes de implementarlo, o cuando quieras código autorizado y con fuentes citadas libre de patrones obsoletos. Úsalo al construir con cualquier framework o librería donde la corrección importe.

por addyosmani/agent-skills

• Requirements
• Implementation

Necesita (declarado): Python

Crea especificaciones antes de programar. Úsalo al iniciar un proyecto nuevo, una funcionalidad o un cambio significativo y cuando aún no exista una especificación. Úsalo al redactar un PRD o documento de requisitos con objetivos y alcance, o cuando los requisitos sean poco claros, ambiguos o solo existan como una idea vaga. Úsalo cuando un único requisito abarque varias capacidades verificables de forma independiente y necesite descomponerse en un mapa de capacidades de módulos antes de especificar.

por addyosmani/agent-skills

• Requirements
• Implementation