Every state of a component. Not just the happy one.
A component is designed full of data. It spends a good part of its life waiting, empty, failing or half filled. The skill forces each of those states through the component’s real API calls, shows them side by side, finds the ones nobody designed, and builds them.
npx skills add c0le0ni/skills --skill coleoni-states
It worked in the demo. Then the Wi-Fi dropped.
The bakery’s day board, from /coleoni-init’s roadmap, in its first version. With data, perfect. In 6 of the other 8 states it showed nothing, crashed or printed “Invalid Date”.
// day board, first version
fetch("/api/orders.json")
.then((r) => r.json())
.then((data) => render(data.orders))
$ /coleoni-states board.html
loading gives no sign it is loading
empty doesn't say there's nothing
partial crashes: null.toUpperCase
error crashes · "Invalid Date"
offline crashes: Failed to fetch
denied crashes · "Invalid Date"
Nine states, from the real API.
The script loads the page once, records the JSON calls the component makes, and then answers them differently for each state.
| State | How it is forced |
|---|---|
| Ready | The real response |
| Loading | The response never arrives |
| Empty | Every list in the real response emptied |
| One, many | Every list with 1 item, and with 30 |
| Missing fields | Half the values in each record set to null |
| Server error | The API answers 500 |
| Offline | The request fails as with no connection |
| No permission | The API answers 401: the session expired |
Force, compare, build.
Some problems need no eyes: a crash, “undefined” on screen. Others need a person: an error message that says nothing. The skill separates them.
-
Records the API
Every JSON call the component makes on a normal load, or the ones you name.
-
Forces each state
Same page, same code, a different answer from the API each time.
-
Flags the obvious
Blank, crashes, raw values, a state identical to another, loading with no sign, empty and errors that say nothing.
-
Shows them together
Tabs for each state and a grid of all of them, so the gaps jump out.
-
Judges the rest
Does loading keep the layout? Does the error say nothing was lost? Is a 401 treated as a 401?
-
Builds the missing ones
In the project’s fetch layer and components, with aria-busy and aria-live. Then runs again.
One command, any agent.
The only package is playwright-core, installed by the agent on first use. It drives the Chrome or Edge you already have.
npx skills add c0le0ni/skills --skill coleoni-states
/coleoni-states http://localhost:3000/orders .orders
-g-a claude-code-a codexnpx skills add c0le0ni/skillsAnything that waits for data.
Lists, dashboards, carts, search results, feeds. It shows the board first.
Every state of a list.
/coleoni-states http://localhost:3000/orders .orders
Choose the API calls.
/coleoni-states the dashboard --api "**/api/stats*"
Build what is missing.
/coleoni-states the cart, build the empty and error states
The engine, from the terminal.
scripts/states.mjs runs on its own too: node states.mjs http://localhost:3000 --select ".orders" --out states-report.
| Option | What it does |
|---|---|
--select ".orders" | The component |
--api "**/api/x*" | API calls to control, repeatable; default: the JSON calls the page makes |
--states a,b | Only some states |
--wait 1200 | How long to wait in each state |
--lang en|pt | Language of the board |
Design the wait, the empty and the failure too.
npx skills add c0le0ni/skills --skill coleoni-states