Home / All Skills / Design & Motion / web-design-guidelines
English (EN)简体中文 (ZH)日本語 (JA)
Design & Motion · vercel-labs/agent-skills

web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

L3 Networked · Declare domain & key scopeV1 Commit-PinnedNetwork AccessDual-pass Audit
Author vercel-labsGitHub vercel-labs/agent-skills ↗Stars 30898License 无 LICENSE 文件：agent-skills 仓库 HEAD 树 0 个 license 命中（git ls-tree 复核），gh api license=null。注意：其运行时规则源仓库 vercel-labs/web-interface-guidelines 为 MITCommit 063bee94c3
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Thin-wrapper skill: The only file in the directory is a 1.2KB SKILL.md containing no rules itself; all guidelines and output formatting instructions are fetched from a remote source at runtime.

skills/web-design-guidelines/SKILL.md（git ls-tree -r HEAD 该路径仅此一文件）
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.
The skill directory lacks references/ or rule data—the knowledge ontology of 'rules + output format' is externalized to command.md in another repository, with SKILL.md serving solely as a loader.

Working mechanism = 4-step pure prompt orchestration: fetch guidelines → read user-specified files → compare against rules item-by-item → output in terse file:line format.

skills/web-design-guidelines/SKILL.md
1. Fetch the latest guidelines from the source URL below 2. Read the specified files (or prompt user for files/pattern) 3. Check against all rules in the fetched guidelines 4. Output findings in the terse `file:line` format
Zero scripts and zero executable code; everything is executed by the agent following prompt instructions. The file scope is provided by the user via <file-or-pattern> (frontmatter argument-hint); if omitted, the agent prompts the user.

Behavior is fully defined by the remote command.md, which provides comprehensive instructions to the agent (including $ARGUMENTS placeholder, 13 rule sets, anti-pattern checklist, and output format examples), fetched from the main branch without version pinning.

运行时拉取内容 https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md（2026-09-06 实读；源仓库 vercel-labs/web-interface-guidelines，MIT，846★，pushed 2026-08-18）
--- description: Review UI code for Vercel Web Interface Guidelines compliance argument-hint: <file-or-pattern> --- # Web Interface Guidelines Review these files for compliance: $ARGUMENTS Read files, check against rules below. Output concise but comprehensive—sacrifice grammar for brevity. High signal-to-noise.
SKILL.md and command.md share isomorphic two-tier frontmatter (matching description/argument-hint): SKILL.md directs the agent to remote instructions, which contain ~100+ rules across 13 categories (Accessibility, Focus, Forms, Animation, Typography, ..., Hydration, Content & Copy) and an anti-pattern checklist.

Review granularity: grouped by file with line-number targeting (VS Code clickable), passing files explicitly marked with ✓ pass, no explanations if clean, and zero conversational preambles.

同上 command.md（运行时拉取）
Group by file. Use `file:line` format (VS Code clickable). Terse findings. ```text ## src/Button.tsx src/Button.tsx:42 - icon button missing aria-label … ## src/Card.tsx ✓ pass ```
Output formatting instructions also come from the remote source ('Output findings using the format specified in the guidelines') and are not contained within the skill directory.

2Core Capabilities

01UI code compliance review (line-by-line checks against 13 rule categories including accessibility, performance, UX, animation, i18n, hydration, etc.)
02Real-time fetching of the latest guidelines before review (pulls directly from the main branch on every run, decoupled from skill release cycles)
03Explicit anti-pattern flagging (14 categories such as user-scalable=no, onPaste preventDefault, transition:all, outline-none without replacement, div onClick, etc.)
04Terse file:line structured output (grouped by file, clickable line numbers, ✓ pass for clean files, no preambles)
05Review scope control: accepts file/glob parameters; prompts the user instead of defaulting to a full repository scan when unspecified
06Disciplined location-first fix recommendations ('State issue + location', explaining only when the fix is non-obvious to eliminate noise)

3External Dependencies

KindDependency / Endpoint
network审查规则源（行为定义体）：WebFetch 每次审查拉取 vercel-labs/web-interface-guidelines@main 的 command.md
cliWebFetch（宿主内置抓取工具，SKILL.md 点名要求使用）——非 skill 自带/安装的 CLI
network规则仓库本体（运行时内容上游）：vercel-labs/web-interface-guidelines

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Declare allowed domains and key scope
For Administrators
Least privilege keys, retain request logs
Evidence & Triggers (File Paths & Excerpts)
  • 网络端点: Declares external network access: Performs a WebFetch GET to https://raw.githubusercontent.com/vercel-labs/web-interf on every review
