Generate

This handles code generation tasks when you need to create new files or boilerplate from scratch. You'd reach for it when starting a new component, setting up configuration files, or scaffolding out test suites rather than modifying existing code. The distinction matters because generation and editing are different modes of work with different context needs. It's a clean separation of concerns that keeps your workflow organized, though in practice you'll probably bounce between this and an edit skill constantly. Works well when you have a clear spec or pattern to follow and just need the code written out.

skills.sh installs: 1.6K
GitHub stars: 29.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add alirezarezvani/claude-skills --skill generate --agent claude-code

Installs into .claude/skills of the current project.

Files

Generate Playwright Tests

Generate production-ready Playwright tests from a user story, URL, component name, or feature description.

Input

$ARGUMENTS contains what to test. Examples:

"user can log in with email and password"
"the checkout flow"
"src/components/UserProfile.tsx"
"the search page with filters"

Steps

1. Understand the Target

Parse $ARGUMENTS to determine:

User story: Extract the behavior to verify
Component path: Read the component source code
Page/URL: Identify the route and its elements
Feature name: Map to relevant app areas

2. Explore the Codebase

Use the Explore subagent to gather context:

Read playwright.config.ts for testDir, baseURL, projects
Check existing tests in testDir for patterns, fixtures, and conventions
If a component path is given, read the component to understand its props, states, and interactions
Check for existing page objects in pages/
Check for existing fixtures in fixtures/
Check for auth setup (auth.setup.ts or storageState config)