design-qa

alirezarezvani/claude-skills Frontend & design Testing & QA

design-qa is a skill in alirezarezvani/claude-skills, last changed 30 Oct 2026. It can run shell commands, reach the network, name web addresses and bundle scripts — read the findings before installing.

From the author

Use when a UI screen, page or component is about to be called done, handed off or shipped, or when generated UI looks generic or half-finished. Gates the rendered result, not the design file - finds controls that do nothing, placeholder copy, removed focus rings, missing loading/empty/error states, low contrast, small targets, hidden focus and broken reflow measured in the real browser, and flags template defaults without blocking on taste.

How much a skill can do, not whether it is risky.

Pattern check

Nothing flagged

That isn't proof the skill is harmless.

Commit e4a1dc3 · 31 Oct 2026

How the check works

Pattern check: nothing flagged

That isn't proof the skill is harmless.

Install

Each tab says whether it installs commit e4a1dc3, the one we checked, or the latest version.

OpenCode also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.

Goose also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.

Windsurf (Devin Desktop) also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.

Zed also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.

Roo Code also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.

Factory Droid also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.

Junie also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.

Amp also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.

No install command here reaches Kiro. Copy the skill's folder into .kiro/skills/ in your project, or ~/.kiro/skills/ for all your projects. alirezarezvani/claude-skills/product-team/skills/design-qa (opens in a new tab)

Antigravity also looks in .agents/skills/, so the Any agent steps reach it with This project. For All projects, see where Antigravity looks.

Cline also looks in .claude/skills/, so the Claude Code steps reach it with This project. For All projects, see where Cline looks.

No tab for your agent? Use Any agent for OpenCode, Goose, Windsurf (Devin Desktop), Zed, Roo Code, Factory Droid, Junie and Amp. With This project, Any agent also reaches Antigravity and Claude Code reaches Cline. Kiro needs the folder copied by hand.

Pinned to commit e4a1dc3, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/alirezarezvani/claude-skills.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin e4a1dc3695908dd5a6c811cc76ab7aa4cf95f2f0 &&git -C "$tmp" sparse-checkout set -- product-team/skills/design-qa &&git -C "$tmp" checkout -q e4a1dc3695908dd5a6c811cc76ab7aa4cf95f2f0 &&mkdir -p .claude/skills &&mkdir .claude/skills/design-qa &&cp -R "$tmp"/product-team/skills/design-qa/. .claude/skills/design-qa/ &&rm -rf "$tmp"

If Claude Code was already running and this created the skills folder, run /reload-skills.

Claude Code docs

Pinned to commit e4a1dc3, the one we checked.

Skills in the Claude apps belong to your account rather than to a project.

Make design-qa.zip, with the skill folder at the top level:

tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/alirezarezvani/claude-skills.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin e4a1dc3695908dd5a6c811cc76ab7aa4cf95f2f0 &&git -C "$tmp" sparse-checkout set -- product-team/skills/design-qa &&git -C "$tmp" checkout -q e4a1dc3695908dd5a6c811cc76ab7aa4cf95f2f0 &&out="$(mktemp -d)" &&cp -R "$tmp"/product-team/skills/design-qa "$out"/design-qa &&(cd "$out" && zip -qr - design-qa) > design-qa.zip &&rm -rf "$tmp" "$out"

In Claude, open Customize > Skills, select +, then + Create skill > Upload a skill, and choose design-qa.zip.

On Free, Pro and Max plans, turn on Code execution and file creation (Create and edit files in newer settings) under Settings > Capabilities.

Claude apps docs

Pinned to commit e4a1dc3, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/alirezarezvani/claude-skills.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin e4a1dc3695908dd5a6c811cc76ab7aa4cf95f2f0 &&git -C "$tmp" sparse-checkout set -- product-team/skills/design-qa &&git -C "$tmp" checkout -q e4a1dc3695908dd5a6c811cc76ab7aa4cf95f2f0 &&mkdir -p .agents/skills &&mkdir .agents/skills/design-qa &&cp -R "$tmp"/product-team/skills/design-qa/. .agents/skills/design-qa/ &&rm -rf "$tmp"

Codex picks up new skills on its own; restart it if this one does not appear.

Codex docs

Pinned to commit e4a1dc3, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/alirezarezvani/claude-skills.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin e4a1dc3695908dd5a6c811cc76ab7aa4cf95f2f0 &&git -C "$tmp" sparse-checkout set -- product-team/skills/design-qa &&git -C "$tmp" checkout -q e4a1dc3695908dd5a6c811cc76ab7aa4cf95f2f0 &&mkdir -p .cursor/skills &&mkdir .cursor/skills/design-qa &&cp -R "$tmp"/product-team/skills/design-qa/. .cursor/skills/design-qa/ &&rm -rf "$tmp"

