rayden-use

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, and screen layout patterns
4. Identifies task type — Determines if building a single component, composing a screen, auditing, or adding variants
5. Applies style mode — Adjusts spacin