rayden-use

name	rayden-use
description	Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement
category	design
risk	safe
source	https://github.com/playbookTV/rayden-ui-design-skill
source_type	community
date_added	"2026-04-10T00:00:00.000Z"
author	Leslie Williams
tags	figma, design-system, ui, components, mcp, rayden, rayna-ui
tools	mcp__claude_ai_Figma__use_figma, mcp__claude_ai_Figma__get_screenshot, mcp__claude_ai_Figma__whoami, Read

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 enprojectnment — 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 spacing, shadow, typography, and visual weight based on conservative/balanced/expressive mode
6. Builds with helpers — Generates Figma Plugin API code using mandatory helper functions (hexToRgb, loadFonts, applyShadow, applyBorder) with auto layout on every frame
7. Visual validation — Takes screenshots after each build stage and validates against 8 acceptance criteria (alignment, spacing, color accuracy, hierarchy, radius, shadow, primary action count)

Examples

Build a component with all variants

/rayden-use Button https://figma.com/file/abc123

Use case: You're starting a new design system file and need the Button component with all variants (primary, secondary, grey, destructive) in solid and outlined appearances across SM and LG sizes.

Design a SaaS dashboard

/rayden-use dashboard-screen balanced https://figma.com/file/abc123

Use case: You're designing an analytics dashboard and need a sidebar layout with KPI cards, a data table, and an activity feed — all using consistent Rayden tokens and spacing.