Skills DirectoryGitHub から厳選したオープンソースの Skills

design-taste-frontendcommit af8a897SKILL.md · UI・インタラクション

Taste Skill フロントエンド

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

スクリプトには Node 22 以上と、Chrome・Edge・Chromium のいずれかが必要です。

npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
権限
  • read-repo
  • write-files
  • shell
  • network
対応ツール
Claude Code, Codex
GitHub
107.3k
提供元
コミュニティ · Leon Lin
状態
スキャン済み
ライセンス
MIT

基本ルール

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

実行フェーズ

  1. フェーズ 01要件とプロジェクトを読む

    スクロールして読むページかアプリ画面かを判断し、プロジェクトと使える画像の入手先を確認します。

  2. フェーズ 02方向性を抽選

    draw.mjs で調査済みの20方向から3つを引き、選んだものに書体、配色、ヒーロー、セクション構成を割り当てます。

  3. フェーズ 03設計図どおりに構築

    トークンとヒーローから作り、各セクションを設計図どおりに実装し、題材の実写画像と動く要素を入れます。

  4. フェーズ 04検査と目視

    inspect.mjs で実ブラウザ上のルールを検査し、3つの幅のスクリーンショットを評価基準で見直し、FAILがなくなるまで直します。

  5. フェーズ 05動きを加えて報告

    象徴的な動き、セクションの登場、操作フィードバックを加え、実際に実行した検査だけを報告します。

権限の説明(SKILL.md より)

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

SKILL.md のフロントマター(YAML)

SKILL.md のフロントマター(YAML)commit af8a897
---
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.
---

関連スキル

ルールスキャンですべてのリスクを検出できるわけではありません。インストール前にこのスキルの SKILL.md を読み、権限を確認してください。