AI Agent Tools

diagram-design15.1k★

Diagram-design is a Claude Code skill for editorial-quality diagrams. Architecture sketches, flowcharts, sequence diagrams, quadrants, pyramids. 13 types total, all rendered as self-contained HTML and SVG with no JavaScript or build step. The output is opinionated: low density, restrained color, accent used sparingly on the one or two things that matter. It looks like something a design team made, not generic AI output. Install is clone or plugin, then tell Claude to onboard it to your website and it pulls your brand palette and typography from your homepage. After that every diagram uses your colors. The skill activates automatically when you ask for a diagram. Solo writers and technical bloggers: install it. Small teams with a brand style guide: install it team-wide and onboard to your site. Large teams with a design system: the editorial constraints may conflict with your existing design language, evaluate first. The catch: the plugin route puts the skill in a cache that updates overwrite, so style-guide customizations get wiped unless you clone the repo and symlink. And the opinionated style is the whole pitch. If you want Mermaid-style diagrams, this is the wrong tool.

img2threejs11.5k★

img2threejs takes a reference image and rebuilds the object in it as procedural Three.js code, using primitives and shaders instead of a downloaded mesh. It is an agent skill, not a library or a CLI: you install it into Claude Code, Codex, or OpenCode and the agent runs the pipeline. MIT licensed. The design is the interesting part. Deterministic Python scripts, standard library only with no external dependencies, handle validation, quality gates, and code generation, while the model's tokens go only to the visual judgment steps: look at the image, assess it, review the render. That split is why it stays token-efficient, and it is a pattern more agent skills should copy. Web developers who need 3D objects and would rather not model them or license assets are the audience, mostly solo and small teams. Subjects get classified as object, character, or hybrid, and characters route through a separate anatomy-aware track rather than being refused outright. The skill costs nothing beyond the agent subscription you already have. The catch: it is strongest on hard-surface objects, and the project says so itself. Characters come out as stylized reconstructions, not photoreal likeness, and the projection-first likeness work is still on the roadmap rather than shipped. Credit where it is due, the skill is built to report low confidence and say the fidelity is not reachable from one image instead of confidently handing you something wrong.

lottie5.2k★

This turns "make me a loading spinner animation" into actual Lottie code through your AI coding agent. Lottie is the format apps use for lightweight vector animations, and creating them normally means After Effects and a plugin. diffusionstudio/lottie installs as a skill for agents like Claude Code, then converts an SVG or a plain-text description into working animation code you can drop into web, React Native, iOS, Android, or Flutter. Setup is one command, npx skills add diffusionstudio/lottie, and you're generating animations by prompting. There's nothing to host and no account. Because it produces standard Lottie JSON, the output plugs into the same players and tooling you'd already use. The whole thing is MIT-licensed and free. Developers who need simple animations but don't have a motion designer, or don't want to learn After Effects, are the target. It won't replace a real animator for complex, hand-crafted motion work. For spinners, icon transitions, and straightforward UI animation, it's a fast path from idea to code without leaving your editor. The catch: it leans on your AI agent, so the quality of what you get tracks the quality of your prompt and your model. Intricate animation is still beyond what a text prompt produces cleanly, this shines on the simple-to-moderate stuff. Think of it as a head start, not a finished motion-design studio.

video-shotcraft5.0k★

video-shotcraft is a skill you install into Claude Code or Codex that turns your coding agent into a motion-design studio. Ask it for a product video and it storyboards, animates real page captures with 3D camera moves, syncs cuts to a beat, and adds sound design, then renders the whole thing through Remotion. Apache-licensed, no API keys, free. It installs with `npx skills add` and runs inside the agent and Remotion toolchain you already have. Node 22, and if you're rendering headless on Linux you'll need a Chrome headless binary and low concurrency on small machines. Moderate setup, mostly because of the render pipeline, not the skill itself. This is the same pattern as the best agent skills: heavy, reusable assets (over a hundred shot recipes, motion previews, sound effects, ready-made Remotion components) plus a documented method, so the agent isn't improvising from scratch. For a solo developer or small team that needs product videos and doesn't want After Effects, it's a useful free option that lives right in your editor. Two catches. First, only one finished template ships today, so you're getting a strong framework with more promised rather than a full library right now. Second, it leans on Remotion, which is free for individuals and small teams but can require a paid license for companies, so check that before you ship commercial work. The skill is free; the render engine's licensing is the fine print.

