Claude skills

I can design but I can't code. These are the instructions I've written for Claude so what it builds for me holds up: the engineering, the handoff from Figma, the design system, accessibility, critique and the words. Every rule in them points to where it came from. They're set up for my own projects, so the downloads are locked.

Engineer

The senior engineer on my projects. I can't read code, so it does the reviewing and testing too: runs the checks before and after, opens every page at phone and desktop width, and reports back in plain words with screenshots. It can audit a whole app on its own and only tell me what it could prove.

In it: standards for shipping, security, data, front end, accessibility and design, a page on each of my repos and what not to break in it, the audit routine, and a script that scans for broken design rules.

Used in: Every app

Locked
Figma to code

I design in Figma and build with Claude, and the handoff was always where it went wrong: hex values copied from the frame, a layout that worked at one width, no idea what happens when a list is empty. This builds the screen from my design system instead. It matches every value in the frame to a token and tells me which ones have no match, makes it work on a phone and a laptop, then screenshots what it built next to Figma's render and fixes what's off.

In it: a 9-step checklist, a script that matches Figma values to tokens, a script that compares screenshots, and notes on responsive layout, states and accessibility.

Used in: Any app on obvious, with Figma's MCP server

Locked
Design system guardian

Keeps new screens made from obvious. Before it writes any CSS it finds the app's theme and reaches for a token or a component that already exists. It runs my audit before and after, and every value that goes around the system is either swapped for its token or written down with a measured reason. The first time I ran it, it found an app passing its own audit at 0 that the current audit put at 52.

In it: a checklist, the order to build from, the audit read line by line, rules for exceptions and budgets, when something belongs in obvious itself, and 2 scripts: one reads an app's setup, one finds the nearest token for a value.

Used in: Every app on obvious

Locked
Accessibility review

Checks a page against WCAG 2.2 AA the way a decent tester would. Automated tools find some of the problems and none of the judgement calls, so after the measured pass it goes through with a keyboard, a narrow screen, bigger text spacing and the screen reader's view, and checks dialogs and menus against how they're meant to behave. It throws out what the tools got wrong and tells me who each problem stops.

In it: a measured pass script, the manual checks for WCAG 2.2 AA including everything new in 2.2, the ARIA patterns for common widgets, severity rules, known false positives and a report template.

Used in: Before a new screen, form or flow ships

Locked
Design critique

Feedback the way a good design lead gives it in a crit. It writes down what the screen is for and who it's for first, and says when it's guessing. Then it opens the app at phone and desktop width, clicks through the flow and makes the empty, loading and error states appear. Findings are ranked by how much they get in the way of the task, with what's working and plain taste kept separate.

In it: a goal-first procedure, 12 things to look at tied to obvious's tokens, a screenshot script, ways to make every state appear, and Nielsen's severity scale.

Used in: Any screen, flow or prototype

Locked
UX writing

Content design with no voice of its own, so it uses whatever voice guide a product already has. It covers what goes on a button, how an error says what went wrong and how to fix it, when a confirm dialog earns its place, alt text and labels that work with a screen reader, and copy that survives translation. A script pulls every string out of an app so the copy can be read without opening the code.

In it: patterns for every common interface string, readability research, accessibility text, inclusive language, writing for translation, a term list and the string-finding script.

Used in: Any app with words on screen

Locked

Asking for a copy

Ask me and I'll talk you through them. Figma to code is the one I'd start with.

Engineer

Figma to code

Design system guardian

Accessibility review

Design critique

UX writing

Asking for a copy