ux-iconography_skill

This skill helps you apply Material Symbols v3 iconography consistently across UI components, improving accessibility, sizing, color integration, and animation.

JavaScript

1

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill matthewharwood/fantasy-phonics --skill ux-iconography

SKILL.md7.0 KB

Overview

This skill documents icon usage patterns with Material Symbols v3 for a fantasy-themed phonics game. It covers sizing, integration with design tokens, accessibility rules, animation patterns, and semantic coloring for game phases and status. Use it to create consistent, accessible icons for buttons, navigation, and status indicators.

How this skill works

It standardizes how icons are inserted, sized, and styled using a variable Material Symbols font. The patterns define size classes, fluid typography scaling, fixed containers, and icon+text layouts. Accessibility rules hide decorative icons from assistive tech and require visible labels or aria-labels for meaningful icons. Animation recipes and status color mappings are provided for game phases and feedback.

When to use it

Adding icons to buttons and links (inline or icon-only)
Showing phase or progress status in the game UI
Decorating lists, navigation, and game controls
Animating icons for feedback (success, celebration, hover)
Coloring icons by semantic status or current game phase

Best practices

Mark decorative icons aria-hidden="true" and supply visible labels when needed
Provide aria-label or screen-reader text for icon-only controls
Use token-based sizing (fluid typography) rather than fixed pixels for responsiveness
Keep touch targets at least 44x44px and provide padding in icon-only buttons
Use semantic color classes (success, error, warning) and phase-specific data attributes
Limit animation to brief transitions or short celebratory sequences; avoid continuous excessive motion

Example use cases

Phase indicator: phase icons colored by data-phase to reflect current game stage
Icon-only control: a mute/unmute button with aria-label and toggle-filled style
Progress UI: progress dots and phase icons indicating complete/current/locked states
Button with label: inline icon + text for navigation or tool actions
Celebration: success bounce animation on achievement icons when a level is completed

FAQ

Hide decorative icons with aria-hidden="true" when the visible label conveys the meaning. For icons that carry meaning alone, provide an aria-label or sr-only text.

How do I scale icons across responsive sizes?

Prefer token-driven font-size steps (e.g., var(--step-1)) for fluid scaling. Use fixed container classes only when a strict square touch target is required.