Leonxlnx/taste-skill

Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages

TL;DR

Taste Skill は、LLMを活用したコーディングアシスタント（ChatGPT、Claude、Codex、Cursorなど）に対し、よりクリーンで洗練されたフロントエンドUIコードやデザインアセットを生成する方法を指示する、小型でポータブルな命令ファイルである Agent Skills のコレクションです。単一の npx skills add … コマンドでスキルをインストールすると、エージェントは埋め込まれたルール（レイアウトのバリエーション、モーションの強度、視覚密度、ずさんなコードを防ぐガイドライン）に従ってHTML/CSS/JSやデザインモックアップを生成します。

機能

デザイン重視のコード生成 – 概要を読み取り、デザイン言語を選択し、完全なフロントエンド実装（GSAPベースのアニメーションスケルトン、厳格なスペーシング、タイポグラフィなど）を出力します。
調整可能な「ダイヤル」 – 3つの数値パラメータ（DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY）により、出力の実験性や密度を制御できます。
専門的なバリエーション – より厳格なGPT/Codex出力のための gpt‑taste、プレミアムなUI外観のための soft‑skill、高コントラストなインダストリアルスタイルのための brutalist‑skill、既存のコードベースを監査・修正するための redesign‑skill などがあります。
画像生成スキル – 画像対応エージェントに渡すことができるリファレンスボード（Web、モバイル、ブランドキット）を作成し、そのフレームをコーディングスキル（image‑to‑code）に渡すことができます。
ポータブルな SKILL.md ファイル – 各スキルは skills/ 下の独自のフォルダに存在し、Vercel‑Labs の npx skills add CLI を介してインストールするか、単にプロジェクトやチャットにコピーするだけで使用できます。

対象ユーザー

AIコーディングアシスタントを使用する開発者 – すべてのCSSルールを手作業で作成することなく、一貫した高品質のUIを求める方。
デザインからコードへのパイプライン – まずモックアップ（ChatGPT Images、DALL‑Eなどを使用）を生成し、それを自動的に本番環境対応のコードに変換したい方。
React、Vue、Svelte、またはその他のフロントエンドフレームワーク間で再現可能なスタイルガイドを必要とするチーム – 基盤となるライブラリに関係なく、スキルがレイアウトとモーションのルールを強制します。

はじめ方

デフォルトスキルのインストール（v2、実験的）：
```
npx skills add https://github.com/Leonxlnx/taste-skill
```

LLMへのプロンプトでスキル名を参照します。例：

Use skill "design‑taste‑frontend" to build a landing page for a fintech startup. Keep motion intensity low and visual density high.

元の動作のみが必要な場合は、代わりに design‑taste‑frontend‑v1 をインストールしてください。
画像先行のワークフローの場合は、imagegen-frontend-web（または mobile/brandkit）を追加し、image‑to‑code を実行します。
より実験的なレイアウトが必要な場合は、SKILL.md の先頭に DESIGN_VARIANCE: 7 のような行を追加して3つのダイヤルを調整してください。

リポジトリの内容

skills/ フォルダ – 各サブフォルダには、プロンプトテンプレート、ダイヤルのデフォルト値、およびヘルパースクリプトを定義する SKILL.md が含まれています。
research/ – スキルの根拠となる、ずさんなデザインを防ぐ原則に関する背景メモ。
CHANGELOG.md – v1からv2への書き換えの詳細と今後のロードマップ。
MITライセンス – 自由に使用および変更可能。

制限事項と未解決の課題

スキルは フレームワークに依存しないマークアップ を生成します。特定のコンポーネントライブラリに合わせて出力を調整する必要がある場合があります。
画像生成スキルはリファレンス画像のみを作成します。実際にビジュアルをレンダリングするには、別の画像対応モデル（ChatGPT Images、Kimiなど）に依存します。
デフォルトの design‑taste‑frontend は 実験的 (v2) とマークされています。安定性やエッジケースの処理は現在も進化中です。

クイックリンク

ウェブサイト: https://tasteskill.dev
インストールガイド: 上記の #installing セクション
スキル一覧: #skills
ライセンス: MIT