svgCreate and optimize SVG graphics with proper viewBox, accessibility, and CSS styling.
Install via ClawdBot CLI:
clawdbot install ivangdavila/svgGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
http://www.w3.org/2000/svgAudited Apr 17, 2026 · audit v1.0
Generated Mar 1, 2026
Developers use this skill to create scalable icon sets for websites and applications, ensuring icons adapt to different screen sizes without distortion. By implementing viewBox and inline SVG embedding, they enable dynamic CSS styling for themes and interactions, improving user experience across devices.
Data analysts and designers leverage the skill to build accessible charts and graphs with proper ARIA labels and descriptions. This ensures compliance with accessibility standards, making visual data interpretable by screen readers for users with disabilities in corporate or educational reports.
Online retailers integrate inline SVGs to allow customers to customize product visuals, such as changing colors or adding personal text. The skill's CSS styling capabilities enable real-time updates without reloading pages, enhancing engagement and sales conversion on e-commerce platforms.
Marketing teams use the skill to optimize and standardize logos and graphics across digital campaigns. By applying SVGO configurations, they reduce file sizes for faster load times while preserving accessibility features, ensuring consistent branding on websites and social media.
Educators and e-learning platforms create interactive diagrams and illustrations with inline SVGs that respond to user interactions. The skill's focus on viewBox and coordinates ensures elements remain visible and scalable, facilitating engaging learning experiences in online courses.
Offer a cloud-based service that automatically optimizes SVG files using SVGO configurations from this skill, targeting web developers and designers. Revenue is generated through subscription tiers based on usage volume and advanced features like batch processing and API access.
Provide custom SVG creation and optimization services for clients in industries like web design and marketing, leveraging the skill's best practices for accessibility and performance. Revenue comes from project-based fees or hourly rates for tasks such as converting designs to responsive SVGs.
Sell curated sets of optimized SVG icons with built-in accessibility and styling features, targeting businesses and developers. Revenue is earned through one-time purchases or licensing models, with upsells for customizations and support based on the skill's embedding and performance guidelines.
💬 Integration Tip
Start by embedding SVGs inline in HTML to enable full CSS control, and always test with SVGO to avoid removing critical attributes like viewBox.
Scored Apr 18, 2026
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Build or update the BlueBubbles external channel plugin for Clawdbot (extension package, REST send/probe, webhook inbound).
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use...
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.