How does this skill handle ShadCN-Vue components?

It enforces a strict read-only policy for the ui directory and guides the creation of wrappers in the custom directory for any necessary extensions or modifications.

What is the recommended component selection order?

The skill follows a three-tier priority: first ShadCN-Vue components, second project-specific custom wrappers, and third domain-specific feature components.

How are imports organized using this skill?

It follows a structured 6-step sequence: Vue core, Inertia/Framework, UI components, Custom components, Composables, and finally Types.

Does this skill provide standardized form patterns?

Yes, it specifically promotes the use of FloatingLabelInput for all form fields to ensure consistent labeling, error handling, and accessibility.

Can I use custom CSS with this skill?

The skill discourages custom scoped CSS in favor of Tailwind CSS utility classes to ensure project-wide design consistency and maintainability.

Vue Component Hierarchy Manager

Name: Vue Component Hierarchy Manager
Author: richardhowes

byrichardhowes

0•

设计工具

Enforces standardized component selection and implementation patterns for ShadCN-Vue and Tailwind CSS projects.

This skill optimizes the frontend development workflow by establishing a clear hierarchy for component selection, prioritizing ShadCN-Vue base components, custom wrappers, and domain-specific feature components. It ensures design system compliance by preventing the modification of core UI files and enforcing the use of standardized patterns for forms, tables, and dialogs. By guiding Claude to use specific custom inputs like FloatingLabelInput and organized import structures, it maintains architectural consistency across Vue-based applications.

主要功能

01Strict Tailwind CSS utility usage guidance to prevent CSS bloat

02Hierarchical component selection logic (ShadCN vs Custom vs Feature)

030 GitHub stars

04Pre-configured code snippets for common UI elements like Cards and Tables

05Enforcement of read-only rules for core ShadCN-Vue components

06Standardized import organization patterns for Vue and Inertia.js

使用场景

01Scaffolding new Vue components with correct design system compliance

02Ensuring consistent import structures across large-scale frontend repositories

03Refactoring forms to use standardized floating label input patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add richardhowes/self-improvement-code-quality-plugin component-hierarchy

For use in Claude.ai and ChatGPT

主要功能

01Strict Tailwind CSS utility usage guidance to prevent CSS bloat

02Hierarchical component selection logic (ShadCN vs Custom vs Feature)

030 GitHub stars

04Pre-configured code snippets for common UI elements like Cards and Tables

05Enforcement of read-only rules for core ShadCN-Vue components

06Standardized import organization patterns for Vue and Inertia.js

使用场景

01Scaffolding new Vue components with correct design system compliance

02Ensuring consistent import structures across large-scale frontend repositories

03Refactoring forms to use standardized floating label input patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add richardhowes/self-improvement-code-quality-plugin component-hierarchy

For use in Claude.ai and ChatGPT