skills.rest
Hey-Viswa
Hey-ViswaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

raycast-design-skill

Generate implementation-ready React/Next.js UI patterns aligned with the Raycast design system.

Updated Apr 11, 2026
Search Tags:#ui#frontend#react#nextjs#design-system#design-patterns#raycast
One-click install
npx skills add https://github.com/Hey-Viswa/-claude-design-system-skills --skill raycast-design-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: raycast-design-skill
Source: https://github.com/Hey-Viswa/-claude-design-system-skills/tree/main/design_system_skills/raycast-design-skill
Command: npx skills add https://github.com/Hey-Viswa/-claude-design-system-skills --skill raycast-design-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Raycast-style UI patterns help teams translate product needs into consistent, scalable interfaces by providing standardized design guidance and implementation-ready output.

Core Features & Use Cases

  • Proposes UI structure, typography, spacing, and interaction states aligned with the Raycast design system.
  • Guides component selection and layout decisions for consistent experiences across screens.
  • Applies to frontend design tasks in React/Next.js projects requiring end-to-end UI patterns.

Quick Start

Describe a Raycast-style UI plan for the requested screen and generate implementation-ready React/Next.js guidance.

Frequently Asked Questions about raycast-design-skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement Raycast UI patterns in a React or Next.js project?▼

Raycast UI patterns provide standardized, implementation-ready guidance for React and Next.js projects, translating product needs into consistent interfaces by aligning component selection, typography, spacing, and interaction states with the Raycast design system.

What are Raycast design system patterns for frontend component selection?▼

Raycast design system patterns are standardized UI structures and rules that guide component selection and layout decisions, ensuring consistent user experiences and maintainable interfaces across various screens and workflows.

Can I use these Raycast design patterns for both typography and interaction states?▼

Yes, these Raycast UI patterns apply across typography, spacing, and interaction states, proposing standardized structures that ensure consistent design decisions and scalable user experiences across different screens.

What is the best way to structure end-to-end UI patterns for React components?▼

The best way to structure end-to-end UI patterns for React is to apply standardized design guidance with clear rules and usage instructions, ensuring maintainability and scalability across frontend application workflows.

Does this approach solve misalignment between product UI needs and the Raycast design system?▼

Yes, this approach solves misalignment between product UI needs and the Raycast design system by providing standardized, implementation-ready UI patterns that support consistent decisions across various screens and workflows.

Related Skills

Explore More Design & Creative Skills→
jeiusjeius
1

gluestack-ui-v4:setup

Install and configure gluestack-ui v4 in Next.js or Expo projects.

Community
Intermediate
azlekovazlekov
1

react

Design React components with server and client patterns for Next.js apps.

Community
Advanced
wpgauravwpgaurav
14

modern-frontend-design

Transform prompts into premium UI blueprints for React/Next.js SaaS frontends.

Community
Advanced
hschnehschne
1

design-principles

Apply named aesthetic philosophies to frontend UI builds and critiques.

Community
Intermediate