Skill.md検索

「AIっぽい画一的なデザイン」（紫グラデーション、Interフォント、白背景など）を避け、コンテキストに応じた独自性のあるUIを生成できます。 デザイン思考プロセス（目的・トーン・制約・記憶点の明確化）に従うことで、精密かつ大胆なデザイン実行を実現します。 タイポグラフィ・カラー・モーションの詳細ガイドラインに基づき、品質の高いコンポーネント・ページ・アプリケーションUIを構築できます。 フォントペアリング、カラーパレット設計、アニメーションパターンなど、視覚的インパクトを持つデザイン要素を一貫性を保ちながら選定できます。 AIにUIデザインを任せるが「ありがちなデザイン」は避けたい開発者・デザイナー Web・モバイルアプリケーション、ダッシュボード、SaaSプロダクトなどのUI構築に携わる人 デザイン思考を体系的に学び、意図的で個性的なUIを生成したい人 タイポグラフィやカラー理論に基づいた高品質UIを効率的に実装したい人 LLMが学習データの「安全で一般的な選択」に収束しやすい傾向に対抗するガイドラインです。コーディング前に、目的・トーン（ミニマル、ラグジュアリー、レトロフューチャーなど）・制約・記憶点を明確にすることが重要です。タイポグラフィでは、Inter・Roboto・Arialなど定番フォントを避け、JetBrains Mono・Playfair Display・Bricolage Grotesqueなどを推奨。フォントペアリングは高コントラスト（セリフ+ジオメトリックサンセリフなど）を選び、ウェイト・サイズは3倍以上のジャンプを推奨します。カラーは支配色+シャープなアクセント構成で、CSS変数で一貫性を保ちます。モーション・アニメーションは「少数の高インパクト」アプローチを取り、スタッガードフェードインなどパターン化された手法を活用します。

振る舞いベースのテスト設計: 内部実装ではなく、ユーザーが観測できる結果をテストする方法を学べます。 結合テストの効果的な活用: Unit テストと E2E テストの間に位置する結合テストに最も重点を置き、バグを効率よく検出するテスト構成ができます。 Next.js プロジェクト向けの実践的なテストパターン: Promise として扱う params、searchParams、cookies()、headers() など、Next.js の特殊な仕様に対応したテスト方法が分かります。 Vitest v4 の新しい設定・API: Breaking Changes を理解し、maxWorkers、vmMemoryLimit、projects などの v4 固有の設定を正しく使えます。 テスト・トロフィーの実装: Static → Unit → Integration → E2E という層状のテスト戦略を実装し、壊れにくく信頼性の高いテストスイートを構築できます。 Next.js プロジェクトで一貫性のあるテストを書きたい開発者 Vitest v4 へのマイグレーション方法を知りたい人 テスト・トロフィーの考え方を学びたいテスト駆動開発実践者 「テストが壊れやすい」「デザイン変更でテストが落ちる」という悩みを解決したいチーム Vitest v4 テスティングガイドラインは、Next.js プロジェクトにおける「メンテナンスしやすく、信頼性の高いテスト」を実現するためのガイドです。テスティング・トロフィーで結合テスト（Integration Test）に最も比重を置きます。 コア原則は4つ：(1)振る舞いをテスト（内部 state ではなく、ユーザーが見える動作）、(2)ユーザー視点（DOM 構造ではなく、アクセシビリティロールやテキストで要素を探す）、(3)壊れにくさ（デザイン変更に強いテスト）、(4)独立性（テスト間で状態を共有しない）、(5)Tautology 禁止（実装と同じ計算をテストに入れない）。 テスト対象は4種類に分類されます：単体テスト（utils、hooks、Server Actions、Store を node/jsdom で実行）、結合テスト（Client Components、フォーム、ページ要素を jsdom で実行）、Browser テスト（実ブラウザ必須の動作）、E2E テスト（RSC 全体、クリティカルパス を Playwright で実行）。 Vitest v4 の Breaking Changes として、poolOptions.threads.maxThreads → maxWorkers、poolOptions.threads.singleThread → maxWorkers: 1, isolate: false、poolOptions.vmThreads.memoryLimit → vmMemoryLimit、workspace → projects などへの変更があります。coverage.all と coverage.extensions は削除され、include パターンで明示指定します。