skills.rest
fodurrr
fodurrrCOMMUNITY
Explore all skills by this author →
GitHub

port-component-tests

Generate Playwright test suites for ported Nuxt UI components from specifications.

Updated Aug 27, 2026
Search Tags:#automation#playwright#test-generation#nuxt-ui#spec-analysis#component-porting
One-click install
npx skills add https://github.com/fodurrr/xTweak --skill port-component-tests
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: port-component-tests
Source: https://github.com/fodurrr/xTweak/tree/main/.claude/skills/nuxt-ui-port/port-component-tests
Command: npx skills add https://github.com/fodurrr/xTweak --skill port-component-tests

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ported Nuxt UI components often require extensive test coverage; this Skill automates the generation of Playwright tests to validate rendering, interactions, and accessibility without manual boilerplate.

Core Features & Use Cases

  • Analyzes component specs and ported variants to produce comprehensive Playwright test suites.
  • Generates tests for variants (color, size), states (hover, focus, loading, disabled), slots (default, leading, trailing), and interactions.
  • Outputs tests in JSON, JavaScript, or Markdown formats and includes placeholders for visual checks.

Quick Start

Provide a component name to generate a Playwright test suite for ported Nuxt UI components.

Frequently Asked Questions about port-component-tests

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

FAQPage Schema
How do I generate Playwright tests for ported Nuxt UI components?▼

To generate Playwright tests for ported Nuxt UI components, provide a component name and its specification. The system analyzes the spec to automatically produce a comprehensive test suite covering variants, states, and slots.

What do I need to provide to auto-generate component test suites?▼

You need to provide a present component specification and the ported component name. This specification allows the system to analyze variants, states, and slots to output the corresponding test code.

Can I output automated component tests in different file formats?▼

Yes, automated component tests can be output in JSON, JavaScript, or Markdown formats. The generated test code includes placeholders for visual checks to help validate rendering and accessibility.

Does the generated Playwright test suite execute tests automatically?▼

No, the generated Playwright test suite does not execute tests automatically. It outputs the test code for users to run themselves, ensuring you maintain control over the test execution environment.

What component states and variants does the test generation cover?▼

The test generation covers multiple component variants like color and size, states including hover, focus, loading, and disabled, as well as slots such as default, leading, and trailing interactions.

Why do I need a component spec to generate Playwright tests?▼

A component spec is required because the test generation logic relies on analyzing these specifications and ported variants. Without a present spec, the system cannot determine the necessary rendering and interaction validations.

Related Skills

Explore More Software Engineering Skills→
georgeguimaraesgeorgeguimaraes
167

phoenix-thinking

Review Phoenix LiveView apps to prevent database queries in mount.

Community
Intermediate
redpanda-dataredpanda-data
34

visual-review

Automate visual and accessibility reviews of frontend UI changes with Playwright.

Official
Advanced
dnsnamdangdnsnamdang

playwright-setup

Automate Playwright E2E test setup and execution for Nuxt projects.

Community
Intermediate
semicolon-devteamsemicolon-devteam

e2e-test

Automate Playwright end-to-end tests to validate runtime browser behavior.

Official
Advanced