Skip to content
cccskills
FreePublished on GitHub

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".

The English summary is being prepared. Showing the original description.

Works withGemini
See how to install

Files included (8)

  • SKILL.md3.3 KB
  • README.md3.0 KB
  • references/thinking-levels.md1.2 KB
  • scripts/gemini_text.py12.1 KB
  • scripts/generate_svg.py7.2 KB
  • scripts/generate_ui.py6.6 KB
  • scripts/load_design_system.py6.4 KB
  • scripts/screenshot_to_code.py8.3 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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.

# 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.

# 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.png --analyze-only

# Step 2 only: generate from an existing or corrected spec
uv run scripts/screenshot_to_code.py --from-spec spec.md --framework html --output ./output

Use --analyze-only to inspect the spec. Claude can correct misreadings before passing to generation.

SVG Animation

Generate or animate SVGs with physics-based reasoning.

# Animate existing SVG
uv run scripts/generate_svg.py --mode animate logo.svg --description "draw-on stroke, 1.2s"

# Create animated SVG from description
uv run scripts/generate_svg.py --mode create --description "orbiting dots with spring connections"

# Physics simulation
uv run scripts/generate_svg.py --mode physics --description "particle system, 20 nodes, gravity"

# Animated logo
uv run scripts/generate_svg.py --mode logo --description "Minoan double-axe labrys, slow rotation"

Output is pure SVG—no external dependencies. Includes prefers-reduced-motion fallbacks.

Polish Workflow

After Gemini generates a draft:

  1. Read the generated file
  2. Apply minoan-frontend-design standards: commit to The One Thing, personality fonts, bold color, OKLCH colors, Tailwind v4, Radix primitives, APCA contrast, semantic HTML, accessibility
  3. Write the polished output to the project

Gemini drafts fast. Claude refines with taste.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Search academic papers, build literature reviews, and synthesize research findings — combines Exa MCP (research_paper category, arxiv filtering) with arxiv-mcp-server for paper discovery, download, and deep analysis. Triggers on academic paper, literature review, research synthesis, arxiv, find papers, scholarly search.

The English summary is being prepared. Showing the original description.

tdimino/claude-code-minoan41Updated Oct 16, 2026

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.

The English summary is being prepared. Showing the original description.

tdimino/claude-code-minoan41Updated Oct 16, 2026

This skill should be used when creating, auditing, or maintaining AGENTS.md files and Codex CLI configuration for any project—including initializing AGENTS.md for cross-agent compatibility (Codex, Cursor, Copilot, Devin, Jules, Amp, Gemini CLI), generating config.toml or .rules files, scaffolding .agents/skills/, converting CLAUDE.md to AGENTS.md, or auditing existing agent configs for bloat and staleness. Complementary to codex-orchestrator (which executes subagents; this skill creates the config files they consume).

The English summary is being prepared. Showing the original description.

tdimino/claude-code-minoan41Updated Oct 16, 2026

Academic research skill for Biblical Hebrew, Semitic linguistics, cuneiform studies, and comparative Ancient Near Eastern research. Provides Sefaria API for Hebrew Bible, CDLI/ORACC for cuneiform databases, and web discovery via Omnisearch, Exa, Firecrawl, and Obscura for finding scholarly sources across JSTOR, Perseus, Persée, Google Scholar, and academia.edu. Triggers on Hebrew quotes, cuneiform, Sefaria, ANE research, Minoan, search for scholarship, find papers, literature review, scholarly search, academic search, Genesis/Tehom, Ugaritic, Talmudic sources, extract from PDF, OCR academic.

The English summary is being prepared. Showing the original description.

tdimino/claude-code-minoan41Updated Oct 16, 2026

Build comprehensive ARCHITECTURE.md files following matklad's canonical guidelines — bird's-eye views, ASCII/Mermaid diagrams, codemaps, invariants, and layer boundaries. Triggers on document the architecture, create ARCHITECTURE.md, map this codebase, architectural overview.

The English summary is being prepared. Showing the original description.

tdimino/claude-code-minoan41Updated Oct 16, 2026

Generate physically-based atmospheric scattering shaders — sky domes, planetary atmospheres, LUT-optimized pipelines, depth-aware post-processing. Four modes — sky-dome, atmosphere-post, planet, lut. Triggers on atmospheric scattering, sky shader, sunset rendering, planet atmosphere, Rayleigh scattering, Mie scattering, volumetric sky, sky dome, atmosphere post-processing, aerial perspective, transmittance LUT, sky rendering, realistic sky, planetary rendering.

The English summary is being prepared. Showing the original description.

tdimino/claude-code-minoan41Updated Oct 16, 2026

See all skills by tdimino

Report a problem with this skill