Lierie Skills

Frontend Design

React + Tailwindで「AI臭くない」プロダクション品質のフロントエンドUIを設計するための公式skill。デザイン指針も含む。

GitHub で見る ↗dev-workflow↓ 0

Install

$git clone https://github.com/anthropics/skills.git ~/anthropic-skills && cp -r ~/anthropic-skills/skills/frontend-design ~/.claude/skills/

ターミナルで実行すると ~/.claude/skills/ に配置されます。

詳しく

何ができるの？

「AI が作った感」が出がちなフロントエンド UI を、プロが手で組んだような落ち着いた配色・レイアウト・余白感に仕上げてくれる公式 skill です。React + Tailwind ベース。

どう使うの？

  1. Claude Code に「frontend-design で〇〇ページの UI を整えて」と依頼
  2. Claude が現状のデザインを分析して、配色やフォントサイズ・余白の改善案を提示
  3. OK ならそのまま Tailwind クラスを書き換えてくれる

例えばこんな時

「自分で作ったランディングページが何となく素人っぽい」というケース。frontend-design を使えば、既存コードを壊さずに見た目だけ整って「プロが作った感」が出ます。

対応エージェント

  • Claude Code
  • Cursor
  • Cline
  • Codex
  • Roo
  • Other

タグ

README

詳細な使い方や設定オプションは GitHub の README を参照してください。記事化された skill には下に解説リンクが付いています。

GitHub の README を見る ↗

同じカテゴリの Skill

MCP Builder

外部APIをClaudeから呼べるようにするMCPサーバーを、ガイド付きで設計・実装できる公式skill。Python/Nodeどちらにも対応。

  • Claude Code
↓ 0dev-workflow

Webapp Testing

Playwrightを使ってWebアプリのUIを動かし、挙動・回帰を検証するための公式skill。スクショ取得やコンソールログ確認も可。

  • Claude Code
↓ 0dev-workflow

Web Artifacts Builder

React + Tailwind + shadcn/uiで、ステート管理やルーティングを含む複雑なHTMLアーティファクトを構築する公式skill。

  • Claude Code
↓ 0dev-workflow