NuxtUI TDD Component Development

Overview

Build Vue 3 components with NuxtUI following strict Test-Driven Development (TDD) methodology. This skill provides workflows, templates, and guardrails for creating well-tested, reusable UI components using the Atomic Design pattern.

When to Use This Skill

Use this skill when:

• Building new Vue components (atoms, molecules, organisms)
• Creating components that wrap NuxtUI base components (UButton, UInput, UFormField, etc.)
• Working with Storybook interaction tests
• Following TDD methodology with the TDD guard hook
• User requests involve "implement [ComponentName]", "create a component", "build with TDD"

Core Workflow

1. Determine Component Level