Skills
.Work. You
Rest

component-design-system

Community

Unify Phoenix and Svelte UI components.

Design & Creative#svelte#tailwind#tokens#phoenix#design-system#ui-components#design-tokens
Authorhwatkins
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Building consistent, cross-framework UI components across Phoenix and Svelte requires duplicating effort and risking visual drift. This skill provides a unified design token system and a cross-framework component contract so teams can reuse patterns and speed UI delivery.

Core Features & Use Cases

  • Shared design tokens via Tailwind @theme to unify colors, spacing, and typography across Phoenix and Svelte.
  • Variant/size API with consistent class mappings to ensure identical component behavior and visuals across frameworks.
  • Slot/snippet alignment across Phoenix slots and Svelte snippets to enable composable, framework-agnostic components.
  • Clear guidance on accessibility, theming, and token-driven customization for multi-application design systems.

Quick Start

Set up a Phoenix LiveView + Svelte design system with shared Tailwind design tokens and a component API scaffold.

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: component-design-system
Download link: https://github.com/hwatkins/my-skills/archive/main.zip#component-design-system

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.