Astryx/Templates

Agent skill

Your agent writes React.
/astryx teaches it to design.

The taste behind the twelve demos below, packaged as an agent skill for Claude Code and Codex. It makes a coding agent work the way a designer does — frame the page before writing any JSX, start from a real Astryx template, and review its own screenshot before calling the page done.

npx skills add hex2null/astryx

/astryx in Claude Code, $astryx in Codex. Drop the prefix and it still activates on its own whenever the request is clearly about Astryx UI.

~/apps/console claude 
❯ /astryx build the billing settings page for this console

  Frame first. Regions budgeted before a line of JSX:  ┌────────────────────────────────────────────────┐
  │ TopNav                                    56px │
  ├──────────────┬─────────────────────────────────┤
  │ SideNav      │ Layout                          │
  │ 256px        │   Plan            Card          │
  │              │   Invoices        Table, flush  │
  │              │   Seats           List / Item   │
  └──────────────┴─────────────────────────────────┘  Closest page: dashboard — adapted, not started blank.

  ✓ src/App.tsx    frame contract, then the bands
  ✓ src/data.ts    seed content, out of the layout
  ✓ screenshot     reviewed at 1485×850 — two gap
                 values, no card soup, real copy

❯

What you ask it for

Three more runs, beside the one above
  • ❯ /astryx this dashboard looks generic, fix it Walks the composition checklist over what is already there: card soup, a badge on every row, one gap value everywhere, placeholder copy.
  • ❯ /astryx make the orders table denser and give it a real empty state Reaches for the system component and its documented props rather than restyling a raw <div>.
  • ❯ /astryx port this page onto the incident-console template Scaffolds beside the existing file and moves the content across, because the usual cause of a page looking wrong is the frame, not the styling.
The skill deliberately carries no API facts. Component names, props, tokens and template names are fetched from the astryx CLI at runtime, so nothing inside it can go stale as the design system moves.

GitHub skills.sh About skills

Live demos

12 templates — each card opens its production build
Console

Meridian

A commerce operations console — KPI tiles, Recharts panels and a dense orders table.

/dashboard Board

Relay

A sprint board of draggable issue cards in five horizontally scrolling columns.

/kanban Messaging

Nova

A ChatGPT-style AI assistant with conversation history and a docked composer.

/chat-app Mail

Dispatch

A three-pane mail client — mailboxes, a divided thread list and a reading pane.

/inbox Feed

Astryx Social

An x.com-style timeline with a composer and a discover rail, each column scrolling on its own.

/social-feed Gallery

Aperture

A community image library; clicking a tile opens the photo detail view with comments.

/image-hub Storefront

Voltyx

A consumer electronics storefront: category and product tiles, value props, promo band.

/tech-store Landing page

Kite

A product landing page whose centrepiece is a mixed-size tile mosaic.

/bento-grid Marketing

Meridian Vantage Partners

The homepage of a global management consulting firm, as one composed scroll.

/consulting Editorial

Broadsheet

An editorial front page — lead story, front section, opinion, long read and a wire column.

/magazine Document

Rowan Alcántara

A personal résumé / CV page, with a real print stylesheet.

/resume Docs

Astryx Docs

A documentation site — side nav, article body and a right-hand outline.

/docs-site

About Astryx

Astryx is an open source design system that is fully customizable and agent ready. It ships over 160 accessible, themeable React components built on StyleX, with built-in dark mode, production-ready templates, CLI scaffolding and documentation written for coding agents as well as people. Astryx grew inside Meta over the last eight years and now powers more than 13,000 apps. Every demo above is the production build of a standalone React 19 + TypeScript + Vite template in the repository.

astryx.atmeta.com Docs Components Themes GitHub npm