Senior Designer Toolkit — Product & UX
Three jobs that usually go to three different specialists, in one package.
Run a real WCAG 2.2 AA pass — measured contrast ratios with the nearest passing colour, correct target-size math including the spacing exception, written alt text and error messages, and a remediation table with severity, fix, effort and owner. Build, extract or extend the design system those fixes belong in — W3C-style tokens as JSON and CSS variables, a modular type scale, component specs covering every state — then drift-check what actually shipped against it. And make the numbers legible: the right chart form for the comparison you're making, a colourblind-safe palette, production SVG with alt text and a data table.
Together they cover the path from "something's wrong with this screen" to "here's the spec, the tokens and the chart, ready for dev."
Built by a senior interactive designer with 20+ years in UX/UI, information design and design systems — 3× APEX Award winner — across enterprise, publishing and K-12 education products.
Works with every agent that reads SKILL.md — Claude Code, Cursor, Codex CLI, Gemini CLI, GitHub Copilot, Windsurf, OpenClaw, and more.
One payment, lifetime access. 3 skills unlock instantly in your library.
30-day refund guarantee
Instant unlock in your library
Free updates from the creator
What's included
3 skillsWCAG 2.2 AA review with measured contrast ratios, target-size math and a dev-ready remediation table.
Find the story, pick the right chart, build an accessible palette, ship production SVG — award-winning information design.
Build, extract or extend a design system — and catch where your product has drifted off it.
See it in action
Accessibility & Inclusive Design Review (WCAG 2.2)
Example session with this skill installed
Run an accessibility audit on this login form screenshot. Target WCAG 2.2 AA. The audience is general public, including elderly users.
- Read your context and instructions
- Compiled the accessibility & inclusive
- Generated the UI component
I have completed the accessibility review for the login form. The design currently fails WCAG 2.2 AA due to 2 Critical and 1 Serious barrier.
Accessibility Remediation Report
Executive Summary: Does not meet WCAG 2.2 AA. Found 2 Critical and 1 Serious barriers. Primary issues involve contrast and target size.
| ID | Criterion | Location | Barrier | Severity | Fix | Effort |
|---|---|---|---|---|---|---|
| 1 | 1.4.3 Contrast (Min) | "Forgot Password" link | Light grey on white (2.1:1). Users with low vision cannot read the link. | Critical | Change color from #A0A0A0 to #656565 (4.6:1 ratio). | Low (CSS) |
| 2 | 2.5.8 Target Size | Checkbox for "Remember Me" | Target is 16x16px. Users with motor impairments will struggle to tap. | Serious | Increase touch target area to 24x24px minimum or add 8px padding. | Low (CSS) |
| 3 | 3.3.2 Labels/Instructions | Email/Password fields | Placeholder text used instead of labels. Screen readers may skip fields. | Critical | Add visible <label> elements programmatically linked via for/id. | Med (HTML) |
| 4 | 1.1.1 Non-text Content | Submit Arrow Icon | Missing accessible name. Screen reader hears "Button". | Moderate | Add aria-label="Sign In" to the button element. | Low (HTML) |
Contrast Analysis
- Primary Button: #0055FF on white (5.2:1) - PASS
- Error Text: #FF0000 on white (4.0:1) - FAIL. Suggested fix: #D90000 (4.5:1).
Inclusive & Cognitive Review
- Reading Level: Grade 6. Suitable for general public and elderly users.
Inclusive Design: The form uses a binary "Gender" dropdown (Optional). Recommendation: Change to open text or add "Non-binary/Prefer not to say".
Next steps
- Update the CSS for the "Forgot Password" link and Error text using the suggested HEX codes.
- Wrap input fields in standard label tags to ensure screen reader compatibility.
- Test the updated form with a keyboard-only user to verify focus styles.
accessibility-inclusive-design-review-wc.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every skill in this bundle passes our trust checks.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back