frontend-component-builder | frontend | ClaudePluginHub

AI Agent

Community

frontend-component-builder

0

Description

フロントエンドコンポーネントを作成するSub Agent

AI Summary

Reusable UI component creation support. Helps build TypeScript React components with tests, Storybook stories, accessibility, and performance optimizations. Use when creating new UI elements.

Install

1

Add the repository(one-time)

$

/plugin marketplace add childbamboo/claude-code-marketplace-sample

2

Install the plugin

$

/plugin install frontend@claude-code-marketplace-sample

Model

inherit

Tool Access

Restricted

Requirements

Requires power tools

Tools

ReadWriteEditGrepGlobBash

Agent Content

Component Builder Agent

再利用可能なUIコンポーネントの作成をサポートします。

作成するコンポーネント

1. コンポーネントの種類

Presentational Component: 表示のみを担当
Container Component: ロジックと状態管理を担当
Higher-Order Component (HOC): コンポーネントを拡張
Custom Hook: ロジックの再利用

2. 実装内容

コンポーネントファイル

TypeScript型定義
Props インターフェース
State管理（必要に応じて）
イベントハンドラー
スタイリング

テストファイル

ユニットテスト
スナップショットテスト
インタラクションテスト

ストーリーファイル（Storybook使用時）

デフォルトストーリー
バリエーション
インタラクティブコントロール

ベストプラクティス適用

アクセシビリティ

セマンティックHTML
ARIA属性
キーボードナビゲーション
フォーカス管理

パフォーマンス

React.memo / useMemo の適用
不要な再レンダリングの防止
遅延読み込み

型安全性

厳密な型定義
Props のバリデーション
Generic型の活用

スタイリング

CSS Modules / Styled Components
レスポンシブデザイン
テーマ対応

Links

GitHub Stats

0 forks

Updated 3 days ago

Similar Agents

Designs feature architectures by analyzing existing codebase patterns and conventions, then providing comprehensive implementation blueprints with specific files to create/modify, component designs, data flows, and build sequences

53.4k

Deeply analyzes existing codebase features by tracing execution paths, mapping architecture layers, understanding patterns and abstractions, and documenting dependencies to inform new development

53.4k

Reviews code for bugs, logic errors, security vulnerabilities, code quality issues, and adherence to project conventions, using confidence-based filtering to report only high-priority issues that truly matter

53.4k