skills.rest
julianoczkowski
julianoczkowskiCOMMUNITY
Explore all skills by this author →
GitHub

integrate-modus-icons

Validate Modus icon naming, sizing, and accessibility in React components.

3|2|Updated Oct 3, 2025
Search Tags:#accessibility#react#ui-design#design-system#modus-icons#icon-naming#icon-sizing
One-click install
npx skills add https://github.com/julianoczkowski/create-trimble-app --skill integrate-modus-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: integrate-modus-icons
Source: https://github.com/julianoczkowski/create-trimble-app/tree/main/templates/react/.cursor/skills/integrate-modus-icons
Command: npx skills add https://github.com/julianoczkowski/create-trimble-app --skill integrate-modus-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Icons in UI often fail to meet the Modus design system due to inconsistent naming, improper sizing, and weak accessibility. This skill provides guidance to ensure icons are used correctly across components.

Core Features & Use Cases

  • Enforces icon naming conventions: underscores-only names, avoiding hyphens.
  • Provides usage patterns: demonstrates ModusIcon component, bare <i> usage, and icon-in-buttons scenarios.
  • Accessibility guidance: ensures informative vs decorative usage with ARIA labels and roles, including icon-only button labeling.
  • Sizing and color guidance: prescribes Tailwind sizing classes and Modus color tokens.

Quick Start

Explain how to apply Modus icons in a React project, covering underscore-based naming, sizing with Tailwind classes, and accessible labeling patterns.

Frequently Asked Questions about integrate-modus-icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use Modus icons correctly in a React UI?▼

Use Modus icons in React by applying underscore-based naming conventions, Tailwind sizing classes, and ARIA labeling patterns. This ensures consistent UI integration across buttons, menus, and navigation components.

What is the correct naming convention for Modus icons in a design system?▼

Modus icons require underscore-only naming conventions, strictly avoiding hyphens. This standardizes icon references across your UI components to maintain design system consistency.

How do I make icon-only buttons accessible with Modus icons?▼

Make Modus icon-only buttons accessible by applying informative ARIA labels and roles. This distinguishes functional icons from decorative ones, ensuring screen reader compatibility.

Can I use Tailwind classes for Modus icon sizing and color?▼

Yes, Modus icon sizing and color use prescribed Tailwind sizing classes and Modus color tokens. This enforces visual consistency across your application's components.

Does Modus icon usage support bare <i> tags or only component elements?▼

Modus icon usage supports both the ModusIcon component and bare <i> tags. It provides specific patterns to ensure proper integration and accessibility regardless of the chosen element.

Related Skills

Explore More Design & Creative Skills→
julianoczkowskijulianoczkowski
3

modus-frontend

Design Modus 2.0 compliant frontend interfaces with Tailwind CSS and web components.

Community
Advanced
JaivishChauhanJaivishChauhan
6

accessibility

Apply WCAG-compliant semantics to portfolio pages for keyboard and screen reader accessibility.

Community
Intermediate
RamonsDkaRamonsDka
1

ckm:ui-styling

Standardize accessible UI styling across React apps with shadcn/ui and Tailwind CSS.

Community
Advanced
huydepzai121huydepzai121
3

remix-icon

Guide RemixIcon integration across webfont, SVG, React, and Vue.

Community
Intermediate