# Ostraca > Illustrations for every state your product is in, drawn by your agent. An agent skill draws any object as a small building elevation, in all six states or only the ones asked for, for the empty, loading, done and broken screens of a product, and hands it over as a figure the engine renders or as one standalone SVG. 35 figures come ready to use. MIT licensed, no runtime dependencies, works with or without React. By Ahmed Amr (https://ahmedamr.com). Skill: npx skills add ahmedamr-r/ostraca (add -g for every project), or unzip https://skills.ahmedamr.com/ostraca/ostraca.zip into the agent's skills folder, then ask for an illustration or /ostraca . It asks which states (default all six), a figure or an SVG picture (default a figure), and for a picture the theme, the workers, the background and the colours. Install: npm i ostraca Source: https://github.com/ahmedamr-r/ostraca ## Pages - [Home](https://skills.ahmedamr.com/ostraca): what it is and how to install it - [Skill](https://skills.ahmedamr.com/ostraca/skill): the agent skill that draws any object as a figure - [Figures](https://skills.ahmedamr.com/ostraca/figures): the ready-made figures, on their shelves - [Start](https://skills.ahmedamr.com/ostraca/docs) - [Agent skill](https://skills.ahmedamr.com/ostraca/docs/skill) - [Usage](https://skills.ahmedamr.com/ostraca/docs/usage) - [States](https://skills.ahmedamr.com/ostraca/docs/states) - [Options](https://skills.ahmedamr.com/ostraca/docs/options) - [Theming](https://skills.ahmedamr.com/ostraca/docs/theming) - [Workers](https://skills.ahmedamr.com/ostraca/docs/workers) - [Accessibility](https://skills.ahmedamr.com/ostraca/docs/accessibility) ## API ```js import { render, mount, figures, STATES, define } from "ostraca"; import { Ostraca } from "ostraca/react"; // import "ostraca/styles.css"; // needed on every page that shows a drawing ``` Ostraca. Illustrations for every state a product is in. render(name, opts) -> an string; no DOM needed (SSR, email, files) mount(el, name, opts) -> { update(opts), destroy() }; updates animate figures -> [{ name, title, shelf, use, states? }] STATES -> ["idle", "empty", "loading", "success", "changed", "error"] define(description) -> add a figure of your own opts: state one of STATES (default "idle") value 0..1 for loading; leave it out when nobody knows how far rev the app's real version, carried by changed ("2.4", "B") figure { value, unit } a real measure, for figures that draw one crew true puts the workers on site (default false) lettered a short word lettered on the drawing in the drawn pen (A to Z) title the accessible name (default: the figure's title and state) decorative true hides it from assistive tech dir "rtl" mirrors the drawing, not its lettering or figures color any CSS colour for the drawing's lines (default: --ostraca-thing) crewColor any CSS colour for the workers (default: --ostraca-crew) paperColor any CSS colour for the paper under the drawing (default: --ostraca-paper) ## States - empty: set out. Planned, nothing made yet. Empty, first run. - loading: rising. In progress. Loading, uploading, syncing. - idle: built. It exists and nothing is happening to it. - success: signed off. Done and confirmed. - changed: revised. Changed since it was confirmed. - error: out of true. Something failed. ## Figures ### Messages - inbox (OS-101): Inbox zero, no messages yet, new mail coming in, a message that failed to send. figure: Unread messages. https://skills.ahmedamr.com/ostraca/figures/inbox - bell (OS-102): Notifications, all caught up, alerts muted, a reminder going out. figure: Unread notifications. https://skills.ahmedamr.com/ostraca/figures/bell - mailbox (OS-103): Email, newsletters, subscribe forms, a confirmation sent, an address that bounced. figure: Unread messages, raising the flag above zero. https://skills.ahmedamr.com/ostraca/figures/mailbox - noticeboard (OS-104): Comments, feedback, announcements, notes and idea boards with nothing pinned yet. figure: Comments. https://skills.ahmedamr.com/ostraca/figures/noticeboard ### Files - filing-cabinet (OS-105): Documents, folders, records, no files yet, a file that failed to save. figure: Files in the folder. https://skills.ahmedamr.com/ostraca/figures/filing-cabinet - magnifier (OS-106): Search, no results, filters that matched nothing, explore. figure: Results. https://skills.ahmedamr.com/ostraca/figures/magnifier - bin (OS-107): Trash, deleted items, an empty bin, restore, deleted for good. figure: Days until the bin empties itself, unit "days". https://skills.ahmedamr.com/ostraca/figures/bin - flip-chart (OS-108): Analytics, reports, dashboards and charts with no data yet. figure: The series to chart, one value per bar. https://skills.ahmedamr.com/ostraca/figures/flip-chart ### People - seats (OS-109): Team members, invites, seats on a plan, attendees, a waiting list. figure: Seats taken, of the plan's total, unit "seats". https://skills.ahmedamr.com/ostraca/figures/seats - bust (OS-110): Profile, account, no photo yet, finish your profile, a deleted account. https://skills.ahmedamr.com/ostraca/figures/bust - gate (OS-111): Sign in, private pages, permission needed, locked features, access denied. https://skills.ahmedamr.com/ostraca/figures/gate - trophy (OS-112): Achievements, rewards, goals reached, streaks, leaderboards. figure: A streak, rank or score. https://skills.ahmedamr.com/ostraca/figures/trophy ### Money - card-reader (OS-113): Checkout, a payment going through, card added, payment declined, subscriptions. figure: The amount being paid, unit "EGP". https://skills.ahmedamr.com/ostraca/figures/card-reader - coins (OS-114): Balance, savings, earnings, points, cashback, top ups. figure: The balance, unit "EGP". https://skills.ahmedamr.com/ostraca/figures/coins - safe (OS-115): Savings goals, vaults, secure storage, backups, encrypted or private data. figure: A saved amount or a goal, unit "EGP". https://skills.ahmedamr.com/ostraca/figures/safe - receipt (OS-116): Invoices, receipts, billing history, statements, refunds. figure: The total, or with no unit a count of line items, unit "EGP". https://skills.ahmedamr.com/ostraca/figures/receipt ### Shopping - trolley (OS-117): Shopping cart, wishlist, saved for later, checkout, an item out of stock. figure: Items in the cart. https://skills.ahmedamr.com/ostraca/figures/trolley - parcel (OS-118): Orders, shipping, delivery tracking, returns, a delivery that failed. figure: Parcels in the order. https://skills.ahmedamr.com/ostraca/figures/parcel - market-stall (OS-119): Storefront, seller dashboard, product catalogue, a shop with no products yet, store closed. figure: Products. https://skills.ahmedamr.com/ostraca/figures/market-stall - stove (OS-120): Food orders being cooked, recipes, meal plans, a kitchen closed for the night. figure: Time left, unit "min". https://skills.ahmedamr.com/ostraca/figures/stove ### Time - calendar (OS-121): Schedule, bookings, events, no meetings today, a booking that failed. figure: Date. https://skills.ahmedamr.com/ostraca/figures/calendar - hourglass (OS-122): Waiting, a trial ending, a session timing out, rate limited, try again later. figure: Time left. https://skills.ahmedamr.com/ostraca/figures/hourglass - alarm-clock (OS-123): Reminders, alarms, due soon, snooze, deadlines. figure: Time. https://skills.ahmedamr.com/ostraca/figures/alarm-clock - deck-chair (OS-124): Away, out of office, time off, do not disturb, quiet hours. figure: Back on. https://skills.ahmedamr.com/ostraca/figures/deck-chair ### Devices - laptop (OS-125): Desktop apps, installs, signing in on a new computer, a device gone offline. https://skills.ahmedamr.com/ostraca/figures/laptop - phone (OS-126): Mobile apps, scan to install, a code sent by text, two step sign in, push notifications. https://skills.ahmedamr.com/ostraca/figures/phone - camera (OS-127): Photos, video, a media library, camera access, a photo upload. https://skills.ahmedamr.com/ostraca/figures/camera - server-rack (OS-128): Maintenance, status pages, outages, deploys, self hosting. figure: Services. https://skills.ahmedamr.com/ostraca/figures/server-rack ### Site - wall (OS-129): Lists, tables and rows that fill in. https://skills.ahmedamr.com/ostraca/figures/wall - stair (OS-130): Onboarding, setup and anything done in steps. https://skills.ahmedamr.com/ostraca/figures/stair - bridge (OS-131): Sync, linked accounts and anything joining two ends. https://skills.ahmedamr.com/ostraca/figures/bridge - tin-can-line (OS-132): Calls, connections and anything live. https://skills.ahmedamr.com/ostraca/figures/tin-can-line - door-frame (OS-133): Not found, a page that moved, a way in. https://skills.ahmedamr.com/ostraca/figures/door-frame - ramp (OS-134): Uploads, imports and anything sent somewhere. figure: The size being sent, unit "MB". https://skills.ahmedamr.com/ostraca/figures/ramp