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
Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 还原设计图, implementing...
Senior product designer methodology ensuring thorough user research, structured architecture, accessible color and typography systems, and pixel-perfect UI e...
Complete Motion.dev documentation - modern animation library for React, JavaScript, and Vue (formerly Framer Motion)
An interactive 3D visualization application featuring an "Augmented Entity" with reactive shaders and emotional states.
Shared design system for yuanfang-skills. Provides token CSS variables, 12+ themes, and reusable layout-type HTML blocks. Used by yuanfang-html-image (and fu...
Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinc...