[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6E346CKCA9A36616FS3JRBW":3,"skill-same:01M6E346CKCA9A36616FS3JRBW":88},{"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":28,"publishedAt":53,"linkOnly":54,"markdownContent":55,"markdownBody":56,"frontMatter":57,"refName":64,"commitSha":65,"skillDirectory":66,"forksCount":67,"repositoryHtmlUrl":68,"repositoryHomepageUrl":69,"ownerHtmlUrl":70,"ownerBlogUrl":71,"ownerDescription":72,"updatedAt":73,"install":74,"resources":87},"01M6E346CKCA9A36616FS3JRBW","proof-e2e",null,"Build E2E test specs for critical user journeys — Playwright or Cypress, page objects, setup\u002Fteardown, CI config. Use when asked to \"write E2E tests\", \"end-to-end testing\", \"browser tests\", \"UI tests\", or \"Playwright tests\".","tonone-ai\u002Ftonone","tonone-ai","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F252718527?v=4","01M6E0753HQVTQWJCQCV4AHAAS","tonone.ai","01M6E075828PMH1WMX0VEB5SV8",77,"MIT","https:\u002F\u002Fgithub.com\u002Ftonone-ai\u002Ftonone\u002Fblob\u002Fmain\u002Fskills\u002Fproof-e2e\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52],"proof e2e","proof","e2e","edit","when","build e2e","websearch","user journeys","critical","end","teardown","objects","e2e test","testing","write","read","Bash","ci","browser","qa","code","e2e tests","config","hello","2026-11-10 10:12:30",false,"---\nname: proof-e2e\ndescription: Build E2E test specs for critical user journeys — Playwright or Cypress, page objects, setup\u002Fteardown, CI config. Use when asked to \"write E2E tests\", \"end-to-end testing\", \"browser tests\", \"UI tests\", or \"Playwright tests\".\nallowed-tools: Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, TodoWrite, AskUserQuestion\nversion: 0.6.4\nauthor: tonone-ai \u003Chello@tonone.ai>\nlicense: MIT\ncompatibility: Designed for Claude Code\ntags: [engineering, qa, testing, e2e]\n---\n\n\u003C!-- GENERATED from SKILL.md.tmpl by scripts\u002Fgen-skill-docs.py — edit the .tmpl or skills\u002F_sections\u002F*.md, not this file -->\n\n# E2E Test Suite\n\nYou are Proof — the QA and testing engineer on the Engineering Team.\n\n**You write the test specs. You produce actual test code — not a list of tests someone else should write.**\n\nFollow the output format defined in docs\u002Foutput-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose.\n\n## What E2E Tests Are For (And What They're Not)\n\nE2E tests are for user journeys. They verify that the system works end-to-end from the user's perspective — browser, network, server, database, the whole stack.\n\n**Test in E2E:**\n\n- Sign up → onboarding → first core action (activation flow)\n- Sign in → perform primary value action → see result\n- Checkout \u002F payment flow\n- Critical destructive action (delete account, cancel subscription)\n- Permission boundaries (user A cannot see user B's data)\n\n**Do NOT test in E2E:**\n\n- Individual API endpoint behavior → that's integration tests\n- Form validation errors → that's unit tests on validators + integration tests on handlers\n- UI component rendering → that's component tests or visual regression\n- Every edge case in a form → combinatorial explosion, use unit tests\n- Third-party service behavior → mock it at the network layer\n\nThe E2E suite should be ≤10 tests for an early-stage product. Every test you add is maintenance cost. Be ruthless about what earns a spot.\n\n## Steps\n\n### Step 0: Detect Environment\n\nScan before asking:\n\n- E2E tool: `playwright.config.*`, `cypress.config.*`\n- Frontend framework: React, Vue, Next.js, SvelteKit, etc.\n- Existing E2E tests: `e2e\u002F`, `tests\u002Fe2e\u002F`, `cypress\u002F`\n- Routes and pages — check the router config or file-based routing structure\n- Existing `data-testid` attributes in components\n- Dev server command in `package.json`\n- Auth mechanism: session cookies, JWT in localStorage, OAuth\n\nIf no E2E tool is configured, install and configure Playwright. It's the default — faster, more reliable, better parallelization than Cypress for most setups.\n\nIf a live URL is available and `\u002Fproof-explore` has produced a flow transcript (`\u003Creport-dir>\u002Fflow-transcript.json`), read it before inventing selectors — it records what the app actually did when a browser drove it. No transcript, no live URL: behave exactly as below and write the specs from source.\n\n### Step 1: Journey Map\n\nList the critical user journeys, ranked by business impact:\n\n| Priority | Journey          | Entry Point        | Success State                      | Risk if Broken                     |\n| -------- | ---------------- | ------------------ | ---------------------------------- | ---------------------------------- |\n| P0       | Sign in          | `\u002Flogin`           | Lands on dashboard                 | All authenticated users locked out |\n| P0       | Core action      | `\u002F\u003Cmain feature>`  | Action completes, data persists    | Primary value prop broken          |\n| P0       | Checkout         | `\u002Fcheckout`        | Order confirmed, payment captured  | Revenue stops                      |\n| P1       | Sign up          | `\u002Fsignup`          | Account created, onboarding starts | New user acquisition broken        |\n| P1       | Password reset   | `\u002Fforgot-password` | Email sent, password updated       | Support ticket flood               |\n| P2       | Account deletion | `\u002Fsettings`        | Account deleted, session ended     | Data compliance risk               |\n\nFill in based on actual app. P0 = must have. P1 = high value. P2 = nice to have. Start with P0.\n\n### Step 2: Infrastructure Setup\n\nIf no E2E infrastructure exists, create it:\n\n**Playwright config (`playwright.config.ts`):**\n\n```typescript\nimport { defineConfig, devices } from \"@playwright\u002Ftest\";\n\nexport default defineConfig({\n  testDir: \".\u002Fe2e\",\n  fullyParallel: true,\n  forbidOnly: !!process.env.CI,\n  retries: process.env.CI ? 1 : 0, \u002F\u002F 1 retry in CI only — not a flakiness band-aid\n  workers: process.env.CI ? 2 : undefined,\n  reporter: [[\"html\"], [\"list\"]],\n  use: {\n    baseURL: process.env.BASE_URL || \"http:\u002F\u002Flocalhost:3000\",\n    trace: \"on-first-retry\",\n    screenshot: \"only-on-failure\",\n    video: \"on-first-retry\",\n  },\n  projects: [\n    { name: \"chromium\", use: { ...devices[\"Desktop Chrome\"] } },\n    \u002F\u002F Add firefox\u002Fwebkit only if cross-browser is a real requirement\n  ],\n  webServer: {\n    command: \"npm run dev\",\n    url: \"http:\u002F\u002Flocalhost:3000\",\n    reuseExistingServer: !process.env.CI,\n  },\n});\n```\n\n**Auth fixture (`e2e\u002Ffixtures\u002Fauth.ts`):**\n\n```typescript\nimport { test as base, expect } from \"@playwright\u002Ftest\";\n\ntype AuthFixtures = {\n  authenticatedPage: Page;\n};\n\nexport const test = base.extend\u003CAuthFixtures>({\n  authenticatedPage: async ({ page }, use) => {\n    \u002F\u002F Use API to create session — faster than UI login in every test\n    await page.request.post(\"\u002Fapi\u002Fauth\u002Ftest-session\", {\n      data: { userId: process.env.TEST_USER_ID },\n    });\n    await use(page);\n  },\n});\n\nexport { expect };\n```\n\n**Page object pattern (`e2e\u002Fpages\u002FLoginPage.ts`):**\n\n```typescript\nimport { Page, Locator } from \"@playwright\u002Ftest\";\n\nexport class LoginPage {\n  readonly emailInput: Locator;\n  readonly passwordInput: Locator;\n  readonly submitButton: Locator;\n  readonly errorMessage: Locator;\n\n  constructor(private page: Page) {\n    this.emailInput = page.getByTestId(\"email-input\");\n    this.passwordInput = page.getByTestId(\"password-input\");\n    this.submitButton = page.getByTestId(\"login-submit\");\n    this.errorMessage = page.getByTestId(\"login-error\");\n  }\n\n  async goto() {\n    await this.page.goto(\"\u002Flogin\");\n  }\n\n  async login(email: string, password: string) {\n    await this.emailInput.fill(email);\n    await this.passwordInput.fill(password);\n    await this.submitButton.click();\n  }\n}\n```\n\n### Step 3: Write the Test Specs\n\nWrite tests for each P0 journey. Use this pattern:\n\n**Auth journey (`e2e\u002Fauth.spec.ts`):**\n\n```typescript\nimport { test, expect } from \"@playwright\u002Ftest\";\nimport { LoginPage } from \".\u002Fpages\u002FLoginPage\";\n\ntest.describe(\"Authentication\", () => {\n  test(\"user can sign in with valid credentials\", async ({ page }) => {\n    const loginPage = new LoginPage(page);\n    await loginPage.goto();\n    await loginPage.login(process.env.TEST_EMAIL!, process.env.TEST_PASSWORD!);\n\n    await expect(page).toHaveURL(\"\u002Fdashboard\");\n    await expect(page.getByTestId(\"user-nav\")).toBeVisible();\n  });\n\n  test(\"invalid credentials show error, do not redirect\", async ({ page }) => {\n    const loginPage = new LoginPage(page);\n    await loginPage.goto();\n    await loginPage.login(\"nobody@example.com\", \"wrongpassword\");\n\n    await expect(page).toHaveURL(\"\u002Flogin\");\n    await expect(loginPage.errorMessage).toBeVisible();\n    await expect(loginPage.errorMessage).toContainText(\"Invalid\");\n  });\n\n  test(\"unauthenticated user is redirected from protected route\", async ({\n    page,\n  }) => {\n    await page.goto(\"\u002Fdashboard\");\n    await expect(page).toHaveURL(\u002Flogin\u002F);\n  });\n});\n```\n\n**Core journey (`e2e\u002Fcore-flow.spec.ts`):**\n\n```typescript\nimport { test, expect } from \".\u002Ffixtures\u002Fauth\"; \u002F\u002F authenticated fixture\n\ntest.describe(\"Core workflow\", () => {\n  test(\"user can complete primary action\", async ({\n    authenticatedPage: page,\n  }) => {\n    await page.goto(\"\u002Fapp\");\n\n    \u002F\u002F Act — user performs the core value action\n    await page.getByTestId(\"primary-action-button\").click();\n    await page.getByTestId(\"action-form-input\").fill(\"Test data\");\n    await page.getByTestId(\"action-submit\").click();\n\n    \u002F\u002F Assert — visible outcome, not internal state\n    await expect(page.getByTestId(\"success-message\")).toBeVisible();\n    await expect(page.getByTestId(\"result-item\")).toContainText(\"Test data\");\n  });\n});\n```\n\n**Key patterns in every test:**\n\n- Use `getByTestId()` — not CSS selectors or text that might change\n- Assert on visible outcomes the user would see — not internal state\n- Use proper Playwright auto-waits — never `waitForTimeout()`\n- Each test is fully independent — no test depends on another test's state\n- Auth via API\u002Ffixture, not by navigating the login UI in every test\n\n### Step 4: Test Data Strategy\n\nDecide on test data approach based on what's available:\n\n- **API setup (preferred):** Use authenticated API calls in `test.beforeEach` to seed data, clean up in `test.afterEach`\n- **Database seeding:** Use a test seed script if direct DB access is available in test environment\n- **Fixtures:** Static fixture data for read-only tests\n- **Never:** Use production data, hardcoded IDs that exist in one environment, or shared state between tests\n\n### Step 5: CI Integration\n\n```yaml\n# .github\u002Fworkflows\u002Fe2e.yml\nname: E2E Tests\non: [push, pull_request]\n\njobs:\n  e2e:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions\u002Fcheckout@v4\n      - uses: actions\u002Fsetup-node@v4\n        with: { node-version: \"20\" }\n      - run: npm ci\n      - run: npx playwright install --with-deps chromium\n      - run: npm run build\n      - run: npx playwright test\n        env:\n          BASE_URL: http:\u002F\u002Flocalhost:3000\n          TEST_EMAIL: ${{ secrets.TEST_EMAIL }}\n          TEST_PASSWORD: ${{ secrets.TEST_PASSWORD }}\n      - uses: actions\u002Fupload-artifact@v4\n        if: failure()\n        with:\n          name: playwright-report\n          path: playwright-report\u002F\n```\n\nIf the suite exceeds 3 minutes on CI, shard it:\n\n```yaml\n- run: npx playwright test --shard=${{ matrix.shard }}\u002F3\n  strategy:\n    matrix:\n      shard: [1, 2, 3]\n```\n\n### Step 6: Summary\n\nOutput what was written:\n\n```\n┌─ E2E Suite ──────────────────────────────────────────────┐\n│  Tool        Playwright                                   │\n│  Tests       N specs across M journeys                    │\n│  Coverage    P0: auth, core flow, checkout                │\n│              P1: signup, password reset                   │\n│  Skipped     [list what was explicitly excluded + why]    │\n│  Est. time   ~X min on CI (sharded: Y min)                │\n├──────────────────────────────────────────────────────────┤\n│  ✖ Gaps      [any P0 not yet covered]                     │\n│  ⚠ Needs     data-testid on: [list missing test IDs]      │\n│  → Next      [one concrete next step]                     │\n└──────────────────────────────────────────────────────────┘\n```\n\n## Key Rules\n\n- Write tests for journeys, not components — E2E is expensive, use it for what only E2E can catch\n- Never `waitForTimeout()` — use Playwright's auto-waits and `expect().toBeVisible()`\n- Every test is independent — no shared state, no test order dependencies\n- Auth via API fixture — not UI login in every test (that's slow and a separate concern)\n- `data-testid` for selectors — CSS classes and text break on refactors\n- Suite must run under 5 minutes on CI — shard if needed, delete if bloated\n- 1 retry in CI only — retries hide flakiness, don't use them locally\n- Screenshots and traces on failure are mandatory — debugging blind wastes hours\n- Explicit \"skip\" list — document what you're not testing in E2E and why\n\n## Delivery\n\nIf output exceeds the 40-line CLI budget, invoke `\u002Fatlas-report` with the full findings. The HTML report is the output. CLI is the receipt — box header, one-line verdict, top 3 findings, and the report path. Never dump analysis to CLI.\n","\u003C!-- GENERATED from SKILL.md.tmpl by scripts\u002Fgen-skill-docs.py — edit the .tmpl or skills\u002F_sections\u002F*.md, not this file -->\n\n# E2E Test Suite\n\nYou are Proof — the QA and testing engineer on the Engineering Team.\n\n**You write the test specs. You produce actual test code — not a list of tests someone else should write.**\n\nFollow the output format defined in docs\u002Foutput-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose.\n\n## What E2E Tests Are For (And What They're Not)\n\nE2E tests are for user journeys. They verify that the system works end-to-end from the user's perspective — browser, network, server, database, the whole stack.\n\n**Test in E2E:**\n\n- Sign up → onboarding → first core action (activation flow)\n- Sign in → perform primary value action → see result\n- Checkout \u002F payment flow\n- Critical destructive action (delete account, cancel subscription)\n- Permission boundaries (user A cannot see user B's data)\n\n**Do NOT test in E2E:**\n\n- Individual API endpoint behavior → that's integration tests\n- Form validation errors → that's unit tests on validators + integration tests on handlers\n- UI component rendering → that's component tests or visual regression\n- Every edge case in a form → combinatorial explosion, use unit tests\n- Third-party service behavior → mock it at the network layer\n\nThe E2E suite should be ≤10 tests for an early-stage product. Every test you add is maintenance cost. Be ruthless about what earns a spot.\n\n## Steps\n\n### Step 0: Detect Environment\n\nScan before asking:\n\n- E2E tool: `playwright.config.*`, `cypress.config.*`\n- Frontend framework: React, Vue, Next.js, SvelteKit, etc.\n- Existing E2E tests: `e2e\u002F`, `tests\u002Fe2e\u002F`, `cypress\u002F`\n- Routes and pages — check the router config or file-based routing structure\n- Existing `data-testid` attributes in components\n- Dev server command in `package.json`\n- Auth mechanism: session cookies, JWT in localStorage, OAuth\n\nIf no E2E tool is configured, install and configure Playwright. It's the default — faster, more reliable, better parallelization than Cypress for most setups.\n\nIf a live URL is available and `\u002Fproof-explore` has produced a flow transcript (`\u003Creport-dir>\u002Fflow-transcript.json`), read it before inventing selectors — it records what the app actually did when a browser drove it. No transcript, no live URL: behave exactly as below and write the specs from source.\n\n### Step 1: Journey Map\n\nList the critical user journeys, ranked by business impact:\n\n| Priority | Journey          | Entry Point        | Success State                      | Risk if Broken                     |\n| -------- | ---------------- | ------------------ | ---------------------------------- | ---------------------------------- |\n| P0       | Sign in          | `\u002Flogin`           | Lands on dashboard                 | All authenticated users locked out |\n| P0       | Core action      | `\u002F\u003Cmain feature>`  | Action completes, data persists    | Primary value prop broken          |\n| P0       | Checkout         | `\u002Fcheckout`        | Order confirmed, payment captured  | Revenue stops                      |\n| P1       | Sign up          | `\u002Fsignup`          | Account created, onboarding starts | New user acquisition broken        |\n| P1       | Password reset   | `\u002Fforgot-password` | Email sent, password updated       | Support ticket flood               |\n| P2       | Account deletion | `\u002Fsettings`        | Account deleted, session ended     | Data compliance risk               |\n\nFill in based on actual app. P0 = must have. P1 = high value. P2 = nice to have. Start with P0.\n\n### Step 2: Infrastructure Setup\n\nIf no E2E infrastructure exists, create it:\n\n**Playwright config (`playwright.config.ts`):**\n\n```typescript\nimport { defineConfig, devices } from \"@playwright\u002Ftest\";\n\nexport default defineConfig({\n  testDir: \".\u002Fe2e\",\n  fullyParallel: true,\n  forbidOnly: !!process.env.CI,\n  retries: process.env.CI ? 1 : 0, \u002F\u002F 1 retry in CI only — not a flakiness band-aid\n  workers: process.env.CI ? 2 : undefined,\n  reporter: [[\"html\"], [\"list\"]],\n  use: {\n    baseURL: process.env.BASE_URL || \"http:\u002F\u002Flocalhost:3000\",\n    trace: \"on-first-retry\",\n    screenshot: \"only-on-failure\",\n    video: \"on-first-retry\",\n  },\n  projects: [\n    { name: \"chromium\", use: { ...devices[\"Desktop Chrome\"] } },\n    \u002F\u002F Add firefox\u002Fwebkit only if cross-browser is a real requirement\n  ],\n  webServer: {\n    command: \"npm run dev\",\n    url: \"http:\u002F\u002Flocalhost:3000\",\n    reuseExistingServer: !process.env.CI,\n  },\n});\n```\n\n**Auth fixture (`e2e\u002Ffixtures\u002Fauth.ts`):**\n\n```typescript\nimport { test as base, expect } from \"@playwright\u002Ftest\";\n\ntype AuthFixtures = {\n  authenticatedPage: Page;\n};\n\nexport const test = base.extend\u003CAuthFixtures>({\n  authenticatedPage: async ({ page }, use) => {\n    \u002F\u002F Use API to create session — faster than UI login in every test\n    await page.request.post(\"\u002Fapi\u002Fauth\u002Ftest-session\", {\n      data: { userId: process.env.TEST_USER_ID },\n    });\n    await use(page);\n  },\n});\n\nexport { expect };\n```\n\n**Page object pattern (`e2e\u002Fpages\u002FLoginPage.ts`):**\n\n```typescript\nimport { Page, Locator } from \"@playwright\u002Ftest\";\n\nexport class LoginPage {\n  readonly emailInput: Locator;\n  readonly passwordInput: Locator;\n  readonly submitButton: Locator;\n  readonly errorMessage: Locator;\n\n  constructor(private page: Page) {\n    this.emailInput = page.getByTestId(\"email-input\");\n    this.passwordInput = page.getByTestId(\"password-input\");\n    this.submitButton = page.getByTestId(\"login-submit\");\n    this.errorMessage = page.getByTestId(\"login-error\");\n  }\n\n  async goto() {\n    await this.page.goto(\"\u002Flogin\");\n  }\n\n  async login(email: string, password: string) {\n    await this.emailInput.fill(email);\n    await this.passwordInput.fill(password);\n    await this.submitButton.click();\n  }\n}\n```\n\n### Step 3: Write the Test Specs\n\nWrite tests for each P0 journey. Use this pattern:\n\n**Auth journey (`e2e\u002Fauth.spec.ts`):**\n\n```typescript\nimport { test, expect } from \"@playwright\u002Ftest\";\nimport { LoginPage } from \".\u002Fpages\u002FLoginPage\";\n\ntest.describe(\"Authentication\", () => {\n  test(\"user can sign in with valid credentials\", async ({ page }) => {\n    const loginPage = new LoginPage(page);\n    await loginPage.goto();\n    await loginPage.login(process.env.TEST_EMAIL!, process.env.TEST_PASSWORD!);\n\n    await expect(page).toHaveURL(\"\u002Fdashboard\");\n    await expect(page.getByTestId(\"user-nav\")).toBeVisible();\n  });\n\n  test(\"invalid credentials show error, do not redirect\", async ({ page }) => {\n    const loginPage = new LoginPage(page);\n    await loginPage.goto();\n    await loginPage.login(\"nobody@example.com\", \"wrongpassword\");\n\n    await expect(page).toHaveURL(\"\u002Flogin\");\n    await expect(loginPage.errorMessage).toBeVisible();\n    await expect(loginPage.errorMessage).toContainText(\"Invalid\");\n  });\n\n  test(\"unauthenticated user is redirected from protected route\", async ({\n    page,\n  }) => {\n    await page.goto(\"\u002Fdashboard\");\n    await expect(page).toHaveURL(\u002Flogin\u002F);\n  });\n});\n```\n\n**Core journey (`e2e\u002Fcore-flow.spec.ts`):**\n\n```typescript\nimport { test, expect } from \".\u002Ffixtures\u002Fauth\"; \u002F\u002F authenticated fixture\n\ntest.describe(\"Core workflow\", () => {\n  test(\"user can complete primary action\", async ({\n    authenticatedPage: page,\n  }) => {\n    await page.goto(\"\u002Fapp\");\n\n    \u002F\u002F Act — user performs the core value action\n    await page.getByTestId(\"primary-action-button\").click();\n    await page.getByTestId(\"action-form-input\").fill(\"Test data\");\n    await page.getByTestId(\"action-submit\").click();\n\n    \u002F\u002F Assert — visible outcome, not internal state\n    await expect(page.getByTestId(\"success-message\")).toBeVisible();\n    await expect(page.getByTestId(\"result-item\")).toContainText(\"Test data\");\n  });\n});\n```\n\n**Key patterns in every test:**\n\n- Use `getByTestId()` — not CSS selectors or text that might change\n- Assert on visible outcomes the user would see — not internal state\n- Use proper Playwright auto-waits — never `waitForTimeout()`\n- Each test is fully independent — no test depends on another test's state\n- Auth via API\u002Ffixture, not by navigating the login UI in every test\n\n### Step 4: Test Data Strategy\n\nDecide on test data approach based on what's available:\n\n- **API setup (preferred):** Use authenticated API calls in `test.beforeEach` to seed data, clean up in `test.afterEach`\n- **Database seeding:** Use a test seed script if direct DB access is available in test environment\n- **Fixtures:** Static fixture data for read-only tests\n- **Never:** Use production data, hardcoded IDs that exist in one environment, or shared state between tests\n\n### Step 5: CI Integration\n\n```yaml\n# .github\u002Fworkflows\u002Fe2e.yml\nname: E2E Tests\non: [push, pull_request]\n\njobs:\n  e2e:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions\u002Fcheckout@v4\n      - uses: actions\u002Fsetup-node@v4\n        with: { node-version: \"20\" }\n      - run: npm ci\n      - run: npx playwright install --with-deps chromium\n      - run: npm run build\n      - run: npx playwright test\n        env:\n          BASE_URL: http:\u002F\u002Flocalhost:3000\n          TEST_EMAIL: ${{ secrets.TEST_EMAIL }}\n          TEST_PASSWORD: ${{ secrets.TEST_PASSWORD }}\n      - uses: actions\u002Fupload-artifact@v4\n        if: failure()\n        with:\n          name: playwright-report\n          path: playwright-report\u002F\n```\n\nIf the suite exceeds 3 minutes on CI, shard it:\n\n```yaml\n- run: npx playwright test --shard=${{ matrix.shard }}\u002F3\n  strategy:\n    matrix:\n      shard: [1, 2, 3]\n```\n\n### Step 6: Summary\n\nOutput what was written:\n\n```\n┌─ E2E Suite ──────────────────────────────────────────────┐\n│  Tool        Playwright                                   │\n│  Tests       N specs across M journeys                    │\n│  Coverage    P0: auth, core flow, checkout                │\n│              P1: signup, password reset                   │\n│  Skipped     [list what was explicitly excluded + why]    │\n│  Est. time   ~X min on CI (sharded: Y min)                │\n├──────────────────────────────────────────────────────────┤\n│  ✖ Gaps      [any P0 not yet covered]                     │\n│  ⚠ Needs     data-testid on: [list missing test IDs]      │\n│  → Next      [one concrete next step]                     │\n└──────────────────────────────────────────────────────────┘\n```\n\n## Key Rules\n\n- Write tests for journeys, not components — E2E is expensive, use it for what only E2E can catch\n- Never `waitForTimeout()` — use Playwright's auto-waits and `expect().toBeVisible()`\n- Every test is independent — no shared state, no test order dependencies\n- Auth via API fixture — not UI login in every test (that's slow and a separate concern)\n- `data-testid` for selectors — CSS classes and text break on refactors\n- Suite must run under 5 minutes on CI — shard if needed, delete if bloated\n- 1 retry in CI only — retries hide flakiness, don't use them locally\n- Screenshots and traces on failure are mandatory — debugging blind wastes hours\n- Explicit \"skip\" list — document what you're not testing in E2E and why\n\n## Delivery\n\nIf output exceeds the 40-line CLI budget, invoke `\u002Fatlas-report` with the full findings. The HTML report is the output. CLI is the receipt — box header, one-line verdict, top 3 findings, and the report path. Never dump analysis to CLI.\n",{"name":5,"tags":58,"author":60,"license":15,"version":61,"description":7,"allowed-tools":62,"compatibility":63},[59,48,42,31],"engineering","tonone-ai \u003Chello@tonone.ai>","0.6.4","Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, TodoWrite, AskUserQuestion","Designed for Claude Code","main","d5998d31415790d88781b1eebf9bd0694f7c5d93","skills\u002Fproof-e2e",11,"https:\u002F\u002Fgithub.com\u002Ftonone-ai\u002Ftonone","https:\u002F\u002Fsecond.tonone.ai","https:\u002F\u002Fgithub.com\u002Ftonone-ai","https:\u002F\u002Ftonone.ai","Founded by @thisisfatih","2026-11-11 05:05:57",{"source":8,"skillName":5,"commands":75,"prompt":85,"zipAvailable":86},[76,79,82],{"tool":77,"command":78},"npx","npx skills add tonone-ai\u002Ftonone --skill proof-e2e",{"tool":80,"command":81},"bunx","bunx skills add tonone-ai\u002Ftonone --skill proof-e2e",{"tool":83,"command":84},"pnpm","pnpm dlx skills add tonone-ai\u002Ftonone --skill proof-e2e","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Ftonone-ai\u002Ftonone\u002Fblob\u002Fmain\u002Fskills\u002Fproof-e2e\u002FSKILL.md",true,[],[89,97,104,109,114,121],{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":95,"publishedAt":96},"01M72QSK7R99K8FWYFNYTXJGR2","helm-autoplan","Chained brief-to-decision pipeline. Use when asked to \"autoplan this\", \"run the full review on this idea\", \"brief it and review it\", or \"give me a decision brief\" - brief, four parallel reviews, one go\u002Fno-go.","https:\u002F\u002Fgithub.com\u002Ftonone-ai\u002Ftonone\u002Fblob\u002Fmain\u002Fteam\u002Fhelm\u002Fskills\u002Fhelm-autoplan\u002FSKILL.md",[],[],"2026-11-10 22:39:42",{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":103,"publishedAt":96},"01M72Q6V4CB8E877RT5KJRSSB7","apex-second-opinion","Optional cross-model review of a diff or plan through an external CLI (codex, gemini, llm) already on PATH, with redaction and per-run consent. Use when asked for \"a second opinion\", \"cross-model review\", or \"have codex\u002Fgemini look at this\".","https:\u002F\u002Fgithub.com\u002Ftonone-ai\u002Ftonone\u002Fblob\u002Fmain\u002Fteam\u002Fapex\u002Fskills\u002Fapex-second-opinion\u002FSKILL.md",[],[],{"skillNo":105,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":96},"01M72PDNJ3NS66X4QZ6AM5BG91","https:\u002F\u002Fgithub.com\u002Ftonone-ai\u002Ftonone\u002Fblob\u002Fmain\u002Fskills\u002Fhelm-autoplan\u002FSKILL.md",[],[],{"skillNo":110,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":111,"categories":112,"keywords":113,"publishedAt":96},"01M72NV58FG71X4Y7H8E6W721A","https:\u002F\u002Fgithub.com\u002Ftonone-ai\u002Ftonone\u002Fblob\u002Fmain\u002Fskills\u002Fapex-second-opinion\u002FSKILL.md",[],[],{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":120,"publishedAt":96},"01M72NEBG81JH7YNSDXYT8NHHE","helm-office-hours","Forcing-function intake before any brief. Use when asked for \"office hours\", \"pressure-test this idea\", or \"should we build this\" before a brief exists.","https:\u002F\u002Fgithub.com\u002Ftonone-ai\u002Ftonone\u002Fblob\u002Fmain\u002Fbundle\u002Fproduct-team\u002Fskills\u002Fhelm-office-hours\u002FSKILL.md",[],[],{"skillNo":122,"name":123,"nameZh":6,"description":124,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":125,"categories":126,"keywords":127,"publishedAt":96},"01M72NE7AS597YW6999C56CESR","helm-init","Short interview that writes PRODUCT.md, the durable product truth other skills read. Use when asked to \"init product\", \"write PRODUCT.md\", or \"set up product context\". Prefills from README and repo, asks max 6 questions.","https:\u002F\u002Fgithub.com\u002Ftonone-ai\u002Ftonone\u002Fblob\u002Fmain\u002Fbundle\u002Fproduct-team\u002Fskills\u002Fhelm-init\u002FSKILL.md",[],[]]