OfficialDéveloppement et programmationgithub.com

Directives d'Interface Web

Examinez le code UI pour vérifier sa conformité aux directives d'interface Web. À utiliser lorsque demandé.

Qu'est-ce que Directives d'Interface Web ?

Cette compétence permet à un agent IA de vérifier automatiquement la conformité de fichiers de code UI (par exemple HTML, CSS, JavaScript) aux directives d'interface Web. Elle fonctionne en récupérant les dernières règles à partir d'une source distante (le dépôt GitHub de Vercel Labs), puis en les appliquant aux fichiers spécifiés par l'utilisateur. L'agent lit les fichiers, applique chaque règle et produit un rapport concis au format `fichier:ligne`, idéal pour une intégration dans des workflows de développement. Utile pour maintenir une cohérence visuelle et fonctionnelle, cette compétence prend en charge les agents comme Claude Code et Cursor. Elle simplifie les revues de code en automatisant une tâche manuelle et en fournissant des retours rapides et exploitables.

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

Installed? Explore more Développement et programmation skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Que fait Directives d'Interface Web ?

Examiner les fichiers pour vérifier leur conformité aux directives d'interface Web.

Fonctionnement

  1. Récupérer les dernières directives depuis l'URL source ci-dessous
  2. Lire les fichiers spécifiés (ou demander à l'utilisateur les fichiers/modèle)
  3. Vérifier toutes les règles des directives récupérées
  4. Afficher les résultats au format concis fichier:ligne

Source des Directives

Récupérez les directives fraîches avant chaque examen :

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

Utilisez WebFetch pour récupérer les dernières règles. Le contenu récupéré contient toutes les règles et les instructions de format de sortie.

Utilisation

Lorsqu'un utilisateur fournit un fichier ou un motif d'argument :

  1. Récupérez les directives depuis l'URL source ci-dessus
  2. Lisez les fichiers spécifiés
  3. Appliquez toutes les règles des directives récupérées
  4. Affichez les résultats en utilisant le format spécifié dans les directives

Si aucun fichier n'est spécifié, demandez à l'utilisateur quels fichiers examiner.

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 associés

steipete/bluebubbles

Send and manage iMessages via BlueBubbles, including attachments, tapbacks, edits, replies, and groups.

community

steipete/eightctl

Control Eight Sleep pods (status, temperature, alarms, schedules).

community

steipete/blucli

BluOS CLI (blu) for discovery, playback, grouping, and volume.

community

steipete/bear-notes

Create, search, and manage Bear notes via grizzly CLI.

community

steipete/camsnap

Capture frames or clips from RTSP/ONVIF cameras.

community

steipete/gifgrep

Search GIF providers with CLI/TUI, download results, and extract stills/sheets.

community
← More Développement et programmation skills