Cursor docs

Pinned to commit e4a1dc3, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/alirezarezvani/claude-skills.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin e4a1dc3695908dd5a6c811cc76ab7aa4cf95f2f0 &&git -C "$tmp" sparse-checkout set -- product-team/skills/design-qa &&git -C "$tmp" checkout -q e4a1dc3695908dd5a6c811cc76ab7aa4cf95f2f0 &&mkdir -p .github/skills &&mkdir .github/skills/design-qa &&cp -R "$tmp"/product-team/skills/design-qa/. .github/skills/design-qa/ &&rm -rf "$tmp"

In a running Copilot CLI session, run /skills reload.

Or install it with gh skill, which also installs the commit we checked. Needs GitHub CLI 2.90 or later.

gh skill install alirezarezvani/claude-skills product-team/skills/design-qa/SKILL.md@e4a1dc3695908dd5a6c811cc76ab7aa4cf95f2f0 --agent github-copilot --scope project

Copilot & VS Code docs

Pinned to commit e4a1dc3, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/alirezarezvani/claude-skills.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin e4a1dc3695908dd5a6c811cc76ab7aa4cf95f2f0 &&git -C "$tmp" sparse-checkout set -- product-team/skills/design-qa &&git -C "$tmp" checkout -q e4a1dc3695908dd5a6c811cc76ab7aa4cf95f2f0 &&mkdir -p .gemini/skills &&mkdir .gemini/skills/design-qa &&cp -R "$tmp"/product-team/skills/design-qa/. .gemini/skills/design-qa/ &&rm -rf "$tmp"

In a running session, run /skills reload.

Or use Gemini CLI’s own installer. Installs the latest version, not the one we checked.

gemini skills install https://github.com/alirezarezvani/claude-skills.git --path product-team/skills/design-qa --scope workspace

Gemini CLI docs

Pinned to commit e4a1dc3, the one we checked.

OpenCode, Goose, Windsurf (Devin Desktop), Zed, Roo Code, Factory Droid, Junie, Amp and Antigravity read .agents/skills in a project.

From your project's root folder:

tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/alirezarezvani/claude-skills.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin e4a1dc3695908dd5a6c811cc76ab7aa4cf95f2f0 &&git -C "$tmp" sparse-checkout set -- product-team/skills/design-qa &&git -C "$tmp" checkout -q e4a1dc3695908dd5a6c811cc76ab7aa4cf95f2f0 &&mkdir -p .agents/skills &&mkdir .agents/skills/design-qa &&cp -R "$tmp"/product-team/skills/design-qa/. .agents/skills/design-qa/ &&rm -rf "$tmp"

Or use the skills CLI from skills.sh. Installs the latest version, not the one we checked. The skills CLI reports installs to skills.sh unless you set DISABLE_TELEMETRY=1.

npx skills@1.7.4 add alirezarezvani/claude-skills --skill design-qa

Agent Skills docs

Read SKILL.md first

MIT

Licence

29.1k

Repo stars

Folder last changed

Publisher

Files

Checked

31 Oct 2026

What it can touch

From the files and frontmatter at commit e4a1dc3. This is how much a skill can do, not whether it is risky.

Runs shell commands
Its instructions or files give the agent commands to run on your computer.
Reaches the network
It sends or fetches data over the internet, for example with curl, an HTTP library or a package install.
Names web addresses
It mentions outside web addresses the agent may visit. We list them but don't follow them.
Outside links we did not follow
Bundles scripts
The folder holds code files the agent may run.

Pattern check

Pattern check: nothing flagged · commit e4a1dc3 · 31 Oct 2026

We checked every text file in this skill, at commit e4a1dc3 on 31 Oct 2026, against 45 published patterns such as download-and-run commands, hidden text and credential access. We don't run the skill, we don't read the web pages it points to, and we can't judge everything its instructions might lead an agent to do. In published tests, pattern checks like this one missed most malicious skills. Read the skill before you install it — especially anything it asks you to download or run.

How the check works Report an incorrect finding

Outside links we did not follow

https://github.com/anthropics/skills/tree/main/skills/frontend-design
https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html
https://www.refactoringui.com/
https://www.nngroup.com/articles/aesthetic-usability-effect/
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
https://github.com/alirezarezvani/claude-skills/issues/962
https://www.nngroup.com/articles/ten-usability-heuristics/
https://www.nngroup.com/articles/response-times-3-important-limits/
https://m3.material.io/foundations/interaction/states/overview
https://design-system.service.gov.uk/components/error-summary/

