What is developing-frontend?

This Claude skill provides comprehensive support for frontend UI/UX implementation and optimization. It specializes in modern frameworks like React, Vue, and Next.js, offering expert guidance on TypeScript type design, component architecture, state management, and performance tuning to ensure high-quality, accessible, and performant web applications.

When should I use developing-frontend?

developing-frontend is useful in the following scenarios: • Building modern, high-performance web applications from scratch using Next.js, React, or Vue 3 with best-practice project structures. • Optimizing frontend performance to meet Core Web Vitals standards, including techniques like code splitting, memoization, and virtualization. • Designing robust, type-safe frontend architectures using advanced TypeScript features and efficient state management solutions like Zustand or React Query. • Implementing responsive and accessible UI components using Tailwind CSS and ensuring compliance with ARIA standards and semantic HTML. • Developing comprehensive testing suites using Testing Library to ensure the reliability and stability of complex user interfaces.

name	developing-frontend
description	フロントエンド UI/UX 実装と最適化を支援します。React/Vue/Next.jsでの実装、パフォーマンス最適化、アクセシビリティを提供します。ユーザーインターフェース開発、Web アプリケーション構築が必要な場合に使用してください。

フロントエンド開発とパフォーマンス最適化

概要

フロントエンド開発、React/Vue/Next.js実装、TypeScript型設計、パフォーマンス最適化を包括的に支援するスキルです。

実行フロー

Step 1: プロジェクトセットアップ

フレームワーク選定基準

フレームワーク	用途	特徴
React	汎用的なSPA	最大のエコシステム
Next.js	SEO重視のWebアプリ	SSR/SSG/ISRサポート
Vue 3	シンプルで学習しやすい	Composition API
Astro	コンテンツ重視サイト	ゼロJSデフォルト
Svelte	バンドルサイズ最小化	コンパイル時最適化

Step 2: TypeScript型設計

高度な型システム

ジェネリクスと制約:

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

判別ユニオンと網羅性チェック:

type Result<T, E = Error> =
  | { success: true; data: T }
  | { success: false; error: E };

ユーティリティ型の活用:

Partial<T>, Pick<T, K>, Omit<T, K>, Record<K, V>, Required<T>

ブランド型:

type UserId = string & { readonly brand: unique symbol };

Step 3: コンポーネント設計

Reactコンポーネントアーキテクチャ

単一責任の原則を守る
Composition over Inheritance
Props型を明確に定義

カスタムフック:

function useUser(userId: string) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);
  // ...
  return { user, loading, error };
}

Step 4: 状態管理

状態管理手法の選択

手法	用途	学習曲線
useState	ローカル状態	低
Context API	テーマ、認証情報	中
Zustand	グローバル状態（軽量）	低
Redux Toolkit	複雑な状態管理	高
React Query	サーバー状態管理	中

Zustand（推奨）:

const useCartStore = create<CartStore>((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
}));

Step 5: パフォーマンス最適化

React最適化テクニック

React.memo: 不要な再レンダリングを防ぐ
useCallback/useMemo: 関数・計算結果をメモ化
コード分割: lazy() と Suspense で動的インポート
バーチャライゼーション: @tanstack/react-virtual で大量リスト対応

Core Web Vitals目標

FCP (First Contentful Paint) < 1.8s
LCP (Largest Contentful Paint) < 2.5s
FID (First Input Delay) < 100ms
CLS (Cumulative Layout Shift) < 0.1

Step 6: Tailwind CSSスタイリング

レスポンシブデザイン:

<div className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-4">

Step 7: テスト

Testing Library:

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

出力成果物

プロジェクトセットアップ: 初期化済みプロジェクト構造
型定義: TypeScriptの型定義ファイル
コンポーネントライブラリ: 再利用可能なUI部品
状態管理: ストア、カスタムフック
スタイルシステム: Tailwind設定、デザイントークン
テストコード: ユニット・統合テスト

ベストプラクティス

TypeScript Strict Mode: 最大限の型安全性を確保
コンポーネント設計: 単一責任の原則を守る
パフォーマンス: React.memo、useCallback、useMemoを適切に使用
アクセシビリティ: セマンティックHTML、ARIA属性、キーボード操作
テスト: Testing Libraryで動作をテスト

developing-frontend

When & Why to Use This Skill

Use Cases