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 15, 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.
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.
Generate and serve live HTML/CSS/JS UI designs from natural language prompts. Use when the user asks to design, create, build, or prototype a website, landing page, UI, dashboard, web page, or frontend mockup. Also triggers on requests to update, tweak, or iterate on a previously generated design. Replaces traditional UI design + frontend dev workflow.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer han...
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag