Casper Design System

This is Casper Studios' internal design system skill, and it's surprisingly opinionated in a good way. Built on shadcn/ui and Tailwind v4, it enforces a specific SaaS aesthetic: generous whitespace, restrained purple accent, rounded but not bubbly surfaces. The skill forces you to declare platform (web or mobile) and dark mode support upfront, then pulls from different reference files accordingly. What's smart is the hard rule about reading component and layout references before generating any UI, which should prevent the usual off-brand garbage. It's prescriptive enough to actually maintain consistency across a team's prototypes and internal tools without being a straightjacket.

skills.sh installs: 269
GitHub stars: 15
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add casper-studios/casper-marketplace --skill casper-design-system --agent claude-code

Installs into .claude/skills of the current project.

Files

Casper Studios Design System

A clean, elevated SaaS design system built on shadcn/ui, Tailwind CSS v4, and React (Vite). Every interface generated for Casper Studios — whether a client demo, internal tool, or quick prototype — must follow these rules to maintain a consistent, professional visual identity across the team.

Before generating any UI code, read this file completely and the reference files listed below. You MUST read the reference files — they contain rules and code examples that are required for correct output. Skipping them will produce incorrect, off-brand UI.

Required for EVERY project:

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly