iconsImplement accessible icons with proper sizing, color inheritance, and performance.
Install via ClawdBot CLI:
clawdbot install ivangdavila/iconsGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated Mar 20, 2026
Implement icons for product ratings, shipping info, and wishlist buttons using SVG with currentColor for theme consistency. Ensure decorative icons like star ratings have aria-hidden='true' and informative icons like cart buttons include accessible labels to support screen reader users during shopping.
Use SVG icons for transaction categories, alerts, and navigation with symbol sprites to optimize performance. Apply proper sizing (e.g., 24px for buttons) and stroke weights, and include aria-labelledby for critical icons like warnings to ensure accessibility in high-stakes financial data visualization.
Deploy icons for medical records, appointment scheduling, and notifications with inline SVGs for fast loading. Follow accessibility patterns by adding visually hidden text for icon-only buttons and using currentColor to adapt to high-contrast themes, crucial for users with visual impairments.
Integrate icons for course navigation, quizzes, and progress tracking using scalable em-based sizing to match text. Avoid icon fonts and use tree-shaken libraries to reduce bundle size, while ensuring all standalone icons have accessible names to support diverse learners including those using assistive technologies.
Implement consistent icon sets for settings, user management, and analytics with symbol sprites to minimize DOM nodes. Adhere to sizing standards (e.g., 20px for default UI) and color inheritance for hover states, and prevent common mistakes like missing aria-hidden on decorative icons to maintain professional usability.
Offer a premium icon library with optimized SVG sets, accessibility audits, and regular updates as part of a monthly subscription. Revenue is generated through tiered plans based on icon count and support features, targeting businesses needing scalable, compliant design systems.
Provide custom icon design and integration services, including performance optimization and accessibility compliance for client projects. Revenue comes from one-time project fees or retainer contracts, focusing on industries like finance and healthcare with strict usability standards.
Distribute free basic icon sets with open-source licenses, while monetizing advanced features like premium icons, sprite generators, and analytics tools. Revenue is driven by upsells and enterprise licenses, appealing to developers and small teams seeking cost-effective solutions.
💬 Integration Tip
Start by replacing icon fonts with inline SVGs using currentColor for easy theming, and always add aria-hidden to decorative icons to prevent screen reader issues.
Scored Apr 19, 2026
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability.
Complete workflow for creating distinctive design systems from scratch. Orchestrates aesthetic documentation, token architecture, components, and motion. Use when starting a new design system or refactoring an existing one. Triggers on create design system, design tokens, design system setup, visual identity, theming.
Comprehensive UI design skill covering fundamentals, patterns, and anti-patterns. Layout, typography, color, spacing, accessibility, motion, and component design. Use when building any web interface, reviewing design quality, or creating distinctive UIs.
AI UI prototyping powered by CellCog. Interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, u...
Design clear, consistent, and visually polished user interfaces.