Agent skill · design visual · sickn33
rayden-use
Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement
Why this skill is useful
Adds specific commands and workflows for building and auditing Rayden UI components in Figma that the AI wouldn't reliably generate on its own.
What it needs
Requires figma installed locally. About 3k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/rayden-use--0e21b5