skills.rest
stella
stellaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

conventions-ux

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
One-click install
npx skills add https://github.com/stella/stella --skill conventions-ux
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
compozycompozy
2.5k

tailwindcss

Apply Tailwind CSS v4 design tokens and responsive utilities to UI components.

Official
Advanced
jcdiv47jcdiv47

animate

Analyze frontend features and output a structured animation plan.

Community
Advanced
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
hulusi-tunchulusi-tunc
3

design-review-process

Define and enforce a structured design review process with gates, criteria, and approval workflow.

Community
Intermediate