How do I install the 8 Bit Pixel Art Patterns skill?

Run npx skillmds@latest add tomevault-io/8-bit-pixel-art-patterns in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is 8 Bit Pixel Art Patterns safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with 8 Bit Pixel Art Patterns?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is 8 Bit Pixel Art Patterns free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published 8 Bit Pixel Art Patterns?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

8 Bit Pixel Art Patterns by tomevault-io

Name: 8 Bit Pixel Art Patterns
Author: tomevault-io

File contents

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 ring or foreground with 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.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: 8-bit-pixel-art-patternsdescription: 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. Use when this capability is needed.---## 8-bit Pixel Art PatternsCreate authentic pixelated borders and shadows using absolute-positioned divs. These patterns are essential for the retro aesthetic of 8-bit components.### Pixelated Border PatternUse 9 div elements to create a pixelated border effect:```tsx<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 PatternAdd depth with pixelated shadows:```tsx{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 PatternSmaller, self-contained pixel borders for icon buttons:```tsx{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 ConsiderationsUse CSS custom properties or dark mode variants:```tsx<div className="absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring" />```### Key Principles1. **Use `rounded-none`** - Remove all border radius from base components2. **Fixed pixel sizes** - Use consistent pixel values (1.5, 3px) for retro feel3. **Absolute positioning** - All border elements are absolute within relative container4. **Dark mode colors** - Use `ring` or `foreground` with dark variant for contrast5. **Conditional rendering** - Only show borders for appropriate variants (not ghost, link, icon)### Reference ComponentSee `components/ui/8bit/button.tsx` for complete implementation.---> Converted and distributed by [TomeVault](https://tomevault.io/claim/theorcdev) — claim your Tome and manage your conversions.

Frequently asked questions

8 Bit Pixel Art Patterns