skills.rest
MakePrisms
MakePrismsOFFICIAL
Explore all skills by this author →
GitHub

tailwind-design-system

Standardize mobile wallet UI theming with Tailwind v4 CSS variables and CVA variants.

55|5|Updated Feb 1, 2024
Search Tags:#theming#tailwind#design-system#cva#css-variables#ui-patterns#mobile-wallet
One-click install
npx skills add https://github.com/MakePrisms/agicash --skill tailwind-design-system-makeprisms
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-design-system
Source: https://github.com/MakePrisms/agicash/tree/main/.claude/skills/tailwind-design-system
Command: npx skills add https://github.com/MakePrisms/agicash --skill tailwind-design-system-makeprisms

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a unified Tailwind-based design system to ensure cohesive theming, components, and layouts for a mobile-wallet UI.

Core Features & Use Cases

  • Theming: currency themes (USD/BTC) and dark mode via CSS variables and root classes.
  • Component patterns: CVA-based variants, shadcn/ui integration, and reusable UI primitives.
  • Layout conventions: full-viewport handling, mobile-first containers, and accessible typography.

Quick Start

Apply the Tailwind design system to initialize and enforce theming and layout conventions for the mobile wallet UI.

Frequently Asked Questions about tailwind-design-system

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

FAQPage Schema
How do I build a Tailwind design system for a mobile wallet UI?▼

To build a Tailwind design system for mobile wallet UI, apply this skill to standardize theming, component styling, and layout conventions. It enforces CSS variables and CVA variants to ensure cohesive mobile-first containers and typography.

How do I manage theming and dark mode in a CSS-first Tailwind v4 configuration?▼

Manage theming in a CSS-first Tailwind v4 configuration by utilizing CSS variables and root classes. This approach handles dark mode and currency themes like USD or BTC, ensuring consistent visual states across the application.

Can I use shadcn/ui components with CVA variants for mobile UI patterns?▼

Yes, you can use shadcn/ui integration with CVA-based variants to construct reusable UI primitives. This combination standardizes component patterns, ensuring consistent styling and behavior across mobile interfaces.

What is the best way to handle full-viewport layouts and accessible typography in mobile UI?▼

The best way to handle full-viewport layouts and accessible typography is by enforcing mobile-first containers and layout conventions. This skill standardizes these patterns to ensure responsive and accessible mobile wallet interfaces.

Does this Tailwind design system support theme persistence for currency switching?▼

Yes, this Tailwind design system supports theme persistence for currency switching. It applies CSS variables and root classes to maintain consistent USD or BTC currency themes across user sessions.

How do I standardize UI patterns using CSS variables and CVA in Tailwind?▼

Standardize UI patterns using CSS variables and CVA in Tailwind by defining component variants and theme tokens. This skill enforces these configurations to maintain cohesive component styling and layout across the app.

Related Skills

Explore More Design & Creative Skills→
ProjectEuropaProjectEuropa
4

tailwind-patterns

Create CSS-first Tailwind v4 design systems with @theme blocks and container queries.

Community
Intermediate
AngusatgithubAngusatgithub

adaptive-interfaces

Implement adaptive interfaces using media queries and persistent preference management.

Community
Intermediate
EdwinFerminEdwinFermin

ui-components

Document reusable shadcn/ui and Radix component patterns with CVA variants and OKLCH theming.

Community
Advanced
AgentientAgentient
2

tailwind-utility-styling

Automate mobile-first UI styling with Tailwind utility classes and CSS variables.

Official
Advanced