frontend-design

概要

frontend-designとは？

frontend-designスキルは、視覚的に際立つ本格的なフロントエンドインターフェースを作成するための専門的なツールキットです。一般的なコードジェネレーターとは異なり、このスキルはクリエイティブな方向性、美学、タイポグラフィ、モーション、レイアウト、インターフェースの仕上げに重点を置いています。典型的なAI出力のように見えない、意図的で際立ったウェブコンポーネント、ページ、アプリケーションの提供を支援します。

誰がfrontend-designを使うべき？

このスキルは、ウェブプロジェクトの視覚的およびインタラクティブな品質を高めたいフロントエンド開発者、UI/UXデザイナー、プロダクトチームに最適です。以下の場合にfrontend-designを使用してください：

• ウェブアプリ、ランディングページ、デジタルアーティファクトのための高品質で創造的なUIデザインが必要なとき
• カラー、タイポグラフィ、モーション、レスポンシブレイアウトのガイダンスが欲しいとき
• 一般的で無個性なAI生成インターフェースを避けたいとき
• アクセシビリティとデザインのベストプラクティスを確実に守りたいとき

どんな問題を解決する？

• デザイン開始前に実際のプロジェクトやブランドの文脈を必須とし、「AIの雑さ」を防止
• カラー、間隔、タイポグラフィ、インタラクションの実用的なデザインシステムを提供
• アクセシビリティとレスポンシブデザインを最初から組み込み
• 実用的で本番対応のコードとデザインパターンを提供

使い方

インストール手順

1. プロジェクトにスキルを追加：
   以下を実行：

   npx skills add https://github.com/pbakaus/impeccable --skill frontend-design
   

2. コアドキュメントを確認：
   • SKILL.mdから始めて概要とコンテキスト収集の手順を理解。
   • README.md、AGENTS.md、metadata.jsonもセットアップや使用上の注意を確認。
3. デザインリファレンスを探る：
   reference/フォルダには以下の実践的ガイドがあります：
   • カラーとコントラスト（reference/color-and-contrast.md）
   • インタラクションデザイン（reference/interaction-design.md）
   • モーションデザイン（reference/motion-design.md）
   • レスポンシブデザイン（reference/responsive-design.md）
   • 空間デザイン（reference/spatial-design.md）
   • タイポグラフィ（reference/typography.md）
   • UXライティング（reference/ux-writing.md）
4. ワークフローに適応：
   デザイン原則とコード例を自身のリポジトリやツールチェーンに統合してください。このスキルはそのままコピーするのではなく、適応して使うことを想定しています。

重要なワークフローポイント

• デザイン作業開始前に必ずプロジェクトの文脈（対象ユーザー、ユースケース、ブランドトーン）を収集する。
• 一貫性がありアクセシブルなUIのために、提供されたカラー、間隔、タイポグラフィシステムを使用する。
• モーションとインタラクションのガイドを参照し、洗練され直感的なインターフェースを実現する。
• reference/内のファイルで利用可能なCSSやデザインパターンを活用する。

よくある質問

いつfrontend-designスキルを使うべき？

ウェブコンポーネント、ページ、アプリケーションの視覚的およびインタラクティブな品質を向上させたいとき、特にデザインの文脈やブランドの個性が重要な場合に使用してください。

最初に見るべきファイルは？

• 概要とコンテキスト要件のためのSKILL.md
• カラーシステムのガイダンスのためのreference/color-and-contrast.md
• 状態管理とアクセシビリティのベストプラクティスのためのreference/interaction-design.md
• アニメーションとタイミングのためのreference/motion-design.md
• 適応レイアウトのためのreference/responsive-design.md
• 間隔とグリッドのためのreference/spatial-design.md

frontend-designはコードを生成しますか、それともガイドラインだけですか？

両方提供します。主にCSSの実用的で本番対応のコードスニペットと、それを効果的に実装するための詳細なデザインガイドラインを含みます。

すべてのプロジェクトに適していますか？

このスキルはデザインの質、ブランドの差別化、アクセシビリティが優先されるプロジェクトに最適です。機能重視や社内ツールなど美学が重要でない場合は、よりシンプルなアプローチが適しているかもしれません。

詳細はどこで確認できますか？

ファイルタブで全ファイルツリーを閲覧し、すべてのネストされたリファレンスやヘルパースクリプトを含む詳細なガイダンスや例を確認してください。