Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Rayden UI Design Skill · sickn33 | DecimalAI

design mediaby sickn33

Rayden UI Design Skill

sickn33/rayden-use

Source sickn33/agentic-awesome-skills ↗License MIT

Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement

SkillScore68Maintained

Automatic

Design & UX Review pack

Last verified 8/11/2026

What it changes

Passed 15 of 22 test cases with the skill, and 6 of 22 without it.

Without skill27%

With skill68%

Checks it passed that the model alone missed

Selects balanced mode as the default style mode.
Positions the Figma file URL as the last argument.
Reads component specs from the @raydenui/ai source.

and 7 more in the full report

9 fixed6 passed either way7 still failing0 broke

Pass-rate lift: +41 pp
Tokens: +36%
Agent turns: 0%
Response time: -38%

Model gemini-3.6-flashMeasured 8/11/2026v115 of 22 cases passed with skill

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/sickn33-rayden-use/SKILL.md https://app.decimal.ai/s/sickn33-rayden-use/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add sickn33-rayden-use, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/sickn33-rayden-use/ and pins it in .decimal/skills.lock

decimalai skills add sickn33-rayden-use

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/sickn33-rayden-use/SKILL.md https://app.decimal.ai/s/sickn33-rayden-use/SKILL.md

Raw file: /s/sickn33-rayden-use/SKILL.md ↗ · machine-readable summary at /s/sickn33-rayden-use.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 9 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 9

Prompt

During Figma canvas building, if Inter font fails to load in the document, what font family is used as the fallback to prevent execution failure?

What was checked, without and with the skill
Checked	Without skill	With skill
Identifies Roboto as the font fallback when Inter is unavailable.	Missed	Passed

case-10 · gemini-3.6-flash · 8/11/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md99 linessingle file

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

Verifies environment — Checks Figma MCP connection and write access via whoami
Loads component data — Reads Rayden component specs, anatomy, and tokens from the @raydenui/ai MCP server or installed package
Loads craft rules — Reads supporting files: resolved token values, craft rules, anti-patterns, and screen layout patterns
Identifies task type — Determines if building a single component, composing a screen, auditing, or adding variants
Applies style mode — Adjusts spacing, shadow, typography, and visual weight based on conservative/balanced/expressive mode
Builds with helpers — Generates Figma Plugin API code using mandatory helper functions (hexToRgb, loadFonts, applyShadow, applyBorder) with auto layout on every frame
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

Track record

Benchmark

15 / 22

test cases passed, vs 6 / 22 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

sickn33 / agentic-awesome-skills

skills/rayden-use/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1

More skills from the same source and nearby in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

See it in action

What's inside

Rayden UI Design Skill

Overview

When to Use This Skill

How It Works

Examples

Build a component with all variants

Design a SaaS dashboard

Track record

Benchmark

Adoption

SkillSafety

Source

Related skills