mcpField
8
8-bit-pixel-art-patterns

8-bit-pixel-art-patterns

github.com/theorcdevデザイン・UI2.1k134 回インストール2 日前に更新
リポジトリ

8-bit-pixel-art-patterns について

8-bit コンポーネント向けのピクセルアート風ボーダーとシャドウのデザインスキルです。絶対配置の div 要素、アイコンボタン、ダークモードのスタイルを扱います。

主な機能

  1. 01ピクセル風ボーダーパターン
  2. 02ピクセル風シャドウパターン
  3. 03アイコンボタンのボーダーパターン
  4. 04ダークモードの配色ガイド
  5. 05条件付きボーダー描画

活用シーン

  1. 01コンポーネントへのレトロな枠線追加
  2. 02ピクセル風コンポーネントシャドウの作成
  3. 03アイコンボタンのスタイリング
  4. 04ダークモード向けピクセル配色の調整

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill 8-bit-pixel-art-patterns

インストール後、Claude Code で/8-bit-pixel-art-patternsを入力して読み込まれたか確認します。

詳細

8ビットのピクセルアートパターン

絶対位置指定の div を使って、本格的なピクセル調の枠線や影を作成します。これらのパターンは、8ビットコンポーネントのレトロな雰囲気に欠かせません。

ピクセル調の枠線パターン

9個の div 要素を使って、ピクセル調の枠線を作成します。

<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>
ピクセル調の影パターン

ピクセル調の影で奥行きを加えます。

{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" />
  </>
)}
アイコンボタンパターン

アイコンボタン向けの、小さく独立したピクセル調の枠線です。

{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" />
  </>
)}
ダークモードでの考慮事項

CSS カスタムプロパティまたはダークモードのバリアントを使用します。

<div className="absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
主な原則
  1. rounded-noneを使用する - 基本コンポーネントからすべての角丸を取り除きます
  2. ピクセルサイズを固定する - レトロな雰囲気を出すため、一貫したピクセル値（1.5、3px）を使用します
  3. 絶対位置指定を使用する - すべての枠線要素は、相対位置指定のコンテナ内で絶対位置に配置します
  4. ダークモードの色を使用する - コントラストを確保するため、ダークバリアントでringまたはforegroundを使用します
  5. 条件付きレンダリング - 適切なバリアント（ghost、link、icon以外）でのみ枠線を表示します
参考コンポーネント

完全な実装については、components/ui/8bit/button.tsxを参照してください。

コメント

Markdown 対応