Ui Ux Designer
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 rmyndharis-ui-ux-designer npx -- -y @trustedskills/rmyndharis-ui-ux-designer
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"rmyndharis-ui-ux-designer": {
"command": "npx",
"args": [
"-y",
"@trustedskills/rmyndharis-ui-ux-designer"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill provides expert guidance on UI/UX design tasks, focusing on user-centered design, modern design systems, and accessible interface creation. It specializes in areas like atomic design, design token management (using tools like Figma Variables and Style Dictionary), and cross-platform design consistency. The skill aims to improve workflows and ensure inclusive user experiences through best practices and actionable steps.
When to use it
- When working on UI/UX designer tasks or workflows.
- When needing guidance, best practices, or checklists for UI/UX design.
- To optimize design-to-development handoffs.
- For assistance with creating and maintaining design systems.
Key capabilities
- Design Systems Mastery: Atomic design methodology, token creation & management, component library design, multi-brand system architecture, version control, cross-platform adaptation.
- Modern Design Tools & Workflows: Figma advanced features (Auto Layout, Variants, Components, Variables), plugin development, Storybook/Chromatic integration, collaborative workflows, prototyping.
- User Research & Analysis: User interviews, usability testing, A/B testing, user journey mapping, persona development, analytics integration.
- Accessibility & Inclusive Design: WCAG compliance, accessibility audits, color contrast analysis, screen reader optimization, inclusive design patterns.
- Information Architecture & UX Strategy: Site mapping, navigation hierarchy optimization.
Example prompts
- "What are the best practices for creating accessible buttons in Figma?"
- "Can you help me plan a user interview to understand why users aren't completing our signup flow?"
- "How can I implement atomic design principles for my web application’s UI components?"
Tips & gotchas
- Clearly define your goals, constraints, and required inputs before engaging with the skill.
- For detailed implementation examples, consult the
resources/implementation-playbook.mdfile. - This skill is specifically focused on UI/UX design; avoid using it for tasks outside this scope.
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.