astryx

name	astryx
description	Build fully customizable, agent-ready design systems with Astryx — Meta's production design system now open source. Ships 150+ React components built on StyleX with zero styling lock-in, component swizzling, brand theming, dark mode, and CLI tooling. Use when building component libraries, design systems, UI applications, design tokens, or when teams need consistent accessible components that AI agents can understand and extend. Triggers on: astryx, design system, component library, design tokens, react components, accessible components, astryx design, stylesheets, theme customization, component composition.
allowed-tools	Read Write Edit Bash Grep Glob WebFetch Find Search
compatibility	Universal — React 18+ and Node 22+ on active LTS. Works across all coding agents (Claude Code, Codex, Gemini CLI, OpenCode, Cursor, Copilot, jeopi, jeo). Astryx is agent-ready: all components are exported at the base level for full composability (no locked top-level API). Integrates with: `deep-agents-core` for agent-driven component design, `responsive-design` for layout verification, `react-best-practices` for component performance optimization, `react-grab` for UI element context capture. Upstream: https://github.com/facebook/astryx (MIT).
metadata	{"tags":"astryx, design-system, react-components, component-library, design-tokens, accessibility, stylex, theming, ui-framework, meta","platforms":"Claude, Codex, Gemini, Cursor, OpenCode, jeopi, jeo, All","keyword":"astryx","version":"1.0.0","upstream":"https://github.com/facebook/astryx","source":"akillness/jeo-skills","license":"MIT"}

Astryx — Agent-Ready Design System

Astryx is an open source design system built and proven at Meta over 8+ years across 13,000+ apps. It ships 150+ accessible React components, brand-level theming, dark mode, templates, and a CLI — all designed for how teams build now: by people and the agents working alongside them.

Built on React and StyleX, Astryx emphasizes open internals (no closed top-level API, full component composability), zero styling lock-in (bring your own CSS, no special build plugin), and agent readiness (components exported at the base level so AI assistants understand and extend them).

Currently in Beta

When to use this skill

• You're building or scaling a component library and want production-proven patterns from Meta
• You need 150+ accessible, ready-to-ship React components with dark mode, theming, and templates
• Your design system must support both human and AI co-creation — agents need to understand, modify, and extend components safely
• You want zero styling lock-in — bring your own CSS framework (Tailwind, emotion, vanilla CSS) without fighting a design system build plugin
• You need component swizzling — ability to eject a component's full source into your project to customize without forking the library
• Your team values open internals and composability over a locked top-level API
• You want to leverage Meta's 8+ years of design system evolution across 13,000+ applications

When NOT to use this skill

• Building a simple one-off application (use Shadcn, Mantine, or MUI directly)
• Headless-only needs (no styled components required) — route to component architecture patterns
• Non-React projects — Astryx is React-only; route to design token tools
• Quick prototype that won't outlive a quarter

Quick Start

Step 1 — Install Astryx into your project

# Install the core package (React 18+ required)
npm install @astryxdesign/core

# Install the CLI for scaffolding and setup
npm install --save-dev @astryxdesign/cli

# Install the build utilities (optional, for custom builds)
npm install --save-dev @astryxdesign/build