conventions-ux

Name: conventions-ux
Availability: InStock
Author: stella

Standardize UI development with UX conventions for brand-consistent design.

163|43|Updated May 3, 2026

Search Tags:#usability #ui-design #ux #micro-interactions #visual-consistency #brand-identity #icon-semantics

Ready to run

npx skills add https://github.com/stella/stella --skill conventions-ux

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: conventions-ux
Source: https://github.com/stella/stella/tree/main/.agents/skills/conventions-ux
Command: npx skills add https://github.com/stella/stella --skill conventions-ux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Apply when building or modifying user-facing UI components to ensure brand-consistent visuals and intuitive interactions.

Core Features & Use Cases

Brand & Visual Identity guidelines: align with Stella's brand colors, typography, and visual motifs to maintain a cohesive look across products.
Interaction and noise management: define micro-interactions, state transitions, and reduce visual noise for a smoother user experience.
Icon semantics and semantic tokens: use meaningful icons and semantic tokens (e.g., bg-muted, text-foreground, border) instead of raw color values to improve accessibility and theming.
Consistent design reviews: provide a reference during design reviews to speed decision-making and uphold quality.

Quick Start

Start by applying these conventions when designing or updating a UI component to ensure brand-aligned visuals and interactions.

Frequently Asked Questions about conventions-ux

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

FAQPage Schema

How do I standardize UI components for visual consistency across products?▼

Standardize UI components by applying a concise set of UX conventions for consistent design. This enforces guidelines on brand identity, micro-interactions, and icon semantics to guide design decisions and reviews across products.

What are semantic tokens and how do they improve UI design accessibility?▼

Semantic tokens are meaningful references like bg-muted, text-foreground, and border used instead of raw color values. They improve UI design accessibility and theming by ensuring visual consistency across interactive states.

How do I define micro-interactions and state transitions to reduce visual noise?▼

Define micro-interactions and state transitions to reduce visual noise by following established UX conventions for interaction management. This ensures smoother user experiences during UI refactors and new feature design.

Can I use these UX conventions for new feature design and visual identity alignment?▼

Yes, you can use these UX conventions for new feature design, UI refactors, and visual identity alignment. They align UI development with brand colors, typography, and visual motifs to maintain a cohesive look across products.

When do I need UX conventions for consistent design reviews?▼

You need UX conventions for consistent design reviews when evaluating user-facing UI components. They provide a reference to speed up decision-making, uphold quality, and ensure brand-consistent visuals and intuitive interactions.

What is the best way to unify UI development with clear UX conventions?▼

The best way to unify UI development with clear UX conventions is to enforce guidelines on brand identity, icon semantics, and noise reduction. Applying these rules during component design ensures brand-aligned visuals and intuitive interactions.