baoyu-design3.4k★

Baoyu-design turns your AI coding agent into a UI designer. Describe a screen and it generates a polished, self-contained HTML mockup, prototype, wireframe, or even a slide deck, right inside Cursor or Claude Code. It's a local, MIT-licensed take on Anthropic's claude.ai/design feature, so you get that capability without the hosted product. It has grown fast. Version 1.2 added routing across 13 project types plus workflows for 3D objects, data visualization, HTML email, maps, and landing pages, on top of the design-system, deck, and mobile-layout skills it started with. Output is self-contained HTML with exports to PDF, editable PowerPoint, and into Figma or Canva. Install is a single command through the skills CLI, and it works across Claude Code, Cursor, Codex, and a long list of other agents. This is the open alternative to claude.ai/design, and it overlaps Figma AI, v0, and Lovable for spinning up mockups fast. It does not replace Figma as a collaborative design tool; it replaces the "generate me a first draft" step. Solo builders and small teams who want quick UI drafts: install it and go. The catch: quality leans hard on running a strong model, Opus 4.8 specifically, inside a paid coding agent, so "free" assumes you already pay for the agent underneath. It's also solo-maintained and reshaping itself release to release, so expect the shape of it to keep changing.

pixel2motion1.9k★

Pixel2motion takes a static logo and turns it into an animated SVG, through your AI coding agent. Hand it a PNG, JPG, or WebP and it produces a smooth animated vector, an interactive HTML demo, GIF and video previews, and automated checks on the animation quality. It is aimed squarely at brand and logo motion work, MIT-licensed and free. Setup is heavier than most agent skills. The rendering and QA run locally and lean on a real toolchain: Python 3.10+, Pillow, NumPy, and Playwright driving a headless Chrome. So 'install and go' here means installing that stack first. It is also young, around twenty commits, and tied to running inside Claude Code or Codex rather than working standalone. This is for designers and developers who already live in an AI agent and want logo animation without opening After Effects. Solo or team, it is free. Skip it if you do not work inside an agent, or if you only need a single animation, in which case a motion designer or a one-off tool is less setup than standing up Playwright and Chrome. The catch is the toolchain and the maturity. The idea is sharp and the built-in QA step is a nice touch, but you pay for it in local dependencies and early-project rough edges. For polished, hand-crafted brand motion, this is a starting point, not a replacement for a real animator.

beautify-github-readme1.6k★

beautify-github-readme is an agent skill that redesigns your project's README. It reads the actual repository first, works out what the project does and what evidence exists that it works, then builds a page around that: custom SVG title art, a real content hierarchy, and embedded proof. Install with `npx skills add oil-oil/beautify-github-readme`. MIT licensed. Two modes: a full README redesign, or assets only when you just want a hero image or a diagram and intend to write the copy yourself. The constraint that matters is that it keeps text in Markdown rather than baking it into images, so the README stays searchable and diffable. Plenty of pretty-README templates fail exactly there. Maintainers of small and mid-size open source projects get the most out of this, especially anyone whose README is currently a wall of installation steps. Larger projects usually have design help already. Free, with the cost being whatever agent you run it through. The catch: the entire pitch is that it derives a project-native look rather than stamping one template, and the four sample heroes genuinely do look nothing alike. Whether that holds after a few thousand repos push their READMEs through the same skill and the same model is the open question, and nobody knows yet. Use it for structure and hierarchy, which is where the value sits either way, and give the generated art a hard look before you ship it.

oil-motion1.5k★

