{"id":"c78eb04c-02e9-4ae0-b658-3b39f56d2490","shortId":"5HCv4J","kind":"skill","title":"rayden-code","tagline":"Generate React code with Rayden UI components using correct props, tokens, and premium layout patterns","description":"# Rayden Code Skill\n\n## Overview\n\nGenerate production-quality React + Tailwind CSS code using the Rayden UI component library (34 components). The skill loads a complete API reference with every component, every prop, design tokens, layout patterns, and an explicit anti-pattern ban list — preventing hallucinated components and generic AI output. Built on the Rayna UI design system.\n\n## When to Use This Skill\n\n- You're building a new page or feature using Rayden UI components\n- You want to scaffold a dashboard, landing page, auth screen, settings page, or data table\n- You need to generate React code that follows a specific design system precisely\n- You want to prototype UI quickly with correct component usage and premium aesthetics\n- You're vibe coding and want design-system-compliant output\n\n## How It Works\n\n1. **Parses the request** — Identifies page type, required components, and data model\n2. **Loads RAYDEN_RULES.md** — Complete reference: 34 components with full props, design philosophy, token classes, layout patterns, anti-patterns, and accessibility rules\n3. **Plans the layout** — Decides page structure, component selection, spacing, color, and elevation strategy\n4. **Generates code** — Writes React + Tailwind CSS using only documented components and token classes\n5. **Self-validates** — Runs a 16-point checklist covering correctness (valid components/props, token usage, nesting) and design quality (whitespace, hierarchy, restraint, responsiveness)\n\n## Examples\n\n### Vibe code a SaaS dashboard\n\n```\n/rayden-code a dashboard with KPI cards, a recent orders table, and an activity feed\n```\n\n**Use case:** You're building an internal analytics tool and need a full dashboard page with MetricsCard grid, sortable Table, and ActivityFeed sidebar — all with correct Rayden imports and token classes.\n\n### Scaffold a login page\n\n```\n/rayden-code login page with email and password\n```\n\n**Use case:** You need a centered auth form with Input components, a primary Button, and proper visual hierarchy — following Rayden's \"Auth / Focused Form\" pattern.\n\n### Build an admin settings page\n\n```\n/rayden-code settings page with profile section, notification toggles, and danger zone\n```\n\n**Use case:** You're adding a settings area to your app and need form sections with Toggle components, a destructive action zone, and a single-column constrained layout.\n\n### Create a pricing page\n\n```\n/rayden-code pricing page with 3 tiers and a feature comparison table\n```\n\n**Use case:** You need a marketing pricing section with Card components for each tier, Badge for the recommended plan, and a Table for feature comparison.\n\n### Build an e-commerce product grid\n\n```\n/rayden-code product catalog with filters, search, and a card grid\n```\n\n**Use case:** You're building a storefront and need a responsive product grid with Chip filters, Input search, Pagination, and Cards with images — all using Rayden's layout and spacing rules.\n\n## Best Practices\n\n- Describe what you want in plain language — the skill maps your request to the right components\n- Install `@raydenui/ui` in your project first (`npm install @raydenui/ui`)\n- Import `@raydenui/ui/styles.css` in your app entry point for design tokens to work\n- Review generated code for business logic — the skill handles UI, not data fetching\n- Use alongside `/rayden-use` if you also want the same design built in Figma\n\n## Security & Safety Notes\n\n- This skill only reads its bundled rules file and writes code to your project\n- No external network requests\n- No secrets or credentials involved\n- Generated code uses standard React patterns with no eval or dynamic code execution\n\n## Common Pitfalls\n\n| Problem | Solution |\n|---------|----------|\n| Components not rendering correctly | Ensure `@raydenui/ui/styles.css` is imported in your app entry |\n| \"Component doesn't exist\" error | The skill only uses documented components — check if you're asking for something Rayden doesn't have |\n| Colors look wrong | Use token classes (`bg-primary-500`) not hex values. Ensure the Rayden CSS is loaded |\n| Layout not responsive | The skill generates responsive code by default — check that your viewport meta tag is set |\n\n## Related Skills\n\n- `rayden-use` — Build Rayden UI components and screens in Figma via MCP (included in the same 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","code","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-rayden-code","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-code","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 (4,625 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.799Z","embedding":null,"createdAt":"2026-04-18T21:43:15.007Z","updatedAt":"2026-04-23T00:51:27.799Z","lastSeenAt":"2026-04-23T00:51:27.799Z","tsv":"'/rayden-code':240,289,326,370,413 '/rayden-use':508 '1':149 '16':217 '2':161 '3':183,374 '34':37,166 '4':197 '5':211 '500':605 'access':181 'action':357 'activ':252 'activityfe':275 'ad':341 'admin':323 'aesthet':134 'ai':68 'alongsid':507 'also':511 'analyt':261 'anti':59,178 'anti-pattern':58,177 'api':44 'app':347,485,572 'area':344 'ask':589,686 'auth':102,302,317 'badg':395 'ban':61 'best':454 'bg':603 'bg-primari':602 'boundari':694 'build':84,258,321,406,427,638 'built':70,516 'bundl':527 'busi':497 'button':309 'card':245,390,421,443 'case':255,297,338,382,424 'catalog':415 'center':301 'check':585,625 'checklist':219 'chip':437 'clarif':688 'class':174,210,284,601 'clear':661 'code':3,6,20,30,114,138,199,236,495,532,546,556,622 'color':193,596 'column':363 'commerc':410 'common':558 'comparison':379,405 'complet':43,164 'compliant':144 'compon':10,35,38,48,65,93,130,157,167,190,207,306,354,391,471,562,574,584,641 'components/props':223 'constrain':364 'correct':12,129,221,279,565 'cover':220 'creat':366 'credenti':543 'criteria':697 'css':29,203,612 'danger':335 'dashboard':99,239,242,267 'data':107,159,504 'decid':187 'default':624 'describ':456,665 'design':51,75,119,142,171,228,489,515 'design-system-compli':141 'destruct':356 'document':206,583 'doesn':575,593 'dynam':555 'e':409 'e-commerc':408 'elev':195 'email':293 'ensur':566,609 'entri':486,573 'environ':677 'environment-specif':676 'error':578 'eval':553 'everi':47,49 'exampl':234 'execut':557 'exist':577 'expert':682 'explicit':57 'extern':537 'featur':89,378,404 'feed':253 'fetch':505 'figma':518,645 'file':529 'filter':417,438 'first':477 'focus':318 'follow':116,314 'form':303,319,350 'full':169,266 'generat':4,23,112,198,494,545,620 'generic':67 'grid':271,412,422,435 'hallucin':64 'handl':501 'hex':607 'hierarchi':231,313 'identifi':153 'imag':445 'import':281,481,569 'includ':648 'input':305,439,691 'instal':472,479 'intern':260 'involv':544 'kpi':244 'land':100 'languag':462 'layout':17,53,175,186,365,450,615 'librari':36 'limit':653 'list':62 'load':41,162,614 'logic':498 'login':287,290 'look':597 'map':465 'market':386 'match':662 'mcp':647 'meta':629 'metricscard':270 'miss':699 'model':160 'need':110,264,299,349,384,431 'nest':226 'network':538 'new':86 'note':521 'notif':332 'npm':478 'order':248 'output':69,145,671 'overview':22 'packag':652 'page':87,101,105,154,188,268,288,291,325,328,369,372 'pagin':441 'pars':150 'password':295 'pattern':18,54,60,176,179,320,550 'permiss':692 'philosophi':172 'pitfal':559 'plain':461 'plan':184,399 'point':218,487 'practic':455 'precis':121 'premium':16,133 'prevent':63 'price':368,371,387 'primari':308,604 'problem':560 'product':25,411,414,434 'production-qu':24 'profil':330 'project':476,535 'prop':13,50,170 'proper':311 'prototyp':125 'qualiti':26,229 'quick':127 'rayden':2,8,19,33,91,280,315,448,592,611,636,639 'rayden-cod':1 'rayden-us':635 'rayden_rules.md':163 'raydenui/ui':473,480 'raydenui/ui/styles.css':482,567 'rayna':73 're':83,136,257,340,426,588 'react':5,27,113,201,549 'read':525 'recent':247 'recommend':398 'refer':45,165 'relat':633 'render':564 'request':152,467,539 'requir':156,690 'respons':233,433,617,621 'restraint':232 'review':493,683 'right':470 'rule':182,453,528 'run':215 'saa':238 'safeti':520,693 'scaffold':97,285 'scope':664 'screen':103,643 'search':418,440 'secret':541 'section':331,351,388 'secur':519 'select':191 'self':213 'self-valid':212 'set':104,324,327,343,632 'sidebar':276 'singl':362 'single-column':361 'skill':21,40,81,464,500,523,580,619,634,656 'skill-rayden-code' 'solut':561 'someth':591 'sortabl':272 'source-sickn33' 'space':192,452 'specif':118,678 'standard':548 'stop':684 'storefront':429 'strategi':196 'structur':189 'substitut':674 'success':696 'system':76,120,143 'tabl':108,249,273,380,402 'tag':630 'tailwind':28,202 'task':660 'test':680 'tier':375,394 'toggl':333,353 'token':14,52,173,209,224,283,490,600 'tool':262 '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':669 'type':155 'ui':9,34,74,92,126,502,640 'usag':131,225 'use':11,31,79,90,204,254,296,337,381,423,447,506,547,582,599,637,654 'valid':214,222,679 'valu':608 'via':646 'vibe':137,235 'viewport':628 'visual':312 'want':95,123,140,459,512 'whitespac':230 'work':148,492 'write':200,531 'wrong':598 'zone':336,358","prices":[{"id":"56c76cfe-5a73-4aed-a17b-c83b4b5494d7","listingId":"c78eb04c-02e9-4ae0-b658-3b39f56d2490","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.007Z"}],"sources":[{"listingId":"c78eb04c-02e9-4ae0-b658-3b39f56d2490","source":"github","sourceId":"sickn33/antigravity-awesome-skills/rayden-code","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/rayden-code","isPrimary":false,"firstSeenAt":"2026-04-18T21:43:15.007Z","lastSeenAt":"2026-04-23T00:51:27.799Z"}],"details":{"listingId":"c78eb04c-02e9-4ae0-b658-3b39f56d2490","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"rayden-code","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":"25febb54f1f75fe5dc8ba1e40906af8f665b45e6","skill_md_path":"skills/rayden-code/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/rayden-code"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"rayden-code","description":"Generate React code with Rayden UI components using correct props, tokens, and premium layout patterns"},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/rayden-code"},"updatedAt":"2026-04-23T00:51:27.799Z"}}