skills.rest
Firzus
FirzusCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

astryx

Guide Astryx React UI setup, theming, and migration workflows.

1|Updated May 12, 2026
Search Tags:#theming#react#design system#migration#mcp#stylex#astryx
One-click install
npx skills add https://github.com/Firzus/agent-skills --skill astryx-firzus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astryx
Source: https://github.com/Firzus/agent-skills/tree/main/skills/web/astryx
Command: npx skills add https://github.com/Firzus/agent-skills --skill astryx-firzus

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you correctly build, theme, review, and migrate user interfaces with Astryx without relying on outdated memory or guessing component APIs.

Core Features & Use Cases

  • Setup and Initialization: Install Astryx packages, wire global CSS, and configure the StyleX compiler when needed.
  • Agent-Ready Discovery: Use the CLI and MCP workflow to inspect templates, components, tokens, hooks, and docs before writing code.
  • Theming and Migration: Apply themes, extend tokens, manage dark mode, and migrate existing apps route by route from Tailwind, shadcn, or Radix.
  • Use Case: A developer wants to add a themed sidebar layout and ensure the correct component imports, tokens, and build configuration are used.

Quick Start

Ask the assistant to inspect the installed Astryx docs and generate the correct component usage, theme wiring, or migration plan for your project.

Frequently Asked Questions about astryx

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up and configure the StyleX compiler for a React UI design system?▼

To set up a React UI design system with StyleX, install the required packages, wire global CSS, and configure the StyleX compiler when needed for swizzled components. This ensures token-based styling and correct build configuration.

What is the best way to migrate an existing React app from Tailwind or Radix to a token-based design system?▼

Migrating from Tailwind, shadcn, or Radix to a token-based design system is supported route by route. You can apply themes, extend tokens, and manage dark mode while progressively replacing existing component APIs.

Does my React project need subpath imports and single-theme ownership for UI theming?▼

Yes, correct UI theming requires subpath imports for components and single-theme ownership. These constraints ensure proper token-based styling and prevent style conflicts when applying or extending design tokens.

How do I discover available React templates, components, and hooks before writing code?▼

You can discover React templates, components, and hooks through an agent-driven CLI and MCP workflow. Inspecting installed docs before writing code ensures correct component imports and accurate API usage.

Why does my themed React sidebar layout fail to apply design tokens correctly?▼

A themed React sidebar layout fails when token-based styling and single-theme ownership are not enforced. Ensure you use subpath imports, the correct component APIs, and the configured StyleX compiler.

Can I use agent-driven discovery to inspect design tokens and migration workflows for production interfaces?▼

Yes, agent-driven discovery supports inspecting design tokens, hooks, themes, and migration workflows for production interface development. This prevents guessing component APIs and relies on the latest installed documentation.

Related Skills

Explore More Software Engineering Skills→
hunmerhunmer
70

convert-react-to-memento

Converts a React project into a Memento WebView-ready application.

Community
Intermediate
soeiroosoeiroo

color-system

Generate tonal scales for brand, neutral, semantic, and extended palettes.

Community
Advanced
patternflypatternfly
10

pf-import-checker

Audit and fix PatternFly import paths for charts, chatbot, and component-groups.

Official
Intermediate
jorgeasaurusjorgeasaurus
12

ckm:ui-styling

Create accessible React interfaces with Radix UI components and Tailwind CSS.

Community
Advanced