القائمة
Professional UI design guidance grounded in cognitive psychology, information theory, and interaction design. Use when designing, reviewing, or refining interfaces that need clear hierarchy, strong affordances, useful feedback, and low visual noise.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Pressure-test an assumption, architecture decision, estimate, or inherited constraint. Use when the user asks to challenge a belief, play devil's advocate, test reasoning, or find a simpler alternative.
Explain a code location, component, command, or user-facing system flow. Use when the user asks what code does, why it exists, how a feature works, or wants a trace of entry points, branches, dependencies, and side effects.
Prepare difficult technical or delivery news for a client, stakeholder, or team. Use for delays, incidents, security findings, cost changes, failed approaches, or other conversations where clarity and trust matter.
Plan and work through project, client, vendor, or team offboarding. Use for handovers, access removal, ownership transfer, documentation, credential rotation, data cleanup, and knowledge-transfer checklists.
Discover how a codebase already handles a concern before extending it. Use when asked how the repository does something, where a pattern lives, whether implementations are consistent, or what convention new work should follow.
Help the user think through a confusing problem or decision by asking focused questions and reflecting their reasoning. Use when they want to think out loud, untangle a problem, or find the question beneath the question.
| name | ui-professional |
| description | Professional UI design guidance grounded in cognitive psychology, information theory, and interaction design. Use when designing, reviewing, or refining interfaces that need clear hierarchy, strong affordances, useful feedback, and low visual noise. |
Use this skill to design and critique interfaces with disciplined attention to Gestalt principles, signal-to-noise ratio, affordance, hierarchy, feedback, and layout.
Every UI element should:
This skill is organized into specialized modules. When working on UI tasks, load the relevant module before making design decisions:
Reference: feedback-alerting.md
Use when: Implementing error messages, success notifications, warnings, banners, toasts, or any user feedback mechanism.
Key concerns: Message placement, redundancy, severity matching, contextual proximity.
Reference: buttons-actions.md
Use when: Creating CTAs, form submissions, navigation elements, or any clickable interactive component.
Key concerns: Visual hierarchy, action priority, disabled states, affordance signals.
Reference: layout-spacing.md
Use when: Organizing content, establishing visual relationships, creating information architecture, or structuring pages. Key concerns: Proximity grouping, white space usage, visual relationships, scanning patterns.
Reference: visual-hierarchy.md
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.
