Your AI-generated components are missing five states

Every model gives you default and hover. Then a real user tabs into the field, or the network hangs, and you find out what was never built. Here is a Claude Skill that refuses to ship a component with

Ask any model for a button. You will get something that looks right in a screenshot.

Then you tab to it with a keyboard and there is no focus ring. You disable it during submit and it still looks clickable. The request hangs for four seconds and nothing tells the user anything is happening. Validation fails and the error is a red border with no text, announced to a screen reader as nothing at all.

The component was never wrong. It was incomplete, and incomplete in the same five places every single time.

The seven states

A component is not one thing. It is seven, and most generated code covers two.

Focus, active, disabled, error, and loading. Five states, and they are the five that only show up when something goes wrong or when someone is not using a mouse. Which is to say they are the five that matter most and get tested least.

The reason models skip them is not ignorance. It is that you asked for a search input and a search input in the default state is a complete answer to that question. Nobody writes out the other six. So the model builds what you said.

A skill that makes the seven states non-negotiable

frontend-dev is a Claude Skill that treats a specification as a contract and refuses to ship against a partial one.

It runs in three operational modes. The Contract Validator checks your spec for completeness before any code is written, lists what is missing, states the default it intends to apply for each gap, and waits for you to approve. The Component Builder implements bottom-up in Brad Frost’s atomic order, atoms then molecules then organisms, with all seven states on every component. The Quality Auditor then scores its own output on token fidelity, state coverage, accessibility, responsive behavior, heuristic compliance, and security, and prints the card.

What it enforces on everything it writes:

• All seven states. Not optional, not on request.

• WCAG AA as the floor. Contrast, visible focus, ARIA, keyboard reachability, and 44px minimum touch targets.

• OWASP patterns wherever a component touches user input, auth, or an API. No secrets in frontend code, sanitized user content, validated URLs.

• Design tokens, never hardcoded values. If your spec defines #2563EB as primary, that is what appears, as a variable.

• Mobile first, with the breakpoint order stated rather than assumed.

• A test scaffold with every component, unit plus accessibility, following Kent C. Dodds’s Testing Trophy.

The reference material behind it is 7 files and roughly 160 indexed entries covering component architecture, testing, accessibility, security, performance, and anti-pattern interception, drawn from Brad Frost, Kent C. Dodds, Heydon Pickering, Addy Osmani, Luke Wroblewski, the W3C Web Accessibility Initiative, and OWASP. The skill file itself is 467 lines of routing that decides which of those to load before it writes anything.

The part I find most useful is what it will not do. It does not make design decisions. Ask it to pick your colors and it tells you to decide first. Ask it to change the spec mid-build and it pushes back, explains the consequence, offers the correct alternative, and makes you confirm. It implements. That constraint is the whole product.

What I fixed before shipping it

I want to be straight about how this reached you, because the honest version is more useful than the launch version.

I did not write this skill. I packaged it, checked it, and fixed two real defects in it. Both would have hit you.

The archive was built wrong. The original ZIP was flat: SKILL.md sat at the root with no containing folder. That is not the layout the claude.ai uploader expects, and it is not how the same author’s other skills are packaged, which means at least one of them was zipped by hand. My build tooling repackages from source and verifies the root before it will publish, so the version you download is normalized.

It dead-ended anyone installing it on its own. The skill was written as one node of a larger suite, and it hard-required a sibling called UX Designer. The frontmatter opened with REQUIRES structured Deployment Code input from UX Designer skill, and the no-spec path said, in effect, go run the UX Designer skill first. UX Designer appeared 8 times in the skill file and twice in its guardrails. Install this by itself, ask for a toast component, and you would be redirected to a skill you do not have and cannot get.

I patched it so a spec you write, or answers to a short four-question intake, count as a contract of equal standing. Same completeness checklist, same Contract Summary, same refusal to invent what you did not specify. It is still spec-strict. It just no longer sends you somewhere that does not exist.

I verified the repackaged version differs from the original in exactly those two files and nowhere else.

One thing I have not done is grade its output against carefully prompted Claude on your codebase. I checked what it contains and what it instructs. Whether the components it produces beat what you would get by asking well is yours to judge, and I would rather say that than sell you a number I did not measure.

Install it

claude.ai (Pro, Max, Team, or Enterprise): download frontend-dev.zip from the latest release, then Settings, Capabilities, Skills, Add, Upload a skill. Do not unzip it first.

Claude Code, from the marketplace:

/plugin marketplace add bloodyburger/skillsmith

/plugin install frontend-dev@skillsmith

/reload-plugins

Claude Code, one command:

curl -fsSL https://raw.githubusercontent.com/bloodyburger/skillsmith/main/scripts/install.sh | bash -s -- frontend-dev

Then try the thing that usually exposes missing states:

Build a notification toast in React + Tailwind. Tokens: primary #2563EB, success #16A34A, error #DC2626, warning #F59E0B, text #111827, gray #6B7280. Four variants, auto-dismiss after 5s, manual close, stacks when multiple fire. WCAG AA. Mobile first. Include tests.

Or point it at code you already have with /audit and see what the Fidelity Score says about your state coverage. That one is uncomfortable and worth doing.

Repo: github.com/bloodyburger/skillsmith

What is next

Everything I put in that repo gets checked the way this one did, then repackaged so the download cannot drift from the source. The validation and build tooling is MIT licensed and sitting right there if you are assembling your own collection.

I am writing up the skills and prompts I actually use, including the parts that needed fixing before they were usable. Subscribe and you will get the next one when it lands.

If you install this and it produces something wrong or thin, open an issue on the repo or reply to this email. I would rather hear that than not.