Frontend

web-design-guidelines

antfu/skills · updated Apr 8, 2026

$npx skills add https://github.com/antfu/skills --skill web-design-guidelines
summary

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
skill.md

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:null
general reviews

Ratings

4.510 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.