Agent skill · greedychipmunk
astryx
Generate Astryx design system components, themes, and layouts for React 19 applications. Use when building UIs with @astryxdesign/core, creating or extending themes with defineTheme, styling components with StyleX or Tailwind, scaffolding pages from templates, migrating from shadcn or Radix, or working with the Astryx CLI and MCP server. Also use when converting plain descriptions into Astryx component code or validating existing Astryx code against system conventions.
What it needs
About 8k tokens when loaded.
What this skill does
Astryx A React 19 design system by Meta. Accessible, themeable components with built-in spacing, dark mode, and StyleX styling. This skill covers installation, theming, styling, layout, CLI usage, AI integration, and migration. When to Use Building React UIs with Astryx components from @astryxdesign/core Creating or customizing themes with defineTheme Styling components via StyleX (xstyle prop), Tailwind, or className Scaffolding pages from CLI templates Migrating existing Tailwind/shadcn/Radix apps to Astryx Using the Astryx CLI for component docs, tokens, and templates Connecting to the Astryx MCP server for AI-powered component discovery Validating Astryx code against system conventions Packages at a Glance Package Purpose --- --- @astryxdesign/core Component library (React 19, StyleX, dark mode) @stylexjs/stylex Atomic CSS-in-JS (peer dependency) @astryxdesign/cli CLI: component docs, templates, themes, codemods @astryxdesign/theme-neutral Muted minimal theme (good starting point) @astryxdesign/theme-butter Golden buttery surfaces, blue accents @astryxdesign/theme-chocolate Warm brown tones, cozy beige @astryxdesign/theme-gothic Dark-only atmospheric theme @astryxdesign/theme-matcha Earthy green theme @astryxdesign/theme-stone Warm stone and slate tones @astryxdesign/theme-y2k Playful Y2K pop, periwinkle + holographic Quick Start Install core, StyleX, a theme, and the CLI: Add theme CSS to your global stylesheet: Wrap your app in Theme and add a component: Initialize AI agent docs (non-interactive, safe for CI): Design Principles 1. Components over primitives — use components before raw HTML 2. Frame-first layout — pick shell and budget regions before content 3. Dense data as rows — Table/List with dividers; Card for widgets and settings 4. StyleX or Tailwind — both first-class; both resolve to same tokens 5. Semantic tokens, not hardcoded values — var(--color-), not hex 6. CSS custom properties for colors — not hex values 7. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills greedychipmunk/astryx