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-10
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 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 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.

### Build a marketing landing page

```
/rayden-compose landing expressive https://figma.com/file/abc123
```

**Use case:** You need a high-impact landing page with bolder typography, stronger shadows, and asymmetric layouts that avoid the generic "AI-generated" look.

### Audit an existing design for compliance

```
/rayden-use audit https://figma.com/file/abc123
```

**Use case:** You have an existing Figma file and want to check that all colors match Rayden tokens, spacing is on the 4px grid, and radius is concentric.

### Add variants to an existing component

```
/rayden-use add-variants Input https://figma.com/file/abc123
```

**Use case:** The Input component exists in your Figma file but is missing error and success states — the skill reads the existing structure and extends it.

## Best Practices

- Always provide a Figma file URL as the last argument
- Use `balanced` mode (default) for most use cases; `conservative` for dense admin UIs, `expressive` for marketing pages
- Let the skill take screenshots between build stages — this is how it validates output quality
- Install `@raydenui/ai` as an MCP server for the richest component data access
- Review the generated output in Figma after completion — the skill validates mechanically but human judgment on aesthetics is still valuable

## Security & Safety Notes

- This skill only reads local supporting files and calls the Figma MCP — no external network requests beyond Figma's API
- Requires Figma Dev or Full seat with write access to the target file
- Does not modify files outside of the target Figma document
- All design tokens are bundled in the skill's supporting files — no secrets or credentials involved

## Common Pitfalls

| Problem | Solution |
|---------|----------|
| "Font not found" error | The skill falls back to Roboto if Inter is unavailable — ensure Inter is loaded in your Figma file for best results |
| Components don't combine as variants | All components must share the same parent frame before calling `combineAsVariants` |
| Colors look wrong | Verify you're using resolved token hex values from tokens.md, not approximations |
| Figma permission denied | Check that your Figma seat is Dev or Full (not Viewer) and the file isn't view-only |

## Related Skills

- `rayden-code` — Generate React code with Rayden UI components (included in the same package)
- `rayden-compose` — Dedicated subagent for composing full-page Figma screens (included in this skill package)

## Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.