skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

antfu-web-design-guidelines

Review UI code files against fetched Web Interface Guidelines and report findings.

3|Updated Apr 20, 2026
Search Tags:#code review#accessibility#frontend#ui review#web design#guidelines#ux audit
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill antfu-web-design-guidelines-langgenius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: antfu-web-design-guidelines
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/antfu-web-design-guidelines
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill antfu-web-design-guidelines-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually checking UI code against evolving web interface best practices is slow and inconsistent, especially when guidelines change over time. This Skill fetches the latest Web Interface Guidelines and audits your files against every rule automatically. ## Core Features & Use Cases - Fresh Guideline Fetching: Retrieves the latest rules from the vercel-labs web-interface-guidelines repository before each review, so audits never rely on stale rules. - File or Pattern Review: Accepts a file path or glob pattern argument and checks the specified UI code against all fetched rules. - Terse Findings Output: Reports violations in a compact file:line format that is easy to scan and act on. - Use Case: Before merging a pull request, ask for a review of your React components to catch accessibility issues, UX anti-patterns, and design guideline violations with exact line references. ## Quick Start Review my UI components in src/components against the web interface guidelines and list any violations.

Frequently Asked Questions about antfu-web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review my UI code against web interface best practices?▼

Provide a file path or glob pattern for your UI code, and the Skill fetches the latest Web Interface Guidelines, checks every rule against your files, and outputs violations in a file:line format.

How to check accessibility issues in frontend code automatically?▼

Run a UI review with this Skill on your component files. It applies the accessibility and UX rules from the fetched guidelines and reports each violation with its exact file and line location.

Does the UI review use the latest design guidelines?▼

Yes. The Skill fetches the guidelines from the vercel-labs web-interface-guidelines repository before every review, so the ruleset is always current rather than bundled or cached.

What happens if I don't specify files to review?▼

If no file or pattern argument is provided, the Skill asks which files you want reviewed. You can then supply a specific path or glob pattern for the audit.

What output format does the UI guideline review produce?▼

Findings are reported in a terse file:line format as specified by the fetched guidelines, making it easy to jump directly to each violation in your editor.

Related Skills

Explore More Design & Creative Skills→
arthtyagiarthtyagi
1

web-design-guidelines

Review UI code against the latest Web Interface Guidelines.

Community
Intermediate
alo-expalo-exp
6

gsd-review-fix

Apply atomic fixes with DCO sign-off and verify via tests and re-review.

Official
Advanced
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
0xkynz0xkynz

linting-expert

Automate linting, formatting, and static analysis across multi-language codebases.

Community
Advanced