OfficialCodierung & Entwicklunggithub.com

web-design-guidelines

Überprüft UI-Code auf Einhaltung der Web-Interface-Richtlinien. Verwenden, wenn danach gefragt wird.

Was ist web-design-guidelines?

Diese Fähigkeit (Skill) analysiert UI-Code und stellt sicher, dass er mit den aktuellen Web-Interface-Richtlinien übereinstimmt. Sie ruft automatisch die neuesten Richtlinien von einer externen Quelle ab, liest die angegebenen Dateien und prüft jede davon gegen alle darin enthaltenen Regeln. Das Tool gibt die Ergebnisse im kompakten `Datei:Zeile`-Format aus, was die Integration in Entwickler-Workflows oder CI/CD-Pipelines erleichtert. Es ist ideal für Entwickler, die moderne, konsistente und barrierefreie Benutzeroberflächen bauen, und funktioniert mit jedem beliebigen Code-Editor oder Terminal. Die Fähigkeit unterstützt benutzerdefinierte Datei- oder Ordnermuster, sodass sie auf bestimmte Komponenten oder das gesamte Projekt angewendet werden kann. Wenn keine Dateien angegeben werden, fordert sie den Benutzer zur Eingabe auf, um eine flexible und interaktive Nutzung zu ermöglichen. Entwickelt für Plattformen wie Claude Code, Cursor oder Codex, automatisiert sie die Überprüfung von UI-Code und reduziert manuelle Audits.

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

Installed? Explore more Codierung & Entwicklung skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Web-Interface-Richtlinien

Überprüft Dateien auf Einhaltung der Web-Interface-Richtlinien.

Funktionsweise

  1. Die neuesten Richtlinien von der unten stehenden Quell-URL abrufen
  2. Die angegebenen Dateien lesen (oder den Benutzer nach Dateien/Mustern fragen)
  3. Gegen alle Regeln in den abgerufenen Richtlinien prüfen
  4. Ergebnisse im kompakten Datei:Zeile-Format ausgeben

Richtlinien-Quelle

Vor jeder Überprüfung frische Richtlinien abrufen:

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

Mit WebFetch die neuesten Regeln abrufen. Der abgerufene Inhalt enthält alle Regeln und Anweisungen zum Ausgabeformat.

Verwendung

Wenn ein Benutzer ein Datei- oder Musterargument angibt:

  1. Richtlinien von der obigen Quell-URL abrufen
  2. Die angegebenen Dateien lesen
  3. Alle Regeln aus den abgerufenen Richtlinien anwenden
  4. Ergebnisse im in den Richtlinien angegebenen Format ausgeben

Wenn keine Dateien angegeben sind, den Benutzer fragen, welche Dateien zu überprüfen sind.

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

Verwandte Skills

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 Codierung & Entwicklung skills