Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…
Install
Quick install
npx skills add https://github.com/vercel-labs/agent-eval/tree/HEAD/skills/frontend-design
Or pick agent:
npx skills add vercel-labs/agent-eval --skill frontend-design --agent claude-codenpx skills add vercel-labs/agent-eval --skill frontend-design --agent cursornpx skills add vercel-labs/agent-eval --skill frontend-design --agent codexnpx skills add vercel-labs/agent-eval --skill frontend-design --agent opencodenpx skills add vercel-labs/agent-eval --skill frontend-design --agent github-copilotnpx skills add vercel-labs/agent-eval --skill frontend-design --agent windsurfMore install options
Shorthand — useful for multi-skill repos:
npx skills add vercel-labs/agent-eval --skill frontend-designManual — clone the repo and drop the folder into your agent's skills directory:
git clone https://github.com/vercel-labs/agent-eval.gitcp -r agent-eval/skills/frontend-design ~/.claude/skills/
How to use: Once installed, ask your agent to "use the frontend-design skill" or describe what you want (e.g. "Create distinctive, production-grade frontend interfaces with high design qualit"). Requires Node.js 18+.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…
frontend-designby vercel
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…npx skills add https://github.com/vercel-labs/agent-eval --skill frontend-designDownload ZIPGitHub
More skills from vercel
agent-friendly-apisby vercelCompanion skill for the Agent-Friendly APIs course on Vercel Academy. Build a feedback API, make it agent-friendly with structured documentation, then create a Claude Code skill that generates the docs automatically.filesystem-agentsby vercelYou are a knowledgeable teaching assistant for the Building Filesystem Agents course on Vercel Academy. You help students build agents that navigate filesystems with bash to answer questions about structured data.add-provider-packageby vercelGuide for adding new AI provider packages to the AI SDK. Use when creating a new @ai-sdk/<provider> package to integrate an AI service into the SDK.csvby vercelAnalyze and transform CSV data using bash toolsaiby vercelPythonai module — models, agents, hooks, middleware, MCP, structured outputcron-jobsby vercelVercel Cron Jobs configuration and best practices. Use when adding, editing, or debugging scheduled tasks in vercel.json.vercel-react-best-practicesby vercelReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…web-design-guidelinesby vercelReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site…
---
Source: https://github.com/vercel-labs/agent-eval/tree/HEAD/skills/frontend-design
Author: vercel
Discovered via: mcpservers.org
SKILL.md source
--- name: frontend-design description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,… --- # frontend-design Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,… # frontend-designby vercel Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,… `npx skills add https://github.com/vercel-labs/agent-eval --skill frontend-design`Download ZIPGitHub ## More skills from vercel agent-friendly-apisby vercelCompanion skill for the Agent-Friendly APIs course on Vercel Academy. Build a feedback API, make it agent-friendly with structured documentation, then create a Claude Code skill that generates the docs automatically.filesystem-agentsby vercelYou are a knowledgeable teaching assistant for the Building Filesystem Agents course on Vercel Academy. You help students build agents that navigate filesystems with bash to answer questions about structured data.add-provider-packageby vercelGuide for adding new AI provider packages to the AI SDK. Use when creating a new @ai-sdk/<provider> package to integrate an AI service into the SDK.csvby vercelAnalyze and transform CSV data using bash toolsaiby vercelPython `ai` module — models, agents, hooks, middleware, MCP, structured outputcron-jobsby vercelVercel Cron Jobs configuration and best practices. Use when adding, editing, or debugging scheduled tasks in vercel.json.vercel-react-best-practicesby vercelReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…web-design-guidelinesby vercelReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site… --- **Source**: https://github.com/vercel-labs/agent-eval/tree/HEAD/skills/frontend-design **Author**: vercel **Discovered via**: mcpservers.org