UIコンポーネント生成スキル

UIコンポーネント生成スキル

UIコンポーネントの自動生成を行うAgent Skillです。

デザインからコード生成

• Figmaデザインの解析とコンポーネント化
• スクリーンショットからのUI再現
• 自然言語での説明からコンポーネント生成

対応フレームワーク

• React (TypeScript)
• Vue 3 (Composition API)
• Svelte
• Solid.js

対応CSSフレームワーク

• Tailwind CSS
• shadcn/ui
• Chakra UI
• Material UI

使用例

以下の仕様でログインフォームコンポーネントを作成してください：
- メールアドレスとパスワードの入力欄
- ログインボタン
- 「パスワードを忘れた方」リンク
- Tailwind CSSでスタイリング
- バリデーション付き

特徴

• アクセシビリティ対応（ARIA属性の自動付与）
• レスポンシブデザイン
• ダークモード対応
• TypeScript型定義の自動生成