| name | rayden-code |
| description | Generate production React + Tailwind code with the Rayden UI component library (34 components) using correct props, tokens, layouts, and an anti-pattern ban list. USE WHEN scaffolding pages/dashboards with the Rayden/Rayna design system. |
| cluster | frontend-web |
| version | 1.0.0 |
| origin | antigravity-awesome-skills (MIT) |
| source | https://github.com/playbookTV/rayden-ui-design-skill |
Rayden Code Skill
Upstream source: https://github.com/playbookTV/rayden-ui-design-skill (author: Leslie Williams) · packaged via antigravity-awesome-skills (MIT)
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
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
/rayden-code pricing page with 3 tiers and a feature comparison table
Use case: You need a marketing pricing section with Card components for each tier, Badge for the recommended plan, and a Table for feature comparison.
Build an e-commerce product grid
/rayden-code product catalog with filters, search, and a card grid
Use case: You're building a storefront and need a responsive product grid with Chip filters, Input search, Pagination, and Cards with images — all using Rayden's layout and spacing rules.
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)
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