Show 9 more

https://www.nngroup.com/articles/empty-state-interface-design/
https://www.w3.org/TR/WCAG22/
https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html
https://www.w3.org/WAI/WCAG22/Understanding/reflow.html
https://html.spec.whatwg.org/multipage/interaction.html#focus
https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo
https://www.w3.org/TR/accname-1.2/
https://developer.apple.com/design/human-interface-guidelines/accessibility

Format check

Each agent reads SKILL.md a little differently. We check the file against each one's published rules; we don't run the skill in any agent.

Agent Skills specPasses with warnings
The open format from agentskills.io, held to what the strictest agents enforce, so one folder loads everywhere.
- Warning
  Fields outside the spec: argument-hint (read by Claude Code and VS Code). Uploads to the Claude apps and API, and the spec's validator, reject the file; most agents ignore these fields. O1
  Fix: Delete them for a portable skill, or keep them if you only target the agents that read them.
- Note
  Reference files over 100 lines with no table of contents at the top: references/rendered_checks_wcag22.md (102 lines). B5
  Fix: Add a short list of the sections at the top of each.
Claude CodePasses
Claude Code reads its own extra fields, ignores unknown ones, and still loads a skill whose frontmatter is broken, without its fields.
- Note
  Reference files over 100 lines with no table of contents at the top: references/rendered_checks_wcag22.md (102 lines). B5
  Fix: Add a short list of the sections at the top of each.
Claude apps & API uploadFails
Uploading to claude.ai or the Claude API, or packaging with Anthropic's script, accepts only the six spec fields and stops on anything else.
- Error
  Upload and packaging fail on fields outside the spec: argument-hint. O1
  Fix: Delete them, and keep your own data under metadata as text values.
- Note
  The description is 444 characters. The claude.ai Help Center says 200 at most, though Anthropic's API docs and validator allow 1,024. D4
  Fix: If the claude.ai upload refuses it, trim the description to 200 characters.
- Note
  Reference files over 100 lines with no table of contents at the top: references/rendered_checks_wcag22.md (102 lines). B5
  Fix: Add a short list of the sections at the top of each.
OpenAI (Codex & API)Passes with warnings
Codex finds SKILL.md by its exact name and needs a description; OpenAI's Skills API checks the frontmatter against the spec and caps uploads.
- Warning
  Fields outside the spec: argument-hint. Codex ignores them; OpenAI doesn't say whether its upload accepts them. O1
  Fix: Delete them, or move your own data under metadata as text values.
VS Code & CopilotPasses

SKILL.md

Read SKILL.md on GitHub

Files

13 files

Path	Size
SKILL.md (opens in a new tab)	5.5 KB
assets/capture_snapshot.mjs (opens in a new tab)	3.4 KB
assets/collect_snapshot.js (opens in a new tab)	9.6 KB
assets/finish_signoff.md (opens in a new tab)	1.8 KB
assets/snapshot.example.json (opens in a new tab)	3.1 KB
assets/states.example.csv (opens in a new tab)	1.2 KB
assets/waivers.example.csv (opens in a new tab)	263 B
references/generic_ui_defaults.md (opens in a new tab)	6.4 KB
references/interaction_states.md (opens in a new tab)	5.9 KB
references/rendered_checks_wcag22.md (opens in a new tab)	6.7 KB
scripts/finish_lint.py (opens in a new tab)	17.8 KB
scripts/rendered_audit.py (opens in a new tab)	16.9 KB
scripts/state_matrix_checker.py (opens in a new tab)	11.8 KB

More from alirezarezvani/claude-skills

