skills.rest
OreStudio
OreStudioOFFICIAL
Explore all skills by this author →
GitHub

icon-guidelines

Standardize ORE Studio UI icons using Fluent UI System Icons conventions.

25|5|Updated Jun 15, 2024
Search Tags:#consistency#iconography#design guidelines#UI icons#icon inventory#icon variants#Fluent UI
One-click install
npx skills add https://github.com/OreStudio/OreStudio --skill icon-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: icon-guidelines
Source: https://github.com/OreStudio/OreStudio/tree/main/.claude/skills/icon-guidelines
Command: npx skills add https://github.com/OreStudio/OreStudio --skill icon-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a standardized approach to iconography across ORE Studio to ensure consistent meaning and visual language in the UI, reducing confusion and visual drift.

Core Features & Use Cases

  • Icon system reference: The Skill documents the icon source, naming conventions, and variant guidelines (Regular vs Filled) and available sizes (16px, 20px, 32px, 48px).
  • Consistency & clarity: It emphasizes consistent icon usage across components and prioritizes clarity over decoration.
  • Inventory guidance: It describes the Icon Inventory categories (Actions, Navigation, Status & Feedback, User & Identity, Security & Access, etc.) and how to select icons that convey the intended concept.
  • Use Case: For UI design teams, use this Skill to align iconography when adding new components or updating UI.

Quick Start

  • Identify the semantic category of the needed concept.
  • Choose the appropriate icon from the inventory.
  • Select the correct variant (Regular for default, Filled for active/emphasized) and apply sizing guidelines; ensure minimum spacing.

Frequently Asked Questions about icon-guidelines

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

FAQPage Schema
How do I standardize UI iconography for consistent visual language?▼

To standardize UI iconography, apply Fluent UI System Icons using the ic_fluent naming convention, select Regular or Filled variants, and use standardized sizes of 16px, 20px, 32px, or 48px with proper spacing.

What is the difference between Regular and Filled icon variants?▼

Regular icon variants are used for default UI states, while Filled icon variants are applied for active or emphasized states. This distinction ensures clear visual feedback and consistent meaning across components.

How do I select the right UI icon from an icon inventory?▼

To select a UI icon, identify the semantic category of your concept from the inventory, such as Actions, Navigation, or Status & Feedback. Then choose an icon that conveys the intended meaning with clarity over decoration.

What are the standard sizes for Fluent UI System Icons?▼

The standard sizes for Fluent UI System Icons are 16px, 20px, 32px, and 48px. Applying these specific dimensions ensures visual consistency and proper scaling across the UI design system.

Can I use custom icons for UI components instead of Fluent UI System Icons?▼

No, this Skill enforces the use of Fluent UI System Icons to prevent visual drift. It applies strict guidelines for selecting and applying icons for actions, navigation, feedback, and status to ensure consistent UI visuals.

Related Skills

Explore More Design & Creative Skills→
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
jiaiyanjiaiyan
21

el-icon

Create reusable SVG icon components for Element Plus with size and color props.

Community
Basic
bflandevbflandev
1

component-inventory

Derive a reusable UI component library from a screen inventory.

Community
Intermediate
rmjamesrmjames
1

image-processor

Resize and crop raster and SVG images with ImageMagick and SVGO.

Community
Advanced