跳到正文
cccskills
免费在 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".

中文简介正在准备中。当前显示原文说明。

集成工具Gemini
查看安装方法

包含的文件(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(原文)

安装前可以查看交给 AI 代理的指令内容。

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.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

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.

中文简介正在准备中。当前显示原文说明。

tdimino/claude-code-minoan412026年10月16日 更新

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.

中文简介正在准备中。当前显示原文说明。

tdimino/claude-code-minoan412026年10月16日 更新

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

中文简介正在准备中。当前显示原文说明。

tdimino/claude-code-minoan412026年10月16日 更新

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.

中文简介正在准备中。当前显示原文说明。

tdimino/claude-code-minoan412026年10月16日 更新

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.

中文简介正在准备中。当前显示原文说明。

tdimino/claude-code-minoan412026年10月16日 更新

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.

中文简介正在准备中。当前显示原文说明。

tdimino/claude-code-minoan412026年10月16日 更新

查看 tdimino 的全部技能

报告此技能的问题