rayden-use
Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement
Profile →npx skills add sickn33/agentic-awesome-skills --skill rayden-use --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 UI Design Skill ## Overview Build and maintain Rayden UI components and screens directly in Figma using the Figma MCP. The skill enforces the Rayna UI design system — resolved design tokens, craft rules, anti-pattern detection, and visual validation — so every output is mechanically correct and visually premium. Supports three style modes (conservative, balanced, expressive) and includes a dedicated subagent for full-page screen composition. ## When to Use This Skill - You need to build a new Rayden UI component with all its variants in Figma - You're composing a full screen (dashboard, landing page, auth form, settings, data table) from Rayden patterns - You want to audit an existing Figma file for design system compliance - You need to add new variants to an existing Figma component - You're syncing React component updates back to Figma ## How It Works 1. **Verifies environment** — Checks Figma MCP connection and write access via `whoami` 2. **Loads component data** — Reads Rayden component specs, anatomy, and tokens from the `@raydenui/ai` MCP server or installed package 3. **Loads craft rules** — Reads supporting files: resolved token values, craft rules, anti-patterns
- Overview
- When to Use This Skill
- How It Works
- Examples
- Build a component with all variants
- Design a SaaS dashboard
- Build a marketing landing page
- Audit an existing design for compliance
- Add variants to an existing component
- Best Practices
- Security & Safety Notes
- Common Pitfalls
- Related Skills
- Limitations
What does the rayden-use skill do?
Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill rayden-use --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.