Skip to content
Matija Vojvodic

Skills

Design judgement, written down so AI agents can use it. These skills come from the workflow I use every day. The first kit checks designs for accessibility before any code is written. Free to download and use, MIT licensed.

Accessibility at design time

Download the kit →

Accessibility problems are cheapest to fix before a line of code exists. Two skills review a design against WCAG and pin the findings onto it in Figma, so they are fixed while designing.

  • Skill

    WCAG 2.2 design review

    Reviews a Figma screen or flow against WCAG 2.2 Level A and AA. Writes a dated report (findings by severity, a criterion table, handoff annotations, unknowns) and a findings file for the next step. It never claims conformance: a design cannot prove keyboard or screen-reader behaviour.

    Download wcag-design-review.zip →

  • Skill

    Figma accessibility annotations

    Pins review findings onto their Figma layers as native annotations, one per layer per review. Runs through an agent that can execute Figma plugin code, or through the bundled Figma plugin with Preview, Publish and Remove.

    Download figma-a11y-annotations.zip →

How the kit works

  • Step 1

    Review the design

    Every WCAG 2.2 A and AA criterion is checked against what the design can actually show. Each gets one status, and every Fail cites the layer, the measured value and a severity.

  • Step 2

    Pin findings onto the design

    The findings file becomes native Figma annotations on the exact layers, tagged with the review's marker. Re-publishing replaces them; removing clears only that review.

  • Step 3

    Fix and hand off

    The designer fixes what fails and decides what to accept. What a design cannot show (focus order, accessible names, roles, live regions, error text) goes into the handoff.

  • Step 4

    Re-review

    Run the review again on the changed screens. The new report names the previous one and states which findings closed.

Install

Copy the skill folders into your agent's skills folder. Each is a plain SKILL.md with references, so it works with any agent that reads skills. Each kit's README explains how to start, and its PROCESS.md shows how the skills fit together.