[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7AMD6S8FNPE4KP82HS01RT2":3,"skill-same:01M7AMD6S8FNPE4KP82HS01RT2":47},{"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":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":27,"repositoryHtmlUrl":28,"repositoryHomepageUrl":6,"ownerHtmlUrl":29,"ownerBlogUrl":30,"ownerDescription":31,"updatedAt":32,"install":33,"resources":46},"01M7AMD6S8FNPE4KP82HS01RT2","init",null,"Set up Playwright in a project. Use when user says \"set up playwright\", \"add e2e tests\", \"configure playwright\", \"testing setup\", \"init playwright\", or \"add test infrastructure\".","Cyrilthetecchieee\u002Fcyril-code-","Cyrilthetecchieee","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F219787998?v=4","01M7AF0MMMKRAA0H61XMJPV92H","Julian Cyril D ","01M7AF0MQ10AVG6QJQ1C2BC0F5",2,"MIT","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fplaywright-pro\u002Fskills\u002Finit\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: \"init\"\ndescription: >-\n  Set up Playwright in a project. Use when user says \"set up playwright\",\n  \"add e2e tests\", \"configure playwright\", \"testing setup\", \"init playwright\",\n  or \"add test infrastructure\".\n---\n\n# Initialize Playwright Project\n\nSet up a production-ready Playwright testing environment. Detect the framework, generate config, folder structure, example test, and CI workflow.\n\n## Steps\n\n### 1. Analyze the Project\n\nUse the `Explore` subagent to scan the project:\n\n- Check `package.json` for framework (React, Next.js, Vue, Angular, Svelte)\n- Check for `tsconfig.json` → use TypeScript; otherwise JavaScript\n- Check if Playwright is already installed (`@playwright\u002Ftest` in dependencies)\n- Check for existing test directories (`tests\u002F`, `e2e\u002F`, `__tests__\u002F`)\n- Check for existing CI config (`.github\u002Fworkflows\u002F`, `.gitlab-ci.yml`)\n\n### 2. Install Playwright\n\nIf not already installed:\n\n```bash\nnpm init playwright@latest -- --quiet\n```\n\nOr if the user prefers manual setup:\n\n```bash\nnpm install -D @playwright\u002Ftest\nnpx playwright install --with-deps chromium\n```\n\n### 3. Generate `playwright.config.ts`\n\nAdapt to the detected framework:\n\n**Next.js:**\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 ? 2 : 0,\n  workers: process.env.CI ? 1 : undefined,\n  reporter: [\n    ['html', { open: 'never' }],\n    ['list'],\n  ],\n  use: {\n    baseURL: 'http:\u002F\u002Flocalhost:3000',\n    trace: 'on-first-retry',\n    screenshot: 'only-on-failure',\n  },\n  projects: [\n    { name: \"chromium\", use: { ...devices['Desktop Chrome'] } },\n    { name: \"firefox\", use: { ...devices['Desktop Firefox'] } },\n    { name: \"webkit\", use: { ...devices['Desktop Safari'] } },\n  ],\n  webServer: {\n    command: 'npm run dev',\n    url: 'http:\u002F\u002Flocalhost:3000',\n    reuseExistingServer: !process.env.CI,\n  },\n});\n```\n\n**React (Vite):**\n- Change `baseURL` to `http:\u002F\u002Flocalhost:5173`\n- Change `webServer.command` to `npm run dev`\n\n**Vue\u002FNuxt:**\n- Change `baseURL` to `http:\u002F\u002Flocalhost:3000`\n- Change `webServer.command` to `npm run dev`\n\n**Angular:**\n- Change `baseURL` to `http:\u002F\u002Flocalhost:4200`\n- Change `webServer.command` to `npm run start`\n\n**No framework detected:**\n- Omit `webServer` block\n- Set `baseURL` from user input or leave as placeholder\n\n### 4. Create Folder Structure\n\n```\ne2e\u002F\n├── fixtures\u002F\n│   └── index.ts          # Custom fixtures\n├── pages\u002F\n│   └── .gitkeep          # Page object models\n├── test-data\u002F\n│   └── .gitkeep          # Test data files\n└── example.spec.ts       # First example test\n```\n\n### 5. Generate Example Test\n\n```typescript\nimport { test, expect } from '@playwright\u002Ftest';\n\ntest.describe('Homepage', () => {\n  test('should load successfully', async ({ page }) => {\n    await page.goto('\u002F');\n    await expect(page).toHaveTitle(\u002F.+\u002F);\n  });\n\n  test('should have visible navigation', async ({ page }) => {\n    await page.goto('\u002F');\n    await expect(page.getByRole('navigation')).toBeVisible();\n  });\n});\n```\n\n### 6. Generate CI Workflow\n\nIf `.github\u002Fworkflows\u002F` exists, create `playwright.yml`:\n\n```yaml\nname: \"playwright-tests\"\n\non:\n  push:\n    branches: [main, dev]\n  pull_request:\n    branches: [main, dev]\n\njobs:\n  test:\n    timeout-minutes: 60\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions\u002Fcheckout@v4\n      - uses: actions\u002Fsetup-node@v4\n        with:\n          node-version: lts\u002F*\n      - name: \"install-dependencies\"\n        run: npm ci\n      - name: \"install-playwright-browsers\"\n        run: npx playwright install --with-deps\n      - name: \"run-playwright-tests\"\n        run: npx playwright test\n      - uses: actions\u002Fupload-artifact@v4\n        if: ${{ !cancelled() }}\n        with:\n          name: \"playwright-report\"\n          path: playwright-report\u002F\n          retention-days: 30\n```\n\nIf `.gitlab-ci.yml` exists, add a Playwright stage instead.\n\n### 7. Update `.gitignore`\n\nAppend if not already present:\n\n```\n\u002Ftest-results\u002F\n\u002Fplaywright-report\u002F\n\u002Fblob-report\u002F\n\u002Fplaywright\u002F.cache\u002F\n```\n\n### 8. Add npm Scripts\n\nAdd to `package.json` scripts:\n\n```json\n{\n  \"test:e2e\": \"playwright test\",\n  \"test:e2e:ui\": \"playwright test --ui\",\n  \"test:e2e:debug\": \"playwright test --debug\"\n}\n```\n\n### 9. Verify Setup\n\nRun the example test:\n\n```bash\nnpx playwright test\n```\n\nReport the result. If it fails, diagnose and fix before completing.\n\n## Output\n\nConfirm what was created:\n- Config file path and key settings\n- Test directory and example test\n- CI workflow (if applicable)\n- npm scripts added\n- How to run: `npx playwright test` or `npm run test:e2e`\n","# Initialize Playwright Project\n\nSet up a production-ready Playwright testing environment. Detect the framework, generate config, folder structure, example test, and CI workflow.\n\n## Steps\n\n### 1. Analyze the Project\n\nUse the `Explore` subagent to scan the project:\n\n- Check `package.json` for framework (React, Next.js, Vue, Angular, Svelte)\n- Check for `tsconfig.json` → use TypeScript; otherwise JavaScript\n- Check if Playwright is already installed (`@playwright\u002Ftest` in dependencies)\n- Check for existing test directories (`tests\u002F`, `e2e\u002F`, `__tests__\u002F`)\n- Check for existing CI config (`.github\u002Fworkflows\u002F`, `.gitlab-ci.yml`)\n\n### 2. Install Playwright\n\nIf not already installed:\n\n```bash\nnpm init playwright@latest -- --quiet\n```\n\nOr if the user prefers manual setup:\n\n```bash\nnpm install -D @playwright\u002Ftest\nnpx playwright install --with-deps chromium\n```\n\n### 3. Generate `playwright.config.ts`\n\nAdapt to the detected framework:\n\n**Next.js:**\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 ? 2 : 0,\n  workers: process.env.CI ? 1 : undefined,\n  reporter: [\n    ['html', { open: 'never' }],\n    ['list'],\n  ],\n  use: {\n    baseURL: 'http:\u002F\u002Flocalhost:3000',\n    trace: 'on-first-retry',\n    screenshot: 'only-on-failure',\n  },\n  projects: [\n    { name: \"chromium\", use: { ...devices['Desktop Chrome'] } },\n    { name: \"firefox\", use: { ...devices['Desktop Firefox'] } },\n    { name: \"webkit\", use: { ...devices['Desktop Safari'] } },\n  ],\n  webServer: {\n    command: 'npm run dev',\n    url: 'http:\u002F\u002Flocalhost:3000',\n    reuseExistingServer: !process.env.CI,\n  },\n});\n```\n\n**React (Vite):**\n- Change `baseURL` to `http:\u002F\u002Flocalhost:5173`\n- Change `webServer.command` to `npm run dev`\n\n**Vue\u002FNuxt:**\n- Change `baseURL` to `http:\u002F\u002Flocalhost:3000`\n- Change `webServer.command` to `npm run dev`\n\n**Angular:**\n- Change `baseURL` to `http:\u002F\u002Flocalhost:4200`\n- Change `webServer.command` to `npm run start`\n\n**No framework detected:**\n- Omit `webServer` block\n- Set `baseURL` from user input or leave as placeholder\n\n### 4. Create Folder Structure\n\n```\ne2e\u002F\n├── fixtures\u002F\n│   └── index.ts          # Custom fixtures\n├── pages\u002F\n│   └── .gitkeep          # Page object models\n├── test-data\u002F\n│   └── .gitkeep          # Test data files\n└── example.spec.ts       # First example test\n```\n\n### 5. Generate Example Test\n\n```typescript\nimport { test, expect } from '@playwright\u002Ftest';\n\ntest.describe('Homepage', () => {\n  test('should load successfully', async ({ page }) => {\n    await page.goto('\u002F');\n    await expect(page).toHaveTitle(\u002F.+\u002F);\n  });\n\n  test('should have visible navigation', async ({ page }) => {\n    await page.goto('\u002F');\n    await expect(page.getByRole('navigation')).toBeVisible();\n  });\n});\n```\n\n### 6. Generate CI Workflow\n\nIf `.github\u002Fworkflows\u002F` exists, create `playwright.yml`:\n\n```yaml\nname: \"playwright-tests\"\n\non:\n  push:\n    branches: [main, dev]\n  pull_request:\n    branches: [main, dev]\n\njobs:\n  test:\n    timeout-minutes: 60\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions\u002Fcheckout@v4\n      - uses: actions\u002Fsetup-node@v4\n        with:\n          node-version: lts\u002F*\n      - name: \"install-dependencies\"\n        run: npm ci\n      - name: \"install-playwright-browsers\"\n        run: npx playwright install --with-deps\n      - name: \"run-playwright-tests\"\n        run: npx playwright test\n      - uses: actions\u002Fupload-artifact@v4\n        if: ${{ !cancelled() }}\n        with:\n          name: \"playwright-report\"\n          path: playwright-report\u002F\n          retention-days: 30\n```\n\nIf `.gitlab-ci.yml` exists, add a Playwright stage instead.\n\n### 7. Update `.gitignore`\n\nAppend if not already present:\n\n```\n\u002Ftest-results\u002F\n\u002Fplaywright-report\u002F\n\u002Fblob-report\u002F\n\u002Fplaywright\u002F.cache\u002F\n```\n\n### 8. Add npm Scripts\n\nAdd to `package.json` scripts:\n\n```json\n{\n  \"test:e2e\": \"playwright test\",\n  \"test:e2e:ui\": \"playwright test --ui\",\n  \"test:e2e:debug\": \"playwright test --debug\"\n}\n```\n\n### 9. Verify Setup\n\nRun the example test:\n\n```bash\nnpx playwright test\n```\n\nReport the result. If it fails, diagnose and fix before completing.\n\n## Output\n\nConfirm what was created:\n- Config file path and key settings\n- Test directory and example test\n- CI workflow (if applicable)\n- npm scripts added\n- How to run: `npx playwright test` or `npm run test:e2e`\n",{"name":5,"description":7},"main","57e7aa6b6e03bce1a7d7862ba9c2ec312f7f19b5","src\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fplaywright-pro\u002Fskills\u002Finit",0,"https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee","https:\u002F\u002Fwithcyril.me\u002F","Hi, I’m Julian Cyril D, a Computer Science and Business Systems student at PSNACET.\r\nI’m passionate about full-stack development, UI\u002FUX design, and building sma","2026-11-04 23:28:50",{"source":8,"skillName":5,"commands":34,"prompt":44,"zipAvailable":45},[35,38,41],{"tool":36,"command":37},"npx","npx skills add Cyrilthetecchieee\u002Fcyril-code- --skill init",{"tool":39,"command":40},"bunx","bunx skills add Cyrilthetecchieee\u002Fcyril-code- --skill init",{"tool":42,"command":43},"pnpm","pnpm dlx skills add Cyrilthetecchieee\u002Fcyril-code- --skill init","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fplaywright-pro\u002Fskills\u002Finit\u002FSKILL.md",true,[],[48,57,64,72,79,86],{"skillNo":49,"name":50,"nameZh":6,"description":51,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":52,"licenseFileUrl":53,"sourceHtmlUrl":54,"categories":55,"keywords":56,"publishedAt":19},"01M7AQV6CYX8RMC78420V9WZ62","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","Apache-2.0","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fwebapp-testing\u002FSKILL.md",[],[],{"skillNo":58,"name":59,"nameZh":6,"description":60,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":61,"categories":62,"keywords":63,"publishedAt":19},"01M7AQV2895N3S1MEX6K76G6G2","youtube-downloader","Download YouTube videos with customizable quality and format options. Use this skill when the user asks to download, save, or grab YouTube videos. Supports various quality settings (best, 1080p, 720p, 480p, 360p), multiple formats (mp4, webm, mkv), and audio-only downloads as MP3.","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fvideo-downloader\u002FSKILL.md",[],[],{"skillNo":65,"name":66,"nameZh":6,"description":67,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":52,"licenseFileUrl":68,"sourceHtmlUrl":69,"categories":70,"keywords":71,"publishedAt":19},"01M7AQTRNX62DNKVZ5GXEHRBKB","theme-factory","Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors\u002Ffonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Ftheme-factory\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Ftheme-factory\u002FSKILL.md",[],[],{"skillNo":73,"name":74,"nameZh":6,"description":75,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":76,"categories":77,"keywords":78,"publishedAt":19},"01M7AQTNNVHAAN9H6DA8T6ZVE0","template-skill","Replace with description of the skill and when Claude should use it.","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Ftemplate-skill\u002FSKILL.md",[],[],{"skillNo":80,"name":81,"nameZh":6,"description":82,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":83,"categories":84,"keywords":85,"publishedAt":19},"01M7AQTJ3MQ6AKX152MEX2MYCC","tailored-resume-generator","Analyzes job descriptions and generates tailored resumes that highlight relevant experience, skills, and achievements to maximize interview chances","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Ftailored-resume-generator\u002FSKILL.md",[],[],{"skillNo":87,"name":88,"nameZh":6,"description":89,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":52,"licenseFileUrl":90,"sourceHtmlUrl":91,"categories":92,"keywords":93,"publishedAt":19},"01M7AQTD7D5MYET2YWG7HG9WM3","slack-gif-creator","Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives. This skill applies when users request animated GIFs or emoji animations for Slack from descriptions like \"make me a GIF for Slack of X doing Y\".","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fslack-gif-creator\u002FSKILL.md",[],[]]