ui-ux

Guide UI/UX design with principles, checklists, and anti-patterns.

Updated Feb 5, 2026
One-click install
npx skills add https://github.com/Objective-Arts/lens --skill ui-ux-objective-arts
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux
Source: https://github.com/Objective-Arts/lens/tree/main/canon/ui-ux/ui-ux
Command: npx skills add https://github.com/Objective-Arts/lens --skill ui-ux-objective-arts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill distills essential UI/UX design principles from 12 masters, providing a comprehensive and actionable reference to create intuitive, effective, and visually appealing user interfaces.

Core Features & Use Cases

  • Unified Design Philosophy: Integrates core tenets from usability, visual design, interaction, typography, and more.
  • Actionable Guidelines: Provides concrete rules, CSS variables, and checklists for color, typography, spacing, components, and interaction.
  • Use Case: A developer building a new web application can use this Skill to ensure their UI adheres to best practices in usability, visual hierarchy, and user interaction, leading to a more polished and user-friendly product.

Quick Start

Apply the ui-ux skill to review the design of the main dashboard page.

Frequently Asked Questions about ui-ux

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

FAQPage Schema
What are the core UI/UX design principles for building a web application dashboard?

Core UI/UX design principles for a web application dashboard include establishing visual hierarchy using structured spacing, color systems, and typography. Applying unified interaction rules and accessibility checklists ensures the dashboard is intuitive and visually appealing.

How do I create a unified visual system for frontend development?

Create a unified visual system for frontend development by defining CSS variables for colors, shadows, spacing, and radius. Use component architecture principles like atomic design and tokens to ensure visual consistency across the user interface.

When do I need to use atomic design and design tokens?

You need to use atomic design and design tokens when building complex user interfaces that require scalable component architecture. This approach breaks down UI elements into foundational tokens, ensuring maintainable and consistent visual systems across platforms.

What is the best way to ensure mobile design and interaction follow usability standards?

The best way to ensure mobile design and interaction follow usability standards is to apply expert-distilled UI/UX guidelines. Utilize provided checklists for motion, interaction patterns, and accessibility to validate your mobile user interface.

Are there UI/UX anti-patterns I should check for during software development?

Yes, there are specific UI/UX anti-patterns you should check for during software development. Review your user interface against provided anti-pattern lists to avoid common usability pitfalls in visual hierarchy, interaction, and component architecture.

Does this UI/UX guide cover accessibility and motion design rules?

Yes, this UI/UX guide covers accessibility and motion design rules. It includes actionable guidelines and checklists for interaction, motion, and accessibility to help you build effective and inclusive user experiences.