ui-architecture

Name: ui-architecture
Availability: InStock
Author: cartridge-gg

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

Ready to run

npx skills add https://github.com/cartridge-gg/scoundrel --skill ui-architecture-cartridge-gg

💬 Prompt for ChatGPT / Claude Chat▼

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.