ReddRadar
Agent skill
retro-css-architecture
Organize 8-bit CSS with custom properties, pixel fonts, and responsive pixel art. Apply when creating or modifying retro-styled components and their CSS.
Install this agent skill to your Project
npx add-skill https://github.com/TheOrcDev/8bitcn-ui/tree/main/.claude/skills/retro-css-architecture
SKILL.md
Retro CSS Architecture
Organize CSS for 8-bit components using custom properties, pixel fonts, and responsive patterns.
Required Import
All 8-bit components must import the retro stylesheet:
import "@/components/ui/8bit/styles/retro.css";
Pixel Font
Use "Press Start 2P" for authentic 8-bit typography:
.retro {
font-family: "Press Start 2P", system-ui, -apple-system, sans-serif;
line-height: 1.5;
letter-spacing: 0.5px;
}
Apply via class or font variant:
<Button className="retro">START GAME</Button>
// or via font prop
<Button font="retro">START GAME</Button>
Pixelated Images
For sharp pixel art images:
.pixelated {
image-rendering: pixelated;
image-rendering: crisp-edges;
}
<Image src="/pixel-art.png" className="pixelated" />
Dark Mode Colors
Use semantic color names with dark mode variants:
<div className="border-foreground dark:border-ring" />
<div className="bg-foreground dark:bg-ring" />
Responsive Pixel Sizes
Use consistent pixel values for retro feel:
{/* Standard pixel sizes */}
<div className="size-1.5" /> {/* Corner pixels */}
<div className="h-1.5 w-3" /> {/* Shadow segments */}
<div className="border-y-6" /> {/* Card borders */}
{/* Mobile considerations */}
<div className="h-[5px] md:h-1.5" />
CSS Organization
Keep retro-specific styles in components/ui/8bit/styles/retro.css:
/* Import pixel font */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
/* Font class */
.retro {
font-family: "Press Start 2P", system-ui, -apple-system, sans-serif;
line-height: 1.5;
letter-spacing: 0.5px;
}
/* Image handling */
.pixelated {
image-rendering: pixelated;
image-rendering: crisp-edges;
}
Component-Level CSS
Use Tailwind utilities for component-specific styling:
<div
className={cn(
"relative border-y-6 border-foreground dark:border-ring",
"rounded-none active:translate-y-1 transition-transform",
className
)}
/>
Key Principles
- Import retro.css - Required for all 8-bit components
- Pixel font - Use "Press Start 2P" for authentic look
- Pixelated images - Apply
image-rendering: pixelatedto sprites - Consistent sizing - Use fixed pixel values (1.5, 3, 6px)
- Dark mode - Use semantic colors with
dark:prefix - rounded-none - Remove all border radius for retro feel
- Tailwind first - Use utilities before custom CSS
Reference Files
components/ui/8bit/styles/retro.css- Global retro stylescomponents/ui/8bit/button.tsx- CSS class usage example
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
TheOrcDev/8bitcn-ui
component-wrapper-architecture
Best practices for wrapping shadcn/ui components. Apply when creating 8-bit styled variants of existing shadcn/ui components.
TheOrcDev/8bitcn-ui
registry-component-patterns
Register components in registry.json for shadcn/ui add command. Apply when adding new 8-bit components to the component library.
TheOrcDev/8bitcn-ui
gaming-ui-state-management
Patterns for game-like interfaces - health bars, XP bars, mana bars. Apply when building RPG/retro gaming UI components with state-driven visuals.
TheOrcDev/8bitcn-ui
bundle-barrel-imports
Import directly from source files instead of barrel files. Apply when using libraries like lucide-react, @mui/material, or @radix-ui/react-* to reduce bundle size and improve dev boot time.
TheOrcDev/8bitcn-ui
rendering-hoist-jsx
Extract static JSX elements outside components to avoid re-creation on every render. Apply when rendering static elements repeatedly or in lists.
TheOrcDev/8bitcn-ui
rerender-functional-setstate
Use functional setState updates to prevent stale closures and unnecessary callback recreations. Apply when updating state based on the current state value in React components.
Didn't find tool you were looking for?