について
このスキルはGemini CLIを使用して、テキスト説明や画像からフロントエンドUIコードを生成します。ReactコンポーネントをTailwind CSSで作成することに特化しており、スクリーンショットやデザインコンセプトを実働コードに変換するのに最適です。開発者は迅速なプロトタイピング、スタイリング支援、コードリファクタリング作業に活用できます。
クイックインストール
Claude Code
推奨npx skills add mattnigh/skills_collection -a claude-code/plugin add https://github.com/mattnigh/skills_collectiongit clone https://github.com/mattnigh/skills_collection.git ~/.claude/skills/gemini-frontend-assistantこのコマンドをClaude Codeにコピー＆ペーストしてスキルをインストールします
GitHub リポジトリ
Frequently asked questions
What is the gemini-frontend-assistant skill?
gemini-frontend-assistant is a Claude Skill by mattnigh. Skills package instructions and resources that Claude loads on demand, so Claude can perform gemini-frontend-assistant-related tasks without extra prompting.
How do I install gemini-frontend-assistant?
Use the install commands on this page: add gemini-frontend-assistant to Claude Code as a plugin, or clone its repository into your skills directory, then restart Claude so it picks up the skill.
What category does gemini-frontend-assistant belong to?
gemini-frontend-assistant is in the frontend category, tagged react, ai and design.
Is gemini-frontend-assistant free to use?
Yes. gemini-frontend-assistant is listed on AIMCP and free to install. It runs inside Claude, so no separate service account is required to use the skill itself.
関連スキル
このスキルは、フロントエンド統合用の本番環境対応のChatGPTスタイルチャットボットウィジェットを生成します。無限再レンダリング防止、テキスト選択時の「AIに質問」機能、RAGバックエンドおよびSSEストリーミングとの即時連携など、重要な機能を備えています。実戦でテストされ、監視機能を備えたチャットインターフェースを迅速に導入するためにご利用ください。
このスキルは、一般的なフロントエンドの問題に対する組み込みソリューションを備えた、本番環境対応のChatGPTスタイルのチャットボットウィジェットを生成します。無限再レンダリング防止、テキスト選択時の「Ask AI」機能、ストリーミングSSEおよびRAGバックエンドの統合サポートを提供します。Webアプリケーションに監視機能付きの高性能チャットインターフェースを迅速に実装するためにご利用ください。
このスキルは、JSDocとTypeDocを使用して多様な対象者向けに包括的なTypeScriptドキュメントを生成します。APIドキュメント、アーキテクチャ決定記録（ADR）、およびNestJS、Express、React、Angular、Vue向けのフレームワーク固有の例を作成します。モジュールの文書化、APIドキュメントの生成、または階層化されたドキュメントパターンの確立にご利用ください。
このスキルは、React 19の最新パターン（Server Components、Actions、`useOptimistic`などのフックを含む）に関する専門的なガイダンスを提供します。モダンなReactアプリケーション構築におけるコンポーネント設計、状態管理、パフォーマンス最適化に活用できます。並行機能、Suspense、TypeScript開発の実装を積極的に支援します。