Astryx Design System

Astryx is Meta's open-source React + StyleX design system: 150+ accessible, themeable components with pre-compiled CSS, distributed as @astryxdesign/* npm packages and driven by a CLI (npx astryx) plus a hosted MCP server. Its defining trait is agent-ready — humans and AI build from the same API, so let the CLI/MCP be your source of truth, not the HTML docsite or memory. Astryx is in beta (v0.x); package names and flags may still shift.

Apply this skill when setting up, building UI with, theming, reviewing, or migrating an Astryx project.

Done when: every component is imported from its own subpath and reads design tokens (never hardcoded colors/spacing); styling follows the xstyle → Tailwind → className order with no !important; exactly one <Theme> provider owns color mode; the cascade-@layer line is declared once before CSS imports; swizzled components have a StyleX build plugin wired; and npx astryx doctor reports no failures.

Setup

# 1. Install (npm or pnpm — both are shown in the docs)
npm install @astryxdesign/core @astryxdesign/theme-neutral @astryxdesign/cli

# 2. Scaffold: installs packages, wires theming, writes AI agent docs
npx astryx init