ReddRadar
Agent skill
8-bit-pixel-art-patterns
Create pixelated borders, shadows, and effects for 8-bit retro components. Apply when building 8-bit styled UI components that need authentic pixel art aesthetics.
Install this agent skill to your Project
npx add-skill https://github.com/TheOrcDev/8bitcn-ui/tree/main/.claude/skills/8-bit-pixel-art-patterns
SKILL.md
8-bit Pixel Art Patterns
Create authentic pixelated borders and shadows using absolute-positioned divs. These patterns are essential for the retro aesthetic of 8-bit components.
Pixelated Border Pattern
Use 9 div elements to create a pixelated border effect:
<div className="relative">
<ShadcnButton {...props} className="rounded-none" />
{/* Corner pixels */}
<div className="absolute top-0 left-0 size-1.5 bg-foreground" />
<div className="absolute top-0 right-0 size-1.5 bg-foreground" />
<div className="absolute bottom-0 left-0 size-1.5 bg-foreground" />
<div className="absolute bottom-0 right-0 size-1.5 bg-foreground" />
{/* Edge segments */}
<div className="absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground" />
<div className="absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground" />
<div className="absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground" />
<div className="absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground" />
{/* Side borders */}
<div className="absolute top-1.5 -left-1.5 h-[calc(100%-12px)] w-1.5 bg-foreground" />
<div className="absolute top-1.5 -right-1.5 h-[calc(100%-12px)] w-1.5 bg-foreground" />
</div>
Pixelated Shadow Pattern
Add depth with pixelated shadows:
{variant !== "outline" && (
<>
{/* Top shadow */}
<div className="absolute top-0 left-0 w-full h-1.5 bg-foreground/20" />
<div className="absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20" />
{/* Bottom shadow */}
<div className="absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20" />
<div className="absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20" />
</>
)}
Icon Button Pattern
Smaller, self-contained pixel borders for icon buttons:
{size === "icon" && (
<>
{/* Top/bottom full bars */}
<div className="absolute top-0 left-0 w-full h-1.5 bg-foreground" />
<div className="absolute bottom-0 left-0 w-full h-1.5 bg-foreground" />
{/* Side segments */}
<div className="absolute top-1 -left-1 w-1.5 h-1/2 bg-foreground" />
<div className="absolute bottom-1 -left-1 w-1.5 h-1/2 bg-foreground" />
<div className="absolute top-1 -right-1 w-1.5 h-1/2 bg-foreground" />
<div className="absolute bottom-1 -right-1 w-1.5 h-1/2 bg-foreground" />
</>
)}
Dark Mode Considerations
Use CSS custom properties or dark mode variants:
<div className="absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
Key Principles
- Use
rounded-none- Remove all border radius from base components - Fixed pixel sizes - Use consistent pixel values (1.5, 3px) for retro feel
- Absolute positioning - All border elements are absolute within relative container
- Dark mode colors - Use
ringorforegroundwith dark variant for contrast - Conditional rendering - Only show borders for appropriate variants (not ghost, link, icon)
Reference Component
See components/ui/8bit/button.tsx for complete implementation.
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
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.
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.
Didn't find tool you were looking for?