Ui Design System
Helps with UI components, 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 davila7-ui-design-system npx -- -y @trustedskills/davila7-ui-design-system
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"davila7-ui-design-system": {
"command": "npx",
"args": [
"-y",
"@trustedskills/davila7-ui-design-system"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
The davila7-ui-design-system skill provides a structured approach to creating consistent, reusable UI components for web applications. It includes pre-built design tokens, component libraries, and styling guidelines that help developers maintain visual harmony across projects.
When to use it
- You're building a new frontend application and want to ensure consistent UI elements across the app.
- Your team needs a shared design system to streamline development and reduce duplication of effort.
- You are working on a large-scale project with multiple contributors who need access to standardized components.
Key capabilities
- Predefined design tokens for colors, spacing, typography, and more
- Reusable UI component library (buttons, forms, cards, etc.)
- Integration-ready with modern frontend frameworks like React or Vue
- Documentation and styling guidelines for consistent implementation
Example prompts
- "Generate a button component using the
davila7-ui-design-system." - "Create a form layout following the design system's spacing and typography rules."
- "Export the color palette from the UI design system as SCSS variables."
Tips & gotchas
- Ensure your project is set up with a compatible frontend framework before using this skill.
- Customize the design tokens to match your brand guidelines for optimal results.
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.