📦 その他コミュニティ

front-end-skill

??ロントエンド開発における特定のプロジェクトで、このSkillが何をするのか、いつ使用するのかを簡潔に説明するSkill。

📜 元の英語説明(参考)

Brief description of what this Skill does and when to use it (project)

🇯🇵 日本人クリエイター向け解説

一言でいうと

??ロントエンド開発における特定のプロジェクトで、このSkillが何をするのか、いつ使用するのかを簡潔に説明するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o front-end-skill.zip https://jpskill.com/download/5953.zip && unzip -o front-end-skill.zip && rm front-end-skill.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/5953.zip -OutFile "$d\front-end-skill.zip"; Expand-Archive "$d\front-end-skill.zip" -DestinationPath $d -Force; ri "$d\front-end-skill.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して front-end-skill.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → front-end-skill フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-17
取得日時: 2026-05-17
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] front-end-skill

Next.js フロントエンド開発

このスキルを使用する状況

packages/nextjs/ 内のフロントエンドタスクに取り組む際に、このスキルを有効にしてください。

React コンポーネントの作成または変更
Tailwind CSS を使用したスタイリング
新しいページやレイアウトの構築
アニメーションとインタラクションの実装
UI/UX の改善作業

プロジェクトの背景

SplitHub は、タップして支払う割り勘アプリです。フロントエンドは次のように感じるべきです。

瞬時で応答性がある — NFC タップのインタラクションには素早いフィードバックが必要です。
信頼できる — 金融アプリには、クリーンで信頼感のあるデザインが求められます。
楽々 — 複雑さを隠し、支払いを魔法のように感じさせます。

美的ガイドライン

「AI スロップ」を避ける

一般的な AI 生成デザインはすぐにそれとわかります。以下を避けてください。

使い古されたフォント: Inter、Roboto、Open Sans、Lato、システムフォント
陳腐な配色: 白い背景に紫のグラデーション
予測可能なレイアウトと画一的なコンポーネントパターン
Space Grotesk (AI 出力で多用されています)

驚きと喜びを与える、創造的で個性的な選択をしてください。

タイポグラフィ

タイポグラフィは瞬時に品質を伝えます。Google Fonts から個性的なフォントを使用してください。

良い選択肢:

コードの美学: JetBrains Mono、Fira Code
エディトリアル: Playfair Display、Crimson Pro
テクニカル: IBM Plex family、Source Sans 3
個性的: Bricolage Grotesque、Newsreader、Syne、Outfit、Archivo

ペアリングの原則:

高いコントラスト = 面白い (ディスプレイ + モノスペース、セリフ + ジオメトリックサンセリフ)
ウェイトの極端な値を使用する: 100/200 vs 800/900、400 vs 600 ではない
サイズのジャンプは 3 倍以上、1.5 倍ではない

レイアウトファイルで next/font/google を介してフォントを読み込んでください。

色とテーマ

CSS 変数で統一感のある美学を確立してください。
鋭いアクセントのある支配的な色 > 控えめで均等に分散されたパレット
IDE テーマ、文化的美学、または予期せぬソースからインスピレーションを得てください。
ダークテーマは金融/技術アプリに適しています。

モーションとアニメーション

React アニメーションには framer-motion (このプロジェクトでは motion として利用可能) を使用してください。
影響の大きい瞬間に焦点を当ててください: 段階的な表示を伴う調整されたページロード
1 つの適切に設計された animation-delay シーケンス > 散らばったマイクロインタラクション
シンプルなホバー/フォーカス状態には CSS トランジションを使用してください。
NFC タップのインタラクションには触覚フィードバックを提供してください。

背景と奥行き

単色をデフォルトにするのではなく、雰囲気を作り出してください。

CSS グラデーションを重ねる
微妙な幾何学模様
美学に合わせた文脈効果
奥行きのために不透明度とぼかしを使用する

技術スタック

