Rayden Code

Examples

Vibe code a SaaS dashboard

/rayden-code a dashboard with KPI cards, a recent orders table, and an activity feed

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.

Scaffold a login page

/rayden-code login page with email and password

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.

Build an admin settings page

/rayden-code settings page with profile section, notification toggles, and danger zone

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.

Create a pricing page

/rayden-code pricing page with 3 tiers and a feature comparison table

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.

Build an e-commerce product grid

/rayden-code product catalog with filters, search, and a card grid

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.

Best Practices

• Describe what you want in plain language — the skill maps your request to the right components
• Install @raydenui/ui in your project first (npm install @raydenui/ui)
• Import @raydenui/ui/styles.css in your app entry point for design tokens to work
• Review generated code for business logic — the skill handles UI, not data fetching
• Use alongside /rayden-use if you also want the same design built in Figma

Security & Safety Notes

• This skill only reads its bundled rules file and writes code to your project
• No external network requests
• No secrets or credentials involved
• Generated code uses standard React patterns with no eval or dynamic code execution

Common Pitfalls

Related Skills

• rayden-use — Build Rayden UI components and screens in Figma via MCP (included in the same package)

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.