rayden-code

name	rayden-code
description	Generate React code with Rayden UI components using correct props, tokens, and premium layout patterns
category	development
risk	safe
source	https://github.com/playbookTV/rayden-ui-design-skill
source_type	community
date_added	"2026-04-10T00:00:00.000Z"
author	Leslie Williams
tags	react, tailwind, design-system, ui, components, vibe-coding, rayden, rayna-ui, code-generation
tools	Read, Write, Edit, Bash, Glob, Grep

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

1. Parses the request — Identifies page type, required components, and data model
2. Loads RAYDEN_RULES.md — Complete reference: 34 components with full props, design philosophy, token classes, layout patterns, anti-patterns, and accessibility rules
3. Plans the layout — Decides page structure, component selection, spacing, color, and elevation strategy
4. Generates code — Writes React + Tailwind CSS using only documented components and token classes
5. Self-validates — Runs a 16-point checklist covering correctness (valid components/props, token usage, nesting) and design quality (whitespace, hierarchy, restraint, responsiveness)

Examples

Vibe code a SaaS dashboard

/rayden-code a dashboard with KPI cards, a recent orders table, and an activity feed

Use case: You're building an internal analytics tool and need a full dashboard page with MetricsCard grid, sortable Table, and ActivityFeed sidebar — all with correct Rayden imports and token classes.

Scaffold a login page

/rayden-code login page with email and password

Use case: You need a centered auth form with Input components, a primary Button, and proper visual hierarchy — following Rayden's "Auth / Focused Form" pattern.

Build an admin settings page

/rayden-code settings page with profile section, notification toggles, and danger zone

Use case: You're adding a settings area to your app and need form sections with Toggle components, a destructive action zone, and a single-column constrained layout.

Create a pricing page