rayden-code
Generate React code with Rayden UI components using correct props, tokens, and premium layout patterns
Profile →npx skills add sickn33/agentic-awesome-skills --skill rayden-code --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 cod
- Overview
- When to Use This Skill
- How It Works
- Examples
- Vibe code a SaaS dashboard
- Scaffold a login page
- Build an admin settings page
- Create a pricing page
- Build an e-commerce product grid
- Best Practices
- Security & Safety Notes
- Common Pitfalls
- Related Skills
- Limitations
What does the rayden-code skill do?
Generate React code with Rayden UI components using correct props, tokens, and premium layout patterns
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill rayden-code --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.