web-design-guidelines
37
总安装量
38
周安装量
#5531
全站排名
安装命令
npx skills add https://github.com/supercent-io/skills-template --skill web-design-guidelines
Agent 安装分布
opencode
31
gemini-cli
28
claude-code
28
github-copilot
22
antigravity
19
Skill 文档
Web Interface Guidelines Review
Review files for compliance with Vercel’s Web Interface Guidelines.
When to use this skill
- UI ì½ë 리뷰: ì¹ ì¸í°íì´ì¤ ê°ì´ëë¼ì¸ ì¤ì ì¬ë¶ íì¸
- ì ê·¼ì± ì²´í¬: “check accessibility” ìì² ì
- ëìì¸ ê°ì¬: “audit design” ìì² ì
- UX 리뷰: “review UX” ìì² ì
- ë² ì¤í¸ íëí°ì¤ ê²í : “check my site against best practices” ìì² ì
How It Works
- Fetch the latest guidelines from the source URL below
- Read the specified files (or prompt user for files/pattern)
- Check against all rules in the fetched guidelines
- Output findings in the terse
file:lineformat
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.
Instructions
Step 1: ê°ì´ëë¼ì¸ ê°ì ¸ì¤ê¸°
WebFetch ì¬ì©:
WebFetch URL: https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
Prompt: "Extract all UI rules and guidelines"
Step 2: íì¼ ë¶ì
ì¬ì©ìê° ì ê³µí íì¼ ëë í¨í´ì ì½ê³ ë¶ìí©ëë¤.
ë¶ì ëì:
- React/Vue/Svelte ì»´í¬ëí¸
- HTML íì¼
- CSS/SCSS íì¼
- TypeScript/JavaScript íì¼
Step 3: ê·ì¹ ì ì©
ê°ì ¸ì¨ ê°ì´ëë¼ì¸ì 모ë ê·ì¹ì íì¼ì ì ì©íê³ ìë° ì¬íì ì¶ë ¥í©ëë¤.
Input Format
íì ì ë³´
- íì¼ ëë í¨í´: ê²í í íì¼ ê²½ë¡ ëë glob í¨í´
ì ë ¥ ìì
ë´ UI ì½ë 리뷰í´ì¤:
- íì¼: src/components/Button.tsx
ì ê·¼ì± ì²´í¬í´ì¤:
- í¨í´: src/**/*.tsx
Output Format
ê°ì´ëë¼ì¸ìì ì§ì í íìì ë°ë¦
ëë¤ (ì¼ë°ì ì¼ë¡ file:line íì):
src/components/Button.tsx:15 - Button should have aria-label for icon-only buttons
src/components/Modal.tsx:42 - Modal should trap focus within itself
src/pages/Home.tsx:8 - Main content should be wrapped in <main> element
Usage
When a user provides a file or pattern argument:
- Fetch guidelines from the source URL above
- Read the specified files
- Apply all rules from the fetched guidelines
- Output findings using the format specified in the guidelines
If no files specified, ask the user which files to review.
Constraints
íì ê·ì¹ (MUST)
- ìµì ê°ì´ëë¼ì¸ ì¬ì©: 매 리뷰 ì source URLìì fresh ê°ì´ëë¼ì¸ fetch
- ì ì²´ ê·ì¹ ì ì©: ê°ì ¸ì¨ ê°ì´ëë¼ì¸ì 모ë ê·ì¹ ê²ì¬
- ì íí ìì¹ íì: file:line íìì¼ë¡ ìë° ìì¹ ëª ì
ê¸ì§ ì¬í (MUST NOT)
- ì¤ëë ìºì ì¬ì©: íì ìµì ê°ì´ëë¼ì¸ fetch
- ë¶ë¶ ê²ì¬: ì¼ë¶ ê·ì¹ë§ ì ì©íì§ ìì
Best practices
- íì¼ ë²ì ì í: í ë²ì ë무 ë§ì íì¼ ê²ì¬ ì 컨í ì¤í¸ ì´ê³¼ 주ì
- ì°ì ìì ì§ì : critical ì´ìë¶í° ë³´ê³
- ìì ì ì: ìë° ì¬íê³¼ í¨ê» ìì ë°©ë² ì ì
References
Metadata
ë²ì
- íì¬ ë²ì : 1.0.0
- ìµì¢ ì ë°ì´í¸: 2026-01-22
- í¸í íë«í¼: Claude, ChatGPT, Gemini
- ì본 ì¶ì²: vercel/agent-skills
ê´ë ¨ ì¤í¬
- web-accessibility: WCAG ì ê·¼ì± êµ¬í
- ui-component-patterns: UI ì»´í¬ëí¸ í¨í´
íê·¸
#UI #review #web-interface #guidelines #vercel #design-audit #UX #frontend