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 loads a complete API reference covering every component, every prop, design tokens, layout patterns, and an explicit anti-pattern ban list, specifically to prevent hallucinated components and generic AI output. The process: parse the request to identify page type, required components, and data model; load RAYDEN_RULES.md (the full 34-component reference with props, design philosophy, token classes, layout patterns, anti-patterns, and accessibility rules); plan the layout (structure, component selection, spacing, color, elevation); generate React + Tailwind code using only documented components and token classes; and self-validate against a 16-point checklist covering correctness (valid components/props, token usage, nesting) and design quality (whitespace, hierarchy, restraint, responsiveness).

Use this skill 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 precisely follows a specific design system, prototyping UI quickly with correct component usage, or "vibe coding" toward design-system-compliant output. Example requests: /rayden-code a dashboard with KPI cards, a recent orders table, and an activity feed (produces a MetricsCard grid, sortable Table, and ActivityFeed sidebar), /rayden-code login page with email and password (a centered auth form following Rayden's "Auth / Focused Form" pattern), /rayden-code settings page with profile section, notification toggles, and danger zone (Toggle components plus a destructive-action zone in a single-column layout), /rayden-code pricing page with 3 tiers and a feature comparison table (Card-per-tier with a recommended-plan Badge and a comparison Table), and /rayden-code product catalog with filters, search, and a card grid (Chip filters, Input search, Pagination, and image Cards).

Install @raydenui/ui (npm install @raydenui/ui) and import @raydenui/ui/styles.css at the app entry point for design tokens to work. Describe the desired page or feature in plain language; the skill maps the request to the right components. Review generated code for business logic, since the skill handles UI, not data fetching. Pair with the related rayden-use skill (included in the same package) to build the same design in Figma via MCP.

This skill only reads its bundled rules file and writes code to the project - no external network requests, no secrets or credentials, and generated code uses standard React patterns with no eval or dynamic code execution. Common pitfalls and fixes: components not rendering correctly usually means @raydenui/ui/styles.css isn't imported; a "component doesn't exist" error means the request asked for something outside Rayden's documented set; wrong colors usually mean hex values were used instead of token classes (e.g. bg-primary-500) or the Rayden CSS isn't loaded; and non-responsive layout usually means the viewport meta tag is missing, since generated code is responsive by default.

Frontend developers building UIs on the Rayden UI design system who want plain-language requests turned into design-system-compliant React + Tailwind code - correct components, props, and tokens - rather than generic or hallucinated component usage.