gemini-forge

Solid

Generate frontend code drafts using Gemini 3.1 Pro's one-shot UI generation. Use when building React components, HTML/CSS pages, SVG animations, or converting screenshots to code. Produces fast, cheap drafts (7.5x cheaper than Opus) that Claude reviews and refines. Supports design system context loading (1M token window), screenshot-to-code pipeline, and physics-based SVG animation. Trigger: "generate a UI", "screenshot to code", "draft a component", "SVG animation", "convert this design", "gemini forge", "forge a UI".

Web & Frontend 41 stars 3 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 84/100

Stars 20%
54
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Gemini Forge Generate frontend code with Gemini 3.1 Pro, polish with Claude. Gemini handles structure and scaffolding at $2/MTok; Claude handles craft, aesthetic conviction, and production hardening at $15/MTok. **Model**: `gemini-3.1-pro-preview` (text-only, 1M context, 64K output) **Auth**: `GEMINI_API_KEY` env var (same key as nano-banana-pro) ## Quick Draft Generate React or HTML/CSS from a task description. ```bash # Simple component uv run scripts/generate_ui.py "dark dashboard with real-time metrics" --mode react --thinking medium # Full multi-file app uv run scripts/generate_ui.py "SaaS pricing page with three tiers" --mode react --thinking high --app # With design system context uv run scripts/load_design_system.py --tokens tokens.css --brief brand.md --output context.txt uv run scripts/generate_ui.py "hero section" --design-context context.txt --thinking high ``` **Thinking levels**: `low` (single components), `medium` (multi-component layouts), `high` (full apps, complex state). See `references/thinking-levels.md`. ## Screenshot-to-Code Convert a screenshot or mockup to code using the describe-first pipeline. Two API calls prevent layout hallucination—Gemini analyzes first, then generates from the verified spec. ```bash # Full pipeline: screenshot → spec → code uv run scripts/screenshot_to_code.py screenshot.png --framework react --output ./output # Step 1 only: get the spec, inspect it before generating uv run scripts/screenshot_to_code.py screenshot...

Details

Author
tdimino
Repository
tdimino/claude-code-minoan
Created
7 months ago
Last Updated
yesterday
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

gemini-cli

Wield Google's Gemini CLI as a powerful auxiliary tool for code generation, review, analysis, and web research. Use when tasks benefit from a second AI perspective, current web information via Google Search, codebase architecture analysis, or parallel code generation. Also use when user explicitly requests Gemini operations.

3 Updated today
Junayedahmedd
Web & Frontend Listed

gemini-webapi

Use Google Gemini (via the local tools/gemini toolkit) to generate ad scripts, voiceover scripts, documents, marketing copy, AI images for ads/storyboards, short video clips, and audio/music beds. Trigger when the user wants to "use Gemini" to write, narrate, generate images, generate video, generate documents, or draft ad copy/scripts inside the video-ad workspace (any project under C:\Users\user\Desktop\video-ad).

0 Updated today
abdul977
AI & Automation Listed

gemini-image

Generate and edit images with Google's Gemini models (Nano Banana / Gemini 3 Pro Image / 3.1 Flash Image) from a zero-dependency Python CLI. Use whenever the user wants to create, generate, edit, restyle, or compose an image with Gemini / Google AI; produce listing photos, mockups, banners, icons, or marketing visuals via Gemini; or attach reference images for image-to-image editing. Also handles text/conversation/model-listing — it is the maintained successor to the older `gemini-client` plugin. Triggers: "generate an image with Gemini", "use Google AI to make a picture", "Gemini image", "nano banana", "edit this image with Gemini", "Imagen".

0 Updated 4 days ago
BryceEWatson