Oil-motion is an agent skill that manufactures scroll-driven web animations using AI video generation. The agent locks keyframes, has a video model fill the motion between them, reviews the frames, and ships a sprite sheet or chroma-keyed MP4 wired to scroll position. At 30% scroll you see frame 30. MIT licensed, but the workflow requires a paid ZenMux API key, so every animation costs real money per generation. Setup is Python, Pillow, and ffmpeg plus the key, and the pipeline expects a human to approve keyframes and review output. The skill's docs are in Chinese, which matters since the agent reads them to do the work. Its own docs draw the right line: for ordinary translation, scale, and rotation, write code; GSAP and Motion do that deterministically and free. The paid generation only earns its cost for what it calls semantic motion, product teardowns and material changes that CSS transforms can't fake. The catch: output is baked at build time, regeneration can drift your product's proportions, and days-old viral projects have no track record. A hand-built GSAP timeline is still the default answer.

gbro-collage-broll1.1k★

gbro-collage-broll is an agent skill that turns a five-second voiceover line into a matching B-roll clip in an editorial halftone paper-collage style. Clone it into your agent skills directory and it walks a three-gate workflow: confirm the visual metaphor as text, approve a static frame, then generate the video. MIT licensed. Those gates are the design decision worth noting. Video generation is the expensive step, so the skill makes you sign off on the concept and then the still image before it spends anything. Requirements are a Codex environment, a Gemini API key, Python 3.10+, google-genai, and ffmpeg. Gate 2 leans on Codex's built-in `image_gen` tool for the static frame, so this is a Codex skill first even though it drops into any skills directory. Output is a silent 720x1280 nine-by-sixteen MP4 at 24fps. Solo creators and small video teams producing short vertical content are the audience. The skill itself costs nothing. Google's video generation API is where the money goes, and at five seconds a clip a finished video means a lot of calls, so price that out before you build a workflow around it. The catch: one aesthetic. Halftone paper collage is a strong look and a narrow one, and every clip you make will match every clip anyone else makes with this skill. Output is also silent by design, so audio stays your problem. Useful as one texture in an edit, not as your whole visual language.

lanshu-animated-architecture-diagram884★

This is a skill for coding agents that turns a JSON spec into a hand-drawn-style architecture diagram, the kind you see in polished technical explainers. Feed it a description of your system and it renders three things at once: an editable Excalidraw file, a static PNG, and an animated GIF with flowing connection lines. It runs locally with Pillow, no external API, no headless browser, and it's MIT licensed. Setup is about as light as it gets. Python and Pillow, no GPU, no Docker, no keys. The AI half runs inside whatever agent you already use, Codex or Claude Code, so the skill itself adds nothing to your bill. It even does a frame-diff check to confirm the GIF actually animates, which is a small touch that shows the author cared. Set your expectations to match the scope. This is a single-author micro-tool with one fixed layout preset and a narrow job: making one specific style of dark-canvas diagram look good. If that's the look you want for a blog post or docs, it's a fast way to get there. If you need flexible diagramming, Excalidraw itself, Mermaid, or D2 give you far more control. Use this when you want the animated explainer aesthetic without hand-placing every box, and nothing more.

handdraw-story-video723★

handdraw-story-video turns a set of 7 to 9 hand-drawn illustrations into a 35 to 45 second vertical video where the line art draws itself in and then fills with color, left to right. It is a real build pipeline you clone and run, not a hosted service. MIT on the code. Setup is the heaviest thing about it. Python 3.10+, Node 18+, FFmpeg, plus HyperFrames and GSAP from npm. You configure a story JSON with your scene data, run a script that extracts line art from your color images, drop the assets into place, then build and render. The render pipeline needs no API keys and no external services, which is unusual in this space right now, though in practice most people will generate the color master images with an image model first. Illustrators and small content teams making short-form vertical video are the fit. The repo root conforms to the Codex Skill structure, so you can install it into your skills directory and trigger it from an agent instead of running the commands yourself. Free at every size, since the only compute is your own machine. The catch: it does exactly one visual effect. Line reveal, then gradual coloring, vertical format, fixed length band. That is a template, and templates go stale fast on the platforms this targets. The MIT license also covers code only, so the fonts, music, and any generated images you feed it carry their own terms.