Skip to content
cccskills
FreePublished on GitHub

web-design-guidelines

Review web interface code for accessibility, visual design, and interaction issues. This skill checks specified files against interface guidelines and returns concise findings grouped by file, with line numbers to help locate each issue.

OriginalShow the original description

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

See how to install

Good for

  • Reviewing interface code before release
  • Checking keyboard access and focus behavior
  • Inspecting form labels and validation
  • Reviewing dark mode and multilingual interface handling

Files included (2)

  • SKILL.md2.0 KB
  • references/guideline.md6.6 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

How It Works

  1. Read the guidelines from #[[file:references/guideline.md]]
  2. Read the specified files (or prompt user for files/pattern)
  3. Check against all rules in the guidelines
  4. 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:

  1. Read the guidelines from references/guideline.md
  2. Read the specified files
  3. Apply all rules from the guidelines
  4. 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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

accessibility

FreeSummary

Audit and improve website accessibility using WCAG 2.1, guidelines for making web content usable by people with disabilities. Check image descriptions, contrast, forms, keyboard controls, and screen reader support with automated and manual testing.

  • Checking a site before launch
  • Fixing keyboard navigation and focus
  • Improving form labels and error messages
tech-leads-club/agent-skills7.1KUpdated Oct 22, 2026

ai-cold-outreach

FreeSummary

Plan personalized sales emails to prospects you have not contacted before. This skill covers prospect selection, contact research, email drafts, follow-up sequences, inbox delivery, and reply handling, with guidance on tools and campaign improvements.

  • Drafting personalized sales emails for new prospects
  • Planning a sequence of emails and follow-ups
  • Investigating low reply rates or spam placement
tech-leads-club/agent-skills7.1KUpdated Oct 22, 2026

ai-pricing

FreeSummary

Plan pricing for AI products by comparing charges based on usage, tasks, or results. Use customer value and computing costs to shape pricing tiers, usage limits, hybrid plans, and margin improvement strategies.

  • Choosing how to charge for an AI product
  • Designing pricing tiers and usage limits
  • Reviewing low margins
tech-leads-club/agent-skills7.1KUpdated Oct 22, 2026

ai-sdr

FreeSummary

Plan AI sales development systems that qualify prospects, organize outreach, classify replies, and hand opportunities to people. Use customer criteria, budget, CRM setup, and sales goals to shape platform choices and a four-week rollout plan.

  • Planning an AI sales development rollout
  • Defining prospect scores and qualification criteria
  • Improving outreach with low reply or meeting conversion rates
tech-leads-club/agent-skills7.1KUpdated Oct 22, 2026

ai-seo

FreeSummary

Plan AI-assisted SEO, from keyword research and competitor comparison pages to content production using data and templates. It also guides content changes for AI search citations, tool selection, quality checks, and ongoing performance tracking.

  • Planning competitor alternative and comparison pages
  • Designing page production using data and templates
  • Reviewing content for citations in AI Overviews
tech-leads-club/agent-skills7.1KUpdated Oct 22, 2026

ai-ugc-ads

FreeSummary

Plan UGC campaigns, ads built around user-style content, from creator recruitment and production briefs to AI video variations. Organize organic testing, paid promotion, and creative refreshes for TikTok, Meta, and YouTube Shorts.

  • Recruiting creators for product videos
  • Writing a short video production brief
  • Planning AI-generated ad variations
tech-leads-club/agent-skills7.1KUpdated Oct 22, 2026

See all skills by tech-leads-club

Report a problem with this skill