#4 ・ ・ スキル5件
★13万の「UI UX Pro Max」で美容室のLPを頼んだら、自分で禁止している紫が出てきた
0.3秒で配色も書体もチェックリストも出てくる。ただ、美容室に出してきたボタンの色は、同じデータが「避けろ」と書いている紫だった。
Agent Skills
AIに入れる便利なSkills公開されているスキルを、中身まで読んでから紹介します
Claude Code や Codex に「Skills」を入れておくと、決まった仕事の手順や判断のしかたを、必要なときだけ読み込んでくれます。 便利そうなスキルは毎週のように出てきますが、紹介動画の説明と中身が違うことも多いんですよね。ここではリポジトリのSKILL.mdを実際に読んだうえで、何をしてくれるのか・どう入れるのかを書いていきます。
Skillsって何?
中身は SKILL.md という説明書きが入ったフォルダです。冒頭に「いつ使うか」を書いておくと、AIが関係のある仕事のときだけ本文を読みます。 Claude Code なら ~/.claude/skills/ に置けば使えます。
入れる前に、1回だけ中身を読む
スキルにはスクリプトを同梱できて、AIがそれを実行することもあります。知らない人のスキルは、SKILL.md と同梱ファイルに目を通してから入れてください。 ★の数は安全の保証になりません。
記事（4本）
#3 ・ ・ スキル5件
122万回入れられた「grill-me」は、中身が1行だった ― 作る前にAIに質問攻めにしてもらうスキル
grill-me の本体は「grilling を呼べ」の1行。122万回入れられているのに、一番大事なのは使う側の答え方だった。
#2 ・ ・ スキル6件
★29万のスキル集「superpowers」を入れたら、最初の仕事で言うことを聞かなかった話
15個のスキルの中身は合計17万バイト。でも毎回読み込まれるのは、入口の3,192バイトだけだった。
#1 ・ ・ スキル7件
「AIっぽいデザイン」を直すSkills 7つを、紹介動画ではなくSKILL.mdで読んだ
7つとも実在した。ただ、要約に書いてあった説明のうち4つは中身とズレていた。
スキル索引（23件）
これまでの記事で紹介したスキルを全部並べています。★の数は記事を書いた日に測った値です。
UI UX Pro Max
業種・配色・書体・UXルールのCSVを検索して、デザインの方針を0.3秒で返す。APIキー不要。検索は英語向けで、日本語の書体の組み合わせは1つだけ。
- デザイン
- 配色
- フォント
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skilltaste-skill
AIが作るフロントエンドの「ありがちな見た目」を避けさせる、文章のルール集。
- デザイン
- AIっぽさ対策
npx skills add https://github.com/Leonxlnx/taste-skillimpeccable
AIにデザインの言葉と確認の手順を足す。入れるとフックも追加される。ライセンスはApache-2.0。
- デザイン
- レビュー
npx impeccable installVercel の agent-skills
Vercel公式のスキル集。Webのデザインの指針をまとめた web-design-guidelines などが入っている。
- デザイン
- 公式
npx skills add vercel-labs/agent-skillsui-skills
デザインエンジニア向けの小さなスキル集。必要なものだけを取ってきて使う形。
- デザイン
npx ui-skills startgrill-me（Matt Pocock）
/grill-me と打つと、計画を「設計の木」として質問攻めにし、各質問におすすめの答えを添えてくれる。単体では動かず、同じリポジトリの grilling も一緒に入れる必要がある。
- 要件の整理
- 開発の進め方
npx skills@latest add mattpocock/skillssuperpowers の brainstorming
何か作るときは自動で割り込み、1つずつ質問して設計を固める。承認されるまで実装に進ませない。
- 要件の整理
- 開発の進め方
/plugin install superpowers@claude-plugins-officialSpec Kit の /speckit.clarify
GitHub公式の仕様駆動開発キット。仕様書の曖昧な点を最大5問で聞き、答えを仕様書に書き戻す。
- 要件の整理
- 公式
uv tool install specify-cliSuperClaude の /sc:brainstorm
対話で要件を洗い出すコマンド。SuperClaude というフレームワーク一式の中の1つとして入る。
- 要件の整理
pipx install superclaudevibe-check
「grill-me はエンジニア向け、こちらはそれ以外の人向け」と書いてあるスキル。ぼんやりした思いつきを、作れる計画にしてくれる。
- 要件の整理
- 初心者向け
npx skills add TexasBedouin/vibe-checksuperpowers
ブレスト→計画→サブエージェント→TDD→レビューまでの手順を15個のスキルで強制する。起動時に入口の3,192バイトだけを差し込み、残りは必要なときに読む。
- 開発の進め方
- テスト
- レビュー
/plugin install superpowers@claude-plugins-officialMatt Pocock の skills
grill-me・to-spec・tdd など54個。多くは自分で呼んだときだけ動くので、superpowers より軽く使える。
- 開発の進め方
- 要件の整理
npx skills@latest add mattpocock/skillsAnthropic 公式の skills
Anthropicが公開しているお手本のスキル集。Word・PDF・Excelなど文書を扱うものと、例として使えるものが入っている。
- 公式
- 文書
/plugin marketplace add anthropics/skillsTrail of Bits の skills
セキュリティ会社Trail of Bitsによる、コードの監査・脆弱性探し向けのスキル集。ライセンスはCC-BY-SA-4.0。
- セキュリティ
- レビュー
/plugin marketplace add trailofbits/skillscontext-engineering-kit
出した結果をAI自身に見直させる reflexion などで、仕上がりの質を上げるスキル集。ライセンスはGPL-3.0なので業務で使う前に確認を。
- 開発の進め方
- レビュー
npx skills add NeoLabHQ/context-engineering-kitsuperpowers-lab
superpowers の作者による実験的なスキル。tmux が必要。READMEの入れ方のコマンドが今のCLIで通るかは未確認。
- 開発の進め方
- 実験的
Emil Kowalski の skills
動きのルール集。ease-in禁止・UIは300ms未満・押したら scale(0.97) など、数字で決めてある。作る animate と、見直す review-animations が別になっている。
- デザイン
- アニメーション
- レビュー
npx skills@latest add emilkowalski/skillsjakubkrehel の better-* 系
角丸・文字・色・余白・アクセシビリティを見直して、指摘を表にし、最後に Block か Approve を出すレビュー役。全部まとめて回す better-interface がある。
- デザイン
- レビュー
- アクセシビリティ
npx skills add jakubkrehel/skillstastemaker
参考画像から色を拾い、開発者ごとの好みを保存して、それに沿ってUIを作らせる。「AIっぽさ」のチェックリストつき。入れたあと /plugin install tastemaker@codeswithroh を続けて打つ。
- デザイン
- 配色
- AIっぽさ対策
/plugin marketplace add codeswithroh/tastemakerlanding-page-design
LP専用。1つの提案・1人の相手・1つの行動に絞らせる。フォントの禁止リストや、ゆっくり見せる演出（700〜800ms）まで細かく決めてある。
- デザイン
- LP
git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills && cp -r /tmp/ai-design-skills/skills/landing-page-design .claude/skills/garden-skills
5つ入り。web-design-engineer は25の見た目のレシピと「AIっぽい」表現の禁止表を持つ。記事をHTML化するもの、画像生成のプロンプト集（APIキーが要るモードあり）も。
- デザイン
- AIっぽさ対策
- 画像生成
npx skills add ConardLi/garden-skillsMeng To の Skills
SKILL.mdが142個。ガラス風UIや光るボーダーなどWebの見た目のレシピが88個、ゲームや3Dもある。READMEに決まった入れ方はまだ無い。
- デザイン
- 3D・演出
designer-skills
調査・デザインシステム・UI・動き・納品までを9つのプラグインに分けたもの。1つずつは短めで、コントラスト4.5:1やタップ領域44ptなど定番の基準がまとまっている。
- デザイン
- アクセシビリティ
- UX設計
/plugin marketplace add Owl-Listener/designer-skills