[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D9EJN3DSGDQJX2K0BVVTNJ":3,"skill-same:01M6D9EJN3DSGDQJX2K0BVVTNJ":72},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":38,"linkOnly":39,"markdownContent":40,"markdownBody":41,"frontMatter":42,"refName":43,"commitSha":44,"skillDirectory":45,"forksCount":46,"repositoryHtmlUrl":47,"repositoryHomepageUrl":6,"ownerHtmlUrl":48,"ownerBlogUrl":49,"ownerDescription":50,"updatedAt":51,"install":52,"resources":65},"01M6D9EJN3DSGDQJX2K0BVVTNJ","generate",null,"Generate Playwright tests. Use when user says \"write tests\", \"generate tests\", \"add tests for\", \"test this component\", \"e2e test\", \"create test for\", \"test this page\", or \"test this feature\".","oabdelmaksoud\u002FAgention","oabdelmaksoud","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F50699149?v=4","01M6D5CVVN778ZCDP1WHS816SP","Omar Abdelmaksoud","01M6D8A4TE76V3DCSH3D94VG1V",2,"MIT","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-import\u002Fclaude-skills\u002Freferences\u002Fengineering-team\u002Fplaywright-pro\u002Fskills\u002Fgenerate\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",[5,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"playwright","test","component","write tests","create","e2e","page","write","user","use","generate tests","e2e test","tests","feature","2026-11-10 10:12:30",false,"---\nname: generate\ndescription: >-\n  Generate Playwright tests. Use when user says \"write tests\", \"generate tests\",\n  \"add tests for\", \"test this component\", \"e2e test\", \"create test for\",\n  \"test this page\", or \"test this feature\".\n---\n\n# Generate Playwright Tests\n\nGenerate production-ready Playwright tests from a user story, URL, component name, or feature description.\n\n## Input\n\n`$ARGUMENTS` contains what to test. Examples:\n- `\"user can log in with email and password\"`\n- `\"the checkout flow\"`\n- `\"src\u002Fcomponents\u002FUserProfile.tsx\"`\n- `\"the search page with filters\"`\n\n## Steps\n\n### 1. Understand the Target\n\nParse `$ARGUMENTS` to determine:\n- **User story**: Extract the behavior to verify\n- **Component path**: Read the component source code\n- **Page\u002FURL**: Identify the route and its elements\n- **Feature name**: Map to relevant app areas\n\n### 2. Explore the Codebase\n\nUse the `Explore` subagent to gather context:\n\n- Read `playwright.config.ts` for `testDir`, `baseURL`, `projects`\n- Check existing tests in `testDir` for patterns, fixtures, and conventions\n- If a component path is given, read the component to understand its props, states, and interactions\n- Check for existing page objects in `pages\u002F`\n- Check for existing fixtures in `fixtures\u002F`\n- Check for auth setup (`auth.setup.ts` or `storageState` config)\n\n### 3. Select Templates\n\nCheck `templates\u002F` in this plugin for matching patterns:\n\n| If testing... | Load template from |\n|---|---|\n| Login\u002Fauth flow | `templates\u002Fauth\u002Flogin.md` |\n| CRUD operations | `templates\u002Fcrud\u002F` |\n| Checkout\u002Fpayment | `templates\u002Fcheckout\u002F` |\n| Search\u002Ffilter UI | `templates\u002Fsearch\u002F` |\n| Form submission | `templates\u002Fforms\u002F` |\n| Dashboard\u002Fdata | `templates\u002Fdashboard\u002F` |\n| Settings page | `templates\u002Fsettings\u002F` |\n| Onboarding flow | `templates\u002Fonboarding\u002F` |\n| API endpoints | `templates\u002Fapi\u002F` |\n| Accessibility | `templates\u002Faccessibility\u002F` |\n\nAdapt the template to the specific app — replace `{{placeholders}}` with actual selectors, URLs, and data.\n\n### 4. Generate the Test\n\nFollow these rules:\n\n**Structure:**\n```typescript\nimport { test, expect } from '@playwright\u002Ftest';\n\u002F\u002F Import custom fixtures if the project uses them\n\ntest.describe('Feature Name', () => {\n  \u002F\u002F Group related behaviors\n\n  test('should \u003Cexpected behavior>', async ({ page }) => {\n    \u002F\u002F Arrange: navigate, set up state\n    \u002F\u002F Act: perform user action\n    \u002F\u002F Assert: verify outcome\n  });\n});\n```\n\n**Locator priority** (use the first that works):\n1. `getByRole()` — buttons, links, headings, form elements\n2. `getByLabel()` — form fields with labels\n3. `getByText()` — non-interactive text content\n4. `getByPlaceholder()` — inputs with placeholder text\n5. `getByTestId()` — when semantic options aren't available\n\n**Assertions** — always web-first:\n```typescript\n\u002F\u002F GOOD — auto-retries\nawait expect(page.getByRole('heading')).toBeVisible();\nawait expect(page.getByRole('alert')).toHaveText('Success');\n\n\u002F\u002F BAD — no retry\nconst text = await page.textContent('.msg');\nexpect(text).toBe('Success');\n```\n\n**Never use:**\n- `page.waitForTimeout()`\n- `page.$(selector)` or `page.$$(selector)`\n- Bare CSS selectors unless absolutely necessary\n- `page.evaluate()` for things locators can do\n\n**Always include:**\n- Descriptive test names that explain the behavior\n- Error\u002Fedge case tests alongside happy path\n- Proper `await` on every Playwright call\n- `baseURL`-relative navigation (`page.goto('\u002F')` not `page.goto('http:\u002F\u002F...')`)\n\n### 5. Match Project Conventions\n\n- If project uses TypeScript → generate `.spec.ts`\n- If project uses JavaScript → generate `.spec.js` with `require()` imports\n- If project has page objects → use them instead of inline locators\n- If project has custom fixtures → import and use them\n- If project has a test data directory → create test data files there\n\n### 6. Generate Supporting Files (If Needed)\n\n- **Page object**: If the test touches 5+ unique locators on one page, create a page object\n- **Fixture**: If the test needs shared setup (auth, data), create or extend a fixture\n- **Test data**: If the test uses structured data, create a JSON file in `test-data\u002F`\n\n### 7. Verify\n\nRun the generated test:\n\n```bash\nnpx playwright test \u003Cgenerated-file> --reporter=list\n```\n\nIf it fails:\n1. Read the error\n2. Fix the test (not the app)\n3. Run again\n4. If it's an app issue, report it to the user\n\n## Output\n\n- Generated test file(s) with path\n- Any supporting files created (page objects, fixtures, data)\n- Test run result\n- Coverage note: what behaviors are now tested\n","# Generate Playwright Tests\n\nGenerate production-ready Playwright tests from a user story, URL, component name, or feature description.\n\n## Input\n\n`$ARGUMENTS` contains what to test. Examples:\n- `\"user can log in with email and password\"`\n- `\"the checkout flow\"`\n- `\"src\u002Fcomponents\u002FUserProfile.tsx\"`\n- `\"the search page with filters\"`\n\n## Steps\n\n### 1. Understand the Target\n\nParse `$ARGUMENTS` to determine:\n- **User story**: Extract the behavior to verify\n- **Component path**: Read the component source code\n- **Page\u002FURL**: Identify the route and its elements\n- **Feature name**: Map to relevant app areas\n\n### 2. Explore the Codebase\n\nUse the `Explore` subagent to gather context:\n\n- Read `playwright.config.ts` for `testDir`, `baseURL`, `projects`\n- Check existing tests in `testDir` for patterns, fixtures, and conventions\n- If a component path is given, read the component to understand its props, states, and interactions\n- Check for existing page objects in `pages\u002F`\n- Check for existing fixtures in `fixtures\u002F`\n- Check for auth setup (`auth.setup.ts` or `storageState` config)\n\n### 3. Select Templates\n\nCheck `templates\u002F` in this plugin for matching patterns:\n\n| If testing... | Load template from |\n|---|---|\n| Login\u002Fauth flow | `templates\u002Fauth\u002Flogin.md` |\n| CRUD operations | `templates\u002Fcrud\u002F` |\n| Checkout\u002Fpayment | `templates\u002Fcheckout\u002F` |\n| Search\u002Ffilter UI | `templates\u002Fsearch\u002F` |\n| Form submission | `templates\u002Fforms\u002F` |\n| Dashboard\u002Fdata | `templates\u002Fdashboard\u002F` |\n| Settings page | `templates\u002Fsettings\u002F` |\n| Onboarding flow | `templates\u002Fonboarding\u002F` |\n| API endpoints | `templates\u002Fapi\u002F` |\n| Accessibility | `templates\u002Faccessibility\u002F` |\n\nAdapt the template to the specific app — replace `{{placeholders}}` with actual selectors, URLs, and data.\n\n### 4. Generate the Test\n\nFollow these rules:\n\n**Structure:**\n```typescript\nimport { test, expect } from '@playwright\u002Ftest';\n\u002F\u002F Import custom fixtures if the project uses them\n\ntest.describe('Feature Name', () => {\n  \u002F\u002F Group related behaviors\n\n  test('should \u003Cexpected behavior>', async ({ page }) => {\n    \u002F\u002F Arrange: navigate, set up state\n    \u002F\u002F Act: perform user action\n    \u002F\u002F Assert: verify outcome\n  });\n});\n```\n\n**Locator priority** (use the first that works):\n1. `getByRole()` — buttons, links, headings, form elements\n2. `getByLabel()` — form fields with labels\n3. `getByText()` — non-interactive text content\n4. `getByPlaceholder()` — inputs with placeholder text\n5. `getByTestId()` — when semantic options aren't available\n\n**Assertions** — always web-first:\n```typescript\n\u002F\u002F GOOD — auto-retries\nawait expect(page.getByRole('heading')).toBeVisible();\nawait expect(page.getByRole('alert')).toHaveText('Success');\n\n\u002F\u002F BAD — no retry\nconst text = await page.textContent('.msg');\nexpect(text).toBe('Success');\n```\n\n**Never use:**\n- `page.waitForTimeout()`\n- `page.$(selector)` or `page.$$(selector)`\n- Bare CSS selectors unless absolutely necessary\n- `page.evaluate()` for things locators can do\n\n**Always include:**\n- Descriptive test names that explain the behavior\n- Error\u002Fedge case tests alongside happy path\n- Proper `await` on every Playwright call\n- `baseURL`-relative navigation (`page.goto('\u002F')` not `page.goto('http:\u002F\u002F...')`)\n\n### 5. Match Project Conventions\n\n- If project uses TypeScript → generate `.spec.ts`\n- If project uses JavaScript → generate `.spec.js` with `require()` imports\n- If project has page objects → use them instead of inline locators\n- If project has custom fixtures → import and use them\n- If project has a test data directory → create test data files there\n\n### 6. Generate Supporting Files (If Needed)\n\n- **Page object**: If the test touches 5+ unique locators on one page, create a page object\n- **Fixture**: If the test needs shared setup (auth, data), create or extend a fixture\n- **Test data**: If the test uses structured data, create a JSON file in `test-data\u002F`\n\n### 7. Verify\n\nRun the generated test:\n\n```bash\nnpx playwright test \u003Cgenerated-file> --reporter=list\n```\n\nIf it fails:\n1. Read the error\n2. Fix the test (not the app)\n3. Run again\n4. If it's an app issue, report it to the user\n\n## Output\n\n- Generated test file(s) with path\n- Any supporting files created (page objects, fixtures, data)\n- Test run result\n- Coverage note: what behaviors are now tested\n",{"name":5,"description":7},"main","a318f48de3c5718e8ea2e9f6fae7790e8a759e85","upstream-import\u002Fclaude-skills\u002Freferences\u002Fengineering-team\u002Fplaywright-pro\u002Fskills\u002Fgenerate",0,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fo-abdelmaksoud\u002F","Full-Stack Engineer | AI Systems Architect | Building autonomous multi-agent systems","2026-03-08 21:23:03",{"source":8,"skillName":5,"commands":53,"prompt":63,"zipAvailable":64},[54,57,60],{"tool":55,"command":56},"npx","npx skills add oabdelmaksoud\u002FAgention --skill generate",{"tool":58,"command":59},"bunx","bunx skills add oabdelmaksoud\u002FAgention --skill generate",{"tool":61,"command":62},"pnpm","pnpm dlx skills add oabdelmaksoud\u002FAgention --skill generate","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-import\u002Fclaude-skills\u002Freferences\u002Fengineering-team\u002Fplaywright-pro\u002Fskills\u002Fgenerate\u002FSKILL.md",true,[66],{"path":67,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":70,"sourceHtmlUrl":71},"patterns.md","REFERENCE","参考文档",5848,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-import\u002Fclaude-skills\u002Freferences\u002Fengineering-team\u002Fplaywright-pro\u002Fskills\u002Fgenerate\u002Fpatterns.md",[73,94,108,135,161,181],{"skillNo":74,"name":75,"nameZh":6,"description":76,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":77,"categories":78,"keywords":82,"publishedAt":38},"01M6G2QFCBNBYAJF2KTK85G9A6","visa-doc-translate","Translate visa application documents (images) to English and create a bilingual PDF with original and translation","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fvisa-doc-translate\u002FSKILL.md",[79],{"categoryNo":80,"categoryName":81,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000002","文档处理",[83,84,85,86,87,88,89,90,91,92,28,93],"translate","doc","visa doc translate","bilingual","with","english","application","PDF","translation","documents","images",{"skillNo":95,"name":96,"nameZh":6,"description":97,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":98,"categories":99,"keywords":100,"publishedAt":38},"01M6G2QB09TSK6BY4ME5X20EVQ","verification-loop","A comprehensive verification system for Claude Code sessions.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fverification-loop\u002FSKILL.md",[],[101,102,103,104,105,106,107],"verification","loop","verification loop","sessions","code","claude code sessions","system",{"skillNo":109,"name":110,"nameZh":6,"description":111,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":123,"publishedAt":38},"01M6G2Q6V2F7G03VAAF27FXPJR","tdd-workflow","Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage including unit, integration, and E2E tests.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Ftdd-workflow\u002FSKILL.md",[114,115,118],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":116,"categoryName":117,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":119,"categoryName":120,"taxonomyType":121,"taxonomyTypeDesc":122},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[124,125,126,33,127,128,129,29,130,105,131,132,36,133,87,25,134],"workflow","tdd","tdd workflow","unit","coverage","refactoring","integration","development","e2e tests","driven","writing",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":141,"publishedAt":38},"01M6G2Q359YJRWAR2PFCEQAXF3","swiftui-patterns","SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS\u002FmacOS UI best practices.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fswiftui-patterns\u002FSKILL.md",[],[142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,87],"patterns","swiftui","swiftui patterns","architecture","macos","performance","state management","best practices","state","ui","Optimization","ios","architecture patterns","Composition","performance optimization","view","management","swiftui architecture","navigation",{"skillNo":162,"name":163,"nameZh":6,"description":164,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":165,"categories":166,"keywords":168,"publishedAt":38},"01M6G2PY8B2FWZTWPZ84H83Y7C","swift-protocol-di-testing","Protocol-based dependency injection for testable Swift code — mock file system, network, and external APIs using focused protocols and Swift Testing.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fswift-protocol-di-testing\u002FSKILL.md",[167],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[169,170,171,172,105,173,174,175,176,107,177,178,179,180],"swift protocol di testing","protocol","swift","testing","protocols","file","network","injection","dependency","swift testing","dependency injection","mock",{"skillNo":182,"name":183,"nameZh":6,"description":184,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":185,"categories":186,"keywords":187,"publishedAt":38},"01M6G2PSCN2GXV9FFZDRRRWVB6","swift-concurrency-6-2","Swift 6.2 Approachable Concurrency — single-threaded by default, @concurrent for explicit background offloading, isolated conformances for main actor types.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fswift-concurrency-6-2\u002FSKILL.md",[],[188,189,190,171,191,43,192],"concurrency","swift concurrency","swift concurrency 6 2","default","types"]