wehub-resource-sync
d48cda4081
CI / Test (ubuntu-latest, Node 18.x, bun) (push) Failing after 15m1s
CI / Test (ubuntu-latest, Node 18.x, npm) (push) Failing after 15m1s
CI / Test (ubuntu-latest, Node 18.x, pnpm) (push) Failing after 15m1s
CI / Test (ubuntu-latest, Node 18.x, yarn) (push) Failing after 15m1s
CI / Test (ubuntu-latest, Node 20.x, bun) (push) Failing after 17m13s
CI / Test (ubuntu-latest, Node 20.x, npm) (push) Failing after 18m42s
CI / Test (ubuntu-latest, Node 20.x, pnpm) (push) Failing after 15m0s
CI / Test (ubuntu-latest, Node 20.x, yarn) (push) Failing after 49m44s
CI / Test (ubuntu-latest, Node 22.x, bun) (push) Failing after 51m55s
CI / Test (ubuntu-latest, Node 22.x, pnpm) (push) Failing after 21m57s
CI / Test (ubuntu-latest, Node 22.x, npm) (push) Failing after 37m39s
CI / Test (ubuntu-latest, Node 22.x, yarn) (push) Failing after 34m7s
CI / Validate Components (push) Failing after 37m15s
CI / Python Tests (push) Failing after 10m1s
CI / Security Scan (push) Failing after 10m1s
CI / Lint (push) Failing after 17m12s
CI / Coverage (push) Failing after 20m19s
CI / Test (macos-latest, Node 18.x, bun) (push) Has been cancelled
CI / Test (macos-latest, Node 18.x, npm) (push) Has been cancelled
CI / Test (macos-latest, Node 18.x, pnpm) (push) Has been cancelled
CI / Test (macos-latest, Node 18.x, yarn) (push) Has been cancelled
CI / Test (windows-latest, Node 18.x, npm) (push) Has been cancelled
CI / Test (windows-latest, Node 18.x, pnpm) (push) Has been cancelled
CI / Test (windows-latest, Node 18.x, yarn) (push) Has been cancelled
CI / Test (macos-latest, Node 20.x, bun) (push) Has been cancelled
CI / Test (macos-latest, Node 20.x, npm) (push) Has been cancelled
CI / Test (macos-latest, Node 20.x, pnpm) (push) Has been cancelled
CI / Test (macos-latest, Node 20.x, yarn) (push) Has been cancelled
CI / Test (windows-latest, Node 20.x, npm) (push) Has been cancelled
CI / Test (windows-latest, Node 20.x, pnpm) (push) Has been cancelled
CI / Test (windows-latest, Node 20.x, yarn) (push) Has been cancelled
CI / Test (macos-latest, Node 22.x, bun) (push) Has been cancelled
CI / Test (macos-latest, Node 22.x, npm) (push) Has been cancelled
CI / Test (macos-latest, Node 22.x, pnpm) (push) Has been cancelled
CI / Test (macos-latest, Node 22.x, yarn) (push) Has been cancelled
CI / Test (windows-latest, Node 22.x, npm) (push) Has been cancelled
CI / Test (windows-latest, Node 22.x, pnpm) (push) Has been cancelled
CI / Test (windows-latest, Node 22.x, yarn) (push) Has been cancelled
3.6 KiB
3.6 KiB
このファイルは common/patterns.md を Web 固有のデザイン品質ガイダンスで拡張します。
Web デザイン品質基準
アンチテンプレートポリシー
汎用的なテンプレートに見える UI をリリースしない。フロントエンドの出力は意図的で、主張があり、プロダクトに固有であるべきである。
禁止パターン
- 均一なスペーシングで階層のないデフォルトのカードグリッド
- 中央揃えの見出し、グラデーションブロブ、汎用 CTA の定番ヒーローセクション
- 完成したデザインとして出す未変更のライブラリデフォルト
- レイヤリング、深度、モーションのないフラットレイアウト
- すべてのコンポーネントで均一な角丸、スペーシング、シャドウ
- 1つのアクセントカラーだけの安全なグレー・オン・ホワイトのスタイリング
- サイドバー + カード + チャートで視点のないダッシュボード量産レイアウト
- 意図的な理由なしに使用されるデフォルトフォントスタック
必要な品質
すべての意味のあるフロントエンドサーフェスは、以下のうち少なくとも4つを示すべきである:
- スケールコントラストによる明確な階層
- 均一なパディングではなく、スペーシングの意図的なリズム
- オーバーラップ、シャドウ、サーフェス、またはモーションによる深度やレイヤリング
- 個性と実際のペアリング戦略を持つタイポグラフィ
- 装飾的ではなく、セマンティックに使用される色
- デザインされたと感じるホバー、フォーカス、アクティブ状態
- 必要に応じたグリッドを打ち破るエディトリアルまたはベントーレイアウト
- ビジュアルの方向性に合ったテクスチャ、グレイン、または雰囲気
- 注意をそらすのではなく、フローを明確にするモーション
- 後付けではなく、デザインシステムの一部として扱われるデータビジュアライゼーション
フロントエンドコードを書く前に
- 具体的なスタイルの方向性を選ぶ。「クリーンミニマル」のような曖昧なデフォルトを避ける。
- パレットを意図的に定義する。
- タイポグラフィを意図的に選択する。
- 少なくとも少数の実際のリファレンスを集める。
- 関連する ECC のデザイン/フロントエンドスキルを使用する。
価値あるスタイルの方向性
- エディトリアル / マガジン
- ネオブルータリズム
- 実際の深度を持つグラスモーフィズム
- 規律あるコントラストのダークラグジュアリーまたはライトラグジュアリー
- ベントーレイアウト
- スクローリーテリング
- 3D 統合
- スイス / インターナショナル
- レトロフューチャリズム
自動的にダークモードをデフォルトにしない。プロダクトが実際に求めるビジュアルの方向性を選択する。
コンポーネントチェックリスト
- デフォルトの Tailwind や shadcn テンプレートに見えないか？
- 意図的なホバー/フォーカス/アクティブ状態があるか？
- 均一な強調ではなく階層を使用しているか？
- 実際のプロダクトのスクリーンショットで信憑性があるか？
- 両テーマをサポートする場合、ライトとダークの両方が意図的に感じられるか？