gemini-forge
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".
npx skills add majiayu000/claude-skill-registry --skill gemini-forge --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 f
- Quick Draft
- Screenshot-to-Code
- SVG Animation
- Polish Workflow
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 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
What does the gemini-forge skill do?
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".
How do I install it?
Run `npx skills add majiayu000/claude-skill-registry --skill gemini-forge --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From majiayu000/claude-skill-registry, a repository with 534 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.