
Web Design Guidelines Vercel
- 32 installs
- 36 repo stars
- Updated July 14, 2026
- oimiragieo/agent-studio
Helps with design & ui/ux tasks.
About
web-design-guidelines-vercel is a Claude Code skill for design & ui/ux. It helps solo builders move faster with AI-assisted development.
- web-design-guidelines-vercel
- Design & UI/UX
- AI-coding skill
Web Design Guidelines Vercel by the numbers
- 32 all-time installs (skills.sh)
- Ranked #1,316 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 4, 2026 (Skillselion catalog sync)
npx skills add https://github.com/oimiragieo/agent-studio --skill web-design-guidelines-vercelAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 32 |
|---|---|
| repo stars | ★ 36 |
| Last updated | July 14, 2026 |
| Repository | oimiragieo/agent-studio ↗ |
What it does
Helps with design & ui/ux tasks.
Files
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.mdUse 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.
Invoke the web-design-guidelines-vercel skill and follow it exactly as presented to you
'use strict';
/**
* Post-execute hook for web-design-guidelines-vercel
* Auto-generated by enterprise-bundle-scaffolder
*
* Records metrics after skill execution.
*/
function postExecute(_context) {
// Record execution metrics
return { ok: true, skill: 'web-design-guidelines-vercel' };
}
module.exports = { postExecute };
'use strict';
/**
* Pre-execute hook for web-design-guidelines-vercel
* Auto-generated by enterprise-bundle-scaffolder
*
* Validates inputs before skill execution.
*/
function preExecute(context) {
// Validate skill invocation context
if (!context || typeof context !== 'object') {
return { allow: true, message: 'web-design-guidelines-vercel: no context to validate' };
}
return { allow: true };
}
module.exports = { preExecute };
web-design-guidelines-vercel Research Requirements
Generated: 2026-02-28
Skill Description
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".
Research Areas
- Current best practices for web-design-guidelines-vercel
- Industry standards and tooling
- Integration patterns
Source References
- To be populated by skill-updater research phase
web-design-guidelines-vercel Rules
Purpose
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".
Best Practices
- Follow established patterns
- Validate inputs at boundaries
Integration Points
See SKILL.md for complete documentation.
{
"$schema": "http://json-schema.org/draft-07/schema#",
"title": "web-design-guidelines-vercelInput",
"description": "Input schema for 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\".",
"type": "object",
"additionalProperties": true,
"properties": {
"target": {
"type": "string",
"description": "Target file or path for the skill to operate on"
},
"options": {
"type": "object",
"description": "Additional options for skill execution",
"additionalProperties": true
}
}
}
{
"$schema": "http://json-schema.org/draft-07/schema#",
"title": "web-design-guidelines-vercelOutput",
"type": "object",
"additionalProperties": true,
"properties": {
"ok": {
"type": "boolean"
},
"summary": {
"type": "string"
}
}
}
#!/usr/bin/env node
'use strict';
/**
* web-design-guidelines-vercel - Enterprise Skill Script
* Auto-generated by enterprise-bundle-scaffolder
*/
const fs = require('fs');
const path = require('path');
// Parse arguments
const args = process.argv.slice(2);
const options = {};
for (let i = 0; i < args.length; i++) {
if (args[i].startsWith('--')) {
const key = args[i].slice(2);
const value = args[i + 1] && !args[i + 1].startsWith('--') ? args[++i] : true;
options[key] = value;
}
}
if (options.help) {
console.log(`
web-design-guidelines-vercel - Enterprise Skill
Usage:
node main.cjs --check <file> Check a file against guidelines
node main.cjs --list List all guidelines
node main.cjs --help Show this help
Description:
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".
`);
process.exit(0);
}
if (options.list) {
console.log('Guidelines for web-design-guidelines-vercel:');
console.log('See SKILL.md for full guidelines');
process.exit(0);
}
console.log('web-design-guidelines-vercel skill loaded. Use with Claude for code review.');
web-design-guidelines-vercel Implementation Template
Goal
- Define target outcome and acceptance criteria.
TDD
1. Red 2. Green 3. Refactor
Verification
- lint
- format
- targeted tests