rayden-use

Installation
SKILL.md

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
Related skills
Installs
4
GitHub Stars
37.3K
First Seen
1 day ago