Component Architecture
Analyzes systems to suggest optimal component breakdowns, interfaces, and architectural patterns for improved modularity.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add component-architecture npx -- -y @trustedskills/component-architecture
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"component-architecture": {
"command": "npx",
"args": [
"-y",
"@trustedskills/component-architecture"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill assists in designing and implementing UI components using GoodVibes analysis tools. It guides users through building React, Vue, or Svelte components with a focus on composition, state management, and performance optimization. The skill helps analyze existing codebases to understand component structure and patterns before new development begins.
When to use it
- Building new UI components or component libraries.
- Refactoring existing component hierarchies or composition patterns.
- Optimizing component render performance.
- Organizing component file structures.
- Implementing design systems or atomic design patterns.
Key capabilities
- Component Discovery: Identifies all component files using glob patterns for React, Vue, and Svelte projects.
- Structure Mapping: Analyzes component organization patterns (feature-based, atomic, flat).
- Pattern Analysis: Identifies composition patterns, state management approaches, and styling techniques by searching code for specific keywords.
- Framework Detection: Determines the framework in use (React, Vue, Svelte, or a mix).
Example prompts
- "Build component using Component Architecture skill."
- "Create UI with optimal render performance, leveraging the Component Architecture skill."
- "Analyze the component structure of this project with the Component Architecture skill."
Tips & gotchas
- The skill is specifically designed for React, Vue, and Svelte component development.
- Familiarity with GoodVibes terminology (e.g.,
discover,queries) will improve usability. - The initial discovery phase reveals valuable insights into existing codebase patterns before starting new work.
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.