Can I use this for mobile app development?

Yes, the skill includes a specific mobile reference guide covering device frames, bottom tab navigation, and card stacks.

How does it handle typography?

It uses the DM Sans font family with a medium weight (500) for headings and specific scale rules for captions and body text.

Do I need to initialize shadcn separately?

Yes, you should run 'shadcn init' first. This skill layers Casper's brand tokens and CSS variables on top of the standard shadcn semantic layer.

Which tech stack does this design system support?

The system is built for React (Vite) using Tailwind CSS v4, shadcn/ui, and Lucide React icons.

What is the core visual aesthetic of Casper Studios?

The aesthetic is 'clean authority'—a professional SaaS style featuring generous whitespace, 10px rounded corners, and a restrained purple accent.

Casper Studios Design System

Name: Casper Studios Design System
Author: Casper-Studios

byCasper-Studios

•

Design Tools

Generates consistent, production-grade SaaS user interfaces using Casper Studios' professional visual language and shadcn/ui components.

The Casper Studios Design System skill provides Claude with the specific design tokens, layout patterns, and component structures required to build official Casper Studios applications. It integrates Tailwind CSS v4 with shadcn/ui to create a 'clean authority' aesthetic characterized by generous whitespace, subtle depth, and a professional purple accent. Whether building web dashboards or mobile prototypes, this skill ensures all generated code adheres to brand-specific typography (DM Sans), color scales, and spacing rules, prioritizing Casper's visual identity over generic frontend guidance.

Key Features

01Pre-defined reference guides for common UI patterns like kanban boards and activity feeds

02Platform-specific layout logic for both web dashboards and mobile applications

03Standardized brand color palette featuring Casper's signature purple accent

04Context-aware dark mode support and automated SVG logo variant selection

05Tailwind CSS v4 and shadcn/ui integration for modern React components

0610 GitHub stars

Use Cases

01Restyling or theming existing React components to match the Casper Studios visual language

02Building high-fidelity SaaS dashboard prototypes with consistent Casper branding

03Generating responsive mobile application interfaces using Casper-specific mobile patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add casper-studios/casper-marketplace casper-design-system

For use in Claude.ai and ChatGPT

Key Features

01Pre-defined reference guides for common UI patterns like kanban boards and activity feeds

02Platform-specific layout logic for both web dashboards and mobile applications

03Standardized brand color palette featuring Casper's signature purple accent

04Context-aware dark mode support and automated SVG logo variant selection

05Tailwind CSS v4 and shadcn/ui integration for modern React components

0610 GitHub stars

Use Cases

01Restyling or theming existing React components to match the Casper Studios visual language

02Building high-fidelity SaaS dashboard prototypes with consistent Casper branding

03Generating responsive mobile application interfaces using Casper-specific mobile patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add casper-studios/casper-marketplace casper-design-system

For use in Claude.ai and ChatGPT