qa-design

qa-design is a skill for Claude Code from christopherlouet/claude-base. It costs 48 tokens per session (2,280 once invoked), scanned A, original, MIT.

A checklist for auditing a web interface’s usability, accessibility, responsiveness, and visual behavior across devices.

In plain words
What is it for?
It covers keyboard access, forms, animation, typography, images, performance, navigation, dark mode, touch targets, and internationalization.
Why use it?
It helps find issues that make an interface difficult to use, hard to access, slow, inconsistent, or awkward on mobile screens.

Skill for Claude Code

Written for Claude Code: background in frontmatter.

Good fit It covers keyboard access, forms, animation, typography, images, performance, navigation, dark mode, touch targets, and internationalization.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/christopherlouet/claude-base/qa-design
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add christopherlouet/claude-base --skill qa-design
Clone the repo
git clone --depth 1 https://github.com/christopherlouet/claude-base

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for qa-design

README.md
[![agentmods](https://agentmods.dev/badge/skills/christopherlouet/claude-base/qa-design/github.svg)](https://agentmods.dev/skills/christopherlouet/claude-base/qa-design)
Your own site
<a href="https://agentmods.dev/skills/christopherlouet/claude-base/qa-design"><img src="https://agentmods.dev/badge/skills/christopherlouet/claude-base/qa-design/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for qa-design

Your own site · 80×15
<a href="https://agentmods.dev/skills/christopherlouet/claude-base/qa-design"><img src="https://agentmods.dev/badge/skills/christopherlouet/claude-base/qa-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 48 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,280 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00048 $0.02280
Opus 5.5 $0.00019 $0.00912
Sonnet 5.5 $0.00010 $0.00456
Haiku 4.5 $0.00005 $0.00228

Measured 16d ago against content hash 55cebacfef6c, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

qa-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 16d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.claude/skills/qa-design/SKILL.md · 230 lines

How it starts

The opening of the file, as written. The whole thing — 230 lines — stays where its author put it; the contents beside it link to each section on GitHub.

UI/UX Design Audit

Objective

Audit a web interface against 100+ rules covering accessibility, forms, animations, typography, images, performance, navigation, dark mode, and internationalization.

Audit categories

┌──────────────────────────────────────────────────────────────────┐
│                      UI/UX AUDIT                                  │
├──────────────────────────────────────────────────────────────────┤
│                                                                   │
│  1. ACCESSIBILITY       ARIA, contrast, focus, keyboard          │
│  2. FORMS               Validation, feedback, autofill           │
│  3. ANIMATIONS          Performance, reduced-motion, timing      │
│  4. TYPOGRAPHY          Hierarchy, readability, responsive       │
│  5. IMAGES              Alt text, lazy loading, formats          │
│  6. UI PERFORMANCE      Layout shift, first paint, bundle        │
│  7. NAVIGATION          Breadcrumbs, mobile menu, deep links     │
│  8. DARK MODE           CSS variables, images, contrast          │
│  9. TOUCH INTERACTIONS  Target size, swipe, gestures             │
│  10. INTERNATIONALIZATION  RTL, dates, plurals, translations    │
│  11. RESPONSIVE         Breakpoints, mobile-first, viewport       │
│                                                                   │
└──────────────────────────────────────────────────────────────────┘

1. Accessibility

Critical rules

# Rule Verification
A1 Minimum contrast 4.5:1 (normal text) Check CSS colors
A2 Minimum contrast 3:1 (large text, icons) Check CSS colors
A3 Labels on all form fields <label for=""> or aria-label
A4 Alt text on all informative images <img alt=""> non-empty
A5 Full keyboard navigation Tab, Enter, Escape, Arrow keys
A6 Visible focus on interactive elements :focus-visible style
A7 Correct ARIA roles role, aria-* attributes
A8 No purely visual content Text alternatives
A9 Logical heading structure h1 > h2 > h3, no skipping
A10 Skip to content link First focusable element

Read the full file on GitHub · 230 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 16d ago Changed 55cebacfef6c
  2. 23d ago Changed · -4 lines 2fa00ec965ef
  3. 1mo ago First seen · 234 lines · 48 tokens per session scan A cf5c96b63428

Subscribe to this mod's changes

qa-design is a skill published in the GitHub repository christopherlouet/claude-base (5 stars, last pushed yesterday), licensed MIT. It adds 48 tokens to every session and 2,280 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Related

Other skills, from other repositories

frontend-enhancer

Enhance the visual design of web apps: modern UI components, layout, responsive design, color palettes, animations. Use for styling and UI polish; pair with ui-research first for new design directions.

travisjneuman/.claude · 45 tokens

generic-design-system

Complete design system reference for any project - colors, typography, spacing, components, animations. Adapts to project theme and tech stack. Use when implementing UI, choosing colors, creating animations, or ensuring brand consistency. For new design systems, use ui-research skill first.

travisjneuman/.claude · 60 tokens

generic-react-design-system

Complete design system reference for React applications. Covers colors, typography, spacing, component patterns, glassmorphism effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing colors, applying spacing, creating components, or ensuring brand consistency.

travisjneuman/.claude · 59 tokens

generic-static-design-system

Complete design system reference for static HTML/CSS/JS sites. Covers colors, typography, component patterns, animations, and accessibility. Use when implementing UI, choosing colors, or ensuring brand consistency.

travisjneuman/.claude · 44 tokens

generic-static-ux-designer

Professional UI/UX design expertise for static HTML/CSS/JS sites. Covers design thinking, user psychology, visual hierarchy, minimalist interaction patterns, accessibility, and performance-driven design. Use when designing features, improving UX, or conducting design reviews.

travisjneuman/.claude · 56 tokens

agent-accessibility-expert

Specialist subagent: WCAG compliance, screen reader compatibility, and inclusive design patterns. Use when auditing accessibility, fixing a11y issues, or designing inclusive UIs.

travisjneuman/.claude · 41 tokens