Skills
.Work. You
Rest

component-hierarchy

Community

Guide Vue component selection for consistent UI.

Software Engineering#architecture#vue#component#imports#design-system#ui-components#shadcn-vue
Authorrichardhowes
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill addresses inconsistencies in component usage across Vue projects by prescribing a canonical hierarchy and enforcing safe import practices, ensuring alignment with the design system.

Core Features & Use Cases

  • Prioritize ShadCN-Vue components located at @/components/ui/ as the default base.
  • Fall back to project-specific custom components at @/components/custom/ for wrappers and extensions.
  • Consider feature components at @/components/[feature]/ for domain-specific UI.
  • Use case: when creating or modifying Vue components, verify the recommended import paths and component usage to maintain design-system integrity.

Quick Start

Follow the selection order: ShadCN-Vue, then Custom, then Feature components. Check imports and ensure wrappers follow the guidelines in this Skill.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: component-hierarchy
Download link: https://github.com/richardhowes/self-improvement-code-quality-plugin/archive/main.zip#component-hierarchy

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.