Ui Ux Design
Helps with UI components, UX design, 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 ui-ux-design npx -- -y @trustedskills/ui-ux-design
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"ui-ux-design": {
"command": "npx",
"args": [
"-y",
"@trustedskills/ui-ux-design"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill provides access to a searchable database of UI/UX patterns and design resources. It helps AI agents find proven design solutions, implementation guidance, and stack-specific best practices for building user interfaces and improving user experiences. The skill guides the agent through a structured workflow involving analyzing requirements and searching relevant domains within the reference database.
When to use it
- When designing or reviewing UI components for SaaS applications.
- To find color palettes suitable for an e-commerce website.
- For inspiration on typography pairings when creating a portfolio site.
- To identify best practices and avoid common UX anti-patterns in a dashboard application.
- To discover recommended chart types for data visualization within an analytics platform.
Key capabilities
- Searchable Pattern Database: Access to curated UI/UX patterns, styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.
- Domain-Based Search: Allows searching across specific domains like "product," "style," "typography," "color," "landing," "chart," "ux," and “stack”.
- Stack-Specific Guidelines: Provides design guidance tailored to different technology stacks including html-tailwind, React, Next.js, Vue, Svelte, SwiftUI, React Native, and Flutter.
- Structured Workflow: Guides the agent through analyzing user requirements and iteratively searching for relevant information.
Example prompts
- "I need a color palette for a fintech SaaS application."
- "What are some best practices for accessibility in a landing page?"
- "Suggest font pairings for a professional portfolio website."
- "Show me chart recommendations for visualizing trends over time."
- “Find UI patterns suitable for an e-commerce product”
Tips & gotchas
- Python Requirement: This skill requires Python 3 to be installed. Follow the instructions in the prerequisites section to install it if needed.
- Iterative Search: The skill recommends searching multiple times across different domains to gather comprehensive information and context.
- Default Stack: If a specific technology stack isn't specified, the agent will default to using "html-tailwind" guidelines.
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.