web-design-guidelines
Review UI Code Against Design Guidelines
也可從以下取得: antfu,sickn33,supercent-io,antfu,vercel-labs
This skill automatically audits web interfaces against Vercel's Web Interface Guidelines, identifying accessibility issues, UX problems, and design compliance violations in your UI code.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「web-design-guidelines」。 Use web-design-guidelines to review src/components/Header.tsx
預期結果:
- src/components/Header.tsx:15 - Missing ARIA label on navigation element
- src/components/Header.tsx:23 - Color contrast ratio below 4.5:1 for link text
- src/components/Header.tsx:31 - Use semantic <button> instead of <div> for actions
正在使用「web-design-guidelines」。 Use web-design-guidelines to audit **/*.html
預期結果:
- index.html:42 - Form labels must be associated with inputs via for attribute
- index.html:58 - Images require alt text for accessibility
- about.html:12 - Heading levels should not skip (h1 -> h3)
安全審計
安全Static analysis flagged 7 potential issues (external_commands, network, weak cryptographic algorithms). Manual review confirms all findings are false positives. The 'external_commands' detections are markdown backticks for code formatting, not shell execution. The 'network' detection is an intentional hardcoded URL to Vercel's official GitHub guidelines repository. The 'weak cryptographic algorithm' detections are triggered by YAML frontmatter content with no actual cryptographic code. This skill is a safe design review tool that fetches official Vercel guidelines and applies them to audit UI code.
品質評分
你能建構什麼
Accessibility Audit
Review a React component or HTML file for WCAG compliance, ARIA usage, and color contrast issues
Design System Compliance
Check if UI components follow established design patterns and Vercel's interface guidelines
Pre-launch Code Review
Run a final audit on all UI files before deploying to catch any accessibility or UX issues
試試這些提示
Use the web-design-guidelines skill to review my UI code in src/components/Button.tsx for accessibility and design compliance.
Use web-design-guidelines to audit all files matching **/*.tsx in the components directory for interface guideline violations.
Run web-design-guidelines on the entire src directory to check all UI code against Vercel's Web Interface Guidelines.
I want to review my UI code. Use web-design-guidelines and ask me which files to review.
最佳實務
- Specify exact file paths or glob patterns to focus the review on relevant files
- Review findings in file:line format and fix issues in order of severity
- Fetch fresh guidelines before each review to get the latest rules
避免
- Running the skill without specifying which files to review
- Ignoring accessibility findings - they affect users with disabilities
- Assuming the skill catches all issues - it's a helper, not a replacement for manual testing