ui-ux-pro-max
This skill should be used when the user asks to design or review a UI, create a landing page or dashboard, choose colors or typography, improve accessibility, or implement polished frontend interfaces with a clear design system.
- Installs
- 507
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/galaxy-dawn/claude-scholar --skill ui-ux-pro-max- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads ui-ux-pro-max automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
UI/UX Pro Max
Use this skill to turn a vague UI request into a concrete design system plus implementation guidance.
Role
This skill is for:
- design-system selection,
- palette and typography choices,
- UX review and remediation,
- stack-aware frontend implementation guidance,
- lightweight design-system persistence for multi-page work.
It is not a replacement for product strategy or user research. Use it to make execution sharper after the product direction is already roughly known.
Core workflow
1. Infer the request shape
Extract the minimum design signals first:
- product type,
- industry,
- style keywords,
- target platform,
- implementation stack.
If the user does not specify a stack, default to html-tailwind.
2. Generate the design system first
Use the helper script to produce a compact design recommendation:
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "<product_type> <industry> <keywords>" --design-system -p "Project Name"
This produces:
- recommended style direction,
- palette family,
- typography direction,
- interaction / visual effects,
- landing or layout bias,
- anti-patterns to avoid.
If the work spans multiple turns or pages, persist the design system:
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "<query>" --design-system --persist -p "Project Name"
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "<query>" --design-system --persist -p "Project Name" --page "dashboard"
This creates:
design-system/MASTER.md- optional page-level override notes under
design-system/pages/
3. Pull targeted guidance only when needed
Use a focused search instead of loading everything at once:
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "glassmorphism dark" --domain style
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "animation accessibility" --domain ux
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "real-time dashboard" --domain chart
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "elegant luxury serif" --domain typography
Supported domains:
productstylecolortypographylandingchartux
4. Add stack-specific guidance before coding
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "forms table responsive" --stack html-tailwind
Supported stacks:
html-tailwindreactnextjsvuesvelteswiftuireact-nativefluttershadcnjetpack-compose
5. Synthesize before implementation
After gathering the design system, convert it into:
- layout structure,
- component rules,
- visual tokens,
- interaction rules,
- accessibility constraints,
- implementation notes for the chosen stack.
Do not dump raw search output into the final answer. Use it to justify a coherent design direction.
Default output shape
A good response should usually include:
- product and UI framing,
- recommended style system,
- palette and typography,
- component and layout rules,
- accessibility and interaction checks,
- stack-aware implementation notes.
Safety rules
- Do not hardcode a design language without connecting it to the product type.
- Do not use emoji as primary UI iconography.
- Do not weaken text contrast for visual flair.
- Do not scale interactive cards on hover if it destabilizes layout.
- Do not use animation that violates
prefers-reduced-motion. - Do not invent unsupported helper scripts or datasets; use the bundled
search.pyanddata/ui-reasoning.csvonly.
References
Load only what is needed:
references/USAGE.md- recommended command patterns and retrieval flowdata/ui-reasoning.csv- compact product-to-design heuristics used by the helper scriptscripts/search.py- deterministic helper for design-system, domain, and stack lookup
FAQ
What does the ui-ux-pro-max skill do?
This skill should be used when the user asks to design or review a UI, create a landing page or dashboard, choose colors or typography, improve accessibility, or implement polished frontend interfaces with a clear design system.
How do I install ui-ux-pro-max?
Run npx skills add https://github.com/galaxy-dawn/claude-scholar --skill ui-ux-pro-max in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ui-ux-pro-max/ (personal) or .claude/skills/ui-ux-pro-max/ (project).
Which AI agents can use ui-ux-pro-max?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is ui-ux-pro-max safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains ui-ux-pro-max?
It is published by galaxy-dawn in galaxy-dawn/claude-scholar. It has 507 recorded installs.
More from galaxy-dawn/claude-scholar
citation-verification
galaxy-dawn/claude-scholar
This skill provides reference guidance for citation verification in academic writing. Use when the user asks about "citation verification best practices", "how to verify references", "preventing fake citations", or needs guidance on citation accuracy. This skill supports ml-paper-writing by providing detailed verification principles and common error patterns.
writing-anti-ai
galaxy-dawn/claude-scholar
This skill should be used when the user asks to "remove AI writing patterns", "humanize this text", "make this sound more natural", "remove AI-generated traces", "fix robotic writing", or needs to eliminate AI writing patterns from prose. Supports both English and Chinese text. Based on Wikipedia's "Signs of AI writing" guide, detects and fixes inflated symbolism, promotional language, superficial -ing analyses, vague attributions, AI vocabulary, negative parallelisms, and excessive conjunctive phrases.
paper-self-review
galaxy-dawn/claude-scholar
This skill should be used when the user asks to "review paper quality", "check paper completeness", "validate paper structure", "self-review before submission", "audit claims", "check overclaiming", "verify whether results support claims", or mentions systematic paper quality checking. Provides comprehensive quality assurance checklist for academic papers.
review-response
galaxy-dawn/claude-scholar
Systematic review response workflow from comment analysis to professional rebuttal writing. Use when the user asks to "write rebuttal", "respond to reviewers", "draft review response", or "analyze review comments". Improves paper acceptance rates.
results-analysis
galaxy-dawn/claude-scholar
This skill should be used when the user asks to "analyze experimental results", "run strict statistical analysis", "compare model performance", "generate scientific figures", "check significance", "do ablation analysis", or mentions interpreting experiment data with rigorous statistics and visualization. It focuses on strict analysis bundles, not Results-section prose.
research-ideation
galaxy-dawn/claude-scholar
This skill should be used when the user asks to "brainstorm research ideas", "use 5W1H framework", "identify research gaps", "conduct gap analysis", "start research project", "conduct literature review", "define research question", "select research method", "plan research", or mentions research project initiation phase. Provides comprehensive guidance for research startup workflow from idea generation to planning.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.