Rayden Code Skill

Overview

Generate production-quality React + Tailwind CSS code using the Rayden UI component library (34 components). The skill loads a complete API reference with every component, every prop, design tokens, layout patterns, and an explicit anti-pattern ban list — preventing hallucinated components and generic AI output. Built on the Rayna UI design system.

When to Use This Skill

• You're building a new page or feature using Rayden UI components
• You want to scaffold a dashboard, landing page, auth screen, settings page, or data table
• You need to generate React code that follows a specific design system precisely
• You want to prototype UI quickly with correct component usage and premium aesthetics
• You're vibe coding and want design-system-compliant output

Reference availability

This AAS tree contains only this guide; RAYDEN_RULES.md, the 16-point checklist and component implementation are not bundled. Locate a reviewed compatible upstream reference or installed package type declarations before generating imports/props/tokens. If absent, prepare a layout proposal and report the missing API reference; do not invent components or claim a reference was loaded. Package installation may contact the network and execute dependency scripts, so the no-network statement below describes direct text generation only.

How It Works