Design System Expert
CommunityMaster SocioPulse V2's polymorphic design system.
Authortachfineamnay
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides a polymorphic design system to ensure brand-consistent UI across SOCIAL and MEDICAL modes, reducing fragmentation and drift.
Core Features & Use Cases
- Polymorphic Theming: CSS variables switch based on data-brand to produce SOCIAL teal and MEDICAL rose variants.
- Tailwind Integration: Brand-aware tokens and static colors underpin responsive, scalable styling.
- Accessible Components: Radix UI primitives with consistent typography, spacing, and motion.
- Real-world Use Case: Build two distinct brand experiences within a single codebase by toggling the data-brand attribute on the root element.
Quick Start
Install the design system dependencies into your frontend project (Tailwind, Radix UI, Framer Motion) and import the global variables. Then apply data-brand attributes on the root element to switch between SOCIAL and MEDICAL themes.
Dependency Matrix
Required Modules
None requiredComponents
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: Design System Expert Download link: https://github.com/tachfineamnay/SocioPulseV1/archive/main.zip#design-system-expert Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.