{"id":"55f59538-2004-4c32-a4cb-a6009f616214","shortId":"MpEVgU","kind":"skill","title":"rayden-use","tagline":"Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement","description":"# Rayden UI Design Skill\n\n## Overview\n\nBuild 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.\n\n## When to Use This Skill\n\n- You need to build a new Rayden UI component with all its variants in Figma\n- You're composing a full screen (dashboard, landing page, auth form, settings, data table) from Rayden patterns\n- You want to audit an existing Figma file for design system compliance\n- You need to add new variants to an existing Figma component\n- You're syncing React component updates back to Figma\n\n## How It Works\n\n1. **Verifies environment** — Checks Figma MCP connection and write access via `whoami`\n2. **Loads component data** — Reads Rayden component specs, anatomy, and tokens from the `@raydenui/ai` MCP server or installed package\n3. **Loads craft rules** — Reads supporting files: resolved token values, craft rules, anti-patterns, and screen layout patterns\n4. **Identifies task type** — Determines if building a single component, composing a screen, auditing, or adding variants\n5. **Applies style mode** — Adjusts spacing, shadow, typography, and visual weight based on conservative/balanced/expressive mode\n6. **Builds with helpers** — Generates Figma Plugin API code using mandatory helper functions (hexToRgb, loadFonts, applyShadow, applyBorder) with auto layout on every frame\n7. **Visual validation** — Takes screenshots after each build stage and validates against 8 acceptance criteria (alignment, spacing, color accuracy, hierarchy, radius, shadow, primary action count)\n\n## Examples\n\n### Build a component with all variants\n\n```\n/rayden-use Button https://figma.com/file/abc123\n```\n\n**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.\n\n### Design a SaaS dashboard\n\n```\n/rayden-use dashboard-screen balanced https://figma.com/file/abc123\n```\n\n**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.\n\n### Build a marketing landing page\n\n```\n/rayden-compose landing expressive https://figma.com/file/abc123\n```\n\n**Use case:** You need a high-impact landing page with bolder typography, stronger shadows, and asymmetric layouts that avoid the generic \"AI-generated\" look.\n\n### Audit an existing design for compliance\n\n```\n/rayden-use audit https://figma.com/file/abc123\n```\n\n**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.\n\n### Add variants to an existing component\n\n```\n/rayden-use add-variants Input https://figma.com/file/abc123\n```\n\n**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.\n\n## Best Practices\n\n- Always provide a Figma file URL as the last argument\n- Use `balanced` mode (default) for most use cases; `conservative` for dense admin UIs, `expressive` for marketing pages\n- Let the skill take screenshots between build stages — this is how it validates output quality\n- Install `@raydenui/ai` as an MCP server for the richest component data access\n- Review the generated output in Figma after completion — the skill validates mechanically but human judgment on aesthetics is still valuable\n\n## Security & Safety Notes\n\n- This skill only reads local supporting files and calls the Figma MCP — no external network requests beyond Figma's API\n- Requires Figma Dev or Full seat with write access to the target file\n- Does not modify files outside of the target Figma document\n- All design tokens are bundled in the skill's supporting files — no secrets or credentials involved\n\n## Common Pitfalls\n\n| Problem | Solution |\n|---------|----------|\n| \"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 |\n| Components don't combine as variants | All components must share the same parent frame before calling `combineAsVariants` |\n| Colors look wrong | Verify you're using resolved token hex values from tokens.md, not approximations |\n| Figma permission denied | Check that your Figma seat is Dev or Full (not Viewer) and the file isn't view-only |\n\n## Related Skills\n\n- `rayden-code` — Generate React code with Rayden UI components (included in the same package)\n- `rayden-compose` — Dedicated subagent for composing full-page Figma screens (included in this skill package)\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["rayden","use","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-rayden-use","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/rayden-use","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34616 github stars · SKILL.md body (5,258 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-23T00:51:27.861Z","embedding":null,"createdAt":"2026-04-18T21:43:15.762Z","updatedAt":"2026-04-23T00:51:27.861Z","lastSeenAt":"2026-04-23T00:51:27.861Z","tsv":"'/file/abc123':302,346,387,424,466 '/rayden-compose':382 '/rayden-use':298,339,420,459 '1':161 '2':173 '3':192 '4':211 '4px':447 '5':228 '6':243 '7':266 '8':278 'accept':279 'access':170,548,600 'accuraci':284 'across':330 'action':289 'activ':368 'ad':226 'add':141,453,461 'add-vari':460 'adjust':232 'admin':516 'aesthet':565 'ai':411 'ai-gener':410 'align':281 'alway':495 'analyt':353 'anatomi':181 'anti':56,205 'anti-pattern':55,204 'api':250,591 'appear':329 'appli':229 'applybord':259 'applyshadow':258 'approxim':691 'argument':504 'ask':781 'asymmetr':404 'audit':129,224,414,421 'auth':118 'auto':261 'avoid':407 'back':155,642 'balanc':76,343,506 'base':239 'best':493,658 'beyond':588 'bolder':399 'boundari':789 'build':4,27,97,217,244,273,292,377,528 'bundl':619 'button':299,316 'call':580,675 'card':362 'case':304,348,389,426,468,512 'check':164,436,695 'clarif':783 'clear':756 'code':251,718,721 'color':283,439,677 'combin':663 'combineasvari':676 'common':631 'complet':556 'complianc':137,419 'compon':9,32,102,148,153,175,179,220,294,317,458,471,546,660,667,725 'compos':111,221,733,737 'composit':88 'concentr':452 'connect':167 'conserv':75,513 'conservative/balanced/expressive':241 'consist':372 'correct':67 'count':290 'craft':53,194,202 'credenti':629 'criteria':280,792 'dashboard':115,338,341,354 'dashboard-screen':340 'data':121,176,364,547 'dedic':81,734 'default':508 'deni':694 'dens':515 'describ':760 'design':19,24,48,51,135,310,335,351,417,616 'destruct':324 'detect':58 'determin':215 'dev':594,701 'direct':35 'document':614 'enforc':21,44 'ensur':649 'environ':163,772 'environment-specif':771 'error':480,638 'everi':63,264 'exampl':291 'exist':131,146,416,430,457,472,488 'expert':777 'express':77,384,518 'extend':491 'extern':585 'fall':641 'feed':369 'figma':13,15,37,40,108,132,147,157,165,248,431,475,498,554,582,589,593,613,655,692,698,741 'figma.com':301,345,386,423,465 'figma.com/file/abc123':300,344,385,422,464 'file':133,198,312,432,476,499,578,604,608,625,656,708 'font':635 'form':119 'found':637 'frame':265,673 'full':18,85,113,596,703,739 'full-pag':84,738 'function':255 'generat':247,412,551,719 'generic':409 'grey':323 'grid':448 'helper':246,254 'hex':686 'hextorgb':256 'hierarchi':285 'high':394 'high-impact':393 'human':562 'identifi':212 'impact':395 'includ':79,726,743 'input':463,470,786 'instal':190,537 'inter':646,650 'involv':630 'isn':709 'judgment':563 'kpi':361 'land':116,380,383,396 'last':503 'layout':209,262,359,405 'let':522 'lg':333 'limit':748 'load':174,193,652 'loadfont':257 'local':576 'look':413,678 'maintain':6,29 'mandatori':253 'market':379,520 'match':440,757 'mcp':16,41,166,187,541,583 'mechan':66,560 'miss':479,794 'mode':74,231,242,507 'modifi':607 'must':668 'need':95,139,314,356,391 'network':586 'new':99,142,309 'note':571 'outlin':328 'output':64,535,552,766 'outsid':609 'overview':26 'packag':191,730,747 'page':86,117,381,397,521,740 'parent':672 'pattern':57,125,206,210 'permiss':693,787 'pitfal':632 'plugin':249 'practic':494 'premium':70 'primari':288,321 'problem':633 'provid':496 'qualiti':536 'radius':286,450 'rayden':2,7,22,30,100,124,178,373,441,717,723,732 'rayden-cod':716 'rayden-compos':731 'rayden-us':1 'raydenui/ai':186,538 'rayna':46 're':110,150,306,350,682 'react':152,720 'read':177,196,486,575 'relat':714 'request':587 'requir':592,785 'resolv':50,199,684 'result':659 'review':549,778 'richest':545 'roboto':644 'rule':54,195,203 'saa':337 'safeti':570,788 'scope':759 'screen':11,34,87,114,208,223,342,742 'screenshot':270,526 'seat':597,699 'secondari':322 'secret':627 'secur':569 'server':188,542 'set':120 'shadow':234,287,402 'share':669 'sidebar':358 'singl':219 'size':334 'skill':25,43,93,485,524,558,573,622,640,715,746,751 'skill-rayden-use' 'sm':331 'solid':326 'solut':634 'source-sickn33' 'space':233,282,376,443 'spec':180 'specif':773 'stage':274,529 'start':307 'state':483 'still':567 'stop':779 'stronger':401 'structur':489 'style':73,230 'subag':82,735 'substitut':769 'success':482,791 'support':71,197,577,624 'sync':151 'system':49,136,311 'tabl':122,365 'take':269,525 'target':603,612 'task':213,755 'test':775 'three':72 'token':20,52,183,200,374,442,617,685 'tokens.md':689 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'treat':764 'type':214 'typographi':235,400 'ui':8,23,31,47,101,517,724 'unavail':648 'updat':154 'url':500 'use':3,38,91,252,303,347,371,388,425,467,505,511,683,749 'valid':61,268,276,534,559,774 'valu':201,687 'valuabl':568 'variant':106,143,227,297,320,454,462,665 'verifi':162,680 'via':14,171 'view':712 'view-on':711 'viewer':705 'visual':60,69,237,267 'want':127,434 'weight':238 'whoami':172 'work':160 'write':169,599 'wrong':679","prices":[{"id":"1044c0db-9ac7-4ee6-84cc-f916994b1863","listingId":"55f59538-2004-4c32-a4cb-a6009f616214","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:43:15.762Z"}],"sources":[{"listingId":"55f59538-2004-4c32-a4cb-a6009f616214","source":"github","sourceId":"sickn33/antigravity-awesome-skills/rayden-use","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/rayden-use","isPrimary":false,"firstSeenAt":"2026-04-18T21:43:15.762Z","lastSeenAt":"2026-04-23T00:51:27.861Z"}],"details":{"listingId":"55f59538-2004-4c32-a4cb-a6009f616214","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"rayden-use","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34616,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"a76ff45efbb847b69d6c23bf2340ca03ae957b01","skill_md_path":"skills/rayden-use/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/rayden-use"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"rayden-use","description":"Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement"},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/rayden-use"},"updatedAt":"2026-04-23T00:51:27.861Z"}}