OfficialProgramación y desarrollogithub.com

guias-de-diseno-web

Revisa código de UI para cumplir con las Guías de Interfaz Web. Úsalo cuando te lo soliciten.

¿Qué es guias-de-diseno-web?

Esta habilidad permite que un agente de IA revise archivos de código de interfaz de usuario para verificar su cumplimiento con las Guías de Interfaz Web. Es útil para desarrolladores y equipos que desean garantizar que su código siga las mejores prácticas y reglas establecidas para interfaces web, mejorando la consistencia y la calidad del producto final. La habilidad soporta agentes como Claude Code, Cursor o Codex, y funciona obteniendo las guías más recientes desde un repositorio de GitHub (vercel-labs/web-interface-guidelines), leyendo los archivos especificados por el usuario, aplicando todas las reglas de las guías y generando resultados en el formato compacto `archivo:línea`. Si el usuario no especifica archivos, el agente solicita los archivos a revisar.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines

Installed? Explore more Programación y desarrollo skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Guías de Interfaz Web

Revisa archivos para verificar su cumplimiento con las Guías de Interfaz Web.

Cómo Funciona

  1. Obtén las guías más recientes desde la URL de origen que se muestra a continuación
  2. Lee los archivos especificados (o solicita al usuario que indique archivos/patrón)
  3. Verifica contra todas las reglas de las guías obtenidas
  4. Muestra los hallazgos en el formato conciso archivo:línea

Origen de las Guías

Obtén las guías actualizadas antes de cada revisión:

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

Usa WebFetch para recuperar las reglas más recientes. El contenido obtenido contiene todas las reglas e instrucciones de formato de salida.

Uso

Cuando un usuario proporcione un archivo o un argumento de patrón:

  1. Obtén las guías desde la URL de origen anterior
  2. Lee los archivos especificados
  3. Aplica todas las reglas de las guías obtenidas
  4. Muestra los hallazgos usando el formato especificado en las guías

Si no se especifican archivos, pregunta al usuario qué archivos revisar.

Individual skills in this repo

This repo contains 11 individual skills — each has its own dedicated page.

deploy-to-vercel

Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".

vercel-cli-with-tokens

Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g.

vercel-composition-patterns

React composition patterns that scale. Use when refactoring components with

vercel-labs/vercel-composition-patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

vercel-labs/vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

vercel-labs/vercel-react-native-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

vercel-labs/vercel-react-view-transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

vercel-optimize

Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config, and code scan results first; investigate only metric-backed candidates; produce ranked recommendations grounded in verified files and version-aware Vercel/framework docs. Trigger for Vercel bill reduction, slow or expensive routes, caching opportunities, Function Invocations, Build Minutes, Fast Data Transfer, Core Web Vitals, Bot Management, Fluid compute, or cost breakdown requests.

vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

vercel-react-native-skills

React Native and Expo best practices for building performant mobile apps. Use

writing-guidelines

Review docs/prose for Writing Guidelines compliance. Use when asked to

Skills relacionados