Guide token-based and Iconify icon usage in @techsio/ui-kit with accessibility rules.
npx skills add https://github.com/TechsioCZ/new-engine --skill icon-usage
Please help me install this Agent Skill. Skill: icon-usage Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/icon-usage Command: npx skills add https://github.com/TechsioCZ/new-engine --skill icon-usage
Icons are often implemented inconsistently across apps, causing visual drift and accessibility gaps. This Skill guides how to use token-based icons and Iconify icons within the @techsio/ui-kit to maintain consistent, scalable, and accessible iconography.
Import the Icon component from @techsio/ui-kit and render a token icon with the appropriate size and color.
High-intent search queries and answers about installing and using this skill.
Token-based icons ensure UI semantic consistency across components and themes by enforcing strict usage rules and prop contracts. They provide standardized size and color mappings, preventing the accessibility gaps common with ad-hoc icon implementations.
Use Iconify icons only when no token icon exists for the desired UI state. You must maintain proper size and color mappings to keep the Iconify icon visually consistent with the rest of the design system.
To make icons accessible within interactive controls, mark them as decorative when appropriate and always provide accessible text for assistive technologies. This ensures screen readers properly convey the interactive element's purpose to users.
The best way to map icon sizes and colors is by applying token-based properties to the Icon component within your UI kit. This enforces prop contracts that maintain scalable and accessible iconography across all application themes.
Icon visual drift happens when iconography is implemented inconsistently across applications, causing mismatched semantics. Prevent it by using token-based icons to enforce strict usage rules, prop contracts, and standardized size and color mappings.
yonatangrossGenerate design tokens, atomic components, and documentation templates for UI systems.
vuminhieuAudit UI code against Web Interface Guidelines and report file:line findings.
celantheBuild a frontend design system covering typography, color, layout, motion, and accessibility.
hamzaPixlCreate optimized SVG icons as TypeScript React components with ARIA attributes.
