Generate Production-Ready React + Tailwind CSS with Rayden UI

This skill generates production-quality React + Tailwind CSS code using the Rayden UI component library (34 components, built on the Rayna UI design system). It works in five steps: parse the request to identify page type, required components, and data model; load RAYDEN_RULES.md, a complete reference covering every component's props, design philosophy, token classes, layout patterns, anti-patterns, and accessibility rules; plan the page layout, component selection, spacing, color, and elevation strategy; generate the React + Tailwind code using only documented components and token classes; and self-validate against a 16-point checklist covering both correctness (valid components/props, token usage, nesting) and design quality (whitespace, hierarchy, restraint, responsiveness). Loading the full component-and-token reference before generating is what prevents hallucinated components and generic AI output.

npm install @raydenui/ui

Example invocations include scaffolding a SaaS dashboard with KPI cards, a sortable orders table, and an activity feed; a centered login page following the "Auth / Focused Form" pattern; an admin settings page with toggle sections and a destructive danger zone; a 3-tier pricing page with a feature-comparison table; and an e-commerce product grid with filters, search, and pagination.

Use it when building a new page or feature with Rayden UI components, scaffolding a dashboard/landing page/auth screen/settings page/data table, needing React code that follows a specific design system precisely, prototyping UI quickly with correct component usage, or vibe-coding toward design-system-compliant output. The skill only handles UI generation, not business logic or data fetching - generated code still needs review for that. It only reads its bundled rules file and writes code to the project; it makes no external network requests and involves no secrets or credentials.

Before use, @raydenui/ui must be installed and @raydenui/ui/styles.css imported in the app's entry point for design tokens to render correctly - components rendering wrong or colors looking off both trace back to a missing styles import. Output is standard React using token classes (like bg-primary-500) rather than hex values, with no eval or dynamic code execution, and responsive layout by default.

Pairs with rayden-use, a related skill in the same package that builds the same Rayden UI components and screens in Figma via MCP, for keeping code and Figma design in sync.

Developers building UI with the Rayden component library who want React + Tailwind output that matches the design system's exact props, tokens, and layout patterns instead of a generic, potentially hallucinated component API.