Claude MarketplacesSubmit
asyrafhussin avatar

Web Design Guidelines

asyrafhussin/agent-skills

This is a dual-mode accessibility checker that works both as a coding reference and an audit tool. Point it at your React, Vue, or Blade templates and ask it to "audit accessibility" and it'll run through 23 checks across semantic HTML, keyboard nav, WCAG contrast, forms, and ARIA usage. Each result comes back as pass/fail/n/a with exact file and line numbers for failures. The checklist is thorough without being pedantic, covering the stuff that actually breaks for users: focus traps in modals, heading hierarchy, form error announcements, reduced motion support. Good for pre-launch audits or when you inherit a codebase and need to know where you stand on WCAG AA compliance.

skills.sh installs
948
GitHub stars
102
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add asyrafhussin/agent-skills --skill web-design-guidelines --agent claude-code

Installs into .claude/skills of the current project.

Files

Web Design Guidelines

WCAG accessibility, semantic HTML, keyboard navigation, forms, and performance patterns for inclusive web interfaces. Contains 23 rules across 4 categories. Supports both coding reference and audit mode.

Metadata

  • Version: 2.1.0
  • Rule Count: 23 rules across 4 categories
  • License: MIT

How to Audit

When the user asks to "audit accessibility", "check WCAG compliance", or "review accessibility" — run the checklist below against their codebase.

Step 1: Determine Scope

  • If arguments provided ($ARGUMENTS): audit only those files or components
  • If no arguments: audit all UI components and pages in the codebase

Step 2: Detect Stack

Check the project for:

  • .tsx/.jsx files → React
  • .vue files → Vue
  • .blade.php files → Laravel Blade
  • .html files → Static HTML

Step 3: Run Accessibility Checklist

Work through every item below. For each, output:

  • PASS — brief confirmation of what was verified
  • FAIL — exact file:line, description of the issue, and fix recommendation
  • N/A — if the check does not apply to this project
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/asyrafhussin/agent-skills
Categories
Git & Pull Requests, Code Review & Quality, AI & Agent Building, Design & UI/UX
First seen
Jun 3, 2026

More from asyrafhussin/agent-skills

All 14

Recommended

More Git & Pull Requests
1luwill avatarresearch-proposalluwill/research-skillsUse when the user asks to write or draft a PhD / doctoral research proposal, research plan, 研究计划书, or 开题报告 — a forward-looking plan of background, gap, research935skills.sh installs
2vibe-motion avatarwechat-2d-rendervibe-motion/skillsClone or update https://github.com/sxhzju/wechat-2d and render the default WeChat-style 2D chat motion video with Remotion. Use when users ask for 微信聊天动画, wecha930skills.sh installs
3alirezarezvani avatarsenior-secopsalirezarezvani/claude-skillsSenior SecOps engineer skill for application security, vulnerability management, compliance verification, and secure development practices. Runs SAST/DAST scans928skills.sh installs
4orchestra-research avatarfine-tuning-openvla-oftorchestra-research/ai-research-skillsFine-tunes and evaluates OpenVLA-OFT and OpenVLA-OFT+ policies for robot action generation with continuous action heads, LoRA adaptation, and FiLM conditioning 926skills.sh installs
5jwynia avatarpdf-generatorjwynia/agent-skillsCreate and manipulate PDF files programmatically. Use when the user needs to generate PDFs, fill PDF forms, extract PDF content, add watermarks/overlays, or mer921skills.sh installs
6daymade avatarfinancial-data-collectordaymade/claude-code-skillsCollect real financial data for any US publicly traded company from free public sources (yfinance). Output structured JSON consumable by downstream financial sk917skills.sh installs