| name | ui-ux-pro-max |
| description | Heavy UI/UX reference library for major design exploration. Use only for new dashboards, landing pages, redesigns, design systems, marketing heroes, analytics-heavy screens, typography/color exploration, and unfamiliar product styles. Not project governance. |
UI/UX Pro Max - Heavy Reference Library
This skill is a heavy UI/UX reference library.
It is NOT project governance.
It does NOT override docs/AI_CORE/UI_UX_GOVERNANCE.md.
It must NOT be used for small UI fixes.
Use it only when the Designer needs broader design exploration beyond existing project patterns.
WHEN TO USE
Use for:
- new landing page
- new dashboard
- new SaaS module
- major redesign
- new design system
- design system refresh
- marketing hero
- pricing page
- onboarding flow
- analytics-heavy reporting screen
- unfamiliar product category
- premiumization of an existing interface
- style exploration
- typography exploration
- color palette exploration
- chart/data visualization exploration
Do NOT use for:
- spacing fix
- z-index fix
- button polish
- card polish
- modal alignment fix
- table overflow fix
- focus state fix
- small responsive fix
- minor dark mode fix
- existing-pattern correction
- simple implementation bugfix
For small fixes, use the codebase and governance.
RELATIONSHIP TO GOVERNANCE
Governance wins over this skill.
This skill may suggest:
- visual direction
- design pattern options
- color/typography reasoning
- layout references
- landing/dashboard structures
- chart/data visualization direction
- anti-patterns for the specific task
This skill must not redefine:
- spacing scale
- accessibility rules
- mobile-first rules
- component consistency rules
- state requirements
- tenant branding rules
- project quality bar
If conflict exists, reject the skill suggestion and follow governance.
DESIGN EXPLORATION INPUT
Before using this skill, define:
product_type: "<SaaS | marketplace | dashboard | landing | mobile app | etc>"
page_type: "<page/component/flow>"
goal: "<business or user goal>"
target_user: "<who uses it>"
style_target: "<premium | calm | dense | editorial | luxury | etc>"
stack: "<React | Next.js | Tailwind | shadcn/ui | etc>"
existing_constraints: [list]
data_density: "low | medium | high"
interaction_complexity: "low | medium | high"
EXPLORATION DOMAINS
Use only the domains needed for the task.
Product Pattern
Use when choosing page/module structure.
Examples:
- SaaS dashboard
- admin panel
- e-commerce
- marketplace
- portfolio
- blog
- mobile app
- service landing
- analytics/reporting
Output should clarify:
- main user goal
- primary content
- secondary content
- action hierarchy
- trust signals
- mobile implications
Style Direction
Use when visual direction is unclear or being refreshed.
Examples:
- premium SaaS
- minimal dashboard
- luxury editorial
- gallery/art direction
- fintech clarity
- bento grid
- soft enterprise
- dark premium
- clean marketplace
- data-dense admin
Output should clarify:
- why the style fits
- what to avoid
- how it affects layout
- how it affects density
- whether it fits existing product conventions
Color Direction
Use for brand, theme, landing, dashboard, or chart direction.
Output should define role-level recommendations:
- background
- text
- border
- foreground
- muted
- primary
- secondary
- accent
- destructive
- success
- warning
- info
Do not output random decorative palettes.
Colors must support product purpose and governance.
Typography Direction
Use for new design systems, landing pages, premium brand direction, or readability problems.
Output should define:
- display style
- heading style
- body style
- metadata style
- button/form style
Consider:
- readability
- hierarchy
- product tone
- language support
- performance
- dense UI compatibility
Landing Page Direction
Use for marketing and conversion pages.
Evaluate:
- hero clarity
- CTA clarity
- value proposition
- CTA hierarchy
- trust signals
- feature explanation
- social proof
- pricing clarity
- FAQ placement
- mobile conversion path
Output should define:
- hero
- section order
- hero strategy
- CTA strategy
- credibility elements
- mobile hero behavior
- mobile CTA behavior
Dashboard Direction
Use for SaaS/admin/data-heavy screens.
Evaluate:
- navigation model
- title/action row
- metrics
- filters
- tables
- charts
- density
- loading/empty/error areas
- mobile transformation
Output should define:
- what appears first
- what users act on first
- what is secondary
- how dense data becomes mobile-friendly
Chart / Data Visualization Direction
Use only for analytics, reporting, comparison, trend, distribution, funnel, or KPI screens.
Match purpose:
- trend → line chart
- comparison → bar chart
- ranking → horizontal bar
- proportion → donut/pie only for few categories
- distribution → histogram
- relationship → scatter
- conversion → funnel
- timeline → timeline chart
- KPI snapshot → metric card
Output should define:
- chart type
- reason
- data risks
- mobile behavior
- fallback recommendation
Component Direction
Use for complex reusable UI decisions.
Examples:
- cards
- buttons
- navbars
- tabs
- sidebars
- modals
- sheets
- tables
- forms
- filters
- command menus
- pricing blocks
- feature sections
Output should define:
- existing component fit
- shadcn/ui fit
- composition option
- custom component risk
- reuse potential
Stack Direction
Use only when stack constraints affect design.
Examples:
- React
- Next.js
- Tailwind
- shadcn/ui
- Vue
- Svelte
- React Native
- Flutter
- SwiftUI
Output should clarify:
- implementation constraints
- library limitations
- performance risks
- component feasibility
- SSR/client boundary risks when relevant
Do not write production code.
HEAVY EXPLORATION OUTPUT FORMAT
When this skill is used, return:
skill_role: "heavy UI/UX reference"
governance_overrides_skill: true
context:
product_type: "<type>"
page_type: "<page/component>"
goal: "<goal>"
constraints: [list]
recommended_direction:
style: "<visual direction>"
rationale: "<why it fits>"
avoid: [list]
layout_direction:
pattern: "<recommended structure>"
content_priority: "<what appears first>"
responsive_implication: "<mobile/tablet/desktop notes>"
color_direction:
role_notes: "<role-based guidance>"
risks: [list]
typography_direction:
hierarchy: "<display/heading/body/meta>"
risks: [list]
component_direction:
recommended_components: [list]
reuse_opportunities: [list]
custom_component_risk: "<risk or none>"
data_visualization:
needed: true | false
recommendation: "<chart/table/card direction or none>"
fallback: "<table/text fallback if needed>"
handoff_summary:
decisions_to_apply: [list]
decisions_to_reject: [list]
FINAL RULES
This skill exists to expand thinking for heavy UI/UX work.
It must:
- stay optional
- stay evidence-oriented
- support Designer
- produce direction, not implementation
- respect project governance
It must not:
- make small tasks heavier
- override governance
- create generic redesigns
- output production code
- duplicate governance rules
- replace Designer handoff
