Web Design Guidelines Agent Skill

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". Focuses on visual design and interaction patterns. Do NOT use for performance audits (use core-web-vitals), SEO (use seo), or comprehensive site audits (use web-quality-audit).

2k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

4978

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/tech-leads-club/agent-skills --skill web-design-guidelines

The instruction itself

5 sections, as written by the author

Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

How It Works

Read the guidelines from #[[file:references/guideline.md]]
Read the specified files (or prompt user for files/pattern)
Check against all rules in the guidelines
Output findings in the terse file:line format

Guidelines Reference

All rules and output format instructions are in:

#[[file:references/guideline.md]]

The guidelines cover:

Accessibility (ARIA, semantic HTML, keyboard navigation)
Focus states and keyboard interaction
Forms (autocomplete, validation, labels)
Animation (reduced motion, performance)
Typography (proper characters, number formatting)
Content handling (overflow, empty states)
Images (dimensions, lazy loading)
Performance (virtualization, DOM reads)
Navigation & state (URL sync, deep linking)
Touch & interaction (tap delays, safe areas)
Dark mode & theming
Locale & i18n
Hydration safety
Common anti-patterns to flag

Usage

When a user provides a file or pattern argument:

Read the guidelines from references/guideline.md
Read the specified files
Apply all rules from the guidelines
Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

Output Format

Follow the format in the guidelines:

Group findings by file
Use file:line format (VS Code clickable)
Terse, high signal-to-noise
State issue + location
Skip explanation unless fix is non-obvious

Other skills for the same job

different authors, same section of the catalogue

Enhance Prompt

by google-labs-code

vendor ×2

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

Generate memes using the memegen.link API. Use when users request memes, want to add humor to content, or need visual aids for social media. Supports 100+ popular templates with custom text and styling.

Fix PageSpeed Insights/Lighthouse accessibility "!" errors caused by contrast audit failures (CSS filters, OKLCH/OKLAB, low opacity, gradient text, image backgrounds). Use for accessibility-driven SEO/performance debugging and remediation.

> Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at component level, building a multi-page app, or restyling with known design tokens — use frontend-design instead.

12k tokens

Ads Landing

by AgriciDaniel

Audit paid-ad landing pages for message match, mobile experience, performance, accessibility, trust, forms, consent, tracking, security, and conversion friction. Use for landing-page audit, post-click experience, LP audit, conversion-rate optimization, form optimization, ad-to-page message match, redirects, blocked navigation, or requests involving private, loopback, link-local, or metadata IP destinations.

612 tokens

Frontend Design Landing Page

by cloudflare

vendor

Marketing landing page and conversion-focused product page reference. Use this skill when building hero sections, feature grids, pricing pages, testimonials, CTAs, footers, navigation bars, or any public-facing marketing surface. Covers a warm, professional, developer-friendly design language (cream backgrounds, generous whitespace, pill CTAs, corner-bracket card decorations) and a complete token set, animation system, and copy-paste component snippets. NOT for product/dashboard UIs — use frontend-design-saas for those.

25k tokens

Web Quality Audit

by addyosmani

Comprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to "audit my site", "review web quality", "run lighthouse audit", "check page quality", or "optimize my website".

3k tokens scripts

Launch Feedback Synthesizer

by aaron-he-zhu

Use when the user asks to "triage launch feedback", "cluster reviews, comments, and board posts into themes", or "set up a you asked, we shipped loop"; produces a feedback theme digest (frequency, severity, representative quotes per theme), an open→planned→started→completed/declined status loop with duplicate-merge and notification rules, shipped-change announcement material, and a compliant social-proof harvest protocol (never incentivized store reviews). Not for repurposing or amplifying the harvested proof — use content-amplifier; not for executing testimonial outreach threads — use outreach-manager. 反馈分诊/状态环/社证收割/评测合规

3k tokens

How to use it

Copy the folder

Take tech-leads-club/web-design-guidelines from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.