Ui Ux Pro Max
Helps with UI components, UX design as part of building frontend UIs and user experiences workflows.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add gracebotly-ui-ux-pro-max npx -- -y @trustedskills/gracebotly-ui-ux-pro-max
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"gracebotly-ui-ux-pro-max": {
"command": "npx",
"args": [
"-y",
"@trustedskills/gracebotly-ui-ux-pro-max"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
The Ui Ux Pro Max skill provides access to a curated database of UI/UX resources through native Mastra tools. It enables AI agents to offer design recommendations based solely on tool queries, avoiding reliance on LLM memory or invented values. The skill covers style suggestions, typography pairings, chart type recommendations, industry-specific design patterns, and UX best practices.
When to use it
- When designing a new user interface (UI) for a web or mobile application.
- To find appropriate font pairings for a specific brand aesthetic.
- For selecting the most effective chart types to visualize data in dashboards.
- To ensure adherence to UX best practices and accessibility guidelines.
- When building out an entire design system.
Key capabilities
- getStyleRecommendations: Searches 67+ UI styles based on product type, industry, and keywords (e.g., "fintech dashboard minimal"). Returns style category, colors (hex), effects, complexity rating, and implementation checklist.
- getTypographyRecommendations: Searches 57+ font pairings by style, mood, and use case (e.g., "modern tech startup"). Returns font pairings (heading + body), weights, line heights, and use cases.
- getChartRecommendations: Searches 25+ chart types based on data pattern and visualization goal (e.g., "time series trend"). Returns chart type, secondary options, color guidance, accessibility notes, and library recommendations.
- getProductRecommendations: Searches industry-specific design patterns (e.g., "crm dashboard"). Returns primary style recommendation, landing page pattern, dashboard style, and key considerations.
- getUXGuidelines: Searches 98+ UX best practices by category and platform (e.g., "mobile navigation"). Returns guideline details, do/don't examples, code samples, and severity rating.
Example prompts
- "Find UI styles suitable for a healthcare monitoring application."
- "Suggest font pairings for a friendly and approachable brand."
- "What chart types are best for displaying time series data?"
- "Show me UX guidelines for mobile navigation."
- “Create a complete design system for a fintech dashboard with dark mode.”
Tips & gotchas
- Tool-Driven Design: The AI agent must use the provided tools (getStyleRecommendations, getTypographyRecommendations, etc.) to generate design advice. It should never invent its own design values.
- Specificity is Key: If tool results are empty, try broadening your query with more general terms.
- Combine Results: For comprehensive recommendations, combine results from multiple tools. Always reference specific values returned by the tools (e.g., hex codes, font names).
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.