Skill Gallery
← スキル一覧に戻る
TheOrcDev

8-bit-pixel-art-patterns

by TheOrcDev

8-bit-pixel-art-patternsは、コンテンツ作成と管理を支援するスキルです。高品質なコンテンツ生成と最適化により、SEO対応と利用者満足度の向上を実現します。

⭐ 1,530🍴 94📅 2026年1月22日
8-bitcomponentsretroshadcnuicsspixel-artcomponent-library
GitHubで見るManusで実行

ユースケース

📝

ドキュメント生成

コードからドキュメントを自動生成。

✍️

コンテンツ作成支援

ブログ記事やマーケティングコンテンツの作成を支援。

🎨

UIコンポーネント生成

デザインからUIコンポーネントを生成。

SKILL.md

name: 8-bit-pixel-art-patterns description: 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.

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

  1. Use rounded-none - Remove all border radius from base components
  2. Fixed pixel sizes - Use consistent pixel values (1.5, 3px) for retro feel
  3. Absolute positioning - All border elements are absolute within relative container
  4. Dark mode colors - Use ring or foreground with dark variant for contrast
  5. Conditional rendering - Only show borders for appropriate variants (not ghost, link, icon)

Reference Component

See components/ui/8bit/button.tsx for complete implementation.

スコア

総合スコア

95/100

リポジトリの品質指標に基づく評価

✓SKILL.md

SKILL.mdファイルが含まれている

+20
✓LICENSE

ライセンスが設定されている

+10
✓説明文

100文字以上の説明がある

+10
✓人気

GitHub Stars 1000以上

+15
✓最近の活動

1ヶ月以内に更新

+10
✓フォーク

10回以上フォークされている

+5
✓Issue管理

オープンIssueが50未満

+5
✓言語

プログラミング言語が設定されている

+5
✓タグ

1つ以上のタグが設定されている

+5

レビュー

💬

レビュー機能は近日公開予定です