svg-icon-craft

Name: svg-icon-craft
Availability: InStock
Author: endlessblink

Generate cyberpunk SVG icons for Vue components with standardized templates.

Updated Nov 29, 2025

Search Tags:#vue #svg #design-system #cyberpunk #icon-design #inline-svg

Ready to run

npx skills add https://github.com/endlessblink/flow-state --skill svg-icon-craft

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: svg-icon-craft
Source: https://github.com/endlessblink/flow-state/tree/main/.claude/skills/svg-icon-craft
Command: npx skills add https://github.com/endlessblink/flow-state --skill svg-icon-craft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardizes and accelerates the creation of cyberpunk SVG icons for FlowState assets, ensuring a consistent visual language across UI and game contexts.

Core Features & Use Cases

Cyberpunk icon design principles provide sharp angles, circuit motifs, neon-ready outlines, and a monochrome base suitable for CSS-driven color and glow effects.
Vue inline SVG patterns, an extensive icon library covering categories (achievements, classes, corruption, bosses, shop, stats), and a framework for scalable icon creation and animation.
Reusable patterns include a CyberIcon.vue wrapper and an icon registry approach to efficiently assemble dozens or hundreds of icons with consistent styling.

Quick Start

Generate a cyberpunk SVG icon set and integrate it into Vue components using the CyberIcon pattern.

Frequently Asked Questions about svg-icon-craft

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create consistent cyberpunk SVG icons for a Vue design system?▼

You can create cyberpunk SVG icons by applying standardized SVG templates with sharp angles and circuit motifs. This establishes a consistent visual language across UI contexts and provides a monochrome base suitable for CSS-driven neon glow effects.

What is the best way to manage a large inline SVG icon library in Vue?▼

The best way to manage large inline SVG libraries in Vue is using an icon registry approach with a reusable wrapper component. This pattern allows you to efficiently assemble hundreds of icons, apply frontmatter-driven metadata, and maintain consistent styling across your application.

Can I use inline SVG patterns for game asset categories like achievements and bosses?▼

Yes, inline SVG patterns support game asset pipelines requiring categories like achievements, classes, corruption, bosses, shop, and stats. The framework provides specialized cyberpunk design principles and animation templates tailored for these specific game UI contexts.

Does this approach support animated SVG icons without external dependencies?▼

Yes, the framework includes Vue inline SVG patterns with animation templates and a monochrome base designed for CSS-driven effects. This allows you to implement animated cyberpunk icons directly within your Vue components without adding external libraries.

How do I standardize SVG viewBox and stroke settings for a scalable icon set?▼

You can standardize SVG viewBox and stroke settings by using predefined SVG templates that enforce consistent linecaps, stroke widths, and fill rules. Applying these standardized templates ensures visual uniformity across a scalable icon library.