Where are the quality reports stored?

Reports are generated as JSON files in a dedicated '.qa-reports' directory, including a unique UUID, TDD status, and a weighted QA score.

Does this skill support the Vue Options API?

No, it strictly enforces the Vue 3 Composition API and TypeScript to ensure modern best practices and type safety.

How does it handle E2E testing?

The skill parses your user stories and automatically maps Gherkin Given/When/Then statements into functional Playwright test files.

What is the core workflow of this skill?

It follows a strict 8-step process: Understand (Gherkin), Test First (Vitest), Implement, Refactor, QA Check, E2E Write (Playwright), E2E Run, and Report.

What happens if an E2E test fails?

The skill dictates that you must fix the implementation code rather than the test itself, unless the original acceptance criteria were identified as incorrect.

Vue Development & TDD Workflow

Name: Vue Development & TDD Workflow
Author: SSiertsema

bySSiertsema

0•

Security & Testing

Enforces a strict test-driven development cycle for Vue 3 and Nuxt 3, featuring automated E2E test generation from Gherkin acceptance criteria.

This skill optimizes professional Vue 3 and Nuxt 3 development by implementing a rigorous 8-step TDD workflow. It guides developers through writing failing unit tests with Vitest before implementation and automatically generates Playwright E2E test files from Gherkin-style user stories. By enforcing modern standards like the Composition API, TypeScript, and mandatory QA checklists, it ensures that every component is reliable, performant, and perfectly aligned with business requirements. The skill culminates in detailed JSON reporting, providing a transparent audit trail of testing results and quality scores.

Key Features

01Comprehensive QA checklists for TypeScript and reactivity standards

02Automated JSON report generation with UUID-based tracking

03Strict TDD workflow for Vue 3 and Nuxt 3 components

040 GitHub stars

05Vitest and Vue Test Utils integration for unit testing

06Automated Playwright E2E test generation from Gherkin syntax

Use Cases

01Standardizing frontend quality gates across large-scale enterprise projects

02Implementing complex Nuxt 3 features based on structured Gherkin user stories

03Building mission-critical Vue components with 100% requirement traceability

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ssiertsema/claude-code-plugins vue-development

For use in Claude.ai and ChatGPT

Download Skill