Ostraca

Ostraca

Illustrations for every state your product is in, drawn by your agent.

npx skills add ahmedamr-r/ostraca
npm i ostraca

The skill draws new figures. The package renders them, and the 34 that come with it.

Inbox, empty
State
Your app passes<Ostraca name="inbox" state="empty" crew />
Remarks

The lines are down. Everything else is still a rumour.

Ostraca is a skill for coding agents and the engine it draws with. Name any object and your agent draws it as a small building elevation that can be set out, rising, built, signed off, revised or out of true, checked against the rules before it reaches you. Your app passes the state and its real values, and the drawing follows. 34 figures come ready to use, from an inbox to a stove.

Mailbox
Noticeboard, loading, 55 percent
Seats
Coins
Trolley, done
Calendar, changed
Laptop
Stove, something went wrong
Street elevation: a mailbox, a noticeboard going up, a row of seats, coins, a trolley signed off, a revised calendar, a laptop and a stove out of true, with the crew on site.

Any object, one hand

Ask for an illustration, or name an object or a moment such as something for a fitness app. The agent asks which states you need and whether you want a figure for your app or one SVG picture, then draws it and checks every state before you see it.

One subject, six states

Pass state and the drawing moves there: a dashed set-out for empty, scaffolding for loading, a tick for done, a revision cloud for changed and a plumb line for an error.

Plain SVG, real values

render() returns a string on the server or in the browser, with no runtime dependencies. A count or a version on a drawing comes from your app through figure and rev. With nothing passed, nothing is written.