AutoGineer

Agent Skills

Trusted skills for AI agents from official vendors and established maintainers. Every skill is attributed to its author, scanned, and comes with install steps for your AI tool.

Connect your AI tool (MCP)

Results

117 skills

  • Figma Code Connect Components

    OpenAIOfficial

    Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyLow riskHas scriptsGitHub stars of the source repository28.6k

  • Figma

    OpenAIOfficial

    Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyGitHub stars of the source repository28.6k

  • Figma Create Design System Rules

    OpenAIOfficial

    Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyLow riskHas scriptsGitHub stars of the source repository28.6k

  • Figma Use

    OpenAIOfficial

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

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyLow riskHas scriptsGitHub stars of the source repository28.6k

  • Figma Generate Design

    OpenAIOfficial

    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.

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyGitHub stars of the source repository28.6k

  • Figma Generate Library

    OpenAIOfficial

    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.

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyLow riskHas scriptsGitHub stars of the source repository28.6k

  • Figma Create New File

    OpenAIOfficial

    Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution via whoami if needed. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard)

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyGitHub stars of the source repository28.6k

  • Gsap Plugins

    GSAP (GreenSock)Official

    Official guide for integrating and using GSAP plugins for advanced animations, layout transitions, and physics-based interactions.

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    MITGitHub stars of the source repository18k

  • Variant

    Jakub Krehel· Community

    Generate and iterate on multiple UI component variants based on a specific design axis.

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    MITGitHub stars of the source repository11.5k

  • Better Colors

    Jakub Krehel· Community

    Audit and manage color systems by validating semantic tokens, palette structures, and contrast ratios.

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    MITGitHub stars of the source repository11.5k

  • Adobe Create Mockups

    OpenAIOfficial

    Generate professional product mockups by placing your logo or design onto various items using Adobe Firefly.

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Apache-2.0GitHub stars of the source repository7.8k

  • Figma Generate Design

    OpenAIOfficial

    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', 'convert this modal/dialog/drawer/panel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, or any composed multi-section view in Figma from code or a description. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyGitHub stars of the source repository7.8k

  • Canva Brand Check

    OpenAIOfficial

    Check a Canva design against a brand kit and report where it diverges — off-palette colors, non-brand fonts, logo misuse, and off-tone copy. Read-only; makes no changes. Use when the user asks "is this on brand", "check this against our brand kit", "do a brand review", "does this match our brand guidelines", or "brand-check my design".

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyGitHub stars of the source repository7.8k

  • Ideate

    OpenAIOfficial

    Generate image-based alternatives, remixes, or new design directions from a Product Design brief. Use when the user asks for design variants, visual exploration, remixes, or image-generated approaches from provided context.

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyLow riskGitHub stars of the source repository7.8k

  • Figma Use

    OpenAIOfficial

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

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyLow riskHas scriptsGitHub stars of the source repository7.8k

  • Canva Design Feedback

    OpenAIOfficial

    Read a Canva design and return structured, actionable design feedback — visual hierarchy, copy/messaging, layout & spacing, consistency, readability, and accessibility. Read-only; makes no changes to the design. Use when the user asks to "review my design", "give me feedback on this", "critique my deck/poster/flyer", "how can I improve this design", or "what's wrong with this slide".

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyGitHub stars of the source repository7.8k

  • Node Link And Diagram Layout

    OpenAIOfficial

    Choose and apply automatic layout strategies for node-link diagrams and connected-node visuals. Use when the user asks how to auto-arrange nodes, reduce line crossings, route edges, avoid overlaps, stabilize layout, or choose graph-layout algorithms for network diagrams, dependency graphs, database schema diagrams, ERDs, state machines, decision trees, flow diagrams, box-and-line editors, or other line-connected nodes.

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyGitHub stars of the source repository7.8k

  • Figma Use Figjam

    OpenAIOfficial

    This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool.

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyGitHub stars of the source repository7.8k

  • Index

    OpenAIOfficial

    Use when Product Design is explicitly invoked, or when the user's main goal is to explore a design, research UX, audit or critique a flow, faithfully clone a visual source, check a built design, or share a prototype. Do not use Product Design for ordinary implementation unless the user explicitly asks for it.

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyGitHub stars of the source repository7.8k

  • Canvas2d Data Visualization

    OpenAIOfficial

    Render data visualizations with Canvas2D. Use when the visualization needs high mark counts, fast redraws, immediate-mode rendering, custom hit testing, or a hybrid Canvas plus SVG or HTML architecture.

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyGitHub stars of the source repository7.8k

  • Figma Create New File

    OpenAIOfficial

    **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this skill first. Trigger whenever the user wants a new blank Figma file — a new design, FigJam, or Slides file — or when you need a fresh file before calling `use_figma`. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard, /figma-create-new-file slides Q3 Review)

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyGitHub stars of the source repository7.8k

  • Canva Implement Feedback

    OpenAIOfficial

    Implement reviewer feedback on a Canva design. Reads all comment threads, synthesises what reviewers want, makes the clear-cut changes directly, and flags anything that needs a human decision. Use when the user asks to "implement feedback on my deck", "address comments on a design", "apply review feedback", "fix the comments on my presentation", or "implement the feedback".

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyGitHub stars of the source repository7.8k

  • Figma Use Motion

    OpenAIOfficial

    Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a node.

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyGitHub stars of the source repository7.8k

  • Game UI Frontend

    OpenAIOfficial

    Design UI surfaces for browser games. Use when the user asks for HUDs, menus, overlays, responsive layouts, or visual direction that must protect the playfield.

    Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
    Link-onlyGitHub stars of the source repository7.8k