skills.rest
KRISHNA0R
KRISHNA0RCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/KRISHNA0R/PORTFOLIOv2 --skill rayden-use-krishna0r
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
anonymouswhite07anonymouswhite07

rayden-use

Automate token-enforced Rayden UI component creation in Figma.

Community
Advanced
CinimoDYCinimoDY
2

figma-audit

Audit eiDotter React components against V.37 Figma designs via Figma Console MCP.

Community
Intermediate
taewook486taewook486

moai-design-tools

Fetch Figma design context and export Pencil designs into React and Tailwind CSS code.

Community
Advanced
NagyViktNagyVikt
2

figma-generate-design

Generate and synchronize Figma screens from source code UI structures.

Community
Advanced