ui-ux-pro-max

// NG: Tailwind デフォルトをそのまま使用
<p className="text-slate-400">...</p>
<p className="text-slate-500">...</p>
 
// OK: プロジェクトトークンを使用
<p className="text-muted">...</p>
<p className="text-subtle">...</p>

// NG: 同系色でコントラスト不足
<span className="bg-indigo-600/20 text-indigo-400">Badge</span>
<span className="bg-amber-500/20 text-amber-400">開発中</span>
 
// OK: 十分なコントラストを確保
<span className="bg-indigo-600/30 text-indigo-300">Badge</span>
<span className="bg-amber-600/30 text-amber-200">開発中</span>

// NG: 薄すぎてコントラスト不足
<button className="text-white/50" disabled>...</button>
 
// OK: 無効でも読める濃さ
<button className="text-white/70" disabled>...</button>

// NG: Tailwind直接指定（言語による調整なし）
<h1 className="text-5xl md:text-8xl font-bold">...</h1>
 
// OK: トークン使用（自動で言語対応）
<h1 className="text-hero text-white">...</h1>

// NG: 冗長なブレークポイント指定
<h1 className="text-hero sm:text-hero md:text-hero">...</h1>
 
// OK: トークンのみ
<h1 className="text-hero">...</h1>

// NG: Tailwind直接指定
<button className="rounded-lg">...</button>
<div className="rounded-xl">...</div>
 
// OK: トークン使用
<button className="rounded-[var(--radius-md)]">...</button>
<div className="rounded-[var(--radius-lg)]">...</div>

// NG: Tailwind色を直接使用
<p className="text-slate-400">...</p>
<div className="bg-gray-900">...</div>
 
// OK: プロジェクトトークン使用
<p className="text-muted">...</p>
<div className="bg-mued-bg">...</div>

# 角丸のTailwind直接指定を検索
grep -r "rounded-sm\|rounded-md\|rounded-lg\|rounded-xl\|rounded-2xl" components/
 
# 色のTailwind直接指定を検索
grep -r "bg-slate-\|bg-gray-\|text-slate-\|text-gray-" components/

<button className="bg-white text-black px-8 py-4 text-lg font-medium rounded-[var(--radius-md)] hover:bg-white/90 transition-colors cursor-pointer">
  Download Now
</button>

<button className="border-2 border-white text-white px-8 py-4 text-lg font-medium rounded-[var(--radius-md)] hover:bg-white/10 transition-colors cursor-pointer">
  Learn More
</button>

// MUEDear用: amber
<button className="border-2 border-amber-500 text-amber-400 hover:bg-amber-500 hover:text-white ...">
  Download App
</button>

<button className="bg-white/5 text-white/70 cursor-not-allowed" disabled>
  Disabled
</button>

// プレミアム: 単色のみ
<section className="bg-black">...</section>
<section className="bg-[#0f0f0f]">...</section>
<section className="bg-white">...</section>

<div className="bg-[#0f0f0f] rounded-[var(--radius-lg)] overflow-hidden">
  {/* 画像: カードの70-85% */}
  <div className="aspect-video">
    <Image src="..." alt="..." fill className="object-cover" />
  </div>
  {/* テキスト: 最小限 */}
  <div className="p-6">
    <h3 className="text-white text-lg font-medium">製品名</h3>
    <p className="text-white/60 text-sm">一行の説明</p>
  </div>
</div>

<div className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-[var(--radius-lg)] p-6">
  <h3 className="text-white font-semibold">Title</h3>
  <p className="text-white/80">Description</p>
</div>

import { Music, Brain, Sparkles, Check, X } from 'lucide-react';

/* Mobile first */
/* sm: 640px */
/* md: 768px */
/* lg: 1024px */
/* xl: 1280px */
/* 2xl: 1536px */

# ローカル確認
npm run dev
lighthouse http://localhost:3000 --only-categories=accessibility --view
 
# 詳細な失敗項目の確認
lighthouse http://localhost:3000 --only-categories=accessibility --output=json | jq '.audits["color-contrast"]'