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