skills.rest
cartridge-gg
cartridge-ggOFFICIAL
Explore all skills by this author →
GitHub

ui-architecture

Standardize frontend UI components with Radix, Tailwind, CVA, and Storybook.

Updated Apr 3, 2026
Search Tags:#frontend#react#storybook#tailwind#design-system#cva#ui-architecture
One-click install
npx skills add https://github.com/cartridge-gg/scoundrel --skill ui-architecture-cartridge-gg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-architecture
Source: https://github.com/cartridge-gg/scoundrel/tree/main/.agents/skills/ui-architecture
Command: npx skills add https://github.com/cartridge-gg/scoundrel --skill ui-architecture-cartridge-gg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes frontend UI patterns for the Scoundrel client, ensuring consistent design, behavior, and theming across components.

Core Features & Use Cases

  • Universal CVA pattern: consistent variant management using class-variance-authority with cn() helpers.
  • ForwardRef UI primitives: robust wrappers for Radix primitives with accessible props.
  • Design system & Storybook: integration with Storybook stories and Tailwind theming, plus barrel exports for maintainability.
  • Audio integration: optional useAudio hooks to add sound effects to interactive components.

Quick Start

Create or update UI components in client/src using CVA patterns, Tailwind styling, Radix primitives, and Storybook conventions.

Frequently Asked Questions about ui-architecture

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

FAQPage Schema
How do I standardize React component variants with CVA and Tailwind?▼

Standardize React component variants by applying class-variance-authority with the cn() helper and VariantProps, ensuring consistent theming and design-system compliance across your UI primitives.

What's the best way to add sound effects to interactive UI components?▼

Add sound effects to interactive UI components by integrating the useAudio hook, which provides audio playback capabilities for user interactions while maintaining standardized component patterns.

How do I build accessible UI primitives with Radix and forwardRef?▼

Build accessible UI primitives by wrapping Radix components with forwardRef, passing accessible props through robust wrappers while maintaining CVA-based variant management and Tailwind styling.

Does this Skill integrate with Storybook for design-system components?▼

Yes, this Skill integrates with Storybook by generating stories and enforcing Tailwind theming conventions, ensuring your UI components maintain design-system compliance and documentation standards.

Can I use this Skill to update existing components in my client source?▼

Yes, you can update existing components in client/src by applying standardized patterns including CVA variants, forwardRef wrappers, barrel exports via index.ts, and Radix primitive integration.

Why use barrel exports for UI component architecture?▼

Use barrel exports via index.ts to maintain clean import paths and improve maintainability when managing multiple UI components with Radix primitives, CVA variants, and Tailwind styling.

Related Skills

Explore More Software Engineering Skills→
sahaja9707sahaja9707

shadcn-ui

Initialize and configure shadcn/ui projects with React components and Tailwind CSS.

Community
Intermediate
JCE-Joshhh77JCE-Joshhh77
16

design-systems

Design scalable design systems with W3C tokens, CSS theming, and CVA/Radix APIs.

Community
Advanced
SamuelSahaSamuelSaha

Design Systems

Establish design systems with W3C Design Tokens and Style Dictionary.

Community
Advanced
kensauruskensaurus
8

design-system

Create design systems with CSS custom properties, Tailwind theming, and CVA variants.

Community
Advanced