Steadyline example admin console built by the Skill: the Overview page with four metric cards and sparklines, an active users line chart, revenue by plan bars, and the newest accounts and team activity below

The Roadmap page: a four-column board of Triage, Building, In review and Shipped task cards with tags, dates and assignee faces

The Customers page: status filter chips over a sortable accounts table with plan, seats, MRR, a health bar and owner for each customer

Runs in

Install guides

Claude Code Cursor

Generates with

Host Agent LLM

Similar Skills

View all

Larkwell example product site built by the Skill: a near-black page with a gradient headline, one mint italic word and a large app window below

FREE

Half Pane Photo Portfolio

Larkby Racquet Club example site home page built by the Skill: a blue sky hero with a tennis ball and a serve, a court booking bar and the club introduction with small inline photos

Sports Club Site

New

Drifting Quote Wall

What you get

One HTML file that works offline: seven routed views under a header with breadcrumb, command palette, alerts and preset and mode switches, next to a sidebar split into two groups with live counts
Overview and analytics views with sparkline KPIs, area and bar charts, a heatmap of retention and the busiest pages; finance with cash flow, a spending donut and a ledger; customers with filters, bulk actions and a detail drawer; then a roadmap whose cards you drag, a monthly calendar and settings
Guides covering style, views, motion, icons and imagery, a validator that checks routes, sandbox safety, the sidebar contract and stray sample text, and a packer that embeds fonts and portraits

Good fit

Back-office tools and admin dashboards for a software product
In-house consoles for finance, operations or customer success
Data apps meant to look like shadcn/ui in both light and dark

Not for

Running a live product with no backend: exports, uploads and sign-out show plain notices until they are wired up
Landing pages and marketing sites
Consoles that must display certifications, awards or client logos the business cannot provide

Product launchWeb designBuild a product websiteadmin consoledashboardback officesaasshadcnchartsdata tablekanbancalendardark modesingle-file

Good forBuild a product website

About this Skill

You say/ours-saas-admin-console Make an admin console for our scheduling app. Plans, customers, metrics and the team are all in brief.md.

SaaS Admin Console is a dashboard skill for Claude Fable 5 that builds the internal tool a software team opens every morning. A narrow sidebar frames an inset panel, colour is saved for data and status, and no control is decoration: date ranges redraw charts, tables sort, filter, paginate and bulk-edit with undo, cards drag across stages, calendar events open, and settings confirm when saved. It ships as one offline HTML file or as the same console inside your own project.

How it works

Collect the product, the team, the numbers it tracks and its records; whatever is missing gets drafted in the console's calm tone and listed for you
The agent fits the brief to the seven views, keeps the sidebar truthful and swaps out every array and string from the sample
It packs a single file, reruns the validator until it passes and checks every view at four widths, in both light and dark, and inside a sandboxed frame
Look over the console, try the board, tables and forms, then tell it what to adjust

Checked before delivery

validate-console.mjs passes: one file, no network, sandbox-safe script, two sidebar groups with every item a view with one h1, every route resolves, no sample names left
Every metric, record, price and date comes from the brief or is listed as a placeholder; derived numbers (MRR, plan mix, burn, runway, the quarter target) are computed
Charts, tables, the board, the calendar, dialogs, the drawer, the palette and settings work at 1440, 1024, 768 and 390 px, in light and dark, and inside a sandboxed frame

What you need before you start

You bring: Product name, the signed-in operator and the team (four to eight people with roles), currency and locale · The four overview metrics the business watches, the customer records (plan, status, seats, revenue, owner), plans and their prices · Roadmap items, ledger transactions, calendar events and recurring rules, notifications · Optional: an existing project to build into (React or Next, Vue or Nuxt, Svelte, Astro or plain HTML)
Dependencies: Node.js 20 or later; internet only during packing, to fetch the two font files a single time · Team portraits come from your agent's own image generator, which may charge per image, or from photos of your team; no other key is needed
Outside costs: None
Last tested: v0.1.1 — Claude Code / Codex / Cursor

User reviews

Loading reviews…

FAQ

Does it call a server?

No. It all runs on the sample data at the top of the script, and anything a static file cannot do, like exporting or signing out, is announced in a toast. Point those handlers at your own API once you connect it.

Can we use photos of our real team?

Yes, as long as they are cropped to the image plan's portrait spec. The bundled portraits show invented people as stand-ins and are never passed off as your staff.

Does it fit into our React or Next app?

Yes. Without a project you get a single HTML file; inside one, your agent turns every view into a real route of your stack, keeping the tokens, layout and behaviour.

Preview gallery