laws-of-ux
Overview
This skill guides AI in reviewing and building user interfaces using the 21 Laws of UX. It serves two purposes:
- Review mode: Analyze existing UI code for violations of UX principles and suggest improvements.
- Guidance mode: Apply UX laws when building new features to ensure usable, intuitive interfaces from the start.
The laws are organized into three categories based on what aspect of the user experience they address:
- Cognitive & Decision-Making — How users think and process information
- Visual & Perceptual — How users see and interpret visual layouts
- Behavioral & Interaction — How users act and respond to interfaces
When reviewing code, check the Review Checklist first to identify which laws are most relevant, then refer to the detailed sections for guidance and examples.
Keywords: UX review, UI review, usability, Laws of UX, UX best practices, user experience, UX audit, UI patterns
Review Checklist
Use this table for quick scanning. Each check maps to one or more laws and tells you what to look for in code.
More from rolemodel/rolemodel-skills
bem-structure
Expert guidance for writing, refactoring, and structuring CSS using BEM (Block Element Modifier) methodology. Provides proper CSS class naming conventions, component structure, and Optics design system integration for maintainable, scalable stylesheets.
86optics-context
Use the Optics design framework for styling applications. Apply Optics classes for layout, spacing, typography, colors, and components. Use when working on CSS, styling views, or implementing design system guidelines.
39routing-patterns
Review, generate, and update Rails routes following professional patterns and best practices. Covers RESTful resource routing, route concerns for code reusability, shallow nesting strategies, and advanced route configurations.
30turbo-fetch
Implement dynamic form updates using Turbo Streams and Stimulus. Use when forms need to update fields based on user selections without full page reloads, such as cascading dropdowns, conditional fields, or dynamic option lists.
28stimulus-controllers
Create and register Stimulus controllers for interactive JavaScript features. Use when adding client-side interactivity, dynamic UI updates, or when the user mentions Stimulus controllers or JavaScript behavior.
27controller-patterns
Review and update existing Rails controllers and generate new controllers following professional patterns and best practices. Covers RESTful conventions, authorization patterns, proper error handling, and maintainable code organization.
27