{
  "markdown": "# Rayden UI Design Skill\n\nA Claude Code skill for building with [Rayden UI](https://www.raynaui.com/) — in code and in Figma. Two skills in one package:\n\n- **`/rayden-code`** — Vibe code production-quality React interfaces using Rayden UI's 34 components with correct props, design tokens, and premium layout patterns\n- **`/rayden-use`** — Build and maintain Rayden UI components and screens directly in Figma via the Figma MCP\n\nBoth skills enforce the Rayna UI design system: documented components only, token-only colors, spacing on the 4px grid, and visual craft rules that prevent generic AI output.\n\n---\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n  - [For Vibecoders (React Code)](#for-vibecoders-react-code)\n  - [For Designers (Figma)](#for-designers-figma)\n- [Install the Skill](#install-the-skill)\n- [Usage Guide](#usage-guide)\n  - [/rayden-code — Vibe Code with Rayden UI](#rayden-code--vibe-code-with-rayden-ui)\n  - [/rayden-use — Design in Figma](#rayden-use--design-in-figma)\n- [What's Included](#whats-included)\n- [Design System](#design-system)\n- [Troubleshooting](#troubleshooting)\n\n---\n\n## Getting Started\n\n### For Vibecoders (React Code)\n\nGenerate React + Tailwind CSS code using all 34 Rayden UI components. The skill knows every component, every prop, and every design token — so you get correct, production-quality output instead of hallucinated components.\n\n#### Step 1 — Set up a Rayden UI project\n\nIf you don't have a project yet, scaffold one with the CLI:\n\n```bash\nnpx create-rayden-app my-app\ncd my-app\n```\n\nThis gives you a fully configured project with Rayden UI, Tailwind CSS, and all design tokens ready to go.\n\nOr add Rayden UI to an existing React project:\n\n```bash\nnpm install @raydenui/ui\n```\n\nThen import the styles in your app entry point (e.g. `main.tsx` or `layout.tsx`):\n\n```tsx\nimport '@raydenui/ui/styles.css';\n```\n\n#### Step 2 — Install the skill in Claude Code\n\nChoose one of the install methods below (Plugin Marketplace, skills.sh, or manual).\n\n#### Step 3 — Start vibe coding\n\nOpen Claude Code in your project directory and use the skill:\n\n```\n/rayden-code a dashboard with KPI cards, a recent orders table, and an activity feed\n```\n\nClaude will read the full Rayden UI component reference, plan the layout, and generate React code using only documented components and props with proper Tailwind token classes.\n\n#### More examples\n\n```\n/rayden-code auth page with email login and social sign-in buttons\n/rayden-code settings page with profile section, notification toggles, and danger zone\n/rayden-code e-commerce product grid with filters and sorting\n/rayden-code onboarding wizard with 4 steps\n/rayden-code pricing page with 3 tiers and a comparison table\n```\n\n#### What you get\n\n- Correct imports from `@raydenui/ui`\n- Only real components and props (no hallucinated APIs)\n- Tailwind token classes (`bg-primary-500`, `text-grey-900`) instead of hex values\n- Responsive layouts with `sm:`, `md:`, `lg:` breakpoints\n- Premium design patterns: generous whitespace, clear visual hierarchy, color restraint\n- Accessibility: `aria-label` on icon-only buttons, keyboard-navigable compound components\n\n---\n\n### For Designers (Figma)\n\nBuild Rayden UI components and screens directly in Figma using the Figma MCP. Every output uses auto layout, resolved design token values, and passes a visual validation checklist.\n\n#### Step 1 — Connect Figma MCP\n\nThe skill uses the [Figma MCP server](https://modelcontextprotocol.io/) to write to Figma files. Make sure it's enabled in Claude Code's tool settings.\n\nVerify the connection by running:\n\n```\n/rayden-use whoami\n```\n\nIf this fails, check that:\n- The Figma MCP server is connected in Claude Code\n- You have a **Dev** or **Full** Figma seat (Viewer seats don't have write access)\n\n#### Step 2 — Get Rayden component data\n\nThe skill needs access to Rayden component specs and tokens. Set up one of these:\n\n**Option A — Rayden AI MCP server (recommended):**\n\nAdd to your Claude Code MCP config:\n\n```json\n{\n  \"mcpServers\": {\n    \"rayden-ai\": {\n      \"command\": \"npx\",\n      \"args\": [\"@raydenui/ai\"]\n    }\n  }\n}\n```\n\nThis gives the skill access to component props, anatomy, tokens, and layout recipes via MCP tools.\n\n**Option B — Package installed in your project:**\n\n```bash\nnpm install @raydenui/ui\n```\n\nThe skill will read component data from `node_modules/@raydenui/ai/`.\n\n#### Step 3 — Install the skill in Claude Code\n\nChoose one of the install methods below.\n\n#### Step 4 — Start designing\n\nOpen a Figma file and pass the URL:\n\n```\n/rayden-use Button https://figma.com/file/your-file-key/your-file-name\n```\n\nThe skill will build the component with all variants using auto layout, design tokens, and Figma Plugin API best practices.\n\n#### More examples\n\n```\n/rayden-use dashboard-screen balanced https://figma.com/file/...\n/rayden-use landing expressive https://figma.com/file/...\n/rayden-use auth conservative https://figma.com/file/...\n/rayden-compose settings balanced https://figma.com/file/...\n```\n\n#### Style modes\n\nEvery Figma build accepts a style mode that controls the aesthetic output:\n\n| Mode | Spacing | Shadows | Typography | Best for |\n|------|---------|---------|------------|----------|\n| `conservative` | Tight (16px padding) | None (border only) | h4/h5 max | Dense admin UIs, data-heavy screens |\n| `balanced` | Standard (24px padding) | `soft-xs` on cards | Full scale | Most use cases (default) |\n| `expressive` | Generous (48px padding) | `soft-sm` resting | h2/h3 titles | Marketing pages, hero sections |\n\n#### What you get\n\n- Auto layout on every frame (no absolute positioning)\n- All colors from resolved token hex values\n- Concentric border radius (inner elements one step smaller than container)\n- Visual validation after each build stage (screenshots + 8-point checklist)\n- One primary action per section maximum\n- 4px spacing grid enforced\n\n---\n\n## Install the Skill\n\n### Claude Code Plugin Marketplace\n\n```bash\nclaude plugin add rayden-ui-design-skill\n```\n\n### skills.sh\n\n```bash\nclaude skill add playbookTV/rayden-ui-design-skill\n```\n\n### Manual install\n\nClone the repo and point Claude Code at it:\n\n```bash\ngit clone https://github.com/playbookTV/rayden-ui-design-skill.git\nclaude --plugin-dir ./rayden-ui-design-skill\n```\n\nTo verify the skill loaded, run `/rayden-code` or `/rayden-use` in Claude Code — both should be available.\n\n---\n\n## Usage Guide\n\n### `/rayden-code` — Vibe Code with Rayden UI\n\nGenerate React + Tailwind CSS code using Rayden UI's 34 components.\n\n**Syntax:**\n\n```\n/rayden-code [description of what you want to build]\n```\n\n**How it works:**\n\n1. Reads the full Rayden UI component reference (RAYDEN_RULES.md) — every component, prop, token, and design pattern\n2. Plans the layout: page structure, component selection, spacing, color, and elevation strategy\n3. Generates React code with correct imports, props, and Tailwind token classes\n4. Self-validates against a 16-point checklist (correctness + design quality)\n\n**Available components (34):**\n\n| Category | Components |\n|----------|------------|\n| **Forms & Inputs** | Button, ButtonGroup, Input, Select, Checkbox, Radio, Toggle, Chip, FileUpload, Counter, NumberCounter, Slider, RangeSlider, DatePicker |\n| **Navigation** | Tabs, Breadcrumb, Pagination, SidebarMenu, DropdownMenu, Stepper, LinearStepper, SegmentedStepper |\n| **Data Display** | Table, Avatar, AvatarGroup, ActivityFeed, MetricsCard, Icon, EmptyStateIllustration, RaydenChart |\n| **Feedback** | Alert, Badge, Banner, ProgressBar, ProgressCircle, Spinner, Tooltip |\n| **Layout** | Accordion, Card, Divider, Modal |\n\n---\n\n### `/rayden-use` — Design in Figma\n\nBuild Rayden UI components and screens directly in Figma via MCP.\n\n**Syntax:**\n\n```\n/rayden-use [component-or-screen] [style-mode] [figma-file-url]\n```\n\n**How it works:**\n\n1. Verifies Figma MCP connection and write access\n2. Loads component specs, design tokens, craft rules, and anti-patterns\n3. Identifies task type (single component, full screen, audit, or add variants)\n4. Builds using Figma Plugin API with auto layout, helper functions, and token values\n5. Takes screenshots after each stage and validates against 8 acceptance criteria\n6. Runs a self-validation checklist before reporting completion\n\n**Subagent — `/rayden-compose`:**\n\nFor full-page screen builds (dashboards, landing pages, auth, settings, data tables), the skill can delegate to a specialized subagent:\n\n```\n/rayden-compose dashboard balanced https://figma.com/file/...\n```\n\nThis runs in an isolated context with all supporting files pre-loaded.\n\n---\n\n## What's Included\n\n```\nskills/\n├── rayden-code/\n│   ├── SKILL.md              # Vibe coding skill definition\n│   └── RAYDEN_RULES.md       # Full component API (34 components), design patterns,\n│                              # tokens, anti-patterns, accessibility rules, checklist\n└── rayden-use/\n    ├── SKILL.md              # Figma design skill definition\n    ├── rayden-compose/\n    │   └── SKILL.md          # Subagent for full-page Figma screen builds\n    └── supporting/\n        ├── tokens.md         # Resolved token values (colors, spacing, radius, shadows, typography)\n        ├── craft-rules.md    # Typography, radius, spacing, color craft rules + QA checklist\n        ├── anti-patterns.md  # Banned AI-generated design patterns with alternatives\n        └── screen-patterns.md # Pre-built layout shells for 5 screen types\n```\n\n---\n\n## Design System\n\nBuilt on the [Rayna UI](https://www.raynaui.com/) design system. Both skills enforce these rules:\n\n- **Only documented components and props** — no hallucinated APIs\n- **Token-only colors** — `bg-primary-500` / `#EB5017`, never arbitrary hex values\n- **4px spacing grid** — all spacing uses token values (4, 8, 12, 16, 20, 24, 32, 40, 48, 64)\n- **Concentric border radius** — inner elements one step smaller than container\n- **One primary action per section** — secondary actions use outlined or text variants\n- **No gradient text** — headings use `grey-900`, emphasis uses `primary-600`\n- **No colored containers** — cards are always `bg-white`, page backgrounds are `grey-50`\n- **Content width always constrained** — `max-w-7xl` for pages, `max-w-sm`–`max-w-2xl` for forms\n- **Consistent elevation** — shadow OR border per section, never both heavy\n\n---\n\n## Troubleshooting\n\n### Vibe Coding (`/rayden-code`)\n\n| Problem | Solution |\n|---------|----------|\n| Components not rendering | Make sure `@raydenui/ui/styles.css` is imported in your app entry point |\n| \"Component doesn't exist\" in output | The skill only uses documented components — check if what you're asking for is in the 34-component list above |\n| Colors look wrong | Ensure the Rayden CSS is loaded. Use Tailwind token classes, not hex values |\n| Layout not responsive | Check your HTML has `<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">` |\n| Skill not loading | Run `claude --plugin-dir ./rayden-ui-design-skill` to verify, or check that the plugin is installed |\n\n### Figma Design (`/rayden-use`)\n\n| Problem | Solution |\n|---------|----------|\n| \"Font not found\" error | The skill falls back to Roboto — load Inter in your Figma file for best results |\n| Figma permission denied | Verify your seat is Dev or Full (not Viewer) and the file isn't view-only |\n| Components don't combine as variants | All components must share the same parent frame for `combineAsVariants` |\n| MCP not connected | Check Figma MCP is enabled in Claude Code's tool settings. Run `mcp__claude_ai_Figma__whoami` to verify |\n| Colors look wrong | The skill uses resolved hex values from tokens.md — double-check against the token reference |\n\n---\n\n## License\n\nMIT\n",
  "bytes": 11660,
  "sha": "6394c1b68b6b16f92e0a9f717bc20f34008203324beafb7a83cbe4819be7d2cb",
  "repo_slug": "playbooktv/rayden-ui-design-skill",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_playbooktv_rayden_ui_design_skill_rayden_26bff0c5/readme"
}