skills.rest
sayali-ingle-pdl
sayali-ingle-pdlCOMMUNITY
Explore all skills by this author →
GitHub

view-components

Generate paired Vue view components and their .spec.ts unit tests.

Updated Nov 20, 2025
Search Tags:#frontend#routing#vue#scaffolding#component#unit-testing#test-driven-development
One-click install
npx skills add https://github.com/sayali-ingle-pdl/adusa-ai-vuejs-app-template --skill view-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: view-components
Source: https://github.com/sayali-ingle-pdl/adusa-ai-vuejs-app-template/tree/main/.github/agents/app-starter/agents-context/skills/view-components
Command: npx skills add https://github.com/sayali-ingle-pdl/adusa-ai-vuejs-app-template --skill view-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the boilerplate creation of paired Vue view components and their unit tests to accelerate project bootstrapping and ensure consistent structure.

Core Features & Use Cases

  • Automatically generate both HomeView.vue/HomeView.spec.ts and PageNotFoundView.vue/PageNotFoundView.spec.ts in their respective directories.
  • Enforce a test-driven development order where tests are created before components to ensure alignment with testing expectations.
  • Ensure all four files exist and follow naming conventions, enabling immediate routing setup and test coverage tracking.

Quick Start

Create both HomeView.vue and HomeView.spec.ts, followed by PageNotFoundView.vue and PageNotFoundView.spec.ts in their respective directories.

Frequently Asked Questions about view-components

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

FAQPage Schema
How do I bootstrap Vue view components with unit tests for new routes?▼

Creating Vue views with unit tests requires generating paired .vue and .spec.ts files. This approach enforces test-driven development by creating tests before components, ensuring mandatory test existence and 80% coverage for HomeView and PageNotFoundView.

What does test-driven execution order mean for Vue scaffolding?▼

Test-driven execution order in Vue scaffolding means creating .spec.ts test files before their corresponding view components. This ensures components align with testing expectations from the start and enforces 80% test coverage before routing setup.

Can I generate PageNotFoundView and HomeView components with theme variables?▼

Yes, generating HomeView and PageNotFoundView components uses theme variables for styling. The scaffolding creates four total files, including content files and corresponding .spec.ts tests, applying theme variables directly during boilerplate creation.

Do I need existing routing configuration to scaffold Vue views?▼

No, you do not need existing routing configuration to scaffold Vue views. The generated HomeView and PageNotFoundView files follow standard naming conventions, enabling immediate routing setup and test coverage tracking after creation.

What is the best way to enforce 80% test coverage for Vue boilerplate?▼

Enforcing 80% test coverage for Vue boilerplate is best achieved by generating paired view and spec files together. This mandates test existence and uses a test-driven development order to guarantee coverage tracking from project initialization.

Why does my Vue scaffolding fail when test files are missing?▼

Vue scaffolding fails when test files are missing because the process enforces mandatory test existence. It requires both .vue and .spec.ts files to exist for HomeView and PageNotFoundView to maintain test-driven execution order and coverage.

Related Skills

Explore More Software Engineering Skills→
tecnoclutecnoclu

Skill Creator

Generate standard directory structures and SKILL.md files for new agent skills.

Community
Basic
imrim12imrim12

vue-router-best-practices

Guide Vue Router 4 navigation guards and component lifecycle patterns.

Community
Advanced
sayali-ingle-pdlsayali-ingle-pdl

testing

Generate co-located .spec.ts test files for Vue 3 components and stores.

Community
Intermediate
vinhgiangvinhgiang

nx-generate

Generate code artifacts in an Nx monorepo using Nx generators.

Community
Intermediate