Design & 3D modeling

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discovers design system components, variables, and styles via search_design_system, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.

Figma to pixel-perfect code: deterministic HTML/React, then a render + pixel-diff verify loop.

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.

Figma designs pulled once into a local vault; AI agents read them offline with no rate limits

Let agents manage your Figma workspace. 102 tools for seats, teams, offboarding, and cleanup.

Local Figma MCP server: frames to Flutter, SwiftUI, React and HTML code, and design in Figma.

Design an auditable playbook when no narrower one fits: a large migration, an ambitious multi-part change, or work a human reviews after stepping away. Scales rigor to the task, runs a hypothesis loop, and logs decisions via show-me-your-work. Use for /figure-it-out, 'figure it out', a large migration, or when no narrower playbook applies.

Remove filler words and disfluencies (um, uh, like, you know, basically) from a talking-head video so it sounds like they were never said. Use whenever the user wants to clean up speech, cut filler/hesitations, tighten a voiceover, or remove "um"s and "uh"s. Covers verbatim transcription, precise cutting rules, and the iterate-until-clean preview loop.

Conduz a criação de um filme de apresentação de marca em código com Remotion, no estilo de vídeo de lançamento de produto (Apple, Linear, Stripe, Vercel, Figma), nunca estilo slide animado. Cobre entrevista inicial, conceito e quadros de estilo com aprovação, storyboard preso a uma grade musical de 120 BPM, construção cena a cena com verificação de contraste e corte de texto, trilha e narração opcionais via ElevenLabs, e entrega em MP4 1080p e 720p. Use quando o usuário pedir filme da marca, vídeo institucional em código, vídeo de lançamento de produto, ou mencionar /filme-marca-remotion ou Remotion.

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Use when creating or substantially redesigning web interfaces, landing pages, dashboards, components, or other frontend UI where visual direction and implementation quality matter. Produces subject-specific art direction, accessible code, and rendered visual verification.

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

フロントエンド設計の方向性、美的原則、および一貫した設計言語実装。

Set an ECC-specific frontend design direction for production UI work. Use when building or improving websites, dashboards, applications, components, landing pages, visual tools, or any web UI that needs stronger product-specific design judgment.

Review and create distinctive, production-grade frontend interfaces with high design quality and design system compliance. Evaluates using three pillars: frictionless insight-to-action, quality craft, and trustworthy building. USE FOR: PR reviews, design reviews, accessibility audits, design system compliance checks, creative frontend design, UI code review, component reviews, responsive design checks, theme testing, and creating memorable UI. DO NOT USE FOR: Backend API reviews, database schema reviews, infrastructure or DevOps work, pure business logic without UI, or non-frontend code.

Game art principles. Visual style selection, asset pipeline, animation workflow.

Game audio principles. Sound design, music integration, adaptive audio systems.

Game design principles. GDD structure, balancing, player psychology, progression.

Game development orchestrator. Routes to platform-specific skills based on project needs.

Video game prices from completed eBay and Vinted sales, by platform, region, edition and condition.

GAN-inspired Generator-Evaluator agent harness for building high-quality applications autonomously. Based on Anthropic's March 2026 harness design paper. Use when a feature should be built autonomously through generator and evaluator iteration until it clears a quality bar.

Local stdio MCP for OpenAI-compatible and Gemini image generation, editing, and model fallback.

Generate or edit images using AI models (FLUX, Gemini). Use for general-purpose image generation including photos, illustrations, artwork, visual assets, concept art, and any image that isn't a technical diagram or schematic. For flowcharts, circuits, pathways, and technical diagrams, use the scientific-schematics skill instead.

Generate and edit images, video, music, speech and sound effects with your getimg.ai account.

Drive Google Flow from an agent: Veo video and Imagen image generation

Attach local images or videos to GitHub issues, pull requests, and comments using native gh --attach. Use for screenshot uploads, before/after evidence, gh image requests, or reusing user-attachments URLs in GitHub markdown. For finding macOS screenshots, use the screenshots skill first.

MCP server for GigaChat — AI chat, embeddings, image generation (Russia)

Design or refine GitHub Pages direction, composition, tokens, themes, and responsive styling. Use for Pages visual work and critique, not generic product design or a full rendered UX audit.

Design or refine GitHub Pages direction, composition, tokens, themes, and responsive styling. Use for Pages visual work and critique, not generic product design or a full rendered UX audit.

Design or refine GitHub Pages direction, composition, tokens, themes, and responsive styling. Use for Pages visual work and critique, not generic product design or a full rendered UX audit.

Idiomatic Go guidance for writing and reviewing Go code - style, naming, MixedCaps, GoDoc comments, error handling (%w, errors.Is/As, sentinel errors), goroutines/channels/select/context, safety (nil maps, append aliasing, type assertions), structs/interfaces, generics, table-driven tests, testify, golangci-lint, go.mod dependency management, project layout, slog/Prometheus/OpenTelemetry observability, and gRPC. Use when writing, reviewing, or refactoring Go (.go) code, editing go.mod/go.sum, running go test or golangci-lint, debugging goroutine leaks or races, or making Go design decisions. For the samber/* library stack (lo, oops, do, mo, slog-*, hot, ro) use gostack instead.

Go-specific design patterns and best practices including functional options, small interfaces, dependency injection, concurrency patterns, error handling, and package organization. Use when working with Go code to apply idiomatic Go patterns.

Golden-ratio design math: spacer calculator, spacing scale, grid widths, CSS vars, Tailwind setup.

Talk to any Figma file with your AI: ask what's in it, change it, or turn it into code.

GraphQL gives clients exactly the data they need - no more, no less. One endpoint, typed schema, introspection. But the flexibility that makes it powerful also makes it dangerous. Without proper controls, clients can craft queries that bring down your server. This skill covers schema design, resolvers, DataLoader for N+1 prevention, federation for microservices, and client integration with Apollo/urql. Key insight: GraphQL is a contract. The schema is the API documentation. Design it carefully.

Master modern GraphQL with federation, performance optimization, and enterprise security. Build scalable schemas, implement advanced caching, and design real-time systems.

A relentless interview to sharpen a plan or design.

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

Interview the user relentlessly about a plan or design until every branch of the decision tree has an explicit recorded decision and no open questions remain. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.

Grill a project's goal or design with the person until you share one understanding, and keep their actual answers in that project. Use when a person asks to grill or interview an idea for a specific project.

Apply AI-generated visual edits to video using xAI / Grok — change object colors, add effects (smoke, fire, sparkles), restyle scenes, or alter what's in a clip ("make the sunglasses red", "add smoke from the gun", "make it sparkly"). Use whenever an edit can't be done deterministically with ffmpeg/overlays and needs generative reimagining of the footage. Covers trimming, chunking, audio mux, and seamless reassembly.

Design brief, design system and pass or fail check that keep AI-built UIs from looking generated.

Audit, restructure, and design harnesses — scheduled operational scripts, drift checkers, watchdogs, gated data pipelines wrapped around a repo or agent system. Use when helper scripts have grown past one screen, checkers are multiplying, or a harness subsystem needs a home. Not for one-off scripts, and not for application code that no scheduled check or gate runs.

Configure Hermes model providers, transports and routing: provider entries, default-route switching, reasoning effort, delegation pins, per-profile copies, and proving a route with live signals. Use when a model 404s or rejects an endpoint, a profile ignores its key, config drifts between root and profiles, vision or image generation errors, or a relay's effort/cost looks wrong. Not for another harness's own model configuration.