Skip to content
Back to skills

Test

ASecurity

Validate the prototype against WCAG criteria and the component contract

  • 2 stars
  • 0 votes
  • 0 copies
  • 1 view
  • Added October 17, 2026
ai-agentsgonode

Works with

  • mcp

Security analysis

A100/100

Scanned October 17, 2026

npx -y skills add bromso/metapowers --skill test --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Test?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Test
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/bromso-test/badge)](https://www.skillsdirectory.com/skills/bromso-test)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
description: Validate the prototype against WCAG criteria and the component contract
---

# Test

Validate the "$ARGUMENTS" prototype against the component contract and WCAG accessibility criteria.

## Prerequisites

Read `.metapowers/design/$ARGUMENTS/04-prototype.md`. If this file does not exist, tell the user:

> Phase 4 (Prototype) has not been completed for "$ARGUMENTS". Run `/design:prototype $ARGUMENTS` first, or use `--skip-checks` to bypass.

If `--skip-checks` is present in $ARGUMENTS, skip this check and log to `.metapowers/design/$ARGUMENTS/skip-log.md`.

## Process

1. **Read context files:**
   - Read `.metapowers/design/$ARGUMENTS/02-define.md` for the component contract
   - Read `.metapowers/design/$ARGUMENTS/04-prototype.md` for prototype notes and component node ID
   - Read `plugins/design/shared/wcag-criteria.md` for accessibility criteria

2. **Run accessibility checks** via MCP tools:
   - Call `figma_a11y_lint` with the component's node ID to check text size, touch targets, image alt text
   - Call `figma_a11y_scorecard` with the component's node ID for an overall scorecard
   - Call `figma_a11y_focus_order` with the component's node ID to validate tab order

3. **Check color contrast:**
   - Call `figma_a11y_contrast_check` for each foreground/background color pair used in the component
   - Call `figma_a11y_color_blind_sim` for primary color pairs across protanopia, deuteranopia, tritanopia

4. **Verify contract compliance.** For each requirement in the component contract:
   - Props: Are all specified props represented in the component?
   - Variants: Does the component have all variant combinations?
   - States: Are all states (hover, focus, active, disabled, error, loading) represented?
   - Tokens: Are all visual values using design system tokens?

5. **Generate the test report** with:
   - Contract compliance checklist (pass/fail per requirement)
   - WCAG validation results (from lint and contrast checks)
   - Color blindness simulation results
   - Issues found with remediation suggestions
   - Overall pass/fail status

6. **Write the artifact** to `.metapowers/design/$ARGUMENTS/05-test.md`

## Output

The test report written to `.metapowers/design/$ARGUMENTS/05-test.md`. Present to the user:
- Overall pass/fail status
- Number of issues found by category (contract, WCAG, color blindness)
- Critical issues requiring immediate attention
- Remediation suggestions for failed checks

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.