[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-fd5eba6d-8f1c-450d-82e4-6ee2cf8fc40f":3,"$fb2KxRHMpfhyWcXqrRMlgnOrBITVIZMGwbcukiyPzAAY":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"fd5eba6d-8f1c-450d-82e4-6ee2cf8fc40f","rayden-code","生成使用Rayden UI组件的React代码，确保使用正确的属性、令牌和高级布局模式","cat_coding_frontend","mod_coding","sickn33,coding","---\nname: rayden-code\ndescription: Generate React code with Rayden UI components using correct props, tokens, and premium layout patterns\ncategory: development\nrisk: safe\nsource: https:\u002F\u002Fgithub.com\u002FplaybookTV\u002Frayden-ui-design-skill\nsource_type: community\ndate_added: 2026-04-10\nauthor: Leslie Williams\ntags: react, tailwind, design-system, ui, components, vibe-coding, rayden, rayna-ui, code-generation\ntools: Read, Write, Edit, Bash, Glob, Grep\n---\n\n# 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\u002Fprops, token usage, nesting) and design quality (whitespace, hierarchy, restraint, responsiveness)\n\n## Examples\n\n### Vibe code a SaaS dashboard\n\n```\n\u002Frayden-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\u002Frayden-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 \u002F Focused Form\" pattern.\n\n### Build an admin settings page\n\n```\n\u002Frayden-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\u002Frayden-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\u002Frayden-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\u002Fui` in your project first (`npm install @raydenui\u002Fui`)\n- Import `@raydenui\u002Fui\u002Fstyles.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 `\u002Frayden-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\u002Fui\u002Fstyles.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.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,186,1029,"2026-05-16 13:36:16",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"9355731b-cfe1-48dd-bdac-2dcbfb14bac6","1.0.0","rayden-code.zip",2374,"uploads\u002Fskills\u002Ffd5eba6d-8f1c-450d-82e4-6ee2cf8fc40f\u002Frayden-code.zip","43180089723a743b3e833b694cf1da1c8fbc944ef4883c811ad63b97cccd258f","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":5105}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]