Skill	What it can touch	Pattern check	Licence	Updated
a11y-auditUse for any accessibility audit or a11y fix (WCAG 2.2 A/AA, color contrast, compliance report, CI check) in React, Next.js, Vue, Angular, Svelte or HTML. Scans with a11y_scanner.py and checks contrast with contrast_checker.py, then fixes and re-verifies. Runs shell commands +2 more Pattern check: Nothing flaggedMITUpdated 30 Oct 2026	Runs shell commands Names web addresses +1 more	Pattern check: Nothing flagged	MIT	30 Oct 2026
ab-test-setupUse before planning or launching any A/B, split or multivariate test, or when asked if a result is significant. Sizes the test with sample_size_calculator.py and writes the hypothesis, metric and stop rule first, so it is not called early on noise. Runs shell commands +2 more Pattern check: Nothing flaggedMITUpdated 30 Oct 2026	Runs shell commands Names web addresses +1 more	Pattern check: Nothing flagged	MIT	30 Oct 2026
access-lifecycleUse when preparing or running a user access review, checking that leavers lost their access, finding orphaned or ownerless service accounts, answering an auditor's access-control request for SOC 2, ISO 27001, PCI DSS, HIPAA or NIST 800-53, or checking whether a finished review campaign will hold up. Diffs the HR roster against account exports, tests the campaign for coverage, self-review, unremoved revokes and rubber-stamping, and maps every exception to the controls it breaks. Runs shell commands +2 more Pattern check: Nothing flaggedMITUpdated 27 Oct 2026	Runs shell commands Names web addresses +1 more	Pattern check: Nothing flagged	MIT	27 Oct 2026
ad-creativeUse for any ad copy request (RSA headlines, Meta, LinkedIn or TikTok ads, bulk variations), before writing. Checks every line against platform character limits and policy with ad_copy_validator.py. Campaign strategy and budgets: paid-ads. Bundles scripts Pattern check: Nothing flaggedMITUpdated 30 Oct 2026	Bundles scripts	Pattern check: Nothing flagged	MIT	30 Oct 2026
adversarial-reviewerUse before merging a PR or when a self-review feels too agreeable and the change needs a genuinely critical read. Reviews the diff through hostile reviewer personas that catch blind spots the author and a friendly reviewer share. Runs shell commands Pattern check: Nothing flaggedMITUpdated 30 Oct 2026	Runs shell commands	Pattern check: Nothing flagged	MIT	30 Oct 2026
aeoUse when content should be cited by ChatGPT, Perplexity, Claude or Gemini (answer engine optimization), before rewriting it. Scores E-E-A-T and structure with aeo_audit.py, rewrites with aeo_optimizer.py and logs citations with citation_tracker.py. Runs shell commands +3 more Pattern check: Nothing flaggedMITUpdated 30 Oct 2026	Runs shell commands Reaches the network +2 more	Pattern check: Nothing flagged	MIT	30 Oct 2026

All skills in alirezarezvani/claude-skills

Other Frontend & design skills

Same category, most repo stars first.

Skill	What it can touch	Pattern check	Licence	Updated
accessibilityDesign, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast, target size, and screen-reader support. Use when building or auditing UI for accessibility compliance, keyboard navigation, or screen-reader support. affaan-m/ECC Names web addresses Pattern check: Nothing flaggedMITUpdated 27 Sept 2026	Names web addresses	Pattern check: Nothing flagged	MIT	27 Sept 2026
android-clean-architectureClean Architecture patterns for Android and Kotlin Multiplatform projects — module structure, dependency rules, UseCases, Repositories, and data layer patterns. Use when structuring modules, layers, or data flow in an Android or KMP project. affaan-m/ECC Instructions only Pattern check: Nothing flaggedMITUpdated 11 Aug 2026	Instructions only	Pattern check: Nothing flagged	MIT	11 Aug 2026
algorithmic-artCreating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations. anthropics/skills Names web addresses +1 more Pattern check: Nothing flaggedApache 2.0Updated 20 Apr 2026	Names web addresses Bundles scripts	Pattern check: Nothing flagged	Apache 2.0	20 Apr 2026
brand-guidelinesApplies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply. anthropics/skills Names web addresses Pattern check: Nothing flaggedApache 2.0Updated 20 Apr 2026	Names web addresses	Pattern check: Nothing flagged	Apache 2.0	20 Apr 2026
design-consultationDesign consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview... (gstack) garrytan/gstack Changes agent settings +4 more Pattern check: 1 item to reviewMITUpdated 31 Oct 2026	Changes agent settings Runs shell commands +3 more	Pattern check: 1 item to review	MIT	31 Oct 2026
design-htmlDesign finalization: generates production-quality Pretext-native HTML/CSS. (gstack) garrytan/gstack Runs shell commands +4 more Pattern check: 1 item to reviewMITUpdated 31 Oct 2026	Runs shell commands Reaches the network +3 more	Pattern check: 1 item to review	MIT	31 Oct 2026

At a glance

What it can touch

Pattern check

Install

Claude Code

Claude apps

Codex

Cursor

Copilot & VS Code

Gemini CLI

Any agent

What it can touch

Pattern check

Outside links we did not follow

Format check

SKILL.md

Files

More from alirezarezvani/claude-skills

Other Frontend & design skills