Audit Notes: The only external action is a standard fetch to a public GitHub raw endpoint on each review (official vercel-labs repository, predictable destination, no credentials involved), consistent with 🟡 tier characteristics; involves no script execution, credential access, or local writes. A key consideration is that the behavioral definition (rules + output format) is entirely externalized and unpinned—content drift or upstream poisoning directly alters skill behavior, impacting the prompt trust surface rather than code execution; also note that the agent-skills repository itself lacks an explicit LICENSE.

5Second-Pass Verification

  • [ok] 『目录仅 SKILL.md 一个文件』 — git ls-tree -r HEAD skills/web-design-guidelines/ 仅返回 SKILL.md；ls -la 亦确认。补充发现：skills/web-design-guidelines.zip 是仓库级跟踪的兄弟文件（不在子目录内），其内 SKILL.md 为过期版（2026-01-14，1183B，缺 metadata 块）
  • [ok] SKILL.md 引用真实性（How It Works / URL / WebFetch / Usage 段落） — 全文重读（1.2KB 全量），md5 确认工作副本==HEAD 版本（98087aed…），各引用段落逐字吻合
  • [ok] 『规则+输出格式在远端 command.md』是否成立、有无夸大 — 独立 read 拉取 raw.githubusercontent.com 端点成功：内容为完整指令（$ARGUMENTS 占位、13 组规则、14 类反模式、file:line 输出示例、✓ pass 标记），与 SKILL.md 描述一致；前端 description 声明『100+ 规则』（README.md:44 亦称 100+ rules）与实际规则面相符
  • [ok] 外部依赖仓库归属与许可 — gh api 复核 vercel-labs/web-interface-guidelines：确为同一组织、MIT、846★、pushed 2026-08-18；agent-skills 自身 HEAD 树无 LICENSE（ls-tree grep -ci license = 0）
  • [ok] 安全结论反例搜寻：隐藏脚本 / 额外网络调用 / 本地写入 / 凭证读取 — 全树（含 zip 内）无任何代码文件；SKILL.md 全文仅一处外部动作（WebFetch 上述 URL）；无凭证/写入指令；未发现遗漏的调用点。残余面确认为『远端指令信任』与『审查代码进上下文』两类注入，均已在 injection_surface 表述
  • [ok] meta 数据（stars/last_push/license）一致性 — gh api：30898★、license null、pushed_at 2026-08-28T13:36:31Z，与 HEAD commit 063bee9 提交时间（2026-08-28T13:36:07Z，+02:00 后同刻）一致

6Verdict & Scenarios

  • Always up-to-date rules: Refetches the main branch guidelines on every review, applying new or revised web best practices immediately without skill release cycles.
  • Broad and deep rule coverage: Remote command.md covers long-tail categories including a11y, focus, forms, animation, typography, i18n, dark mode, hydration, and safe areas, complemented by a 14-item anti-pattern checklist.
  • Output discipline tailored for agent workflows: Clickable file:line anchors, explicit ✓ pass for clean files, and zero preambles or filler, making results directly ingestible into IDEs.
  • Ultra-thin with minimal maintenance surface: Zero scripts and zero dependencies; clear behavioral boundaries (a single GET + file reads) make audit costs near zero.
    • Best for: Code compliance review scenarios requiring strict adherence to the latest Web UI best practices (React/Next.js frontend code reviews, pre-deployment UI audits); teams preferring 'officially maintained rules with zero skill maintenance'; environments comfortable with network fetching on every review without strict reproducibility requirements.
    Not for: Offline or version-pinned environments (behavior relies on fetching main online on every run); organizations requiring proprietary/localized rule sets or strict audit trails; scenarios treating it as a 'design/generation' skill—it only identifies defects and does not produce designs.
    Install Agent-Ready
    ① Verified Mirror 2026-09-06
    Option A · Direct DownloadDownload web-design-guidelines.tar.gz
    sha256: ec370ab42a34427f…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 063bee94c3.