ink

Solid

Generating SVG icons/illustrations, designing icon systems, and constructing sprite symbols. Use when vector assets are needed.

AI & Automation 72 stars 14 forks Updated today MIT

Install

View on GitHub

Quality Score: 85/100

Stars 20%
62
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

<!-- CAPABILITIES_SUMMARY: - icon_generation: Generate custom SVG icons with consistent stroke/fill/grid - icon_system: Design icon libraries compatible with Lucide/Heroicons/Phosphor conventions - illustration: Create SVG illustrations (hero images, spot illustrations, decorative elements) - sprite_system: Build SVG sprite sheets and symbol systems - consistency_audit: Audit icon sets for stroke width, corner radius, grid alignment consistency - animated_svg: Generate CSS-primary animated SVG icons and micro-interactions; SMIL for portable standalone SVG only - accessibility: Ensure aria-label, role, title attributes for all SVG assets - optimization: Optimize SVG output (SVGO rules, path simplification, viewBox normalization) - variable_font_icons: Variable Font icon systems (weight/optical-size axes, Google Material Symbols, responsive icons that scale with text) - color_mix_theming: Icon theming with currentColor + color-mix() for automatic hover/disabled state derivation from semantic tokens - modern_css_svg_animation: SVG integration with View Transitions API, Scroll-Driven Animations, and @starting-style for enter animations COLLABORATION_PATTERNS: - Vision -> Ink: Design direction for icon style and illustration mood - Muse -> Ink: Design tokens (colors, spacing) for icon palette - Frame -> Ink: Figma design context for icon specifications - Ink -> Artisan: SVG components for React/Vue integration - Ink -> Vitrine: Icon stories for Storybook catalog BIDIRECTIONAL_PA...

Details

Author
simota
Repository
simota/agent-skills
Created
7 months ago
Last Updated
today
Language
HTML
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

animating-icons

Author, review, or batch-produce SVG icon hover gestures and icon↔icon morphs (Hugeicons/Lucide/Phosphor). Use for animated icon, icon hover, per-icon gesture, icon morph, menu↔cross, stroke-dashoffset draw-on, pathLength, transform-box. Not for page transitions, Lottie, or general UI chrome motion.

27 Updated yesterday
SoraLabsOSS
Web & Frontend Listed

ui-asset-sourcing

Source the actual assets a website or app needs — icons, imagery, logos, avatars, empty-state art — without hallucinating SVG paths, shipping emoji as icons, or dropping in stock photos that fight the palette. Trigger for "what icons should I use", "给这个网站配图", "add icons to this UI", "generate a hero image for this landing page", "这个空状态要放什么插图", "need a logo for this brand", or whenever a design direction exists and the remaining gap is the visual material to fill it. Names which icon set fits which aesthetic, how to fetch real icon and brand SVGs rather than inventing path data, and how to generate on-palette imagery with Aria Code's own image tools (`aria.report.generate_image_local` free/local, or `aria.report.generate_image` paid) when a stock photo would be wrong. Do NOT trigger to choose the design direction itself (use `industry-design-direction`) or to compile a single editorial poster (`minimal-editorial-poster`). Portable: self-contained prose, no script dependency.

2 Updated yesterday
artherahq
AI & Automation Solid

svg-infographic

Author technical/structured SVG infographics and diagrams, then render them to crisp PNG with a headless browser. Best for architecture diagrams, topology maps, flows, before/after comparisons, nested/onion layer models, roadmaps, decision matrices, and social-ready technical one-pagers. Prefers clean line icons in soft tinted circles. First-class Korean/CJK text. Includes an opt-in "tidy hand-drawn" sketch preset (paper background, Korean handwriting font, rough strokes, highlighter). Not for photo-heavy or illustration-heavy graphics, statistical charts, or mascot/character illustration.

72 Updated today
kyungseo