web-design-guidelines▌
antfu/skills · updated Apr 8, 2026
Audit UI code against Web Interface Guidelines with live rule fetching.
- ›Fetches the latest guidelines from a remote source before each review, ensuring compliance checks stay current
- ›Accepts file paths or patterns as arguments; prompts for input if none provided
- ›Outputs findings in concise file:line format for quick scanning and remediation
- ›Covers accessibility, design patterns, and best practices as defined in the fetched ruleset
1c:["$","div",null,{"className":"prose prose-invert max-w-none prose-headings:font-semibold prose-headings:tracking-tight prose-h1:text-4xl prose-h1:mb-2 prose-h2:text-2xl prose-h2:mb-2 prose-h3:text-lg prose-h3:mb-2 prose-p:text-muted-foreground prose-li:text-muted-foreground prose-code:bg-muted prose-code:text-foreground prose-code:px-1 prose-code:py-0.5 prose-code:rounded-sm prose-code:text-sm prose-code:before:content-none prose-code:after:content-none prose-pre:bg-muted prose-pre:text-foreground prose-pre:border prose-pre:border-border prose-pre:rounded-md [&_table]:!border-[color:var(--border)] [&_th]:!border-[color:var(--border)] [&_td]:!border-[color:var(--border)]","dangerouslySetInnerHTML":{"__html":"<p><strong>Audit UI code against Web Interface Guidelines with live rule fetching.</strong></p>\n<ul>\n<li>Fetches the latest guidelines from a remote source before each review, ensuring compliance checks stay current</li>\n<li>Accepts file paths or patterns as arguments; prompts for input if none provided</li>\n<li>Outputs findings in concise <code>file:line</code> format for quick scanning and remediation</li>\n<li>Covers accessibility, design patterns, and best practices as defined in the fetched ruleset</li>\n</ul>"}}] 23:T480,<h1>Web Interface Guidelines</h1>
<p>Review files for compliance with Web Interface Guidelines.</p> <h2>How It Works</h2> <ol> <li>Fetch the latest guidelines from the source URL below</li> <li>Read the specified files (or prompt user for files/pattern)</li> <li>Check against all rules in the fetched guidelines</li> <li>Output findings in the terse <code>file:line</code> format</li> </ol> <h2>Guidelines Source</h2> <p>Fetch fresh guidelines before each review:</p> <pre class="language-text"><code class="language-text code-highlight"><span class="code-line">https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md </span></code></pre> <p>Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.</p> <h2>Usage</h2> <p>When a user provides a file or pattern argument:</p> <ol> <li>Fetch guidelines from the source URL above</li> <li>Read the specified files</li> <li>Apply all rules from the fetched guidelines</li> <li>Output findings using the format specified in the guidelines</li> </ol> <p>If no files specified, ask the user which files to review.</p>1d:["$","div",null,{"className":"prose prose-invert max-w-none prose-headings:font-semibold prose-headings:tracking-tight prose-h1:text-4xl prose-h1:mb-2 prose-h2:text-2xl prose-h2:mb-2 prose-h3:text-lg prose-h3:mb-2 prose-p:text-muted-foreground prose-li:text-muted-foreground prose-code:bg-muted prose-code:text-foreground prose-code:px-1 prose-code:py-0.5 prose-code:rounded-sm prose-code:text-sm prose-code:before:content-none prose-code:after:content-none prose-pre:bg-muted prose-pre:text-foreground prose-pre:border prose-pre:border-border prose-pre:rounded-md [&_table]:!border-[color:var(--border)] [&_th]:!border-[color:var(--border)] [&_td]:!border-[color:var(--border)]","dangerouslySetInnerHTML":{"__html":"$23"}}] 18:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 16:nullRatings
4.5★★★★★10 reviews- ★★★★★Shikha Mishra· Oct 10, 2024
web-design-guidelines is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
- ★★★★★Piyush G· Sep 9, 2024
Keeps context tight: web-design-guidelines is the kind of skill you can hand to a new teammate without a long onboarding doc.
- ★★★★★Chaitanya Patil· Aug 8, 2024
Registry listing for web-design-guidelines matched our evaluation — installs cleanly and behaves as described in the markdown.
- ★★★★★Sakshi Patil· Jul 7, 2024
web-design-guidelines reduced setup friction for our internal harness; good balance of opinion and flexibility.
- ★★★★★Ganesh Mohane· Jun 6, 2024
I recommend web-design-guidelines for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
- ★★★★★Oshnikdeep· May 5, 2024
Useful defaults in web-design-guidelines — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- ★★★★★Dhruvi Jain· Apr 4, 2024
web-design-guidelines has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Rahul Santra· Mar 3, 2024
Solid pick for teams standardizing on skills: web-design-guidelines is focused, and the summary matches what you get after install.
- ★★★★★Pratham Ware· Feb 2, 2024
We added web-design-guidelines from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
- ★★★★★Yash Thakker· Jan 1, 2024
web-design-guidelines fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.