菜单
UI/UX design intelligence with 50+ styles, 161 palettes, 57 font pairings, 99 UX guidelines, and 25 chart types. Searchable database with priority-based recommendations for web and mobile.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | ui-ux-pro-max |
| description | UI/UX design intelligence with 50+ styles, 161 palettes, 57 font pairings, 99 UX guidelines, and 25 chart types. Searchable database with priority-based recommendations for web and mobile. |
Comprehensive design guide for web and mobile applications. Contains 50+ styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, and 25 chart types across 10 technology stacks. Searchable database with priority-based recommendations.
This Skill should be used when the task involves UI structure, visual design decisions, interaction patterns, or user experience quality control.
This Skill must be invoked in the following situations:
This Skill is recommended in the following situations:
This Skill is not needed in the following situations:
Decision criteria: If the task will change how a feature looks, feels, moves, or is interacted with, this Skill should be used.
For human/AI reference: follow priority 1->10 to decide which rule category to focus on first; use --domain <Domain> to query details when needed. Scripts do not read this table.
| Priority | Category | Impact | Domain | Key Checks (Must Have) | Anti-Patterns (Avoid) |
|---|---|---|---|---|---|
| 1 | Accessibility | CRITICAL | ux | Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels | Removing focus rings, Icon-only buttons without labels |
| 2 | Touch & Interaction | CRITICAL | ux | Min size 44x44px, 8px+ spacing, Loading feedback | Reliance on hover only, Instant state changes (0ms) |
| 3 | Performance | HIGH | ux | WebP/AVIF, Lazy loading, Reserve space (CLS < 0.1) | Layout thrashing, Cumulative Layout Shift |
| 4 | Style Selection | HIGH | style, product | Match product type, Consistency, SVG icons (no emoji) | Mixing flat & skeuomorphic randomly, Emoji as icons |
| 5 | Layout & Responsive | HIGH | ux | Mobile-first breakpoints, Viewport meta, No horizontal scroll | Horizontal scroll, Fixed px container widths, Disable zoom |
| 6 | Typography & Color | MEDIUM | typography, color | Base 16px, Line-height 1.5, Semantic color tokens | Text < 12px body, Gray-on-gray, Raw hex in components |
| 7 | Animation | MEDIUM | ux | Duration 150-300ms, Motion conveys meaning, Spatial continuity | Decorative-only animation, Animating width/height, No reduced-motion |
| 8 | Forms & Feedback | MEDIUM | ux | Visible labels, Error near field, Helper text, Progressive disclosure | Placeholder-only label, Errors only at top, Overwhelm upfront |
| 9 | Navigation Patterns | HIGH | ux | Predictable back, Bottom nav <=5, Deep linking | Overloaded nav, Broken back behavior, No deep links |
| 10 | Charts & Data | LOW | chart | Legends, Tooltips, Accessible colors | Relying on color alone to convey meaning |
Read these files for detailed rules, workflow instructions, and checklists:
| File | Contents |
|---|---|
references/ux-guidelines.md | Full quick reference for all 10 rule categories (accessibility, touch, performance, style, layout, typography, animation, forms, navigation, charts) |
references/workflow.md | How to use the search CLI, prerequisites, step-by-step workflow (Steps 1-4), domain/stack reference tables |
references/examples.md | Complete example workflow (AI search homepage) |
references/checklist.md | Output formats, query tips, common sticking points, professional UI rules (icons, interaction, light/dark mode, layout/spacing), and pre-delivery checklist |
references/animated-backgrounds.md | Effect → free repo map for animated hero/background components (aurora, meteors, constellations, liquid) and the scroll-scrub cinematic hero technique |
| File | Contents |
|---|---|
references/canvas-design-system.md | Canvas-based design system |
references/shadcn-accessibility.md | shadcn/ui accessibility patterns |
references/shadcn-components.md | shadcn/ui component reference |
references/shadcn-theming.md | shadcn/ui theming guide |
references/tailwind-customization.md | Tailwind CSS customization |
references/tailwind-responsive.md | Tailwind responsive patterns |
references/tailwind-utilities.md | Tailwind utility classes |
Founder voice enforcement for all written output. Apply to any text another person will read.
Propose a principle edit to a skill or persona file based on a (agent_output, human_output) correction pair. Outputs a proposal markdown for human review - never auto-edits the target file.
Engineering discipline distilled from a forensic read of one model's work. Use when building a feature, fixing a bug, writing tests, hardening a data path, or running any task that spans multiple files, sources, or sessions. Two layers: how to RUN the task (stage it, verify each stage with a check that can fail, write done-criteria) and how to WRITE the code (recon before edit, verify against a copy with a negative self-test, single-writer chokepoints, scar-anchored why-comments). Ships a paired hook that deterministically blocks a test from touching live data, the one habit a machine can enforce.
PRD creation and PRD execution operating system. Use when the founder asks to turn a rough idea into a PRD, run a Codex review on a PRD or issue, decompose an approved PRD into issue specs, or execute an issue with scope enforcement and receipt-based closeout. Not for general product ideation or casual drafting; this is the formal gated workflow.
Anti-hallucination research mode. Toggle on to enforce citation requirements, source grounding, and "I don't know" behavior. Toggle off for creative work.
Root-cause analysis for code. Use when a defect shipped and was caught after the fact, a run came back BLOCKED or a deliverable failed validation, a bug recurs after a prior fix, or the user says 'rca this', 'root cause this', 'postmortem this', or 'why did this break'. Produces a structured RCA that separates surface from structural cause, demands evidence-backed verification, and tracks action items. Also covers prospective premortems.
