Skip to content
AI Primer
๐ŸŽจ Design

web-design-guidelines

vercel-labsby vercel-labs14 days ago29.3k

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".

Install

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
Show step-by-step
  1. 1

    Open your terminal

    • Mac: Press โŒ˜ Space, type "Terminal", press Enter
    • Windows: Press Win R, type "cmd", press Enter
  2. 2

    Paste the command above and press Enter

    Use the Copy command button, then paste in your terminal (Mac: โŒ˜V, Windows: Ctrl V).

  3. 3

    Restart Claude Code

    Close and reopen Claude Code, or start a new session, so it picks up the new skill.

Where it lives
~/.claude/skills/vercel-labs--agent-skills--skills--web-design-guidelines/
โ”œโ”€โ”€ SKILL.md
โ””โ”€โ”€ ... (skill resource files)
View on GitHub

Comments

X@mattpocockuk

"@dayson @brandonbryant02 I imagine it's because you've used one and not the other"

X@mattpocockuk

"Top 5 all-time on nice Someday its sequel, /wayfinder, will eclipse it"

Always review skill code before installing. Third-party skills may contain scripts that run on your machine.

First 3 tasks to try

  1. 1Fetch guidelines from the source URL above
    Fetch guidelines from the source URL above
  2. 2Read the specified files
    Read the specified files
  3. 3Apply all rules from the fetched guidelines
    Apply all rules from the fetched guidelines

Related skills

๐ŸŽจ Design

baoyu-comic

Knowledge comics (็Ÿฅ่ฏ†ๆผซ็”ป): educational, biography, tutorial.

by NousResearch ยท 2 months ago218.2k
๐Ÿค– ML/AI

comfyui

Generate images, video, and audio with ComfyUI โ€” install, launch, manage nodes/models, run workflows with parameter injection. Uses the official comfy-cli for lifecycle and direct REST/WebSocket API for execution.

by NousResearch ยท 2 months ago218.2k
๐Ÿค– ML/AI

hyperframes

Create HTML-based video compositions, animated title cards, social overlays, captioned talking-head videos, audio-reactive visuals, and shader transitions using HyperFrames. HTML is the source of truth for video. Use when the user wants a rendered MP4/WebM from an HTML composition, wants to animate text/logos/charts over media, needs captions synced to audio, wants TTS narration, or wants to convert a website into a video.

by NousResearch ยท 2 months ago218.2k
๐ŸŽจ Design

p5js

p5.js sketches: gen art, shaders, interactive, 3D.

by NousResearch ยท 2 months ago218.2k