agentskills.codes
WE

web-design-guidelines

by vercelDesignSource

Automated CLI tool to check UI code against Web Interface Guidelines.

TestingAccessibilityUI design

Install

mkdir -p .claude/skills/web-design-guidelines && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/556" && unzip -o skill.zip -d .claude/skills/web-design-guidelines && rm skill.zip

Installs to .claude/skills/web-design-guidelines

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
184 chars✓ has a “when” trigger
Beginner

Key capabilities

  • →Fetch the latest Web Interface Guidelines
  • →Read specified UI code files
  • →Check UI code against guideline rules
  • →Output compliance findings in file:line format

How it works

The skill fetches current guidelines from a URL, reads specified UI code files, and then checks the code against all rules in the fetched guidelines.

Inputs & outputs

You give it
file or pattern argument for UI code
You get back
compliance findings in file:line format

When to use web-design-guidelines

  • →Review UI code for accessibility
  • →Audit project against design best practices
  • →Check specific files for guideline compliance

About this skill

Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

How It Works

  1. Fetch the latest guidelines from the source URL below
  2. Read the specified files (or prompt user for files/pattern)
  3. Check against all rules in the fetched guidelines
  4. Output findings in the terse file:line format

Guidelines Source

Fetch fresh guidelines before each review:

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

Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.

Usage

When a user provides a file or pattern argument:

  1. Fetch guidelines from the source URL above
  2. Read the specified files
  3. Apply all rules from the fetched guidelines
  4. Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

How it compares

This skill automates UI code compliance checks against external guidelines, whereas manual review requires human interpretation of rules.

Compared to similar skills

web-design-guidelines side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
web-design-guidelines (this skill)326moNo flagsBeginner
ui-visual-validator14moNo flagsIntermediate
verify-bulk-action-bar03moReviewIntermediate
mobile-ios-design2725moNo flagsIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

More by vercel

View all by vercel →

turborepo

vercel

Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.

61191

update-docs

vercel

This skill should be used when the user asks to "update documentation for my changes", "check docs for this PR", "what docs need updating", "sync docs with code", "scaffold docs for this feature", "document this feature", "review docs completeness", "add docs for this change", "what documentation is affected", "docs impact", or mentions "docs/", "docs/01-app", "docs/02-pages", "MDX", "documentation update", "API reference", ".mdx files". Provides guided workflow for updating Next.js documentation based on code changes.

2543

streamdown

vercel

Implement, configure, and customize Streamdown — a streaming-optimized React Markdown renderer with syntax highlighting, Mermaid diagrams, math rendering, and CJK support. Use when working with Streamdown setup, configuration, plugins, styling, security, or integration with AI streaming (e.g., Vercel AI SDK). Triggers on: (1) Installing or setting up Streamdown, (2) Configuring plugins (code, mermaid, math, cjk), (3) Styling or theming Streamdown output, (4) Integrating with AI chat/streaming, (5) Configuring security, link safety, or custom HTML tags, (6) Using carets, static mode, or custom components, (7) Troubleshooting Tailwind, Shiki, or Vite issues.

1236

ai-sdk

vercel

Answer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText, ToolLoopAgent, embed, or tools, (2) Want to build AI agents, chatbots, RAG systems, or text generation features, (3) Have questions about AI providers (OpenAI, Anthropic, Google, etc.), streaming, tool calling, structured output, or embeddings, (4) Use React hooks like useChat or useCompletion. Triggers on: "AI SDK", "Vercel AI SDK", "generateText", "streamText", "add AI to my app", "build an agent", "tool calling", "structured output", "useChat".

1150

list-npm-package-content

vercel

List the contents of an npm package tarball before publishing. Use when the user wants to see what files are included in an npm bundle, verify package contents, or debug npm publish issues.

632

develop-ai-functions-example

vercel

Develop examples for AI SDK functions. Use when creating, running, or modifying examples under examples/ai-functions/src to validate provider support, demonstrate features, or create test fixtures.

536

You might also like

ui-visual-validator

sickn33

Rigorous visual validation expert specializing in UI testing, design system compliance, and accessibility verification. Masters screenshot analysis, visual regression testing, and component validation. Use PROACTIVELY to verify UI modifications have achieved their intended goals through comprehensive visual analysis.

10

verify-bulk-action-bar

junnv93

BulkActionBar 패턴 SSOT 검증 — count chip aria-live, role=toolbar, Esc clear, indeterminate Radix, focus management, IME guard. 일괄 작업 UI 변경 시 트리거. canonical = components/common/BulkActionBar.tsx (도메인 무관 generic), components/approvals/BulkActionBar.tsx는 approvals 특화 wrapper.

00

mobile-ios-design

wshobson

Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles.

272711

mobile-android-design

wshobson

Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.

101335

elegant-design

rand

Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.

21108

tailwind-design-system

wshobson

Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

3495

Search skills

Search the agent skills registry