Skills for Claude
Give Claude AI assistants deep knowledge of the Stareezy UI design system — tokens, components, themes, and best practices.
Overview
Claude skills are curated instruction files that teach Claude AI assistants how to build UIs with Stareezy UI. When you install a skill, Claude gains deep knowledge of your design tokens, component APIs, theming capabilities, and architectural patterns — enabling it to generate accurate, on-brand code without hallucinations or guesswork.
Available Skills
Four skills are available, each focused on a specific area of the Stareezy UI ecosystem. Install the ones most relevant to your workflow, or install all four for complete coverage.
Design Token Expert
Complete knowledge of the token system — color palette, spacing scale, typography hierarchy, breakpoints, shadows, and the t.* runtime accessor pattern.
Component Library
All 31+ components — their props, type signatures, usage patterns, composition examples, and server/client rendering requirements.
Theme Master
Understanding of all 5 built-in themes (aurora, dark, light, steins-gate, quasar), how to create custom themes, theme inheritance, and dynamic theme switching.
Best Practices
Responsive design with the sx prop, server component patterns, performance optimization with the compiler, and accessibility guidelines.
Installation
Install skills in three steps. The process is identical for Claude Desktop and Claude Code.
Clone or download the stareezy-ui/claude-skills repository from GitHub:
git clone https://github.com/stareezy-1/claude-skills.git
cd claude-skills
# All skill files are in the ./skills/ directoryThe repository contains four .md files, one per skill, plus a stareezy-ui.json manifest for Claude Desktop.
Claude Desktop — edit claude_desktop_config.json (typically at ~/Library/Application Support/Claude/):
{
"projectSettings": {
"skills": [
{ "name": "stareezy-tokens", "file": "./skills/tokens.md" },
{ "name": "stareezy-components", "file": "./skills/components.md" },
{ "name": "stareezy-themes", "file": "./skills/themes.md" },
{ "name": "stareezy-best-practices", "file": "./skills/best-practices.md" }
]
}
}Claude Code — add the skills to your project's .claude/settings.json:
{
"skills": [
"skills/tokens.md",
"skills/components.md",
"skills/themes.md",
"skills/best-practices.md"
]
}Ask Claude a question to verify the skills are loaded correctly:
"What Stareezy UI tokens are available for spacing?"If the skills are installed, Claude will reference the skill files and provide accurate token values from the Stareezy system.
Usage Examples
Once skills are installed, you can prompt Claude with natural language to generate Stareezy UI code. Here are some example prompts:
Generates a themed card with proper padding, border radius, and shadow tokens
Returns complete Button API docs with Primary, Secondary, Outline, Ghost, Danger examples
Walks through theme inheritance and token overrides with a working config example
Produces a responsive grid layout following Stareezy best practices for server components
stareezy.config.ts in the conversation context. This lets Claude reference your actual token overrides and custom theme.Creating Custom Skills
You can extend the provided skills or create your own. Skill files are plain Markdown with a specific frontmatter format. A minimal custom skill looks like:
---
name: my-custom-skill
description: Custom skill for my project's conventions
---
# My Custom Skill
## Component Patterns
- Use the `PascalCase` naming convention for all component files
- Import tokens from `@stareezy-ui/tokens`
- Always use the `sx` prop for responsive styles
## Project-Specific Tokens
```ts
// Custom color overrides
const brand = {
primary: '#a855f7',
secondary: '#ff6a1a',
}
```Place your custom skill file in your project and reference it in your Claude configuration alongside the official Stareezy skills. Custom skills take precedence when they cover overlapping topics.