Найти навыки

Авторские процессы для сайтов, изображений, презентаций и анимации.

21 навыковпо запросу “svg”
An illustrated furniture assembly guide in the author's IKEA manual infographic style.
Бесплатно
Изображения

SVG Diagram

Create standalone SVG diagrams for flows, architecture, timelines and other structured explanations.

27,5 тыс.Звёзды3 тыс.Форки
Последний push репозитория

SVG diagramming conventions blending a technical look with CJK-friendly typography. Use when creating flowcharts, architecture diagrams, and similar SVG figures. For one-shot generation, prefer invoking it from a subagent so the main context does not have to carry this skill plus the SVG XML; for multi-round tweaking, use it directly in the main context.

  • svg
  • diagrams
670Звёзды44Форки
Последний push репозитория
Бесплатно
Веб и интерфейсы

Anatomy

Turn technical concepts into interactive isometric machines: detailed SVG illustrations, WebGL effects and optional 3D motion, as HTML, SVG or React components.

26,8 тыс.Звёзды2,3 тыс.Форки
Последний push репозитория
The author's Flat Icon animation of a Mem0 memory architecture, showing memory extraction, storage, and retrieval.
Бесплатно
Изображения

Fireworks Tech Graph

Turn English or Chinese descriptions into technical SVG diagrams with Codex or Claude Code. Create architecture and workflow diagrams, export PNG or offline interactive HTML, and animate supported scenes as GIFs.

12 тыс.Звёзды936Форки
Последний push репозитория
Beautify GitHub README — Kubernetes README hero example with a black system layout and cluster relationship diagram.
Бесплатно
Изображения

Beautify GitHub README

Redesign GitHub README pages and create project-specific SVG, composed PNG or WebP, and optional animated graphics.

2 тыс.Звёзды132Форки
Последний push репозитория
Night view of an illustrated Japanese street in pale ink, with warm lit windows and a crescent moon.
Бесплатно
Видео и анимация

Line-art Animation

Build animated ink-on-paper illustrations in SVG and TypeScript, from walking figures to interactive day-night scenes and deterministic video captures.

759Звёзды124Форки
Последний push репозитория
Overview of 28 fictional brand logos from the upstream README.
Бесплатно
Изображения

Logo Design

Design and critique SVG logos with three tested concepts, brand guidelines, presentation mockups and favicon or app-icon exports.

6,7 тыс.Звёзды528Форки
Последний push репозитория
SeeCode Diagrams — Bar chart export
Бесплатно
Изображения

SeeCode Diagrams

Create animated and explorable diagrams from compact JSON specifications, with scripted layout, styling, motion, and export workflows.

934Звёзды68Форки
Последний push репозитория

Create reports, invoices and other PDFs with React components, reusable layouts, SVG graphics and controlled page breaks.

  • pdf
  • react
  • document-generation
170Звёзды11Форки
Последний push репозитория
Animated dialog specification drawing with dimension lines, camera pullbacks, and an exploded layer view.
Бесплатно
Видео и анимация

Dimensional Drawing Motion

Animate a finished dimensional drawing into an 8–15 second film with progressive strokes, camera moves, and lifted layers, using Claude Motion or a headless renderer.

2,1 тыс.Звёзды149Форки
Последний push репозитория
The author's light-theme demo: an agent prompt becomes an architecture diagram, followed by a diagram redesign and the gallery.
Бесплатно
Изображения

Diagram Design

Create editorial diagrams in your brand with an AI agent. Supports architecture, flowcharts, data charts, and redraws from Mermaid, draw.io, and Excalidraw, with HTML, SVG, and PNG output.

66,6 тыс.Звёзды4,4 тыс.Форки
Последний push репозитория

Generate cohesive, project-specific SVG icon sets for websites and applications. Use this skill whenever the user needs custom icons, an icon set for a website or app, icons for a client project, or mentions needing SVG icons that look consistent together. Also trigger when the user describes a project and icons would naturally be part of the deliverable — e.g. 'I'm building a site for a plumber' implies they'll need service icons. Trigger on: 'icons for', 'icon set', 'custom icons', 'SVG icons', 'make me icons', 'I need icons', 'website icons', 'project icons', or any request for consistent visual assets for a web project. Produces individual SVG files with a consistent style engine, not generic icon library lookups.

  • svg
  • icon design
1,1 тыс.Звёзды110Форки
Последний push репозитория
Animated dialog specification drawing with dimension lines, camera pullbacks, and an exploded layer view.
Бесплатно
Изображения

Dimensional Drawing Sheets

Create a self-contained HTML specification sheet with monochrome SVG views, measured variables, exploded layers, and detailed component geometry.

2,1 тыс.Звёзды149Форки
Последний push репозитория

Create an HTML architecture overview with SVG data flows and deployment context.

  • diagrams
  • architecture
694Звёзды98Форки
Последний push репозитория

Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global threshold, then into a choreographed logo animation delivered as standalone JS-rendered HTML, applying Disney's 12 animation principles. Use when asked to animate a logo, build a logo reveal / splash screen / brand intro, convert a logo image into animated SVG or HTML, add motion to a vectorized mark, or create loading/idle/hover motion for a brand mark. v2: also handles self-crossing draw-on choreography (split-fill, exact easing subdivision, tip glint), closed variable-width ribbon fitting, and quantitative motion QA (easing probe, ink-delta continuity sweep).

  • motion graphics
  • image
2,7 тыс.Звёзды214Форки
Последний push репозитория
Pretty Mermaid Skills — Pretty Mermaid converts Mermaid source into themed SVG, PNG, and terminal ASCII diagrams
Бесплатно
Изображения

Pretty Mermaid Skills

Create and render Mermaid diagrams as themed SVG, PNG, or terminal-friendly text for architecture notes, READMEs, and technical discussions.

1,6 тыс.Звёзды78Форки
Последний push репозитория
Exploded technical illustration of a hard disk drive, with its cover, head assembly, platters, enclosure and circuit board.
Бесплатно
Изображения

Teardown: Technical Illustrations

Create technical illustrations with coherent views and an interactive export page.

12,1 тыс.Звёзды468Форки
Последний push репозитория
Agent Vision Toolkit — HTML and CSS reconstruction of the model-training infographic
Бесплатно
Другие инструменты

Agent Vision Toolkit

Equip text-only agents with image questions, OCR, target localization, cropping, SVG tracing, and screenshot comparison tools.

1,3 тыс.Звёзды50Форки
Последний push репозитория

design skill for Claude AI. Grade A. Turn a static character or asset image into a looping animated character, delivered as a moving SVG plus animated WebP and GIF. Use this whenever the user wants to animate, bring to life, or "make move" a character, mascot, logo, creature, sprite, icon, or any asset image — or wants a moving/animated SVG, WebP, or GIF made from an image — or mentions generating a sprite sheet animation, or names "Nano Banana 2" / Gemini image generation for animation. Also use it to convert an EXISTING sprite...

  • design
  • python
  • go
14Звёзды1Форки
Последний push репозитория

MARP Slides

robonuggets

Create Marp presentations from Markdown with SVG charts, dashboard components and reference decks, then export to HTML, PDF or PowerPoint.

  • ppt
  • presentations
  • markdown
334Звёзды58Форки
Последний push репозитория

GSAP Plugins

greensock

Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools.

  • gsap
  • animation
18,3 тыс.Звёзды1,2 тыс.Форки
Последний push репозитория

Небольшая библиотека, созданная с заботой. Скоро появятся новые навыки.