skills.rest
MrOwaisAbdullah
MrOwaisAbdullahCOMMUNITY
Explore all skills by this author →
Website𝕏@mrowaisabdullahGitHub

gemini-frontend-assistant

Generate and refactor React components from text prompts and screenshots via the Gemini CLI.

1|Updated Dec 2, 2025
Search Tags:#frontend#react#refactor#tailwind#generate#gemini-cli#vision-to-code
One-click install
npx skills add https://github.com/MrOwaisAbdullah/ai-humanoid-robotics --skill gemini-frontend-assistant
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gemini-frontend-assistant
Source: https://github.com/MrOwaisAbdullah/ai-humanoid-robotics/tree/main/.claude/skills/gemini-frontend-assistant
Command: npx skills add https://github.com/MrOwaisAbdullah/ai-humanoid-robotics --skill gemini-frontend-assistant

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gemini, and includes scripts (resource) components.

## What problem does it solve? Frontend teams spend excessive time turning UI descriptions or visual references into React components. This skill automates the process by leveraging the Gemini CLI to generate UI code from natural language prompts and to convert screenshots into ready-to-use components, accelerating frontend delivery.

## Core Features & Use Cases

  • UI Code Generation: Generate React components from descriptive prompts.
  • Vision-to-Code: Transform UI screenshots into ready-to-use components.
  • Refactoring & Optimization: Improve structure and styling with guided, script-driven transformations.

### Quick Start Use the Gemini-based skill to generate components from descriptions or convert screenshots into code as part of your frontend workflow.

  • Generate: ./scripts/gemini-generate.sh "A responsive navigation bar with a logo, links, and a dark mode toggle."
  • Vision-to-Code: ./scripts/gemini-generate.sh "Replicate this dashboard design pixel-perfectly." "ref-screenshots/dashboard.png"
  • Refactor: ./scripts/gemini-refactor.sh "src/components/MyComponent.tsx" "Refactor to use the new glass-bar utility class and fix accessibility issues."

Frequently Asked Questions about gemini-frontend-assistant

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate React components from text prompts or UI screenshots?▼

You can generate React components from text prompts by running a script that orchestrates the Gemini CLI, converting natural language descriptions and visual screenshots directly into accessible, reusable code.

Can I refactor existing React codebases to use Tailwind CSS utility classes?▼

Yes, you can refactor existing React codebases to apply Tailwind CSS utility classes, improve structural styling, and resolve accessibility issues through guided, script-driven transformations targeting specific component files.

Does this UI code generation approach work with TypeScript and Tailwind CSS?▼

Yes, the UI code generation process works specifically with TypeScript and Tailwind CSS, relying on these project conventions alongside a standard prompt template to produce accessible, reusable React components.

What's the best way to turn a dashboard screenshot into a pixel-perfect React component?▼

The best way to turn a dashboard screenshot into a React component is using vision-to-code scripts that feed the image to the Gemini CLI, converting the visual design into matching frontend code.

Do I need the Gemini CLI to automate frontend UI code generation?▼

Yes, you need the Gemini CLI installed and configured to automate frontend UI code generation, as the scripts rely entirely on it to orchestrate the transformation of prompts and screenshots into React components.

Related Skills

Explore More Software Engineering Skills→
freestyleflyfreestylefly
429

canghe-danger-gemini-web

Generates text and images via the Gemini Web API.

Community
Intermediate
iAmAdheiliAmAdheil

react-shadcn-tailwind-builder

Automate React UI construction with shadcn-ui and Tailwind.

Community
Advanced
DITEKmaxDITEKmax

baseline-ui

Enforce Tailwind CSS UI and styling constraints for accessibility, animation, typography, and layout.

Community
Intermediate
qazuorqazuor

design-to-components

Translate design-cloner HTML/CSS output into framework-ready UI components.

Community
Advanced