菜单
This skill transforms Claude into an expert UI designer who understands and applies fundamental design principles with precision. The skill is grounded in cognitive psychology (Gestalt principles), information theory (signal-to-noise ratio), and interaction design (affordance and hierarchy).
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | ui-professional |
| description | This skill transforms Claude into an expert UI designer who understands and applies fundamental design principles with precision. The skill is grounded in cognitive psychology (Gestalt principles), information theory (signal-to-noise ratio), and interaction design (affordance and hierarchy). |
This skill transforms Claude into an expert UI designer who understands and applies fundamental design principles with precision. The skill is grounded in cognitive psychology (Gestalt principles), information theory (signal-to-noise ratio), and interaction design (affordance and hierarchy).
Every UI element should:
This skill is organized into specialized modules. When working on UI tasks, Claude should reference the relevant module(s):
Use when: Implementing error messages, success notifications, warnings, banners, toasts, or any user feedback mechanism.
Key concerns: Message placement, redundancy, severity matching, contextual proximity.
Use when: Creating CTAs, form submissions, navigation elements, or any clickable interactive component.
Key concerns: Visual hierarchy, action priority, disabled states, affordance signals.
Use when: Organizing content, establishing visual relationships, creating information architecture, or structuring pages. Key concerns: Proximity grouping, white space usage, visual relationships, scanning patterns.
Objects close together are perceived as related; objects far apart are perceived as separate. This is fundamental to all UI organization.
Example Application:
Every element must justify its presence. Redundant information is noise that degrades the interface.
Test: Can you remove this element without losing essential information? If yes, it's noise.
Visual weight must match functional importance. Critical actions should look critical; routine actions should look routine.
Anti-pattern: Using emergency-level styling (bright red, full-width) for routine states (like a login prompt).
When evaluating or creating UI elements, follow this sequence:
Identify the Scope
Determine the Severity/Priority
Select the Appropriate Pattern
Apply Proximity & Grouping
Verify Signal-to-Noise
Displaying the same message in multiple locations (e.g., global banner + inline alert for the same error).
Why it fails: Creates cognitive load ("Are these different issues?"), reduces trust in the interface.
Using high-severity styling (global banners, modals) for routine states.
Why it fails: Trains users to ignore critical alerts, mismatches user expectations.
Placing feedback far from the action that triggered it.
Why it fails: Breaks mental model of cause-and-effect, forces visual searching.
Using vague, generic labels ("Error", "Warning") without specific guidance.
Why it fails: Doesn't help users understand or fix the problem, creates frustration.
This skill should influence:
A well-designed UI following this skill will:
To use this skill effectively:
Remember: Good UI design is not about following rules blindly—it's about understanding the cognitive principles behind the rules so you can make informed decisions that respect how users actually perceive and interact with interfaces.
Manage Claude Code web sessions, remote handoff, and teleport workflows for MedTracker work.
Comprehensive Ruby on Rails v8.1 development guide with detailed documentation for Active Record, controllers, views, routing, testing, jobs, mailers, and more. Use when working on Rails applications, building Rails features, debugging Rails code, writing migrations, setting up associations, configuring Rails apps, or answering questions about Rails best practices and patterns.
Comprehensive RSpec testing for Ruby and Rails applications. Covers model specs, request specs, system specs, factories, mocks, and TDD workflow. Automatically triggers on RSpec-related keywords and testing scenarios.
Ruby static code analyzer and formatter for enforcing style guidelines, detecting bugs, and improving code quality. Supports Rails, RSpec, and Performance extensions with safe autocorrection capabilities.
Comprehensive Ruby development skill covering language fundamentals, object-oriented design patterns, error handling strategies, performance optimization, modern Ruby 3.x features (pattern matching, ractors, typed Ruby), testing patterns, metaprogramming, concurrency, and Rails-specific best practices. Use when writing Ruby code, refactoring, implementing design patterns, handling exceptions, optimizing performance, writing tests, or applying Ruby idioms and conventions.
