gemini-frontend-assistant
About
This skill uses the Gemini CLI to generate frontend UI code from text descriptions or images. It specializes in creating React components with Tailwind CSS, making it ideal for converting screenshots or design concepts into working code. Developers should use it for rapid prototyping, styling assistance, and code refactoring tasks.
Quick Install
Claude Code
Recommendednpx 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-assistantCopy and paste this command in Claude Code to install this skill
GitHub Repository
Related Skills
chatbot-widget-creator
OtherThis skill creates a production-ready ChatGPT-style chatbot widget for frontend integration. It includes critical features like infinite re-render protection, text selection "Ask AI" functionality, and ready integration with RAG backends and SSE streaming. Use it to quickly deploy a battle-tested, monitored chat interface.
chatbot-widget-creator
OtherThis skill generates a production-ready ChatGPT-style chatbot widget with built-in solutions for common frontend issues. It provides infinite re-render protection, text selection "Ask AI" functionality, and integrated support for streaming SSE and RAG backends. Use it to quickly implement a monitored, performant chat interface in your web application.
react-patterns
OtherThis skill provides expert guidance on React 19's latest patterns, including Server Components, Actions, and hooks like `useOptimistic`. Use it for component architecture, state management, and performance optimization when building modern React applications. It proactively assists with implementing concurrent features, Suspense, and TypeScript development.
react-patterns
OtherThis skill provides expert guidance on React 19's latest patterns, including Server Components, Actions, and concurrent features like `useOptimistic` and Suspense. Use it for component architecture, state management, performance optimization, and implementing modern TypeScript development. It's your go-to resource for any React 19 development question or code review.