Skills
.Work. You
Rest

create-component-style

Official

Standardize component styles with tokens.

Design & Creative#monorepo#tokens#design-system#css-architecture#component-styling#vanilla-extract
Authoridealjs
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a repeatable, documented approach to implementing and sharing component styles within a monorepo, ensuring consistency across projects using vanilla-extract and token-driven design.

Core Features & Use Cases

  • Guided styling workflow: Defines how to design and apply base component styles, variants, and low-priority selectors using token systems.
  • Token-driven theming: Encourages centralizing colors, typography, and spacing in a tokens package and exporting through the styling package.
  • Documentation and exports: Describes how to organize files and ensure new styles are properly exported from packages.

Quick Start

Implement a new component style by following the steps in the SKILL.md, add base styles in packages/camphora-styled/src/<component>.css.ts, create variant classes, and export in packages/camphora-styled/src/index.ts.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: create-component-style
Download link: https://github.com/idealjs/camphora/archive/main.zip#create-component-style

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.