component-design-system
Component Design System
Architecture patterns for building a consistent component library where Phoenix function components and Svelte 5 components live side by side, sharing visual language through a unified Tailwind design token system.
When You Need This Skill
You're working in a stack where Phoenix LiveView renders most of the UI via HEEx templates and function components, but islands of interactivity are handled by Svelte 5 components (mounted via LiveSvelte). The challenge: both sides need to produce visually identical output from a single source of truth for colors, spacing, typography, and component structure.
Core Architecture
The system has three layers:
- Token Layer — Tailwind CSS
@themevariables that define the design language
More from hwatkins/my-skills
elixir-tdd
Test-driven development enforcement for Elixir and Phoenix. Requires failing tests before implementation. Use when implementing features, fixing bugs, or when code quality discipline is needed.
23spam-prevention
When the user needs to prevent spam signups, bot accounts, fake registrations, or abuse of signup/trial flows. Also use when mentioning "spam accounts," "fake signups," "bot registrations," "disposable emails," "signup abuse," or "trial fraud." For broader security concerns, see saas-security.
14elixir-otp
OTP patterns for Elixir — GenServer, Agent, Task, ETS, supervision trees, Registry, and process design. Use when designing concurrent systems, stateful processes, or deciding when (and when NOT) to use processes.
8rust-tdd
Test-driven development enforcement for Rust. Requires failing tests before implementation. Use when implementing features, fixing bugs, or when code quality discipline is needed.
5rust-core
Expert Rust development with ownership, borrowing, lifetimes, traits, error handling, and idiomatic patterns. Use for any Rust code.
4rust-async
Async Rust with Tokio, futures, concurrency patterns, channels, and performance. Use when building async services, networking, or concurrent Rust applications.
4