Components Build
Helps with components, building as part of agent workflows workflows.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add components-build npx -- -y @trustedskills/components-build
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"components-build": {
"command": "npx",
"args": [
"-y",
"@trustedskills/components-build"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill provides comprehensive guidelines for building modern, composable, and accessible UI components, specifically within React projects. It covers a wide range of topics from core design principles to publishing components on registries or npm. The Components.build specification offers detailed rules categorized by priority to ensure consistent and high-quality component development.
When to use it
- When creating new React components or component libraries.
- During the design phase for component APIs and prop interfaces.
- To implement accessibility features like keyboard navigation, ARIA attributes, and focus management.
- When building composable component architectures.
- For styling components using Tailwind CSS and CVA.
Key capabilities
- Provides guidelines across 16 rule categories covering various aspects of UI component development.
- Offers a prioritized structure for rules (Overview, Principles, Definitions, Composition, Accessibility, etc.).
- Covers topics like: accessibility, state management, TypeScript types, polymorphism, and styling with Tailwind CSS/CVA.
- Includes guidance on publishing components to registries and npm.
Example prompts
- "What are the principles for composable UI components?"
- "How should I handle keyboard navigation within my React component according to these guidelines?"
- "Show me the rules related to styling with Tailwind CSS."
Tips & gotchas
- This skill is specifically focused on building UI components in React. It's not a general development assistant.
- The guidelines are extensive; start by focusing on the higher priority categories (Overview, Principles, Definitions).
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.