[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-anthropic-webapp-testing":3,"mdc--43589v-key":38,"related-org-anthropic-webapp-testing":695,"related-repo-anthropic-webapp-testing":880},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":33,"sourceUrl":36,"mdContent":37},"webapp-testing","test web apps with Playwright","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.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"anthropic","Anthropic","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fanthropic.png","anthropics",[13,17,20,23],{"name":14,"slug":15,"type":16},"Playwright","playwright","tag",{"name":18,"slug":19,"type":16},"Testing","testing",{"name":21,"slug":22,"type":16},"Frontend","frontend",{"name":24,"slug":25,"type":16},"Debugging","debugging",161831,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills","2026-04-06T17:56:12.889962","Complete terms in LICENSE.txt",19131,[32],"agent-skills",{"repoUrl":27,"stars":26,"forks":30,"topics":34,"description":35},[32],"Public repository for Agent Skills","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills\u002Ftree\u002FHEAD\u002Fskills\u002Fwebapp-testing","---\nname: webapp-testing\ndescription: 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.\nlicense: Complete terms in LICENSE.txt\n---\n\n# Web Application Testing\n\nTo test local web applications, write native Python Playwright scripts.\n\n**Helper Scripts Available**:\n- `scripts\u002Fwith_server.py` - Manages server lifecycle (supports multiple servers)\n\n**Always run scripts with `--help` first** to see usage. DO NOT read the source until you try running the script first and find that a customized solution is abslutely necessary. These scripts can be very large and thus pollute your context window. They exist to be called directly as black-box scripts rather than ingested into your context window.\n\n## Decision Tree: Choosing Your Approach\n\n```\nUser task → Is it static HTML?\n    ├─ Yes → Read HTML file directly to identify selectors\n    │         ├─ Success → Write Playwright script using selectors\n    │         └─ Fails\u002FIncomplete → Treat as dynamic (below)\n    │\n    └─ No (dynamic webapp) → Is the server already running?\n        ├─ No → Run: python scripts\u002Fwith_server.py --help\n        │        Then use the helper + write simplified Playwright script\n        │\n        └─ Yes → Reconnaissance-then-action:\n            1. Navigate and wait for networkidle\n            2. Take screenshot or inspect DOM\n            3. Identify selectors from rendered state\n            4. Execute actions with discovered selectors\n```\n\n## Example: Using with_server.py\n\nTo start a server, run `--help` first, then use the helper:\n\n**Single server:**\n```bash\npython scripts\u002Fwith_server.py --server \"npm run dev\" --port 5173 -- python your_automation.py\n```\n\n**Multiple servers (e.g., backend + frontend):**\n```bash\npython scripts\u002Fwith_server.py \\\n  --server \"cd backend && python server.py\" --port 3000 \\\n  --server \"cd frontend && npm run dev\" --port 5173 \\\n  -- python your_automation.py\n```\n\nTo create an automation script, include only Playwright logic (servers are managed automatically):\n```python\nfrom playwright.sync_api import sync_playwright\n\nwith sync_playwright() as p:\n    browser = p.chromium.launch(headless=True) # Always launch chromium in headless mode\n    page = browser.new_page()\n    page.goto('http:\u002F\u002Flocalhost:5173') # Server already running and ready\n    page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute\n    # ... your automation logic\n    browser.close()\n```\n\n## Reconnaissance-Then-Action Pattern\n\n1. **Inspect rendered DOM**:\n   ```python\n   page.screenshot(path='\u002Ftmp\u002Finspect.png', full_page=True)\n   content = page.content()\n   page.locator('button').all()\n   ```\n\n2. **Identify selectors** from inspection results\n\n3. **Execute actions** using discovered selectors\n\n## Common Pitfall\n\n❌ **Don't** inspect the DOM before waiting for `networkidle` on dynamic apps\n✅ **Do** wait for `page.wait_for_load_state('networkidle')` before inspection\n\n## Best Practices\n\n- **Use bundled scripts as black boxes** - To accomplish a task, consider whether one of the scripts available in `scripts\u002F` can help. These scripts handle common, complex workflows reliably without cluttering the context window. Use `--help` to see usage, then invoke directly. \n- Use `sync_playwright()` for synchronous scripts\n- Always close the browser when done\n- Use descriptive selectors: `text=`, `role=`, CSS selectors, or IDs\n- Add appropriate waits: `page.wait_for_selector()` or `page.wait_for_timeout()`\n\n## Reference Files\n\n- **examples\u002F** - Examples showing common patterns:\n  - `element_discovery.py` - Discovering buttons, links, and inputs on a page\n  - `static_html_automation.py` - Using file:\u002F\u002F URLs for local HTML\n  - `console_logging.py` - Capturing console logs during automation",{"data":39,"body":40},{"name":4,"description":6,"license":29},{"type":41,"children":42},"root",[43,52,58,69,86,104,111,123,129,141,149,223,231,340,345,431,437,501,507,542,548,634,640,689],{"type":44,"tag":45,"props":46,"children":48},"element","h1",{"id":47},"web-application-testing",[49],{"type":50,"value":51},"text","Web Application Testing",{"type":44,"tag":53,"props":54,"children":55},"p",{},[56],{"type":50,"value":57},"To test local web applications, write native Python Playwright scripts.",{"type":44,"tag":53,"props":59,"children":60},{},[61,67],{"type":44,"tag":62,"props":63,"children":64},"strong",{},[65],{"type":50,"value":66},"Helper Scripts Available",{"type":50,"value":68},":",{"type":44,"tag":70,"props":71,"children":72},"ul",{},[73],{"type":44,"tag":74,"props":75,"children":76},"li",{},[77,84],{"type":44,"tag":78,"props":79,"children":81},"code",{"className":80},[],[82],{"type":50,"value":83},"scripts\u002Fwith_server.py",{"type":50,"value":85}," - Manages server lifecycle (supports multiple servers)",{"type":44,"tag":53,"props":87,"children":88},{},[89,102],{"type":44,"tag":62,"props":90,"children":91},{},[92,94,100],{"type":50,"value":93},"Always run scripts with ",{"type":44,"tag":78,"props":95,"children":97},{"className":96},[],[98],{"type":50,"value":99},"--help",{"type":50,"value":101}," first",{"type":50,"value":103}," to see usage. DO NOT read the source until you try running the script first and find that a customized solution is abslutely necessary. These scripts can be very large and thus pollute your context window. They exist to be called directly as black-box scripts rather than ingested into your context window.",{"type":44,"tag":105,"props":106,"children":108},"h2",{"id":107},"decision-tree-choosing-your-approach",[109],{"type":50,"value":110},"Decision Tree: Choosing Your Approach",{"type":44,"tag":112,"props":113,"children":117},"pre",{"className":114,"code":116,"language":50},[115],"language-text","User task → Is it static HTML?\n    ├─ Yes → Read HTML file directly to identify selectors\n    │         ├─ Success → Write Playwright script using selectors\n    │         └─ Fails\u002FIncomplete → Treat as dynamic (below)\n    │\n    └─ No (dynamic webapp) → Is the server already running?\n        ├─ No → Run: python scripts\u002Fwith_server.py --help\n        │        Then use the helper + write simplified Playwright script\n        │\n        └─ Yes → Reconnaissance-then-action:\n            1. Navigate and wait for networkidle\n            2. Take screenshot or inspect DOM\n            3. Identify selectors from rendered state\n            4. Execute actions with discovered selectors\n",[118],{"type":44,"tag":78,"props":119,"children":121},{"__ignoreMap":120},"",[122],{"type":50,"value":116},{"type":44,"tag":105,"props":124,"children":126},{"id":125},"example-using-with_serverpy",[127],{"type":50,"value":128},"Example: Using with_server.py",{"type":44,"tag":53,"props":130,"children":131},{},[132,134,139],{"type":50,"value":133},"To start a server, run ",{"type":44,"tag":78,"props":135,"children":137},{"className":136},[],[138],{"type":50,"value":99},{"type":50,"value":140}," first, then use the helper:",{"type":44,"tag":53,"props":142,"children":143},{},[144],{"type":44,"tag":62,"props":145,"children":146},{},[147],{"type":50,"value":148},"Single server:",{"type":44,"tag":112,"props":150,"children":154},{"className":151,"code":152,"language":153,"meta":120,"style":120},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","python scripts\u002Fwith_server.py --server \"npm run dev\" --port 5173 -- python your_automation.py\n","bash",[155],{"type":44,"tag":78,"props":156,"children":157},{"__ignoreMap":120},[158],{"type":44,"tag":159,"props":160,"children":163},"span",{"class":161,"line":162},"line",1,[164,170,176,181,187,192,197,202,208,213,218],{"type":44,"tag":159,"props":165,"children":167},{"style":166},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[168],{"type":50,"value":169},"python",{"type":44,"tag":159,"props":171,"children":173},{"style":172},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[174],{"type":50,"value":175}," scripts\u002Fwith_server.py",{"type":44,"tag":159,"props":177,"children":178},{"style":172},[179],{"type":50,"value":180}," --server",{"type":44,"tag":159,"props":182,"children":184},{"style":183},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[185],{"type":50,"value":186}," \"",{"type":44,"tag":159,"props":188,"children":189},{"style":172},[190],{"type":50,"value":191},"npm run dev",{"type":44,"tag":159,"props":193,"children":194},{"style":183},[195],{"type":50,"value":196},"\"",{"type":44,"tag":159,"props":198,"children":199},{"style":172},[200],{"type":50,"value":201}," --port",{"type":44,"tag":159,"props":203,"children":205},{"style":204},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[206],{"type":50,"value":207}," 5173",{"type":44,"tag":159,"props":209,"children":210},{"style":172},[211],{"type":50,"value":212}," --",{"type":44,"tag":159,"props":214,"children":215},{"style":172},[216],{"type":50,"value":217}," python",{"type":44,"tag":159,"props":219,"children":220},{"style":172},[221],{"type":50,"value":222}," your_automation.py\n",{"type":44,"tag":53,"props":224,"children":225},{},[226],{"type":44,"tag":62,"props":227,"children":228},{},[229],{"type":50,"value":230},"Multiple servers (e.g., backend + frontend):",{"type":44,"tag":112,"props":232,"children":234},{"className":151,"code":233,"language":153,"meta":120,"style":120},"python scripts\u002Fwith_server.py \\\n  --server \"cd backend && python server.py\" --port 3000 \\\n  --server \"cd frontend && npm run dev\" --port 5173 \\\n  -- python your_automation.py\n",[235],{"type":44,"tag":78,"props":236,"children":237},{"__ignoreMap":120},[238,255,290,323],{"type":44,"tag":159,"props":239,"children":240},{"class":161,"line":162},[241,245,249],{"type":44,"tag":159,"props":242,"children":243},{"style":166},[244],{"type":50,"value":169},{"type":44,"tag":159,"props":246,"children":247},{"style":172},[248],{"type":50,"value":175},{"type":44,"tag":159,"props":250,"children":252},{"style":251},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[253],{"type":50,"value":254}," \\\n",{"type":44,"tag":159,"props":256,"children":258},{"class":161,"line":257},2,[259,264,268,273,277,281,286],{"type":44,"tag":159,"props":260,"children":261},{"style":172},[262],{"type":50,"value":263},"  --server",{"type":44,"tag":159,"props":265,"children":266},{"style":183},[267],{"type":50,"value":186},{"type":44,"tag":159,"props":269,"children":270},{"style":172},[271],{"type":50,"value":272},"cd backend && python server.py",{"type":44,"tag":159,"props":274,"children":275},{"style":183},[276],{"type":50,"value":196},{"type":44,"tag":159,"props":278,"children":279},{"style":172},[280],{"type":50,"value":201},{"type":44,"tag":159,"props":282,"children":283},{"style":204},[284],{"type":50,"value":285}," 3000",{"type":44,"tag":159,"props":287,"children":288},{"style":251},[289],{"type":50,"value":254},{"type":44,"tag":159,"props":291,"children":293},{"class":161,"line":292},3,[294,298,302,307,311,315,319],{"type":44,"tag":159,"props":295,"children":296},{"style":172},[297],{"type":50,"value":263},{"type":44,"tag":159,"props":299,"children":300},{"style":183},[301],{"type":50,"value":186},{"type":44,"tag":159,"props":303,"children":304},{"style":172},[305],{"type":50,"value":306},"cd frontend && npm run dev",{"type":44,"tag":159,"props":308,"children":309},{"style":183},[310],{"type":50,"value":196},{"type":44,"tag":159,"props":312,"children":313},{"style":172},[314],{"type":50,"value":201},{"type":44,"tag":159,"props":316,"children":317},{"style":204},[318],{"type":50,"value":207},{"type":44,"tag":159,"props":320,"children":321},{"style":251},[322],{"type":50,"value":254},{"type":44,"tag":159,"props":324,"children":326},{"class":161,"line":325},4,[327,332,336],{"type":44,"tag":159,"props":328,"children":329},{"style":172},[330],{"type":50,"value":331},"  --",{"type":44,"tag":159,"props":333,"children":334},{"style":172},[335],{"type":50,"value":217},{"type":44,"tag":159,"props":337,"children":338},{"style":172},[339],{"type":50,"value":222},{"type":44,"tag":53,"props":341,"children":342},{},[343],{"type":50,"value":344},"To create an automation script, include only Playwright logic (servers are managed automatically):",{"type":44,"tag":112,"props":346,"children":349},{"className":347,"code":348,"language":169,"meta":120,"style":120},"language-python shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","from playwright.sync_api import sync_playwright\n\nwith sync_playwright() as p:\n    browser = p.chromium.launch(headless=True) # Always launch chromium in headless mode\n    page = browser.new_page()\n    page.goto('http:\u002F\u002Flocalhost:5173') # Server already running and ready\n    page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute\n    # ... your automation logic\n    browser.close()\n",[350],{"type":44,"tag":78,"props":351,"children":352},{"__ignoreMap":120},[353,361,370,378,386,395,404,413,422],{"type":44,"tag":159,"props":354,"children":355},{"class":161,"line":162},[356],{"type":44,"tag":159,"props":357,"children":358},{},[359],{"type":50,"value":360},"from playwright.sync_api import sync_playwright\n",{"type":44,"tag":159,"props":362,"children":363},{"class":161,"line":257},[364],{"type":44,"tag":159,"props":365,"children":367},{"emptyLinePlaceholder":366},true,[368],{"type":50,"value":369},"\n",{"type":44,"tag":159,"props":371,"children":372},{"class":161,"line":292},[373],{"type":44,"tag":159,"props":374,"children":375},{},[376],{"type":50,"value":377},"with sync_playwright() as p:\n",{"type":44,"tag":159,"props":379,"children":380},{"class":161,"line":325},[381],{"type":44,"tag":159,"props":382,"children":383},{},[384],{"type":50,"value":385},"    browser = p.chromium.launch(headless=True) # Always launch chromium in headless mode\n",{"type":44,"tag":159,"props":387,"children":389},{"class":161,"line":388},5,[390],{"type":44,"tag":159,"props":391,"children":392},{},[393],{"type":50,"value":394},"    page = browser.new_page()\n",{"type":44,"tag":159,"props":396,"children":398},{"class":161,"line":397},6,[399],{"type":44,"tag":159,"props":400,"children":401},{},[402],{"type":50,"value":403},"    page.goto('http:\u002F\u002Flocalhost:5173') # Server already running and ready\n",{"type":44,"tag":159,"props":405,"children":407},{"class":161,"line":406},7,[408],{"type":44,"tag":159,"props":409,"children":410},{},[411],{"type":50,"value":412},"    page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute\n",{"type":44,"tag":159,"props":414,"children":416},{"class":161,"line":415},8,[417],{"type":44,"tag":159,"props":418,"children":419},{},[420],{"type":50,"value":421},"    # ... your automation logic\n",{"type":44,"tag":159,"props":423,"children":425},{"class":161,"line":424},9,[426],{"type":44,"tag":159,"props":427,"children":428},{},[429],{"type":50,"value":430},"    browser.close()\n",{"type":44,"tag":105,"props":432,"children":434},{"id":433},"reconnaissance-then-action-pattern",[435],{"type":50,"value":436},"Reconnaissance-Then-Action Pattern",{"type":44,"tag":438,"props":439,"children":440},"ol",{},[441,481,491],{"type":44,"tag":74,"props":442,"children":443},{},[444,449,450],{"type":44,"tag":62,"props":445,"children":446},{},[447],{"type":50,"value":448},"Inspect rendered DOM",{"type":50,"value":68},{"type":44,"tag":112,"props":451,"children":453},{"className":347,"code":452,"language":169,"meta":120,"style":120},"page.screenshot(path='\u002Ftmp\u002Finspect.png', full_page=True)\ncontent = page.content()\npage.locator('button').all()\n",[454],{"type":44,"tag":78,"props":455,"children":456},{"__ignoreMap":120},[457,465,473],{"type":44,"tag":159,"props":458,"children":459},{"class":161,"line":162},[460],{"type":44,"tag":159,"props":461,"children":462},{},[463],{"type":50,"value":464},"page.screenshot(path='\u002Ftmp\u002Finspect.png', full_page=True)\n",{"type":44,"tag":159,"props":466,"children":467},{"class":161,"line":257},[468],{"type":44,"tag":159,"props":469,"children":470},{},[471],{"type":50,"value":472},"content = page.content()\n",{"type":44,"tag":159,"props":474,"children":475},{"class":161,"line":292},[476],{"type":44,"tag":159,"props":477,"children":478},{},[479],{"type":50,"value":480},"page.locator('button').all()\n",{"type":44,"tag":74,"props":482,"children":483},{},[484,489],{"type":44,"tag":62,"props":485,"children":486},{},[487],{"type":50,"value":488},"Identify selectors",{"type":50,"value":490}," from inspection results",{"type":44,"tag":74,"props":492,"children":493},{},[494,499],{"type":44,"tag":62,"props":495,"children":496},{},[497],{"type":50,"value":498},"Execute actions",{"type":50,"value":500}," using discovered selectors",{"type":44,"tag":105,"props":502,"children":504},{"id":503},"common-pitfall",[505],{"type":50,"value":506},"Common Pitfall",{"type":44,"tag":53,"props":508,"children":509},{},[510,512,517,519,525,527,532,534,540],{"type":50,"value":511},"❌ ",{"type":44,"tag":62,"props":513,"children":514},{},[515],{"type":50,"value":516},"Don't",{"type":50,"value":518}," inspect the DOM before waiting for ",{"type":44,"tag":78,"props":520,"children":522},{"className":521},[],[523],{"type":50,"value":524},"networkidle",{"type":50,"value":526}," on dynamic apps\n✅ ",{"type":44,"tag":62,"props":528,"children":529},{},[530],{"type":50,"value":531},"Do",{"type":50,"value":533}," wait for ",{"type":44,"tag":78,"props":535,"children":537},{"className":536},[],[538],{"type":50,"value":539},"page.wait_for_load_state('networkidle')",{"type":50,"value":541}," before inspection",{"type":44,"tag":105,"props":543,"children":545},{"id":544},"best-practices",[546],{"type":50,"value":547},"Best Practices",{"type":44,"tag":70,"props":549,"children":550},{},[551,576,589,594,615],{"type":44,"tag":74,"props":552,"children":553},{},[554,559,561,567,569,574],{"type":44,"tag":62,"props":555,"children":556},{},[557],{"type":50,"value":558},"Use bundled scripts as black boxes",{"type":50,"value":560}," - To accomplish a task, consider whether one of the scripts available in ",{"type":44,"tag":78,"props":562,"children":564},{"className":563},[],[565],{"type":50,"value":566},"scripts\u002F",{"type":50,"value":568}," can help. These scripts handle common, complex workflows reliably without cluttering the context window. Use ",{"type":44,"tag":78,"props":570,"children":572},{"className":571},[],[573],{"type":50,"value":99},{"type":50,"value":575}," to see usage, then invoke directly.",{"type":44,"tag":74,"props":577,"children":578},{},[579,581,587],{"type":50,"value":580},"Use ",{"type":44,"tag":78,"props":582,"children":584},{"className":583},[],[585],{"type":50,"value":586},"sync_playwright()",{"type":50,"value":588}," for synchronous scripts",{"type":44,"tag":74,"props":590,"children":591},{},[592],{"type":50,"value":593},"Always close the browser when done",{"type":44,"tag":74,"props":595,"children":596},{},[597,599,605,607,613],{"type":50,"value":598},"Use descriptive selectors: ",{"type":44,"tag":78,"props":600,"children":602},{"className":601},[],[603],{"type":50,"value":604},"text=",{"type":50,"value":606},", ",{"type":44,"tag":78,"props":608,"children":610},{"className":609},[],[611],{"type":50,"value":612},"role=",{"type":50,"value":614},", CSS selectors, or IDs",{"type":44,"tag":74,"props":616,"children":617},{},[618,620,626,628],{"type":50,"value":619},"Add appropriate waits: ",{"type":44,"tag":78,"props":621,"children":623},{"className":622},[],[624],{"type":50,"value":625},"page.wait_for_selector()",{"type":50,"value":627}," or ",{"type":44,"tag":78,"props":629,"children":631},{"className":630},[],[632],{"type":50,"value":633},"page.wait_for_timeout()",{"type":44,"tag":105,"props":635,"children":637},{"id":636},"reference-files",[638],{"type":50,"value":639},"Reference Files",{"type":44,"tag":70,"props":641,"children":642},{},[643],{"type":44,"tag":74,"props":644,"children":645},{},[646,651,653],{"type":44,"tag":62,"props":647,"children":648},{},[649],{"type":50,"value":650},"examples\u002F",{"type":50,"value":652}," - Examples showing common patterns:\n",{"type":44,"tag":70,"props":654,"children":655},{},[656,667,678],{"type":44,"tag":74,"props":657,"children":658},{},[659,665],{"type":44,"tag":78,"props":660,"children":662},{"className":661},[],[663],{"type":50,"value":664},"element_discovery.py",{"type":50,"value":666}," - Discovering buttons, links, and inputs on a page",{"type":44,"tag":74,"props":668,"children":669},{},[670,676],{"type":44,"tag":78,"props":671,"children":673},{"className":672},[],[674],{"type":50,"value":675},"static_html_automation.py",{"type":50,"value":677}," - Using file:\u002F\u002F URLs for local HTML",{"type":44,"tag":74,"props":679,"children":680},{},[681,687],{"type":44,"tag":78,"props":682,"children":684},{"className":683},[],[685],{"type":50,"value":686},"console_logging.py",{"type":50,"value":688}," - Capturing console logs during automation",{"type":44,"tag":690,"props":691,"children":692},"style",{},[693],{"type":50,"value":694},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":696,"total":879},[697,716,730,742,761,774,795,813,827,842,850,863],{"slug":698,"name":698,"fn":699,"description":700,"org":701,"tags":702,"stars":26,"repoUrl":27,"updatedAt":715},"algorithmic-art","create algorithmic art with p5.js","Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[703,706,709,712],{"name":704,"slug":705,"type":16},"Creative","creative",{"name":707,"slug":708,"type":16},"Design","design",{"name":710,"slug":711,"type":16},"Generative Art","generative-art",{"name":713,"slug":714,"type":16},"JavaScript","javascript","2026-04-06T17:56:15.455818",{"slug":717,"name":717,"fn":718,"description":719,"org":720,"tags":721,"stars":26,"repoUrl":27,"updatedAt":729},"brand-guidelines","apply Anthropic brand colors and typography","Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[722,725,726],{"name":723,"slug":724,"type":16},"Branding","branding",{"name":707,"slug":708,"type":16},{"name":727,"slug":728,"type":16},"Typography","typography","2026-04-06T17:56:05.042852",{"slug":731,"name":731,"fn":732,"description":733,"org":734,"tags":735,"stars":26,"repoUrl":27,"updatedAt":741},"canvas-design","create posters and visual art as PNG or PDF","Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[736,737,738],{"name":704,"slug":705,"type":16},{"name":707,"slug":708,"type":16},{"name":739,"slug":740,"type":16},"PDF","pdf","2026-04-06T17:56:03.794732",{"slug":743,"name":743,"fn":744,"description":745,"org":746,"tags":747,"stars":26,"repoUrl":27,"updatedAt":760},"claude-api","build apps with the Claude API","Reference for the Claude API \u002F Anthropic SDK — model ids, pricing, params, streaming, tool use, MCP, agents, caching, token counting, model migration.\nTRIGGER — read BEFORE opening the target file; don't skip because it \"looks like a one-liner\" — whenever: the prompt names Claude\u002FAnthropic in any form (Claude, Anthropic, Fable, Opus, Sonnet, Haiku, `anthropic`, `@anthropic-ai`, `claude-*`, `us.anthropic.*`, `[1m]`); the user asks about an LLM (pricing\u002Fmodel choice\u002Flimits\u002Fcaching) — never answer from memory; OR the task is LLM-shaped with provider unstated (agent\u002FMCP\u002Ftool-definition\u002Fmulti-agent\u002FRAG\u002FLLM-judge\u002Fcomputer-use; generate\u002Fsummarize\u002Fextract\u002Fclassify\u002Frewrite\u002Fconverse over NL; debugging refusals\u002Fcutoffs\u002Fstreaming\u002Ftool-calls\u002Ftokens).\nSKIP only when another provider is being worked on (overrides all triggers): OpenAI\u002FGPT\u002FGemini\u002FLlama\u002FMistral\u002FCohere\u002FOllama named in the query; OR `grep -rE 'openai|langchain_openai|google.generativeai|genai|mistralai|cohere|ollama'` over the project hits (run this grep FIRST if no provider named — don't Read the file).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[748,751,752,755,757],{"name":749,"slug":750,"type":16},"Agents","agents",{"name":9,"slug":8,"type":16},{"name":753,"slug":754,"type":16},"Anthropic SDK","anthropic-sdk",{"name":756,"slug":743,"type":16},"Claude API",{"name":758,"slug":759,"type":16},"LLM","llm","2026-07-28T05:36:08.213335",{"slug":762,"name":762,"fn":763,"description":764,"org":765,"tags":766,"stars":26,"repoUrl":27,"updatedAt":773},"doc-coauthoring","co-author documentation and technical specs","Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[767,770],{"name":768,"slug":769,"type":16},"Documentation","documentation",{"name":771,"slug":772,"type":16},"Technical Writing","technical-writing","2026-04-06T17:56:14.18897",{"slug":775,"name":775,"fn":776,"description":777,"org":778,"tags":779,"stars":26,"repoUrl":27,"updatedAt":794},"docx","create and edit Word documents","Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files) or Word templates (.dotx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', '.dotx', or requests to produce professional documents with formatting like tables of contents, headings, page numbers, or letterheads. Also use when extracting or reorganizing content from .docx or .dotx files, inserting or replacing images in documents, performing find-and-replace in Word files, working with tracked changes or comments, or converting content into a polished Word document. If the user asks for a 'report', 'memo', 'letter', 'template', or similar deliverable as a Word or .docx file, use this skill. Do NOT use for PDFs, spreadsheets, Google Docs, or general coding tasks unrelated to document generation.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[780,783,785,788,791],{"name":781,"slug":782,"type":16},"Documents","documents",{"name":784,"slug":775,"type":16},"DOCX",{"name":786,"slug":787,"type":16},"Office","office",{"name":789,"slug":790,"type":16},"Templates","templates",{"name":792,"slug":793,"type":16},"Word","word","2026-07-18T05:16:23.136271",{"slug":796,"name":796,"fn":797,"description":798,"org":799,"tags":800,"stars":26,"repoUrl":27,"updatedAt":812},"frontend-design","design production-grade frontend interfaces","Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[801,802,803,806,809],{"name":707,"slug":708,"type":16},{"name":21,"slug":22,"type":16},{"name":804,"slug":805,"type":16},"React","react",{"name":807,"slug":808,"type":16},"Tailwind CSS","tailwind-css",{"name":810,"slug":811,"type":16},"UI Components","ui-components","2026-04-06T17:56:16.723469",{"slug":814,"name":814,"fn":815,"description":816,"org":817,"tags":818,"stars":26,"repoUrl":27,"updatedAt":826},"internal-comms","write internal company communications","A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[819,822,823],{"name":820,"slug":821,"type":16},"Communications","communications",{"name":789,"slug":790,"type":16},{"name":824,"slug":825,"type":16},"Writing","writing","2026-04-06T17:56:20.695522",{"slug":828,"name":828,"fn":829,"description":830,"org":831,"tags":832,"stars":26,"repoUrl":27,"updatedAt":841},"mcp-builder","build MCP servers","Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node\u002FTypeScript (MCP SDK).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[833,834,837,838],{"name":749,"slug":750,"type":16},{"name":835,"slug":836,"type":16},"API Development","api-development",{"name":758,"slug":759,"type":16},{"name":839,"slug":840,"type":16},"MCP","mcp","2026-04-06T17:56:10.357665",{"slug":740,"name":740,"fn":843,"description":844,"org":845,"tags":846,"stars":26,"repoUrl":27,"updatedAt":849},"read edit and manipulate PDF files","Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text\u002Ftables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting\u002Fdecrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[847,848],{"name":781,"slug":782,"type":16},{"name":739,"slug":740,"type":16},"2026-04-06T17:56:02.483316",{"slug":851,"name":851,"fn":852,"description":853,"org":854,"tags":855,"stars":26,"repoUrl":27,"updatedAt":862},"pptx","create and edit PowerPoint presentations","Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates (.potx), layouts, speaker notes, or comments. Trigger whenever the user mentions \"deck,\" \"slides,\" \"presentation,\" or references a .pptx or .potx filename, regardless of what they plan to do with the content afterward. If a .pptx or .potx file needs to be opened, created, or touched, use this skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[856,859],{"name":857,"slug":858,"type":16},"PowerPoint","powerpoint",{"name":860,"slug":861,"type":16},"Presentations","presentations","2026-07-18T05:16:24.1471",{"slug":864,"name":864,"fn":865,"description":866,"org":867,"tags":868,"stars":26,"repoUrl":27,"updatedAt":878},"skill-creator","create and optimize agent skills","Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[869,870,871,874,877],{"name":749,"slug":750,"type":16},{"name":768,"slug":769,"type":16},{"name":872,"slug":873,"type":16},"Evals","evals",{"name":875,"slug":876,"type":16},"Performance","performance",{"name":771,"slug":772,"type":16},"2026-04-19T06:45:40.804",490,{"items":881,"total":930},[882,889,895,901,909,914,922],{"slug":698,"name":698,"fn":699,"description":700,"org":883,"tags":884,"stars":26,"repoUrl":27,"updatedAt":715},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[885,886,887,888],{"name":704,"slug":705,"type":16},{"name":707,"slug":708,"type":16},{"name":710,"slug":711,"type":16},{"name":713,"slug":714,"type":16},{"slug":717,"name":717,"fn":718,"description":719,"org":890,"tags":891,"stars":26,"repoUrl":27,"updatedAt":729},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[892,893,894],{"name":723,"slug":724,"type":16},{"name":707,"slug":708,"type":16},{"name":727,"slug":728,"type":16},{"slug":731,"name":731,"fn":732,"description":733,"org":896,"tags":897,"stars":26,"repoUrl":27,"updatedAt":741},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[898,899,900],{"name":704,"slug":705,"type":16},{"name":707,"slug":708,"type":16},{"name":739,"slug":740,"type":16},{"slug":743,"name":743,"fn":744,"description":745,"org":902,"tags":903,"stars":26,"repoUrl":27,"updatedAt":760},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[904,905,906,907,908],{"name":749,"slug":750,"type":16},{"name":9,"slug":8,"type":16},{"name":753,"slug":754,"type":16},{"name":756,"slug":743,"type":16},{"name":758,"slug":759,"type":16},{"slug":762,"name":762,"fn":763,"description":764,"org":910,"tags":911,"stars":26,"repoUrl":27,"updatedAt":773},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[912,913],{"name":768,"slug":769,"type":16},{"name":771,"slug":772,"type":16},{"slug":775,"name":775,"fn":776,"description":777,"org":915,"tags":916,"stars":26,"repoUrl":27,"updatedAt":794},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[917,918,919,920,921],{"name":781,"slug":782,"type":16},{"name":784,"slug":775,"type":16},{"name":786,"slug":787,"type":16},{"name":789,"slug":790,"type":16},{"name":792,"slug":793,"type":16},{"slug":796,"name":796,"fn":797,"description":798,"org":923,"tags":924,"stars":26,"repoUrl":27,"updatedAt":812},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[925,926,927,928,929],{"name":707,"slug":708,"type":16},{"name":21,"slug":22,"type":16},{"name":804,"slug":805,"type":16},{"name":807,"slug":808,"type":16},{"name":810,"slug":811,"type":16},17]