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 4 forks Updated today MIT

Install

View on GitHub

Quality Score: 82/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
8 months ago
Last Updated
today
Language
Python
License
MIT

Integrates with

React · Frontend

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 3 weeks ago
abdul977
Web & Frontend Listed

gemini-image-gen

Universal image generator using Google Gemini's Nano Banana 2 API. Use when generating any image that is NOT pixel art or pencil animation — photorealistic images, illustrations, concept art, UI mockups, infographics, product photos, portraits, landscapes, architectural visualizations, social media graphics, abstract art, food photography, or diagrams. Triggers on "generate image", "create image", "make a picture", "image of", "illustration of", "photo of", "render", "visualize", "design an image", "draw", "concept art", "mockup image", "product shot", "portrait of", "landscape of".

1 Updated today
seanwinslow28