Builds an animation from scratch the way a design engineer would: it chooses the curve, duration and properties, keeps motion off the main thread where it matters, and explains the choice.
Animate (Emil Kowalski)
25 runs/mo
Design
Web Design Guidelines (Vercel)
Audits UI code against 100+ web interface rules from Vercel: accessibility, focus states, forms, animation, typography, images, performance, navigation state, dark mode, touch targets and i18n.
- Free community skill
- Installs from source, runs locally in your agent
- Vercel
- vercel-labs/agent-skills
skillgild install web-design-guidelinesWorks with
License: not stated by the project · Created by Vercel · The project lists support for Claude Code, Cursor, Codex, GitHub Copilot, 18+ Agent Skills hosts
What you get
- Audits UI code against 100+ web interface rules from Vercel: accessibility, focus states, forms, animation, typography, images, performance, navigation state, dark mode, touch targets and i18n.
- Run it on a component or a page and it lists what fails and how to fix it.
Install the Web Design Guidelines (Vercel) skill
A community skill: it installs from its own repository and your agent runs the project's instructions locally with your own model. SkillGild lists it and credits the author; nothing runs on SkillGild.
With the SkillGild CLI (needs git). It clones vercel-labs/agent-skills and copies the skill folder into the right place for your agent; use
--agent codex,cursororgemini-clifor other clients.Terminal skillgild install web-design-guidelines --agent claude-codeAny agent, with the skills CLI.
Terminal npx skills add vercel-labs/agent-skills --skill web-design-guidelinesManual copy.
Terminal Clone the repo and copy skills/web-design-guidelines/ into ~/.claude/skills/Or copy the folder yourself from vercel-labs/agent-skills (folder
skills/web-design-guidelines) into~/.claude/skills/web-design-guidelines/for Claude Code,~/.agents/skills/for Codex,~/.cursor/skills/for Cursor or~/.gemini/skills/for Gemini CLI, then start a new session.
Try asking
Requests that trigger this skill once it is installed in your agent.
Audit the signup form against the web design guidelines
Check this component for focus and keyboard issues
Review dark-mode handling across the app
Questions
How do I install the Web Design Guidelines (Vercel) skill in Claude Code?
Run skillgild install web-design-guidelines --agent claude-code: the SkillGild CLI clones vercel-labs/agent-skills and copies the skill folder into ~/.claude/skills/web-design-guidelines. You can also use the project's own commands shown above, or copy the folder yourself. Use --agent codex, cursor or gemini-cli for other clients.
Is Web Design Guidelines (Vercel) free and open source?
The vercel-labs/agent-skills repository does not include a license file at the time of listing, so treat it as all rights reserved by the author until one is added. SkillGild lists and links it; it does not host or redistribute the files.
Which agents does Web Design Guidelines (Vercel) work with?
The project lists Claude Code, Cursor, Codex, GitHub Copilot and 18+ Agent Skills hosts. It is a plain Agent Skills folder (SKILL.md plus supporting files), so any client that reads that format can load it.
Does Web Design Guidelines (Vercel) run on SkillGild?
No. Web Design Guidelines (Vercel) is a community skill: your agent runs its instructions locally with your own model, and SkillGild lists, credits and installs it. Hosted SkillGild skills are marked differently and run through the SkillGild MCP server.
Related guides
Setup steps and worked examples for this kind of skill.
- Claude Code frontend design skills: Taste Skill and Logo DesignUse Taste Skill for landing pages and Logo Design for brand marks in Claude Code, with briefs that work and a checklist to review the output.
- Best Claude Code skills in 2026: 27 picks by jobThe best Claude Code skills in 2026, grouped by job: writing, planning, frontend design, testing, research, documents, marketing and video. Community skills from GitHub and hosted skills with free runs, each with its install command.
- How to install Claude Code skills (and skills for Codex, Cursor and Gemini CLI)Install a Claude Code skill from GitHub, a plugin or SkillGild in one command. Folder paths, personal vs project skills, verifying it loaded, troubleshooting, and the same steps for Codex, Cursor and Gemini CLI.
- How to create a Claude skillCreate a Claude skill from scratch: write SKILL.md with a name and description, add scripts and references, test it in Claude Code, make it work in Codex and Cursor, and share it on GitHub, as a plugin or on SkillGild.
More in Design
- FreeDesign
- FreeDesign
Translates Apple's interface and motion principles into web code: spring curves, gesture physics, translucent materials and typography, as explained in Apple's WWDC design sessions.
Apple Design (Emil Kowalski)
25 runs/mo - FreeDesign
Anthropic's canvas-design skill guides Claude to produce finished visual artefacts (posters, covers, social graphics) by composing on an HTML canvas with deliberate typography, grid and colour decisions rather than defaulting to a template.
Canvas Design
25 runs/mo - FreeDesign
Emil Kowalski's design-engineering philosophy as a skill: animation decisions (curves, durations, which properties to animate and which not to), component polish and the invisible details that make software feel right.
Emil Kowalski: design engineering
25 runs/mo - FreeDesign
Figma's official plugin for Claude Code bundles the Figma MCP server with skills for implementing designs from a file (figma-power), extracting design context (figquery), mapping UI recordings to storyboards and turning a PRD into a FigJam plan.
Figma (official plugin)
Open source - FreeDesign
Anthropic's official frontend-design skill, shipped as a plugin in the claude-plugins-official marketplace and as a skill in anthropics/skills.
Frontend Design (Anthropic)
25 runs/mo - FreeDesign
A design language for AI harnesses: 24 commands (craft, audit, polish, harden, animate, colorize, typeset, layout, distill, bolder, quieter and more), 60 deterministic detector rules and a live in-browser mode.
Impeccable
25 runs/mo - FreeDesign
Professional logo and brand-mark design from brief to production files: concepts, clean geometric SVG, optical refinement, tests at 16 px and in one colour, presentation boards and brand guidelines.
Logo Design
25 runs/mo - ProDesign
Included with SkillGild Pro. Checks the colors in your charts, slides or interface against WCAG contrast ratios with SkillGild's palette validator, and suggests passing alternatives. More premium skills will be added as they launch.
Pro Preview
Included with Pro - FreeDesign
Anti-slop frontend skill for landing pages, portfolios and redesigns. Reads the brief, picks the right design direction and ships interfaces that do not look templated.
Taste Skill
25 runs/mo