フレームワーク: App Router を備えた Next.js 15
スタイリング: Tailwind CSS
アニメーション: Framer Motion (motion)
フォント: next/font/google
パスエイリアス: ~~/* は packages/nextjs/ に解決されます

コンポーネントの場所

packages/nextjs/
├── app/                    # ページ (App Router)
├── components/
│   ├── settle/            # 支払いフロー UI
│   ├── credits/           # POS 端末 UI
│   ├── activity/          # アクティビティ/レシート UI
│   ├── expense/           # 費用フォーム
│   ├── home/              # ダッシュボードコンポーネント
│   └── scaffold-eth/      # ウォレットコンポーネント
├── hooks/                  # カスタム React フック
└── services/              # API/データサービス

実装チェックリスト

フロントエンドコンポーネントを作成する際:

[ ] packages/nextjs/components/ 内の既存コンポーネントでパターンを確認してください。
[ ] 個性的なタイポグラフィを使用してください (Inter/Roboto は絶対に使用しないでください)。
[ ] CSS 変数または Tailwind config を介して一貫したカラーテーマを適用してください。
[ ] 主要なインタラクションに意図的なアニメーションを追加してください。
[ ] モバイルファーストのレスポンシブデザインを確保してください。
[ ] 視覚的なフィードバックを伴うローディング/エラー状態を提供してください。
[ ] NFC 関連のフローが瞬時で満足のいくものであることをテストしてください。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Next.js Frontend Development

When to Use This Skill

Activate this skill when working on frontend tasks in packages/nextjs/:

Creating or modifying React components
Styling with Tailwind CSS
Building new pages or layouts
Implementing animations and interactions
Working with UI/UX improvements

Project Context

SplitHub is a tap-to-pay bill splitting app. The frontend should feel:

Instant & Responsive — NFC tap interactions need snappy feedback
Trustworthy — Financial app requires clean, confident design
Effortless — Hide complexity, make payments feel magical

Aesthetic Guidelines

Avoid "AI Slop"

Generic AI-generated designs are immediately recognizable. Avoid:

Overused fonts: Inter, Roboto, Open Sans, Lato, system fonts
Cliché color schemes: purple gradients on white backgrounds
Predictable layouts and cookie-cutter component patterns
Space Grotesk (overused in AI outputs)

Make creative, distinctive choices that surprise and delight.

Typography

Typography signals quality instantly. Use distinctive fonts from Google Fonts.

Good choices:

Code aesthetic: JetBrains Mono, Fira Code
Editorial: Playfair Display, Crimson Pro
Technical: IBM Plex family, Source Sans 3
Distinctive: Bricolage Grotesque, Newsreader, Syne, Outfit, Archivo

Pairing principles:

High contrast = interesting (display + monospace, serif + geometric sans)
Use weight extremes: 100/200 vs 800/900, not 400 vs 600
Size jumps of 3x+, not 1.5x

Load fonts via next/font/google in layout files.

Color & Theme

Commit to a cohesive aesthetic with CSS variables
Dominant colors with sharp accents > timid, evenly-distributed palettes
Draw inspiration from IDE themes, cultural aesthetics, or unexpected sources
Dark themes work well for financial/tech apps

Motion & Animation

Use framer-motion (available as motion in this project) for React animations
Focus on high-impact moments: orchestrated page loads with staggered reveals
One well-designed animation-delay sequence > scattered micro-interactions
CSS transitions for simple hover/focus states
Provide tactile feedback for NFC tap interactions

Backgrounds & Depth

Create atmosphere rather than defaulting to solid colors:

Layer CSS gradients
Subtle geometric patterns
Contextual effects matching the aesthetic
Use opacity and blur for depth

Technical Stack

Framework: Next.js 15 with App Router
Styling: Tailwind CSS
Animation: Framer Motion (motion)
Fonts: next/font/google
Path alias: ~~/* resolves to packages/nextjs/

Component Locations

packages/nextjs/
├── app/                    # Pages (App Router)
├── components/
│   ├── settle/            # Payment flow UI
│   ├── credits/           # POS terminal UI
│   ├── activity/          # Activity/receipt UI
│   ├── expense/           # Expense forms
│   ├── home/              # Dashboard components
│   └── scaffold-eth/      # Wallet components
├── hooks/                  # Custom React hooks
└── services/              # API/data services

Implementation Checklist

When creating frontend components:

[ ] Check existing components in packages/nextjs/components/ for patterns
[ ] Use distinctive typography (never Inter/Roboto)
[ ] Apply consistent color theme via CSS variables or Tailwind config
[ ] Add purposeful animations for key interactions
[ ] Ensure mobile-first responsive design
[ ] Provide loading/error states with visual feedback
[ ] Test NFC-related flows feel instant and satisfying