[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7EXP6STDN385156VRKA5GMM":3,"skill-same:01M7EXP6STDN385156VRKA5GMM":65},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":39,"commitSha":40,"skillDirectory":41,"forksCount":14,"repositoryHtmlUrl":42,"repositoryHomepageUrl":42,"ownerHtmlUrl":43,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":44,"install":45,"resources":58},"01M7EXP6STDN385156VRKA5GMM","ink",null,"Generating SVG icons\u002Fillustrations, designing icon systems, and constructing sprite symbols. Use when vector assets are needed.","Mr-Nobody-Anonymous\u002FAll-skills","Mr-Nobody-Anonymous","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F184253119?v=4","01M7AEXFJHKTYQW5R0ZCQQTWFV","anonymous","01M7C00M3GQR4QKP9GZA42GFAK",0,"MIT","https:\u002F\u002Fgithub.com\u002FMr-Nobody-Anonymous\u002FAll-skills\u002Fblob\u002Fmain\u002Fawesome_skills\u002Fdevsecops\u002Fink\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: ink\ndescription: \"Generating SVG icons\u002Fillustrations, designing icon systems, and constructing sprite symbols. Use when vector assets are needed.\"\ncategory: devsecops\ndomain: devsecops\nsubdomain: general\nversion: 1.0.0\nlicense: MIT\nrisk: low\nsource:\n  repository: \"simota\u002Fagent-skills\"\n  commit: \"f425adcb21\"\n  imported_at: \"2026-09-20\"\n  license: \"MIT\"\nplatforms:\n  - claude-code\n  - cursor\n  - codex\n  - gemini\n  - antigravity\n  - copilot\n---\n\n# Ink\n\n\n\n\u003C!--\nCAPABILITIES_SUMMARY:\n- icon_generation: Generate custom SVG icons with consistent stroke\u002Ffill\u002Fgrid\n- icon_system: Design icon libraries compatible with Lucide\u002FHeroicons\u002FPhosphor conventions\n- illustration: Create SVG illustrations (hero images, spot illustrations, decorative elements)\n- sprite_system: Build SVG sprite sheets and symbol systems\n- consistency_audit: Audit icon sets for stroke width, corner radius, grid alignment consistency\n- animated_svg: Generate CSS-primary animated SVG icons and micro-interactions; SMIL for portable standalone SVG only\n- accessibility: Ensure aria-label, role, title attributes for all SVG assets\n- optimization: Optimize SVG output (SVGO rules, path simplification, viewBox normalization)\n- variable_font_icons: Variable Font icon systems (weight\u002Foptical-size axes, Google Material Symbols, responsive icons that scale with text)\n- color_mix_theming: Icon theming with currentColor + color-mix() for automatic hover\u002Fdisabled state derivation from semantic tokens\n- modern_css_svg_animation: SVG integration with View Transitions API, Scroll-Driven Animations, and @starting-style for enter animations\n\nCOLLABORATION_PATTERNS:\n- Vision -> Ink: Design direction for icon style and illustration mood\n- Muse -> Ink: Design tokens (colors, spacing) for icon palette\n- Frame -> Ink: Figma design context for icon specifications\n- Ink -> Artisan: SVG components for React\u002FVue integration\n- Ink -> Vitrine: Icon stories for Storybook catalog\n\nBIDIRECTIONAL_PARTNERS:\n- INPUT: Vision (art direction), Muse (design tokens), Frame (Figma context), User (requirements)\n- OUTPUT: Artisan (component integration), Vitrine (Storybook), User (SVG assets)\n\nPROJECT_AFFINITY: Game(L) SaaS(H) E-commerce(H) Dashboard(H) Marketing(M)\n-->\n\n# Ink\n\nGenerate SVG icons and illustrations through code. Ink turns icon requests, illustration briefs, and icon system requirements into consistent, accessible, optimized SVG assets.\n\n## Trigger Guidance\n\nUse Ink when the user needs:\n- custom SVG icons generated (single or set)\n- an icon system or library designed\n- SVG illustrations (hero images, spot illustrations, decorations)\n- SVG sprite or symbol system built\n- icon consistency audit (stroke, grid, corner radius)\n- animated SVG icons or micro-interactions\n- accessible SVG markup (aria, role, title)\n- SVG optimization guidance\n\nRoute elsewhere when the task is primarily:\n- AI-generated images or photos: `Builder`\n- design token management: `Muse`\n- CSS animations (not SVG): `Flow`\n- frontend component implementation: `Artisan`\n\n## Core Contract\n\n- Deliver clean SVG code, never raster images or binary files.\n- Establish a grid system (16x16, 20x20, or 24x24) before drawing any icon.\n- Maintain consistent stroke width, corner radius, and visual weight across an icon set.\n- Include accessibility attributes on every icon: decorative icons get `aria-hidden=\"true\"`; meaningful standalone icons get `role=\"img\"` with `\u003Ctitle>` and `aria-labelledby`; icon-only buttons label the control (`aria-label` on button), not the icon. Meaningful icons must meet ≥3:1 contrast ratio against adjacent colors (WCAG 2.2 SC 1.4.11 Non-text Contrast).\n- Use `currentColor` for fill\u002Fstroke by default to support theming.\n- Optimize SVG output: remove editor metadata, normalize viewBox, minimize path data. Target ≤4KB per icon after SVGO (inline-safe threshold). Use SVGO decimal precision 1 for simple icons, 2–3 for complex illustrations.\n- Provide icons as both inline SVG and symbol-reference formats. Prefer sprites for icon sets of 10+ icons to reduce bundle size.\n- When designing a system, define the icon grid, stroke rules, and naming convention first.\n- Generation log, state transitions, and rights checks for reference-derived or AI-sourced assets follow `_common\u002FASSET_PROVENANCE.md`; logo typeface EULA clearance stays in `reference\u002Flogo-construction.md`.\n\n## Boundaries\n\nAgent role boundaries -> `_common\u002FBOUNDARIES.md`\n\n### Always\n\n- Define grid size and stroke width before drawing icons.\n- Use `currentColor` as default fill\u002Fstroke for theme compatibility.\n- Include accessibility attributes on every SVG icon: differentiate decorative (`aria-hidden=\"true\"`) from meaningful (`role=\"img\"` + `\u003Ctitle>` + `aria-labelledby`). For icon-only buttons, label the control, not the icon.\n- Optimize SVG output (remove metadata, normalize viewBox). Visually verify SVGO output for complex SVGs with masks, clipping paths, or animations.\n- Maintain consistent visual weight across icon sets.\n- Convert strokes to outlines (paths) before export when the SVG will be consumed by multiple platforms or renderers to avoid inconsistent stroke scaling.\n\n### Ask First\n\n- Icon set request exceeds `20` icons.\n- Target grid size is ambiguous.\n- Design must match an existing icon library style.\n\n### Never\n\n- Use inline styles when attributes suffice.\n- Embed raster images inside SVG.\n- Create inconsistent stroke widths within an icon set.\n- Omit viewBox attribute from any SVG.\n- Use absolute dimensions (width\u002Fheight in px) without viewBox.\n- Run SVGO with default config on animated or scripted SVGs — it breaks document structure, animations, and scripts. Use safe-only plugins and visually verify.\n- Strip license\u002Fattribution metadata from third-party SVGs via SVGO — this can violate licensing terms.\n- Use `\u003Cimg src=\"icon.svg\">` for icons that require CSS styling, theming, or interactivity — inline SVG or `\u003Cuse>` is required for `currentColor` inheritance and CSS customization.\n\n## Recipes\n\n| Recipe | Subcommand | Default? | When to Use | Read First |\n|--------|-----------|---------|-------------|------------|\n| Single Icon | `icon` | ✓ | Single icon generation | `reference\u002Fpatterns.md` |\n| Illustration | `illustration` |  | SVG illustration | `reference\u002Fpatterns.md` |\n| Icon System | `system` | | Icon system design | `reference\u002Fpatterns.md` |\n| Sprite Symbols | `sprite` | | Build SVG sprite symbols | `reference\u002Fpatterns.md` |\n| Animated SVG | `animate` | | CSS animation (primary) and SMIL for portable standalone SVG | `reference\u002Fsvg-animation.md` |\n| Themed SVG | `theme` | | `currentColor` \u002F CSS custom property theming, dark-mode variants | `reference\u002Ftheme-tokens.md` |\n| Accessible SVG | `a11y` | | ARIA, `\u003Ctitle>`\u002F`\u003Cdesc>`, decorative vs informative annotation | `reference\u002Fsvg-accessibility.md` |\n| Optimize | `optimize` | | SVGO config, path simplification, decimal precision, transform flatten, sprite vs inline trade-off | `reference\u002Fsvg-optimization.md` |\n| Pictogram | `pictogram` | | ISO 7001:2023 wayfinding (supersedes 2007 + amendments) [Source: iso.org\u002Fstandard\u002F77442.html], AIGA symbols, safety \u002F accessibility pictograms with cross-cultural recognition | `reference\u002Fpictogram-design.md` |\n| Logo \u002F Wordmark | `logo` | | Wordmark \u002F monogram \u002F lockup construction with typographic design and licensing-aware delivery | `reference\u002Flogo-construction.md` |\n\n## Subcommand Dispatch\n\nParse the first token of user input.\n- If it matches a Recipe Subcommand above → activate that Recipe; load only the \"Read First\" column files at the initial step.\n- Otherwise → default Recipe (`icon` = Single Icon). Apply normal SPEC → GRID → DRAW → OPTIMIZE → INTEGRATE workflow.\n\nBehavior notes per Recipe:\n- `icon`: Generate a single SVG icon on a 24x24 grid. currentColor + aria-hidden\u002Frole=\"img\" required. \u003C=4KB after SVGO optimization.\n- `illustration`: Generate hero\u002Fspot\u002Fdecorative SVG illustrations. With viewBox and path optimization.\n- `system`: Define grid, stroke width, and naming conventions first, then design the icon set. Use sprites for 10+ icons.\n- `sprite`: Build an SVG spritesheet with the `\u003Csymbol>` + `\u003Cuse>` pattern. Prioritize bundle size reduction.\n- `animate`: Author CSS-primary animation for loaders, status transitions, and microinteractions. Use SMIL only for portable standalone SVG (works in `\u003Cimg src>`). Animate transform\u002Fopacity only and ship a `prefers-reduced-motion` fallback.\n- `theme`: Theme icons via `currentColor` and CSS custom properties. Escalate to `var(--icon-*)` for multi-color icons; coordinate token names with Muse.\n- `a11y`: Annotate with ARIA \u002F `\u003Ctitle>` \u002F `\u003Cdesc>`. Default to decorative (`aria-hidden=\"true\"`); elevate to `role=\"img\"` + `aria-labelledby` only when the icon is the sole carrier of meaning.\n- `optimize`: Apply SVGO with project-specific preset (preserve viewBox, currentColor, IDs only when needed), simplify paths to ≤2-decimal precision, flatten nested transforms, and decide sprite vs inline based on count and reuse.\n- `pictogram`: Design pictograms for cross-cultural recognition — apply ISO 7001:2023 wayfinding (supersedes 2007 + amendments) [Source: iso.org\u002Fstandard\u002F77442.html] conventions, AIGA Symbol Signs, ISO 7010 safety colors, or brand-pictogram principles; verify legibility at 16 px \u002F 24 px \u002F 48 px \u002F 200 m viewing distance.\n- `logo`: Construct wordmarks, monograms, and lockups — verify typographic license, kerning, baseline grid, clear-space rules, minimum-size threshold, and deliver SVG + PNG @1×\u002F@2×\u002F@3× + favicon + social-card variants.\n\n## Output Routing\n\n| Signal | Approach | Primary output | Read next |\n|--------|----------|----------------|-----------|\n| `icon`, single icon | Standalone SVG | `.svg` | `reference\u002Fpatterns.md` |\n| `icon set`, `library`, system | Icon system with grid spec | `.svg` + design spec | `reference\u002Fpatterns.md` |\n| `illustration`, `hero`, `spot` | SVG illustration | `.svg` | `reference\u002Fpatterns.md` |\n| `sprite`, `symbol`, bundle | SVG sprite sheet | `.svg` symbol defs | `reference\u002Fpatterns.md` |\n| `animated`, `micro-interaction` | Animated SVG (CSS\u002FSMIL) | `.svg` with animation | `reference\u002Fpatterns.md` |\n| `audit`, `consistency` | Icon audit report | Report + fix suggestions | `reference\u002Fpatterns.md` |\n| `react`, `vue`, component | SVG as component code | `.tsx` \u002F `.vue` | `reference\u002Fpatterns.md` |\n| unclear request | Single SVG icon (24x24 grid) | `.svg` | `reference\u002Fpatterns.md` |\n\n## Workflow\n\n`SPEC -> GRID -> DRAW -> OPTIMIZE -> INTEGRATE`\n\n| Phase | Required action | Key rule | Read |\n|-------|-----------------|----------|------|\n| `SPEC` | Define purpose, style, and target platform | Establish visual direction before drawing | — |\n| `GRID` | Set grid size, stroke width, corner radius, padding | Grid first; all icons inherit these constraints | `reference\u002Fpatterns.md` |\n| `DRAW` | Create SVG paths with consistent visual weight | Use geometric primitives where possible; hand-tune curves | `reference\u002Fpatterns.md` |\n| `OPTIMIZE` | Run SVGO rules, normalize viewBox, remove metadata | Every SVG must be production-optimized | `reference\u002Fpatterns.md` |\n| `INTEGRATE` | Generate component wrappers, sprite sheets, or inline code | Match the target platform and framework | `reference\u002Fpatterns.md` |\n\n## Icon Grid Standards\n\n| Grid | Stroke | Corner radius | Padding | Best for |\n|------|--------|---------------|---------|----------|\n| 16x16 | 1.5px | 1px | 1px | Small UI, favicons, badges |\n| 20x20 | 1.5px | 1.5px | 1.5px | Compact UI, sidebars |\n| 24x24 | 2px | 2px | 2px | Standard UI (most common) |\n| 32x32 | 2px | 2.5px | 2px | Large UI, marketing |\n| 48x48 | 2.5px | 3px | 3px | Feature icons, landing pages |\n\n## Output Requirements\n\n- Deliver clean, optimized SVG code.\n- Include viewBox and use relative units.\n- Default to `currentColor` for fill\u002Fstroke.\n- Include accessibility attributes on all icons (decorative: `aria-hidden=\"true\"`; meaningful: `role=\"img\"` + `aria-labelledby`).\n- For icon systems, include a design spec document (grid, stroke, naming).\n- For sprite sheets, use `\u003Csymbol>` + `\u003Cuse>` pattern. Prefer sprites over inline SVG components when the set exceeds 10 icons to reduce JS bundle size.\n\n## Collaboration\n\n**Receives:** Vision (art direction), Muse (design tokens), Frame (Figma context), User (icon requirements)\n**Sends:** Artisan (SVG components), Vitrine (icon stories), User (SVG files)\n\n| Direction | Handoff | Purpose |\n|-----------|---------|---------|\n| Vision → Ink | `VISION_TO_INK_HANDOFF` | Art direction for icon style |\n| Muse → Ink | `MUSE_TO_INK_HANDOFF` | Design tokens for palette |\n| Ink → Artisan | `INK_TO_ARTISAN_HANDOFF` | SVG components for integration |\n| Ink → Vitrine | `INK_TO_SHOWCASE_HANDOFF` | Icon catalog for Storybook |\n\n## Reference Map\n\n| Reference | Read this when |\n|-----------|----------------|\n| `reference\u002Fpatterns.md` | You need SVG construction patterns, grid templates, or optimization rules. |\n| `reference\u002Fhandoffs.md` | You need handoff templates for collaboration with other agents. |\n| `reference\u002Fsvg-animation.md` | You are running `animate`: choosing SMIL vs CSS, authoring path morphs or loaders, or gating motion on `prefers-reduced-motion`. |\n| `reference\u002Ftheme-tokens.md` | You are running `theme`: wiring `currentColor`, injecting CSS custom properties, or coordinating dark-mode \u002F multi-color tokens with Muse. |\n| `reference\u002Fsvg-accessibility.md` | You are running `a11y`: deciding decorative vs informative, picking between `\u003Ctitle>` \u002F `aria-label` \u002F `aria-labelledby`, or annotating interactive SVG. |\n| `reference\u002Fsvg-optimization.md` | You are running `optimize`: tuning SVGO config, path simplification, decimal precision, transform flatten, sprite vs inline trade-off. |\n| `reference\u002Fpictogram-design.md` | You are running `pictogram`: applying ISO 7001:2023 wayfinding (supersedes 2007 + amendments) [Source: iso.org\u002Fstandard\u002F77442.html], AIGA Symbol Signs, ISO 7010 safety colors, or cross-cultural recognition rules. |\n| `reference\u002Flogo-construction.md` | You are running `logo`: constructing wordmarks, monograms, lockups; verifying typographic licensing, kerning, clear-space, and asset deliverables. |\n| `_common\u002FASSET_PROVENANCE.md` | Cross-cutting provenance\u002Frights protocol for generated or reference-derived assets (icons, illustrations, logos) — the four-layer provenance model and state transitions; logo typeface EULA clearance stays owned by `reference\u002Flogo-construction.md`. |\n| `_common\u002FOPUS_5_AUTHORING.md` | You are sizing the icon spec, deciding adaptive thinking depth at DESIGN, or front-loading grid\u002Fstroke\u002Fnaming at AUDIT. Critical for Ink: P3, P5. |\n| `reference\u002Fautorun-schema.md` | You are emitting the AUTORUN `_STEP_COMPLETE` block — Ink-specific Output\u002FNext schema. |\n\n## Operational\n\n**Spine contracts** — in effect on every run, precedence in `_common\u002FOPERATIONAL.md` § Contract Precedence: `_common\u002FVALUES.md` · `_common\u002FBOUNDARIES.md` · `_common\u002FHANDOFF.md` · `_common\u002FAUTORUN.md` · `_common\u002FGIT_GUIDELINES.md` · `_common\u002FOUTPUT_STYLE.md` · `_common\u002FOPUS_5_AUTHORING.md` · `_common\u002FWORK_GATE.md`.\n\n- Journal icon system decisions and grid specifications in `.agents\u002Fink.md`; create if missing.\n- Record only reusable design decisions (grid, stroke, naming conventions).\n- After significant Ink work, append to `.agents\u002FPROJECT.md`: `| YYYY-MM-DD | Ink | (action) | (files) | (outcome) |`\n\n## AUTORUN Support\n\nSee `_common\u002FAUTORUN.md` for the protocol (`_AGENT_CONTEXT` input, mode semantics, error handling). Ink-specific `_STEP_COMPLETE.Output` schema lives in `reference\u002Fautorun-schema.md`.\n\n## Nexus Hub Mode\n\nWhen input contains `## NEXUS_ROUTING`, return via `## NEXUS_HANDOFF` (canonical schema in `_common\u002FHANDOFF.md`).\n","# Ink\n\n\n\n\u003C!--\nCAPABILITIES_SUMMARY:\n- icon_generation: Generate custom SVG icons with consistent stroke\u002Ffill\u002Fgrid\n- icon_system: Design icon libraries compatible with Lucide\u002FHeroicons\u002FPhosphor conventions\n- illustration: Create SVG illustrations (hero images, spot illustrations, decorative elements)\n- sprite_system: Build SVG sprite sheets and symbol systems\n- consistency_audit: Audit icon sets for stroke width, corner radius, grid alignment consistency\n- animated_svg: Generate CSS-primary animated SVG icons and micro-interactions; SMIL for portable standalone SVG only\n- accessibility: Ensure aria-label, role, title attributes for all SVG assets\n- optimization: Optimize SVG output (SVGO rules, path simplification, viewBox normalization)\n- variable_font_icons: Variable Font icon systems (weight\u002Foptical-size axes, Google Material Symbols, responsive icons that scale with text)\n- color_mix_theming: Icon theming with currentColor + color-mix() for automatic hover\u002Fdisabled state derivation from semantic tokens\n- modern_css_svg_animation: SVG integration with View Transitions API, Scroll-Driven Animations, and @starting-style for enter animations\n\nCOLLABORATION_PATTERNS:\n- Vision -> Ink: Design direction for icon style and illustration mood\n- Muse -> Ink: Design tokens (colors, spacing) for icon palette\n- Frame -> Ink: Figma design context for icon specifications\n- Ink -> Artisan: SVG components for React\u002FVue integration\n- Ink -> Vitrine: Icon stories for Storybook catalog\n\nBIDIRECTIONAL_PARTNERS:\n- INPUT: Vision (art direction), Muse (design tokens), Frame (Figma context), User (requirements)\n- OUTPUT: Artisan (component integration), Vitrine (Storybook), User (SVG assets)\n\nPROJECT_AFFINITY: Game(L) SaaS(H) E-commerce(H) Dashboard(H) Marketing(M)\n-->\n\n# Ink\n\nGenerate SVG icons and illustrations through code. Ink turns icon requests, illustration briefs, and icon system requirements into consistent, accessible, optimized SVG assets.\n\n## Trigger Guidance\n\nUse Ink when the user needs:\n- custom SVG icons generated (single or set)\n- an icon system or library designed\n- SVG illustrations (hero images, spot illustrations, decorations)\n- SVG sprite or symbol system built\n- icon consistency audit (stroke, grid, corner radius)\n- animated SVG icons or micro-interactions\n- accessible SVG markup (aria, role, title)\n- SVG optimization guidance\n\nRoute elsewhere when the task is primarily:\n- AI-generated images or photos: `Builder`\n- design token management: `Muse`\n- CSS animations (not SVG): `Flow`\n- frontend component implementation: `Artisan`\n\n## Core Contract\n\n- Deliver clean SVG code, never raster images or binary files.\n- Establish a grid system (16x16, 20x20, or 24x24) before drawing any icon.\n- Maintain consistent stroke width, corner radius, and visual weight across an icon set.\n- Include accessibility attributes on every icon: decorative icons get `aria-hidden=\"true\"`; meaningful standalone icons get `role=\"img\"` with `\u003Ctitle>` and `aria-labelledby`; icon-only buttons label the control (`aria-label` on button), not the icon. Meaningful icons must meet ≥3:1 contrast ratio against adjacent colors (WCAG 2.2 SC 1.4.11 Non-text Contrast).\n- Use `currentColor` for fill\u002Fstroke by default to support theming.\n- Optimize SVG output: remove editor metadata, normalize viewBox, minimize path data. Target ≤4KB per icon after SVGO (inline-safe threshold). Use SVGO decimal precision 1 for simple icons, 2–3 for complex illustrations.\n- Provide icons as both inline SVG and symbol-reference formats. Prefer sprites for icon sets of 10+ icons to reduce bundle size.\n- When designing a system, define the icon grid, stroke rules, and naming convention first.\n- Generation log, state transitions, and rights checks for reference-derived or AI-sourced assets follow `_common\u002FASSET_PROVENANCE.md`; logo typeface EULA clearance stays in `reference\u002Flogo-construction.md`.\n\n## Boundaries\n\nAgent role boundaries -> `_common\u002FBOUNDARIES.md`\n\n### Always\n\n- Define grid size and stroke width before drawing icons.\n- Use `currentColor` as default fill\u002Fstroke for theme compatibility.\n- Include accessibility attributes on every SVG icon: differentiate decorative (`aria-hidden=\"true\"`) from meaningful (`role=\"img\"` + `\u003Ctitle>` + `aria-labelledby`). For icon-only buttons, label the control, not the icon.\n- Optimize SVG output (remove metadata, normalize viewBox). Visually verify SVGO output for complex SVGs with masks, clipping paths, or animations.\n- Maintain consistent visual weight across icon sets.\n- Convert strokes to outlines (paths) before export when the SVG will be consumed by multiple platforms or renderers to avoid inconsistent stroke scaling.\n\n### Ask First\n\n- Icon set request exceeds `20` icons.\n- Target grid size is ambiguous.\n- Design must match an existing icon library style.\n\n### Never\n\n- Use inline styles when attributes suffice.\n- Embed raster images inside SVG.\n- Create inconsistent stroke widths within an icon set.\n- Omit viewBox attribute from any SVG.\n- Use absolute dimensions (width\u002Fheight in px) without viewBox.\n- Run SVGO with default config on animated or scripted SVGs — it breaks document structure, animations, and scripts. Use safe-only plugins and visually verify.\n- Strip license\u002Fattribution metadata from third-party SVGs via SVGO — this can violate licensing terms.\n- Use `\u003Cimg src=\"icon.svg\">` for icons that require CSS styling, theming, or interactivity — inline SVG or `\u003Cuse>` is required for `currentColor` inheritance and CSS customization.\n\n## Recipes\n\n| Recipe | Subcommand | Default? | When to Use | Read First |\n|--------|-----------|---------|-------------|------------|\n| Single Icon | `icon` | ✓ | Single icon generation | `reference\u002Fpatterns.md` |\n| Illustration | `illustration` |  | SVG illustration | `reference\u002Fpatterns.md` |\n| Icon System | `system` | | Icon system design | `reference\u002Fpatterns.md` |\n| Sprite Symbols | `sprite` | | Build SVG sprite symbols | `reference\u002Fpatterns.md` |\n| Animated SVG | `animate` | | CSS animation (primary) and SMIL for portable standalone SVG | `reference\u002Fsvg-animation.md` |\n| Themed SVG | `theme` | | `currentColor` \u002F CSS custom property theming, dark-mode variants | `reference\u002Ftheme-tokens.md` |\n| Accessible SVG | `a11y` | | ARIA, `\u003Ctitle>`\u002F`\u003Cdesc>`, decorative vs informative annotation | `reference\u002Fsvg-accessibility.md` |\n| Optimize | `optimize` | | SVGO config, path simplification, decimal precision, transform flatten, sprite vs inline trade-off | `reference\u002Fsvg-optimization.md` |\n| Pictogram | `pictogram` | | ISO 7001:2023 wayfinding (supersedes 2007 + amendments) [Source: iso.org\u002Fstandard\u002F77442.html], AIGA symbols, safety \u002F accessibility pictograms with cross-cultural recognition | `reference\u002Fpictogram-design.md` |\n| Logo \u002F Wordmark | `logo` | | Wordmark \u002F monogram \u002F lockup construction with typographic design and licensing-aware delivery | `reference\u002Flogo-construction.md` |\n\n## Subcommand Dispatch\n\nParse the first token of user input.\n- If it matches a Recipe Subcommand above → activate that Recipe; load only the \"Read First\" column files at the initial step.\n- Otherwise → default Recipe (`icon` = Single Icon). Apply normal SPEC → GRID → DRAW → OPTIMIZE → INTEGRATE workflow.\n\nBehavior notes per Recipe:\n- `icon`: Generate a single SVG icon on a 24x24 grid. currentColor + aria-hidden\u002Frole=\"img\" required. \u003C=4KB after SVGO optimization.\n- `illustration`: Generate hero\u002Fspot\u002Fdecorative SVG illustrations. With viewBox and path optimization.\n- `system`: Define grid, stroke width, and naming conventions first, then design the icon set. Use sprites for 10+ icons.\n- `sprite`: Build an SVG spritesheet with the `\u003Csymbol>` + `\u003Cuse>` pattern. Prioritize bundle size reduction.\n- `animate`: Author CSS-primary animation for loaders, status transitions, and microinteractions. Use SMIL only for portable standalone SVG (works in `\u003Cimg src>`). Animate transform\u002Fopacity only and ship a `prefers-reduced-motion` fallback.\n- `theme`: Theme icons via `currentColor` and CSS custom properties. Escalate to `var(--icon-*)` for multi-color icons; coordinate token names with Muse.\n- `a11y`: Annotate with ARIA \u002F `\u003Ctitle>` \u002F `\u003Cdesc>`. Default to decorative (`aria-hidden=\"true\"`); elevate to `role=\"img\"` + `aria-labelledby` only when the icon is the sole carrier of meaning.\n- `optimize`: Apply SVGO with project-specific preset (preserve viewBox, currentColor, IDs only when needed), simplify paths to ≤2-decimal precision, flatten nested transforms, and decide sprite vs inline based on count and reuse.\n- `pictogram`: Design pictograms for cross-cultural recognition — apply ISO 7001:2023 wayfinding (supersedes 2007 + amendments) [Source: iso.org\u002Fstandard\u002F77442.html] conventions, AIGA Symbol Signs, ISO 7010 safety colors, or brand-pictogram principles; verify legibility at 16 px \u002F 24 px \u002F 48 px \u002F 200 m viewing distance.\n- `logo`: Construct wordmarks, monograms, and lockups — verify typographic license, kerning, baseline grid, clear-space rules, minimum-size threshold, and deliver SVG + PNG @1×\u002F@2×\u002F@3× + favicon + social-card variants.\n\n## Output Routing\n\n| Signal | Approach | Primary output | Read next |\n|--------|----------|----------------|-----------|\n| `icon`, single icon | Standalone SVG | `.svg` | `reference\u002Fpatterns.md` |\n| `icon set`, `library`, system | Icon system with grid spec | `.svg` + design spec | `reference\u002Fpatterns.md` |\n| `illustration`, `hero`, `spot` | SVG illustration | `.svg` | `reference\u002Fpatterns.md` |\n| `sprite`, `symbol`, bundle | SVG sprite sheet | `.svg` symbol defs | `reference\u002Fpatterns.md` |\n| `animated`, `micro-interaction` | Animated SVG (CSS\u002FSMIL) | `.svg` with animation | `reference\u002Fpatterns.md` |\n| `audit`, `consistency` | Icon audit report | Report + fix suggestions | `reference\u002Fpatterns.md` |\n| `react`, `vue`, component | SVG as component code | `.tsx` \u002F `.vue` | `reference\u002Fpatterns.md` |\n| unclear request | Single SVG icon (24x24 grid) | `.svg` | `reference\u002Fpatterns.md` |\n\n## Workflow\n\n`SPEC -> GRID -> DRAW -> OPTIMIZE -> INTEGRATE`\n\n| Phase | Required action | Key rule | Read |\n|-------|-----------------|----------|------|\n| `SPEC` | Define purpose, style, and target platform | Establish visual direction before drawing | — |\n| `GRID` | Set grid size, stroke width, corner radius, padding | Grid first; all icons inherit these constraints | `reference\u002Fpatterns.md` |\n| `DRAW` | Create SVG paths with consistent visual weight | Use geometric primitives where possible; hand-tune curves | `reference\u002Fpatterns.md` |\n| `OPTIMIZE` | Run SVGO rules, normalize viewBox, remove metadata | Every SVG must be production-optimized | `reference\u002Fpatterns.md` |\n| `INTEGRATE` | Generate component wrappers, sprite sheets, or inline code | Match the target platform and framework | `reference\u002Fpatterns.md` |\n\n## Icon Grid Standards\n\n| Grid | Stroke | Corner radius | Padding | Best for |\n|------|--------|---------------|---------|----------|\n| 16x16 | 1.5px | 1px | 1px | Small UI, favicons, badges |\n| 20x20 | 1.5px | 1.5px | 1.5px | Compact UI, sidebars |\n| 24x24 | 2px | 2px | 2px | Standard UI (most common) |\n| 32x32 | 2px | 2.5px | 2px | Large UI, marketing |\n| 48x48 | 2.5px | 3px | 3px | Feature icons, landing pages |\n\n## Output Requirements\n\n- Deliver clean, optimized SVG code.\n- Include viewBox and use relative units.\n- Default to `currentColor` for fill\u002Fstroke.\n- Include accessibility attributes on all icons (decorative: `aria-hidden=\"true\"`; meaningful: `role=\"img\"` + `aria-labelledby`).\n- For icon systems, include a design spec document (grid, stroke, naming).\n- For sprite sheets, use `\u003Csymbol>` + `\u003Cuse>` pattern. Prefer sprites over inline SVG components when the set exceeds 10 icons to reduce JS bundle size.\n\n## Collaboration\n\n**Receives:** Vision (art direction), Muse (design tokens), Frame (Figma context), User (icon requirements)\n**Sends:** Artisan (SVG components), Vitrine (icon stories), User (SVG files)\n\n| Direction | Handoff | Purpose |\n|-----------|---------|---------|\n| Vision → Ink | `VISION_TO_INK_HANDOFF` | Art direction for icon style |\n| Muse → Ink | `MUSE_TO_INK_HANDOFF` | Design tokens for palette |\n| Ink → Artisan | `INK_TO_ARTISAN_HANDOFF` | SVG components for integration |\n| Ink → Vitrine | `INK_TO_SHOWCASE_HANDOFF` | Icon catalog for Storybook |\n\n## Reference Map\n\n| Reference | Read this when |\n|-----------|----------------|\n| `reference\u002Fpatterns.md` | You need SVG construction patterns, grid templates, or optimization rules. |\n| `reference\u002Fhandoffs.md` | You need handoff templates for collaboration with other agents. |\n| `reference\u002Fsvg-animation.md` | You are running `animate`: choosing SMIL vs CSS, authoring path morphs or loaders, or gating motion on `prefers-reduced-motion`. |\n| `reference\u002Ftheme-tokens.md` | You are running `theme`: wiring `currentColor`, injecting CSS custom properties, or coordinating dark-mode \u002F multi-color tokens with Muse. |\n| `reference\u002Fsvg-accessibility.md` | You are running `a11y`: deciding decorative vs informative, picking between `\u003Ctitle>` \u002F `aria-label` \u002F `aria-labelledby`, or annotating interactive SVG. |\n| `reference\u002Fsvg-optimization.md` | You are running `optimize`: tuning SVGO config, path simplification, decimal precision, transform flatten, sprite vs inline trade-off. |\n| `reference\u002Fpictogram-design.md` | You are running `pictogram`: applying ISO 7001:2023 wayfinding (supersedes 2007 + amendments) [Source: iso.org\u002Fstandard\u002F77442.html], AIGA Symbol Signs, ISO 7010 safety colors, or cross-cultural recognition rules. |\n| `reference\u002Flogo-construction.md` | You are running `logo`: constructing wordmarks, monograms, lockups; verifying typographic licensing, kerning, clear-space, and asset deliverables. |\n| `_common\u002FASSET_PROVENANCE.md` | Cross-cutting provenance\u002Frights protocol for generated or reference-derived assets (icons, illustrations, logos) — the four-layer provenance model and state transitions; logo typeface EULA clearance stays owned by `reference\u002Flogo-construction.md`. |\n| `_common\u002FOPUS_5_AUTHORING.md` | You are sizing the icon spec, deciding adaptive thinking depth at DESIGN, or front-loading grid\u002Fstroke\u002Fnaming at AUDIT. Critical for Ink: P3, P5. |\n| `reference\u002Fautorun-schema.md` | You are emitting the AUTORUN `_STEP_COMPLETE` block — Ink-specific Output\u002FNext schema. |\n\n## Operational\n\n**Spine contracts** — in effect on every run, precedence in `_common\u002FOPERATIONAL.md` § Contract Precedence: `_common\u002FVALUES.md` · `_common\u002FBOUNDARIES.md` · `_common\u002FHANDOFF.md` · `_common\u002FAUTORUN.md` · `_common\u002FGIT_GUIDELINES.md` · `_common\u002FOUTPUT_STYLE.md` · `_common\u002FOPUS_5_AUTHORING.md` · `_common\u002FWORK_GATE.md`.\n\n- Journal icon system decisions and grid specifications in `.agents\u002Fink.md`; create if missing.\n- Record only reusable design decisions (grid, stroke, naming conventions).\n- After significant Ink work, append to `.agents\u002FPROJECT.md`: `| YYYY-MM-DD | Ink | (action) | (files) | (outcome) |`\n\n## AUTORUN Support\n\nSee `_common\u002FAUTORUN.md` for the protocol (`_AGENT_CONTEXT` input, mode semantics, error handling). Ink-specific `_STEP_COMPLETE.Output` schema lives in `reference\u002Fautorun-schema.md`.\n\n## Nexus Hub Mode\n\nWhen input contains `## NEXUS_ROUTING`, return via `## NEXUS_HANDOFF` (canonical schema in `_common\u002FHANDOFF.md`).\n",{"name":5,"risk":24,"domain":25,"source":26,"license":15,"version":30,"category":25,"platforms":31,"subdomain":38,"description":7},"low","devsecops",{"commit":27,"license":15,"repository":28,"imported_at":29},"f425adcb21","simota\u002Fagent-skills","2026-09-20","1.0.0",[32,33,34,35,36,37],"claude-code","cursor","codex","gemini","antigravity","copilot","general","main","2d1750717747097b602acf30bd09a7cbd4b4c6ea","awesome_skills\u002Fdevsecops\u002Fink","https:\u002F\u002Fgithub.com\u002FMr-Nobody-Anonymous\u002FAll-skills","https:\u002F\u002Fgithub.com\u002FMr-Nobody-Anonymous","2026-11-09 11:45:36",{"source":8,"skillName":5,"commands":46,"prompt":56,"zipAvailable":57},[47,50,53],{"tool":48,"command":49},"npx","npx skills add Mr-Nobody-Anonymous\u002FAll-skills --skill ink",{"tool":51,"command":52},"bunx","bunx skills add Mr-Nobody-Anonymous\u002FAll-skills --skill ink",{"tool":54,"command":55},"pnpm","pnpm dlx skills add Mr-Nobody-Anonymous\u002FAll-skills --skill ink","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FMr-Nobody-Anonymous\u002FAll-skills\u002Fblob\u002Fmain\u002Fawesome_skills\u002Fdevsecops\u002Fink\u002FSKILL.md",true,[59],{"path":60,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":63,"sourceHtmlUrl":64},"_common","OTHER","其他",10,"https:\u002F\u002Fgithub.com\u002FMr-Nobody-Anonymous\u002FAll-skills\u002Fblob\u002Fmain\u002Fawesome_skills\u002Fdevsecops\u002Fink\u002F_common",[66,74,81,88,95,102],{"skillNo":67,"name":68,"nameZh":6,"description":69,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":70,"categories":71,"keywords":72,"publishedAt":73},"01M7EXRQF9GFM7D9BG6N5HAT34","oath","Auditing regulatory compliance (SOC2\u002FPCI-DSS\u002FHIPAA\u002FISO 27001): maps requirements, checks controls, designs audit trails, implements Policy as Code. Use when compliance auditing is needed.","https:\u002F\u002Fgithub.com\u002FMr-Nobody-Anonymous\u002FAll-skills\u002Fblob\u002Fmain\u002Fawesome_skills\u002Fdevsecops\u002Foath\u002FSKILL.md",[],[],"2026-11-15 14:25:24",{"skillNo":75,"name":76,"nameZh":6,"description":77,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":78,"categories":79,"keywords":80,"publishedAt":19},"01M7EXRH7TYTNZJT0BQXEWAMW7","nexus","Orchestrating multi-specialist task chains and scope-adaptive product delivery: classifies intent, selects and executes the minimum viable chain, aggregates results, and verifies acceptance criteria. For multi-domain tasks, build-first delivery, and product lifecycle execution.","https:\u002F\u002Fgithub.com\u002FMr-Nobody-Anonymous\u002FAll-skills\u002Fblob\u002Fmain\u002Fawesome_skills\u002Fdevsecops\u002Fnexus\u002FSKILL.md",[],[],{"skillNo":82,"name":83,"nameZh":6,"description":84,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":85,"categories":86,"keywords":87,"publishedAt":19},"01M7EXRCDPFWVEEEFR2ZQGJCYY","nest","Designing LLM-optimized folder structures: audits and restructures directories for context efficiency, progressive disclosure, and prompt cache performance. Not for general repo structure (Grove).","https:\u002F\u002Fgithub.com\u002FMr-Nobody-Anonymous\u002FAll-skills\u002Fblob\u002Fmain\u002Fawesome_skills\u002Fdevsecops\u002Fnest\u002FSKILL.md",[],[],{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":94,"publishedAt":19},"01M7EXR7JEER60TH0HD0AH4EE9","native","Implementing production iOS\u002FAndroid\u002FmacOS native features (SwiftUI, Compose) and iterating a screen against a reference design. Not for cross-platform RN\u002FFlutter (Port) or web (Artisan).","https:\u002F\u002Fgithub.com\u002FMr-Nobody-Anonymous\u002FAll-skills\u002Fblob\u002Fmain\u002Fawesome_skills\u002Fdevsecops\u002Fnative\u002FSKILL.md",[],[],{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":101,"publishedAt":19},"01M7EXR133J7DD5961R80QTRZY","muse","Defining and managing design tokens, applying token systems to existing codebases, building design system foundations. Use for spacing, color, typography, dark mode, cross-platform output.","https:\u002F\u002Fgithub.com\u002FMr-Nobody-Anonymous\u002FAll-skills\u002Fblob\u002Fmain\u002Fawesome_skills\u002Fdevsecops\u002Fmuse\u002FSKILL.md",[],[],{"skillNo":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":19},"01M7EXQWWX7ECQN0J50B41YN5N","morph","Converting document formats (Markdown\u002FWord\u002FExcel\u002FPDF\u002FHTML) and generating reusable conversion scripts. Use for distributable specs, accessibility-compliant PDFs, or Pandoc\u002FLibreOffice pipelines.","https:\u002F\u002Fgithub.com\u002FMr-Nobody-Anonymous\u002FAll-skills\u002Fblob\u002Fmain\u002Fawesome_skills\u002Fdevsecops\u002Fmorph\u002FSKILL.md",[],[]]