Skills
.Work. You
Rest

style-set-create

Official

Create StyleSets that follow v2 conventions.

Design & Creative#vue#design-system#component-architecture#style-conventions#css-in-typescript#style-set#vlossom
Authorvlossom-ui
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This guide helps teams generate StyleSet definitions for new components that align with the v2.0.0+ conventions, ensuring consistent typing, CSS variable exposure, and scalable design patterns across the codebase.

Core Features & Use Cases

  • Conventional Type Systems: Extend CSSProperties to define a typed StyleSet, including root properties and nested sub-objects for slots, elements, and child components.
  • Structured Naming: Enforces clear, semantic names for $X primitives and nested StyleSets to avoid ambiguity.
  • Incremental Adoption: Supports gradual adoption by combining root CSSProperties with optional $X objects and child StyleSets, without breaking existing components.
  • Use Case: When designing a new VsCard, you can declare $header, $body, and $footer sub-StyleSets to centrally control layout, spacing, and theming while keeping the root API stable.

Quick Start

Provide a guided, interactive workflow to generate a Vs<ComponentName>StyleSet that adheres to the v2 conventions.

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: style-set-create
Download link: https://github.com/vlossom-ui/vlossom/archive/main.zip#style-set-create

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 510,000+ vetted skills library on demand.