skills.rest
richardhowes
richardhowesCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

component-hierarchy

Enforce ShadCN-Vue, custom, and feature component import order in Vue projects.

Updated Jan 11, 2026
Search Tags:#architecture#vue#component#imports#design-system#ui-components#shadcn-vue
One-click install
npx skills add https://github.com/richardhowes/self-improvement-code-quality-plugin --skill component-hierarchy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-hierarchy
Source: https://github.com/richardhowes/self-improvement-code-quality-plugin/tree/main/code-quality/skills/component-hierarchy
Command: npx skills add https://github.com/richardhowes/self-improvement-code-quality-plugin --skill component-hierarchy

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about component-hierarchy

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I maintain consistent UI component usage in a Vue project?▼

To maintain consistent Vue component usage, follow a canonical three-tier import hierarchy: prioritize ShadCN-Vue base components, then custom wrappers, and finally feature components. This enforces design-system compliance and safe import practices across your project.

What is the correct import order for ShadCN-Vue components?▼

The correct import order for ShadCN-Vue components is three-tier: first import from @/components/ui/ for ShadCN-Vue, then @/components/custom/ for wrappers, and finally @/components/[feature]/ for domain-specific UI. This ensures design-system integrity.

When should I use custom Vue components instead of ShadCN-Vue?▼

Use custom Vue components instead of ShadCN-Vue when you need project-specific wrappers or extensions. Custom components act as the second tier in the hierarchy, falling back from the ShadCN-Vue base to maintain alignment with your design system.

Does this component hierarchy approach work with feature-specific Vue UI?▼

Yes, the component hierarchy approach works with feature-specific Vue UI by placing domain-specific components at @/components/[feature]/. This serves as the third tier, ensuring feature components are used only when base and custom components cannot meet the requirements.

Why does my Vue design system have inconsistent component imports?▼

Your Vue design system may have inconsistent component imports because there is no prescribed canonical hierarchy. Enforcing a strict three-tier import order for ShadCN-Vue, custom, and feature components resolves these inconsistencies and ensures safe import practices.

Related Skills

Explore More Software Engineering Skills→
gwenwindflowergwenwindflower
9

shadcn-ui

Automate adding and configuring shadcn/ui components in frontend projects.

Community
Intermediate
tamaguitamagui
14.1k

tamagui

Guide Tamagui design system usage with tokens, themes, and component patterns.

Official
Intermediate
linehaul-ailinehaul-ai
4

shadcn-svelte-skill

Install and customize shadcn-svelte UI components in SvelteKit projects.

Official
Intermediate
alxayoalxayo
17

eslint-security-scan

Scan JavaScript/TypeScript projects for security vulnerabilities using ESLint plugins.

Community
Advanced