rayden-use

Create and maintain Rayden UI components in Figma with design token enforcement.

25|6|Updated Apr 20, 2026

Search Tags:#ui #components #figma #mcp #design-system #rayden #rayna-ui

Ready to run

npx skills add https://github.com/KRISHNA0R/PORTFOLIOv2 --skill rayden-use-krishna0r

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: rayden-use
Source: https://github.com/KRISHNA0R/PORTFOLIOv2/tree/main/.agents/skills/rayden-use
Command: npx skills add https://github.com/KRISHNA0R/PORTFOLIOv2 --skill rayden-use-krishna0r

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams struggle to keep Rayden UI components and full screens aligned with the Rayna UI tokens across Figma, leading to drift and inconsistent visuals.

Core Features & Use Cases

Enforces the Rayna UI design system and resolved tokens during component and screen creation
Builds new components, composes complete screens (dashboards, landing pages, auth forms), audits designs for token compliance, and syncs updates back to React components
Supports three style modes (conservative, balanced, expressive) and includes a dedicated subagent for full-page screen composition

Quick Start

Open a Figma file and run the rayden-use workflow to start building a component with token enforcement.

Frequently Asked Questions about rayden-use

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I enforce design tokens for UI components in Figma?▼

Enforce design tokens in Figma by using the Figma MCP to load Rayna UI component specs, apply resolved tokens, and generate compliant components. This prevents visual drift and ensures strict design system adherence.

Can I build complete Figma screens using a design system and MCP?▼

Build complete Figma screens using a dedicated subagent that composes full pages like dashboards or auth forms. It assembles Rayden UI components while automatically applying the correct design tokens.

Does the Figma MCP support auditing designs for design system compliance?▼

Auditing designs for design system compliance is supported through automated visual validation. The workflow checks your Figma file against Rayna UI tokens to identify and correct any inconsistencies.

How do I sync Figma component updates back to React code?▼

Sync updates back to React code by generating component code with built-in helper functions. The workflow bridges Figma MCP design changes and your codebase to maintain visual and structural parity.

What style modes are available when creating UI components via Figma MCP?▼

Available style modes for UI component creation are conservative, balanced, and expressive. These modes allow you to control the visual intensity of your Rayden UI components during the Figma MCP workflow.

What are the limitations of using Figma MCP for UI design system management?▼

Limitations of using Figma MCP for UI design system management include requiring verified MCP access before loading component specs. You must open a Figma file and run the workflow to initialize the token enforcement environment.