skills.rest
wesleyara
wesleyaraCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

new-component

Generate Vue components for the TrackGrowth app with project conventions.

Updated Jul 3, 2026
Search Tags:#coding conventions#vue#file structure#component creation#styleguide adherence
One-click install
npx skills add https://github.com/wesleyara/PersonalGrowth.Frontend --skill new-component-wesleyara
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: new-component
Source: https://github.com/wesleyara/PersonalGrowth.Frontend/tree/main/.claude/skills/new-component
Command: npx skills add https://github.com/wesleyara/PersonalGrowth.Frontend --skill new-component-wesleyara

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Streamlines the process of creating Vue components for the TrackGrowth app by providing structured guidelines and conventions, ensuring consistency and maintainability in component development.

Core Features & Use Cases

  • Component Creation Guidance: Offers step-by-step instructions for creating different types of Vue components.
  • Conventions: Enforces coding conventions and file structure best practices, aligning with the project's styleguide.
  • Use Case: When a user needs to create a new habit component or dashboard view for the TrackGrowth app, this skill provides the necessary instructions to do so efficiently.

Quick Start

Run the new-component skill to create a new Vue component for the ' habit ' domain named ' StreakCard '.

Frequently Asked Questions about new-component

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

FAQPage Schema
How do I create Vue components that follow project coding conventions?▼

To create Vue components that follow coding conventions, use a structured generation skill to enforce file structure and styleguide rules, ensuring consistency and maintainability across views, domain components, and generic UI elements.

What's the best way to structure Vue domain components in a large app?▼

Structuring Vue domain components requires organizing files according to specific domain structures. A component creation skill can guide this process by enforcing project conventions and styleguide adherence for views, domain, and generic UI components.

How do I generate a new Vue view and organize its files automatically?▼

Generating a new Vue view and organizing its files is done by specifying the component type and domain. The skill handles file creation and organization based on your app's specific domain structure and project conventions.

Can I use this to create generic UI components alongside domain-specific ones?▼

Yes, you can create generic UI components alongside domain-specific ones. The skill handles multiple component types, including views, domain components, and generic UI components, all while adhering to your project's styleguide.

Do I need a specific file structure to build Vue components this way?▼

You need an existing project with established file structure and coding conventions. The skill uses these guidelines to create and organize new Vue components correctly within your specific domain structure.

Related Skills

Explore More Software Engineering Skills→
minh1609minh1609

hmnm-project

Defines hmnm project's coding conventions, design tokens and file structure for contributors.

Community
Intermediate
slashwhyslashwhy
5

unit-testing

Write Vitest unit and integration tests for Vue components and Express.js routes.

Official
Intermediate
webdriveriowebdriverio
11

Global Coding Style

Enforce global coding style conventions across codebases during file creation or modification.

Official
Basic
denizzeybekdenizzeybek
1

vue-component

Generate Vue 3 Single File Components with enforced project conventions.

Community
Intermediate