# Taste Skill フロントエンド (design-taste-frontend)

> 厳選247サイトの研究に基づくWebのアートディレクション。方向性を抽選し、実ブラウザで検査して画面を見ながら直します。

- カテゴリ: [UI・インタラクション](https://www.myskills.tools/ja/categories/ui-interaction/)
- 提供元: コミュニティ · Leon Lin
- リポジトリ: https://github.com/Leonxlnx/taste-skill/tree/main/skills/taste-skill (commit af8a897)
- SKILL.md: https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md
- インストールコマンド: `npx skills add Leonxlnx/taste-skill --skill design-taste-frontend`
- ライセンス: MIT
- 対応ツール: Claude Code, Codex
- 権限: read-repo ✓, write-files ✓, shell ✓, network ✓
- 状態: スキャン済み
- ルールスキャンですべてのリスクを検出できるわけではありません。インストール前にこのスキルの SKILL.md を読み、権限を確認してください。
- ⚠ スクリプトには Node 22 以上と、Chrome・Edge・Chromium のいずれかが必要です。

## 基本ルール

方向性はライブラリから抽選し、アイデアは題材そのものから得て、顧客・レビュー・数値は捏造しません。

## 実行フェーズ

1. **要件とプロジェクトを読む** — スクロールして読むページかアプリ画面かを判断し、プロジェクトと使える画像の入手先を確認します。
2. **方向性を抽選** — draw.mjs で調査済みの20方向から3つを引き、選んだものに書体、配色、ヒーロー、セクション構成を割り当てます。
3. **設計図どおりに構築** — トークンとヒーローから作り、各セクションを設計図どおりに実装し、題材の実写画像と動く要素を入れます。
4. **検査と目視** — inspect.mjs で実ブラウザ上のルールを検査し、3つの幅のスクリーンショットを評価基準で見直し、FAILがなくなるまで直します。
5. **動きを加えて報告** — 象徴的な動き、セクションの登場、操作フィードバックを加え、実際に実行した検査だけを報告します。

## 権限の説明（SKILL.md より）

| 機能 | 必要か | 説明 |
|---|---|---|
| ファイル書き込み | 必要 | プロジェクトのページコードを編集し、作業ファイルはプロジェクト直下の .taste-skill/ に書き出します。 |
| コマンド実行 | 一部で必要 | スキル付属のNodeスクリプト（draw、inspect、assets など）を実行し、ローカルのChrome/Edge/Chromiumで撮影します。依存関係はインストールしません。 |
| 外部通信 | 一部で必要 | ネットワークを使うのは公開画像素材を取得する assets.mjs だけで、APIキーは使いません。 |

## SKILL.md のフロントマター（YAML）

```yaml
---
name: design-taste-frontend
description: >-
  tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of
  247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals researched directions
  (idea, composition, type, palette, photographs, section blueprints) from a library, enforces a strict
  no-slop house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Use
  this whenever you build, design, redesign, restyle, polish or review a landing page, marketing site,
  portfolio, product page, one-pager, hero or any public-facing web page, in any stack (HTML/CSS, React,
  Next.js, Vue, Svelte, Astro, Tailwind) — also when the user says a page looks generic, templated,
  "AI-made", sloppy, or asks to make it look designed, premium, award-level or less like every other
  site. Also for app screens: dashboards, admin and analytics views, settings, inboxes and other screens
  people work in, with their own run and rules.
---
```

ホーム: https://www.myskills.tools/ja/ · URL: https://www.myskills.tools/ja/skills/design-taste-frontend/