create-page-object
Automates the creation of Playwright page objects by inspecting the target UI.
Install
mkdir -p .claude/skills/create-page-object && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/10499" && unzip -o skill.zip -d .claude/skills/create-page-object && rm skill.zipInstalls to .claude/skills/create-page-object
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Erstellt ein neues Playwright Page-Object für eine Admin-Seite im Schulportal. Nutzt Playwright MCP zur Live-Inspektion der Zielseite (data-testid-Attribute, interaktive Elemente) und generiert danach die TypeScript-Datei nach den Projektkonventionen. Use when asked to create a new page object, add a page class, or implement a new page for the schulportal test automation project.Key capabilities
- →Inspect pages via MCP
- →Generate TypeScript classes
- →Implement page objects
- →Capture testIds
How it works
Uses Playwright MCP to inspect the DOM and generate a TypeScript class following project conventions.
Inputs & outputs
When to use create-page-object
- →Create a new page object
- →Automate a new admin page
- →Capture data-testid for tests
About create-page-object
Uses Playwright MCP to scan admin pages for elements, then generates a TypeScript class adhering to the Schulportal project structure and naming conventions.
Erstellt ein neues Playwright Page-Object für eine Admin-Seite im Schulportal. Nutzt Playwright MCP zur Live-Inspektion der Zielseite (data-testid-Attribute, interaktive Elemente) und generiert danach die TypeScript-Datei nach den Projektkonventionen. Use when asked to create a new page object, add
When not to use it
- →When extending existing page objects
- →When no login access is available
Prerequisites
Limitations
- →Requires login access to the target page
- →Requires manual verification of generated testIds
How it compares
Automates the creation of page objects by live-inspecting the target page rather than manual coding.
Compared to similar skills
create-page-object side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| create-page-object (this skill) | 0 | 3mo | Review | Intermediate |
| ui-ux-expert-skill | 91 | 11mo | Review | Advanced |
| playwright-browser-automation | 29 | 9mo | Review | Intermediate |
| frontend-testing | 11 | 4mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
ui-ux-expert-skill
fercracix33
Technical workflow for implementing accessible React user interfaces with shadcn/ui, Tailwind CSS, and TanStack Query. Includes 6-phase process with mandatory Style Guide compliance, Context7 best practices consultation, Chrome DevTools validation, and WCAG 2.1 AA accessibility standards. Use after Test Agent, Implementer, and Supabase agents complete their work.
playwright-browser-automation
lackeyjb
Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use when user wants to test websites, automate browser interactions, validate web functionality, or perform any browser-based testing.
frontend-testing
langgenius
Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Vitest, RTL, unit tests, integration tests, or write/review test requests.
flutter
alinaqi
Flutter development with Riverpod state management, Freezed, go_router, and mocktail testing
feature-flags
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
vue-testing-best-practices
vuejs-ai
Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.