Generate consistent UI components using Casper Studios design system for React apps (shadcn/ui, Tailwind CSS v4, Vite) and Apple Liquid Glass design for native macOS/iOS SwiftUI apps
Casper Studios internal design system for generating consistent, production-grade SaaS UI. Use this skill whenever generating UI code for internal tools, client apps, dashboards, POCs, prototypes, or any visual interface — even quick mockups or artifacts. Apply it any time the output is a React component, page, or layout. If the user mentions "our design system", "Casper style", "match our look", or asks you to build any kind of app or interface, use this skill. Also trigger when restyling or theming existing UI to match Casper's visual language. This skill takes priority over generic frontend-design guidance.
Build native macOS/iOS apps with Apple's Liquid Glass design language and Human Interface Guidelines. Use when creating SwiftUI interfaces, implementing translucent materials, designing cards/rows/badges, applying SF Symbols, following Apple HIG spacing/typography/color systems, or building any app that should feel native to Apple platforms. Triggers on macOS apps, iOS apps, SwiftUI UI, Apple-style design, glass effects, material backgrounds, native app design.
A collection of Claude Code plugins for business automation, data analysis, and productivity.
Plugins are organized by workstream under plugins/.
| Workstream | Plugin | Description |
|---|---|---|
| bizdev | crm | CRM operations for companies, contacts, and notes via Attio |
| bizdev | research | Social media, web, and market research scraping |
| design | doc-format | AI-powered document, image, and flowchart generation |
| design | design-system | Casper Studios design system and Liquid Glass UI guidance |
| design | content-marketing | LinkedIn posts, video production, and YouTube tooling |
| engineering | code-review | Codebase audits for AI-agent readiness and code review |
| engineering | skill-authoring | Tooling for creating and updating Claude Code skills |
| engineering | marketplace-setup | Security hooks, safe .env loading, and privacy settings |
| engineering | git-pr | Planning, commits, PR management, code polishing, session handoffs |
| engineering | testing | Browser automation and testing |
| engineering | integrations | Google Workspace and universal third-party app integrations |
| engineering | cf-saas-stack | Cloudflare SaaS stack patterns - auth, database, workflows, emails, Stripe, and more |
| engineering | stack-patterns | Idiomatic usage patterns for React, TanStack Table, and better-all |
| product | data-analysis | Data analysis and storytelling for financial and RevOps contexts |
| product | csv-analyzer | CSV data analysis, profiling, and visualization |
| product | discovery | AI voice agent creation for client discovery and feedback calls |
| project-management | brain | Context management for consulting projects - company info, project PRDs, meeting transcripts |
| project-management | comms | Email triage and Slack channel automation |
# Install the skills CLI, then add everything from the marketplace
npx skills add https://github.com/Casper-Studios/casper-marketplace --all -g
The --all flag is idempotent — it installs new skills and overwrites existing ones. The CLI handles cloning, diffing, and symlinking internally.
npx skills add https://github.com/Casper-Studios/casper-marketplace --skill commit
npx skills add https://github.com/Casper-Studios/casper-marketplace --skill pr-comments
# Add the Casper Studios marketplace
/plugin marketplace add Casper-Studios/casper-marketplace
# Install a specific plugin (see table above for the full list)
/plugin install brain
/plugin install data-analysis
/plugin install git-pr
/plugin install stack-patterns
/plugin install cf-saas-stack
Add sync-skills.sh as a Claude Code hook to keep all marketplace plugins up-to-date automatically:
// ~/.claude/settings.json
{
"hooks": {
"SessionStart": [
{
"matcher": "startup",
"hooks": [
{
"type": "command",
"command": "bash /path/to/sync-skills.sh",
"timeout": 60,
"async": true
}
]
}
]
}
}
Plugins are grouped by workstream under plugins/<workstream>/<plugin-name>/. Each plugin follows the standard Claude Code plugin structure:
plugins/<workstream>/<plugin-name>/
├── .claude-plugin/
│ └── plugin.json # Plugin manifest
├── skills/ # Skills with SKILL.md and references/
├── commands/ # Slash commands
├── scripts/ # Utility scripts
└── README.md # Plugin documentation
To add a new plugin:
plugins/<workstream>/ (add a new workstream folder if none fits).claude-plugin/plugin.json manifestMIT
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub casper-studios/casper-marketplace --plugin design-systemCRM operations for companies, contacts, and notes management via Attio
Google Workspace and universal third-party app integrations (Composio)
Guidance and tooling for creating and updating Claude Code skills
AI-powered document, image, and flowchart generation and formatting
Data analysis, visualization, and storytelling skill for financial and RevOps contexts
Build production-grade UI using real design system specifications from Google Material Design 3, Apple HIG, and IBM Carbon. Includes complete design tokens (4 themes for Carbon: White/G10/G90/G100), interaction states, page composition patterns, icon systems (Material Symbols + SF Symbols + Carbon Icons), pictograms, AI surface tokens, and editorial typography. For Carbon, every component file embeds verbatim Storybook source code (React + Web Components) — output it as-is. So Claude builds like a senior designer, not a prompt guesser.
Design Director for websites, web apps, iOS, and Android. Generates HTML/CSS directly (Gemini Design MCP, Magic/21st.dev, and shadcn MCP are optional). iOS/Android produce tokens + a device-framed mockup + a handoff spec, never SwiftUI/Compose. Design method, design system tokens, motion, UX copy, and a deterministic design-review gate. Anti-AI-Slop, WCAG 2.2.
Use this agent when creating user interfaces, designing components, building design systems, or improving visual aesthetics. This agent specializes in creating beautiful, functional interfaces that can be implemented quickly within 6-day sprints. Examples:\n\n<example>\nContext: Starting a new app or feature design
Your agent designs terrible UI. stitch-kit wires it into Google Stitch MCP and teaches it the whole pipeline — ideation, screen generation, design systems, and production components across 7 frameworks.
Editorial-driven UI design skill for premium digital products
Complete UI/UX design system for React Native & Next.js with 4 core skills