skills.rest
tachfineamnay
tachfineamnayCOMMUNITY
Explore all skills by this author →
GitHub

Design System Expert

Generate polymorphic design systems with CSS variables and Tailwind for React apps.

Updated Aug 27, 2026
Search Tags:#theming#frontend#tailwind#design-system#polymorphic#radix-ui
One-click install
npx skills add https://github.com/tachfineamnay/SocioPulseV1 --skill design-system-expert
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Design System Expert
Source: https://github.com/tachfineamnay/SocioPulseV1/tree/main/.agent/skills/design-system
Command: npx skills add https://github.com/tachfineamnay/SocioPulseV1 --skill design-system-expert

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about Design System Expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I switch brand themes in a React app using CSS variables and Tailwind?▼

Switch brand themes by applying a data-brand attribute on the root element. This toggles polymorphic CSS variables to produce distinct brand variants within a single React codebase.

What is a polymorphic design system and when do I need it for frontend development?▼

A polymorphic design system uses CSS variables and accessible component patterns to maintain brand-consistent UI across multiple modes. You need it when reducing UI fragmentation and drift between distinct brand experiences in one codebase.

Can I use Radix UI with Tailwind CSS for accessible component patterns?▼

Yes, you can use Radix UI with Tailwind CSS. The design system integrates Radix UI primitives for accessibility with brand-aware Tailwind tokens and static colors to build scalable, responsive styling.

How do I implement Framer Motion animations in a Tailwind-based design system?▼

To implement Framer Motion animations in a Tailwind-based design system, install the required dependencies and import the global variables. The system enforces Framer Motion integration for consistent motion alongside Tailwind styling.

Does this design system support multiple brand experiences without code duplication?▼

Yes, the design system supports multiple brand experiences without code duplication. It uses a polymorphic theming approach with CSS variables that switch based on the data-brand attribute to toggle between SOCIAL and MEDICAL themes.

Related Skills

Explore More Design & Creative Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
ovachieverovachiever
52

ui-design-system

Generate design tokens from brand colors in JSON, CSS, or SCSS.

Community
Advanced
gustavscirulisgustavscirulis
114

baseline-ui

Validate Tailwind CSS UI against animation, typography, accessibility, and layout constraints.

Community
Intermediate
kws-projectskws-projects
2

color-management

Manage design tokens in Tailwind CSS projects using OKLCH color spaces.

Official
Advanced