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
How It Works
- Parses the request — Identifies page type, required components, and data model
- Loads RAYDEN_RULES.md — Complete reference: 34 components with full props, design philosophy, token classes, layout patterns, anti-patterns, and accessibility rules
- Plans the layout — Decides page structure, component selection, spacing, color, and elevation strategy
- Generates code — Writes React + Tailwind CSS using only documented components and token classes
- Self-validates — Runs a 16-point checklist covering correctness (valid components/props, token usage, nesting) and design quality (whitespace, hierarchy, restraint, responsiveness)
Examples
Build a dashboard
/rayden-code a dashboard with KPI cards, a recent orders table, and an activity feed
Generates a full dashboard page with MetricsCard grid, Table with sorting, and ActivityFeed sidebar — all using Rayden components with proper imports.
Build an auth page
/rayden-code login page with email and password
Generates a centered auth form with Input components, Button, and proper visual hierarchy.
Build a settings page
/rayden-code settings page with profile section, notification toggles, and danger zone
Generates a single-column settings layout with form sections, Toggle components, and a destructive action area.
Best Practices
- Describe what you want in plain language — the skill maps your request to the right components
- Install
@raydenui/ui in your project first (npm install @raydenui/ui)
- Import
@raydenui/ui/styles.css in your app entry point for design tokens to work
- Review generated code for business logic — the skill handles UI, not data fetching
- Use alongside
/rayden-use if you also want the same design built in Figma
Security & Safety Notes
- This skill only reads its bundled rules file and writes code to your project
- No external network requests
- No secrets or credentials involved
- Generated code uses standard React patterns with no eval or dynamic code execution
Common Pitfalls
| Problem |
Solution |
| Components not rendering correctly |
Ensure @raydenui/ui/styles.css is imported in your app entry |
| "Component doesn't exist" error |
The skill only uses documented components — check if you're asking for something Rayden doesn't have |
| Colors look wrong |
Use token classes (bg-primary-500) not hex values. Ensure the Rayden CSS is loaded |
| Layout not responsive |
The skill generates responsive code by default — check that your viewport meta tag is set |
Related Skills
rayden-use — Build Rayden UI components and screens in Figma via MCP (included in the same package)
1---2name: rayden-code-23description: Generate React code with Rayden UI components using correct props, tokens, and premium layout patterns4---56# Rayden Code Skill78## Overview910Generate 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.1112## When to Use This Skill1314- You're building a new page or feature using Rayden UI components15- You want to scaffold a dashboard, landing page, auth screen, settings page, or data table16- You need to generate React code that follows a specific design system precisely17- You want to prototype UI quickly with correct component usage and premium aesthetics18- You're vibe coding and want design-system-compliant output1920## How It Works21221. **Parses the request** — Identifies page type, required components, and data model232. **Loads RAYDEN_RULES.md** — Complete reference: 34 components with full props, design philosophy, token classes, layout patterns, anti-patterns, and accessibility rules243. **Plans the layout** — Decides page structure, component selection, spacing, color, and elevation strategy254. **Generates code** — Writes React + Tailwind CSS using only documented components and token classes265. **Self-validates** — Runs a 16-point checklist covering correctness (valid components/props, token usage, nesting) and design quality (whitespace, hierarchy, restraint, responsiveness)2728## Examples2930### Build a dashboard3132```33/rayden-code a dashboard with KPI cards, a recent orders table, and an activity feed34```3536Generates a full dashboard page with MetricsCard grid, Table with sorting, and ActivityFeed sidebar — all using Rayden components with proper imports.3738### Build an auth page3940```41/rayden-code login page with email and password42```4344Generates a centered auth form with Input components, Button, and proper visual hierarchy.4546### Build a settings page4748```49/rayden-code settings page with profile section, notification toggles, and danger zone50```5152Generates a single-column settings layout with form sections, Toggle components, and a destructive action area.5354## Best Practices5556- Describe what you want in plain language — the skill maps your request to the right components57- Install `@raydenui/ui` in your project first (`npm install @raydenui/ui`)58- Import `@raydenui/ui/styles.css` in your app entry point for design tokens to work59- Review generated code for business logic — the skill handles UI, not data fetching60- Use alongside `/rayden-use` if you also want the same design built in Figma6162## Security & Safety Notes6364- This skill only reads its bundled rules file and writes code to your project65- No external network requests66- No secrets or credentials involved67- Generated code uses standard React patterns with no eval or dynamic code execution6869## Common Pitfalls7071| Problem | Solution |72|---------|----------|73| Components not rendering correctly | Ensure `@raydenui/ui/styles.css` is imported in your app entry |74| "Component doesn't exist" error | The skill only uses documented components — check if you're asking for something Rayden doesn't have |75| Colors look wrong | Use token classes (`bg-primary-500`) not hex values. Ensure the Rayden CSS is loaded |76| Layout not responsive | The skill generates responsive code by default — check that your viewport meta tag is set |7778## Related Skills7980- `rayden-use` — Build Rayden UI components and screens in Figma via MCP (included in the same package)
playbookTV