amicro-design-system

Amicro デザインシステムとコンポーネントガイドライン

このスキルでは、Amicro リポジトリの正式なデザイントークン、コンポーネントアーキテクチャ、スタイリングルール、レイアウト基準を定義します。視覚的な調和と品質を保つため、新機能、マイクロインタラクション、カード、ローダー、ページ遷移はすべて、これらのルールに必ず厳密に従う必要があります。

---

1. コアデザイントークンとカラーパレット

フォントファミリー

• フォント：'Outfit', sans-serif（index.css の @theme { --font-sans: 'Outfit', sans-serif; } で設定されています）。
• 見出し：タイトなトラッキング（tracking-[-0.01em] または tracking-[-0.019em]）を適用した font-medium または font-semibold。

カラーパレット（ダークテーマとライトテーマ）

トークン	ダークモード（.dark）	ライトモード
ページ背景	#121212	#f8f9fa
カードコンテナの背景	#161616	bg-white
カードコンテナの境界線	border-white/[0.07] hover:border-white/[0.18]	border-neutral-200/80 hover:border-neutral-300
カードコンテナのエレベーション	shadow-[0_4px_24px_-4px_rgba(0,0,0,0.5),inset_0_1px_0_0_rgba(255,255,255,0.06)]	shadow-[0_2px_8px_rgba(0,0,0,0.04),0_12px_28px_-6px_rgba(0,0,0,0.05)]
プレビューステージのキャンバス	#0d0d0d + shadow-[inset_0_2px_6px_rgba(0,0,0,0.5)]	#f5f6f8 + shadow-[inset_0_1px_3px_rgba(0,0,0,0.03)]
プライマリテキスト	#ffffff / #f0f0f0	#000000
セカンダリ／ミュートテキスト	text-neutral-400 / text-neutral-500	text-neutral-600 / text-neutral-750
ピル／ボタン（非アクティブ）	bg-[rgba(255,255,255,0.07)]	bg-neutral-200/80
ピル／ボタン（アクティブ）	bg-[#2a2a2a] text-white	bg-white text-black shadow-sm

---

2. 標準カードアーキテクチャ（最小限の展開レイアウト）

カタロググリッド内の各コンポーネントエントリ（ボタン、カードスプレッド、3D カルーセル、ローダー、ページ遷移）には、最小限で最適化されたカードレイアウトアーキテクチャを必ず使用してください。

ギャラリーコンテナ

<div className="mx-auto max-w-[1800px] px-6 pt-5 pb-16 sm:px-10 sm:pt-3 lg:px-16 xl:px-24">
  <div className="space-y-6">
    {/* Island Filter Bar & Secondary Controls */}
    ...
    {/* Responsive Grid */}
    <div className="grid grid-cols-1 gap-x-4 gap-y-8 transition-opacity duration-200 sm:grid-cols-2 lg:gap-x-6 lg:gap-y-10 xl:grid-cols-3 xl:gap-x-8">
      {/* Component Cards */}
    </div>
  </div>
</div>

コンポーネントカードアーキテクチャ

<article className="group/card relative">
  <a 
    href={detailUrl}
    onClick={handleClick}
    className="block focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50 rounded-3xl no-underline text-inherit"
  >
    {/* Expanded Borderless Playground Stage filling completely with black background */}
    <div className="relative aspect-[16/10] w-full overflow-hidden rounded-3xl bg-black flex items-center justify-center p-4">
      {/* Component Live Interactive Preview Component Here */}
    </div>

    {/* Minimal Card Footer: Only Title & Description, Hover Copy Button */}
    <div className="flex items-center justify-between gap-3 pt-3 px-1">
      <div className="min-w-0 flex-1">
        <h3 className="text-base sm:text-[17px] font-semibold tracking-[-0.015em] text-foreground truncate">
          {label}
        </h3>
        <p className="text-xs sm:text-[13px] font-medium text-muted-foreground truncate mt-0.5">
          {description}
        </p>
      </div>

      {/* Action Copy Button - Fades in on card hover */}
      <motion.button
        whileHover={{ scale: 1.08 }}
        whileTap={{ scale: 0.92 }}
        onClick={handleCopy}
        className="size-8 rounded-lg flex items-center justify-center transition-all duration-200 cursor-pointer border border-border/80 bg-card hover:bg-muted text-muted-foreground hover:text-foreground shrink-0 opacity-0 group-hover/card:opacity-100 focus-visible:opacity-100"
        title="Copy component code"
      >
        <IconSwap>
          <IconSwapItem key={isCopied ? "check" : "copy"}>
            {isCopied ? <Check className="w-3.5 h-3.5 text-emerald-500" /> : <Copy className="w-3.5 h-3.5" />}
          </IconSwapItem>
        </IconSwap>
      </motion.button>
    </div>
  </a>
</article>

---

3. カタログナビゲーションとピルのスタイル設定

• デスクトップのフィルターピルバー：
  • コンテナ：hidden sm:flex items-center p-1 rounded-full border shadow-inner transition-colors duration-300 bg-[#181818] border-white/5（ダーク）／bg-neutral-200/50 border-neutral-300/30（ライト）。
  • アクティブなピル：bg-[#2a2a2a] text-white（ダーク）／bg-white text-black shadow-sm（ライト）。
  • 非アクティブなピル：text-[#767676] hover:text-white（ダーク）／text-black opacity-70 hover:opacity-100（ライト）。
• モバイルのドロップダウン：
  • 背景をぼかすモーダルドロップダウン（backdrop-blur-xl bg-[#181818]/95 border-white/5）。

---

4. コンポーネントのマイクロインタラクションとハプティクス

• モーション：motion/react（framer-motion）を使用し、指数関数的に滑らかに表示するために、キュービックベジェのイージング [0.16, 1, 0.3, 1] を使います。
• タイミングの上限（厳守）：1回限りのアニメーションはすべて < 300ms にします。 ホバー、押下、表示、終了、ページ遷移、トースト、メニュー、チャートの描画、コンポーネントのインタラクションが対象です。
  • 時間：ホバー／押下は 0.15–0.2s、表示は 0.25s、終了は ~0.14s（終了は表示より短くします）、絶対上限は 0.28s です。Tailwind：duration-150 / duration-200 / duration-250（duration-300 以上は使用しません）。
  • スプリング：0.29s 以内に収束させます。減衰不足の収束時間は ≈ 8 × mass / damping なので、mass: 1 の場合は damping >= 28 にします（ホバーのデフォルト：{ type: 'spring', stiffness: 400, damping: 28 }）。時間指定のスプリング：{ type: 'spring', duration: 0.25, bounce: 0.1–0.2 }。
  • スタガー：delay: Math.min(index * 0.015, 0.05) として、グリッド全体の表示が上限時間内に完了するようにします。
  • Recharts：animationDuration={280}（デフォルトは 1500ms です）。
  • 複数段階の CSS アニメーション：各段階を ≤ 0.28s にし、シーケンス全体が同期するように、時間に合わせて遅延を調整します。
  • 例外：無限ループ（スピナー、ローダー、repeat: Infinity の環境モーション）。この場合、値は遷移時間ではなくループの周期です。
• イージング：表示／終了には [0.16, 1, 0.3, 1]（ease-out）を使います。終了には [0.25, 0.46, 0.45, 0.94] も使用できます。UI では easeIn を使用しないでください。
• モーションの軽減：アプリは <MotionConfig reducedMotion="user"> でラップされており、CSS アニメーションは index.css の prefers-reduced-motion ブロックによって無効化されます。
• ハプティクス：必ず useWebHaptics フックを呼び出します。
  • コードのコピー：triggerHaptic('success')
  • ボタンのクリック／タブの変更：triggerHaptic('medium') または triggerHaptic('light')
  • エラー：triggerHaptic('error')
• トースト通知：必ず showToast("Copied ... code!") を呼び出します。

---

5. CLI レジストリ統合ルール

新しいコンポーネントまたはトランジションを追加する場合は、必ず次の手順を実行します。

1. コンポーネントのソースファイルを registry/ui/<category>/<name>.tsx に追加します。
2. 依存関係（framer-motion など）を含めて、コンポーネント項目を registry/registry.json に登録します。
3. コピー用の CLI コマンドスニペットを用意します：npx @subhanhq/amicro@latest add <kebab-name>。