Wensity

Accessibility and UI states skill.

Teaches your AI coding agent to build every state, not just the happy path: hover, focus, loading, empty, errors, success and offline, plus keyboard, touch and screen reader access.

Mockups show the moment everything works. Real products spend much of their time somewhere else: waiting for data, holding nothing yet, rejecting input, or sitting under a keyboard user's focus. This skill makes your agent write down every state a component can be in before it builds, then confirm each one is there, keyboard and screen reader paths included, before it hands the work back.

Skill
wensity-states
Plan
Included with Wensity Pro
Loads when
Building a form, flow, list, table, menu or dialog, or anything with a save or submit
Works in
Claude Code, Codex, Cursor, GitHub Copilot, Windsurf, Gemini CLI, OpenCode
Format
Agent Skills (SKILL.md), plain files in your project
Pack
One of the Wensity design skills for AI coding agents

Install

1. Sign in once. The CLI asks for an API token from your dashboard and saves it, so you never paste it into a chat.

terminal
pnpm dlx wensity@latest login

2. Add the skill. It goes into every agent the CLI finds in your project.

terminal
pnpm dlx wensity@latest skills add wensity-states

Accessibility and UI states comes with Wensity Pro, together with every Pro skill, component, block and template.

Get Pro

When it loads

You never call a skill by name. Your agent reads the short description at the top of every installed skill and loads this one when the work calls for it. Requests like these bring it in:

  • Build an account settings form and handle saving, validation errors and a failed save properly.
  • This table only handles the happy path. Add the other states.
  • Make this menu and dialog work with the keyboard.

What it covers

State lists
The states each common component needs, from a button to a page with data, written before any code.
Interaction states
Hover only where hover exists, a visible focus ring that survives forced colors mode, pressed and disabled.
Loading and empty
Skeletons that match the content, no flash for fast responses, and empty states that say what to do next.
Errors and success
Field, form, section and page errors, offline and permission states, and feedback sized to the action.
Content extremes
Very long names, missing images, one item and ten thousand items.
Keyboard, touch, screen readers
Tab order, Escape, focus trapping in dialogs, 44px targets, the right mobile keyboards and labels on everything.

Step through every state

One invite form in all seven of its states, from idle to disabled. Pick a state and both versions show it side by side.

Both invite forms in their idle state.

Without the skill

Invite a teammate

Email
Editor
Send

Without the skill: The only state anyone looked at. The field has no label, just grey placeholder text.

With the skill

Invite a teammate

Email
name@company.com

We email them a link that works for 7 days.

Send invite

With the skill: A label above the field, a line of help below it, and one clear action.

Feed it real content

A team list meets the names and numbers real data brings. Stretch the first name and set the team from nobody to a thousand people.

48 characters
8

Without the skill

8 members

Invite
  • Maximiliane Charlotte von Hohenberg-LichtensteinOwner
  • Theo OkaforViewer
  • Priya ParkEditor
  • Jonas RossiAdmin
  • Leila AzizViewer
  • Marco LindEditor
  • Yuki KimViewer
  • Sam BeckerEditor

Cut off here. Drawn in full, this card would be about 474px tall.

Without the skill: Built for sample data only: long names run out of the card, a missing photo leaves a hole, 1 members, an empty box, and every row drawn at once.

With the skill

8 members

Invite
  • Maximiliane Charlotte von Hohenberg-LichtensteinOwner
  • Theo OkaforViewer
  • Priya ParkEditor
  • Jonas RossiAdmin
  • Leila AzizViewer
  • Marco LindEditor
1 to 6 of 8

With the skill: Long names wrap, a missing photo becomes initials, one person reads as 1 member, an empty team says how to fill it, and a thousand people come a page at a time.

Key rules

List the states first
Every interactive component starts with its state list, and each state is built on purpose.
Keep what was typed
A failure never clears the user's input.
Focus is always visible
Keyboard focus shows a real outline, including in Windows forced colors mode.
Hover is a hint
No action is reachable only on hover, so touch and keyboard users can find it.
Errors say how to fix it
Next to the field, linked for screen readers, checked on blur and on submit.
Real elements
Buttons are buttons and links are links, never a div with a click handler.

Files

Everything installs as plain files in your project, in a folder named after the skill.

SKILL.md
State lists per component, the rules and the checklist.

Works well with

  • UX writing

    Free

    Headings, buttons, error messages, empty states and realistic sample content, all written without filler.

  • Dashboard and app UI

    Pro

    App shells, data tables, settings, dashboards, charts, detail panels, command menus and keyboard shortcuts.

  • Motion and animation

    Pro

    When to animate, six duration tiers, four curves, springs without overshoot, reduced motion and 18 recipes.