今週の主役はReact向けMCP統合を導入したStorybook 10.3で、AIエージェントが実際のコンポーネント・ストーリー・ドキュメント・テストに直接構造的にアクセスし、幻覚なしでプロダクションレベルのUIを構築できるようにしました。ツールセットはDev（UI状態の可視化）・Docs（コンポーネント再利用）・Test（ア… 開発ですぐ活用できるよう整理しました。
--motion-enter・--motion-exit・--motion-hover・--motion-spring・--motion-feedback というセマンティックインテント層を重ねることから始まります。セマンティック層は入場/退場の非対称ルール（退場は入場の約60%の時間、ease-in vs. ease-out）をコード化し、開発者がミリ秒を手動調整する代わりにインテントトークンを使えるようにします。Framer Motion の AnimatePresence の使いどころ（DOM アンマウント時のみ）、スプリングイージングの正のフィードバック意味論、ルートレベルの prefers-reduced-motion 処理についても解説しています。
font-family・font-size・font-weight・letter-spacing を管理します。ハニーイエローや明るいティールのような扱いにくい色への対処法、colors/text・colors/surface・colors/border グループの調整手順、WCAG 2.2 AA のコントラスト基準（テキスト 4.5:1、インタラクティブ要素 3:1）、kebab-case/camelCase 命名規則も詳しく解説されています。
Intl API は Moment.js（295 kB）・date-fns（77 kB）・Luxon（82 kB）・numeral.js をバンドルコストゼロで代替できます。Polypane の Kilian Valkhof が8つのフォーマッターを詳解します。Intl.DateTimeFormat（dateStyle/timeStyle オプションと formatToParts）、Intl.RelativeTimeFormat（「昨日」のような自然な相対時間）、Intl.DurationFormat（ナノ秒までのデジタル・長文形式）、Intl.NumberFormat（数値・通貨・単位・コンパクト表記）、Intl.ListFormat（conjunction/disjunction/unit の3種）、Intl.PluralRules（アラビア語の6形式を含む言語別複数形）、Intl.Segmenter（日本語や絵文字合字を正確に処理するグラフェーム・単語・文節分割）、Intl.Collator（数値・感度・電話帳ソートオプション付きロケール対応ソート）。すべてのフォーマッターは一度生成して再利用する共通パターンを持ちます。
skill や vibe-rules パッケージとして配布すること、AI エージェントにレンダリング済み HTML ではなく Markdown でドキュメントを返すこと（Sentry の手法）、面接で「ほどよく不完全な」AI モデルを使って システム設計力のある候補者を見極める手法も紹介されています。skill や vibe-rules パッケージとして配布すること、AI エージェントにレンダリング済み HTML ではなく Markdown でドキュメントを返すこと（Sentry の手法）、面接で「ほどよく不完全な」AI モデルを使って システム設計力のある候補者を見極める手法も紹介されています。--motion-enter・--motion-exit・--motion-hover・--motion-spring・--motion-feedback というセマンティックインテント層を重ねることから始まります。セマンティック層は入場/退場の非対称ルール（退場は入場の約60%の時間、ease-in vs. ease-out）をコード化し、開発者がミリ秒を手動調整する代わりにインテントトークンを使えるようにします。Framer Motion の AnimatePresence の使いどころ（DOM アンマウント時のみ）、スプリングイージングの正のフィードバック意味論、ルートレベルの prefers-reduced-motion 処理についても解説しています。font-family・font-size・font-weight・letter-spacing を管理します。ハニーイエローや明るいティールのような扱いにくい色への対処法、colors/text・colors/surface・colors/border グループの調整手順、WCAG 2.2 AA のコントラスト基準（テキスト 4.5:1、インタラクティブ要素 3:1）、kebab-case/camelCase 命名規則も詳しく解説されています。Intl API は Moment.js（295 kB）・date-fns（77 kB）・Luxon（82 kB）・numeral.js をバンドルコストゼロで代替できます。Polypane の Kilian Valkhof が8つのフォーマッターを詳解します。Intl.DateTimeFormat（dateStyle/timeStyle オプションと formatToParts）、Intl.RelativeTimeFormat（「昨日」のような自然な相対時間）、Intl.DurationFormat（ナノ秒までのデジタル・長文形式）、Intl.NumberFormat（数値・通貨・単位・コンパクト表記）、Intl.ListFormat（conjunction/disjunction/unit の3種）、Intl.PluralRules（アラビア語の6形式を含む言語別複数形）、Intl.Segmenter（日本語や絵文字合字を正確に処理するグラフェーム・単語・文節分割）、Intl.Collator（数値・感度・電話帳ソートオプション付きロケール対応ソート）。すべてのフォーマッターは一度生成して再利用する共通パターンを持ちます。今週の主役はReact向けMCP統合を導入したStorybook 10.3で、AIエージェントが実際のコンポーネント・ストーリー・ドキュメント・テストに直接構造的にアクセスし、幻覚なしでプロダクションレベルのUIを構築できるようにしました。ツールセットはDev（UI状態の可視化）・Docs（コンポーネント再利用）・Test（アクセシビリティチェックによる自己修正）の3レイヤー構成です。今回のリリースでは、より型安全なCSF FactoriesフォーマットがReactを超えてVue・Angular・Web Componentsに拡張され、ARIAセマンティクス・キーボードナビゲーション・ハイコントラスト対応を含むStorybook自身のUIの大規模なアクセシビリティ刷新も行われました。エコシステムにはVite 8・Next.js 16.2・Angular 21が追加されています。
NetguruはモバイルおよびレスポンシブWeb向けの無料Figma Communityデザインシステム「Silk」の詳細ドキュメントを公開しました。Silkのトークン設計は12段階のプリミティブカラーランプの上にAccent・Neutral・Semanticエイリアスを重ねており、プリミティブを1つ変更するだけで全コンポーネントに自動反映されます。テキスト4.5:1・インタラクティブ要素3:1というWCAG 2.2 AAコントラスト基準を目標とし、すべてのトークンコレクションにkebab-case/camelCaseの命名規則を採用しています。別途、モーショントークンに関する実践的な記事では、5段階のdurationスケール（50ms–800ms）と--motion-enter・--motion-exitのようなセマンティックインテントトークンでチーム間のアニメーション差異を解消する方法が紹介されました。
デザインシステムの議論は、2つの広範なUX視点によってさらに深まりました。Nielsen Norman GroupはAIエージェントを設計する製品の実際のユーザーと位置づけ直し、セマンティックHTML・明確なラベリング・一貫したナビゲーションがアクセシビリティツリーのパース経由で明確なビジネス根拠を持つと主張しました。Wes BosとScott TolinskiのSyntaxポッドキャストでは、AIツールがCSSで一貫して低品質になる理由を分析し、モデルがグローバルルールよりローカルパッチを好み、ネイティブCSSネスティングのような機能に遅れ、Codex CLIのグラデーション強制のような隠れたシステムプロンプトがユーザーの意図を上書きすることが原因と結論付けました。