component-wrapper-architecture

What problem does it solve?

This Skill prescribes a disciplined pattern for wrapping shadcn/ui components with 8-bit retro styling while preserving compatibility with the original base components and APIs, enabling consistent visual theming without breaking existing code.

Core Features & Use Cases

• Alias-based wrapping: Import the base component and expose a retro-styled alias (e.g., Button as ShadcnButton) to layer visuals without altering the underlying API.
• Variant-driven styling: Define variants via a utility like class-variance-authority to compose pixel-art themed options and ensure predictable, scalable styling.
• Safe re-export strategy: Export wrappers alongside original sub-components to maintain a stable public surface while enabling retro customizations.
• Wrapper patterns across components: Apply the outer-wrapper approach to common components (Button, Card, Dialog) to achieve a unified 8-bit look while preserving behavior.
• Guiding principles: Use an empty base variant, export a dedicated props interface, and prefer a consistent retro class path for styling.

Quick Start

• Alias imports to point to the base components as Shadcn equivalents, e.g. import { Button as ShadcnButton } from "@/components/ui/button";
• Define a minimal variant set using a CVA-style pattern, e.g. export const buttonVariants = cva("", { variants: { font: { normal: "", retro: "retro" }, variant: { default: "bg-foreground" } }, defaultVariants: { variant: "default", size: "default" } });
• Export a props interface that extends the base component props and VariantProps<typeof buttonVariants>, including optional asChild and a typed ref.
• Implement the wrapper by applying the retro styling while forwarding all props to the base component.