[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M718VXWWPF486PTHDX8FVS5G":3,"skill-same:01M718VXWWPF486PTHDX8FVS5G":95},{"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":16,"sourceHtmlUrl":17,"categories":18,"keywords":27,"publishedAt":45,"linkOnly":46,"markdownContent":47,"markdownBody":48,"frontMatter":49,"refName":51,"commitSha":52,"skillDirectory":53,"forksCount":14,"repositoryHtmlUrl":54,"repositoryHomepageUrl":55,"ownerHtmlUrl":56,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":57,"install":58,"resources":71},"01M718VXWWPF486PTHDX8FVS5G","webapp-testing",null,"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.","moarcy\u002Fsolareng","moarcy","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F164021504?v=4","01M718SPWW17DDB97CDMYTRTZC","Moarcy Almeida Rios Cruz","01M718SPXWP7HBXPDKAPXX6XCA",0,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fwebapp-testing\u002FSKILL.md",[19,24],{"categoryNo":20,"categoryName":21,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":25,"categoryName":26,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000009","前端开发",[28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"testing","webapp testing","webapp","screenshots","ui","behavior","web","playwright","with","browser","logs","toolkit","debugging","frontend","local","applications","for","2026-11-10 10:12:30",false,"---\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","# 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",{"name":5,"license":50,"description":7},"Complete terms in LICENSE.txt","main","9b8557ff24ab0652e9082f4ccc5e6575e5cf9672",".agents\u002Fskills\u002Fwebapp-testing","https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng","https:\u002F\u002Fsolareng-gamma.vercel.app","https:\u002F\u002Fgithub.com\u002Fmoarcy","2026-04-17 10:23:37",{"source":8,"skillName":5,"commands":59,"prompt":69,"zipAvailable":70},[60,63,66],{"tool":61,"command":62},"npx","npx skills add moarcy\u002Fsolareng --skill webapp-testing",{"tool":64,"command":65},"bunx","bunx skills add moarcy\u002Fsolareng --skill webapp-testing",{"tool":67,"command":68},"pnpm","pnpm dlx skills add moarcy\u002Fsolareng --skill webapp-testing","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fwebapp-testing\u002FSKILL.md",true,[72,78,82,86,91],{"path":73,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":76,"sourceHtmlUrl":77},"examples\u002Fconsole_logging.py","SCRIPT","脚本",1027,"https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fwebapp-testing\u002Fexamples\u002Fconsole_logging.py",{"path":79,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":80,"sourceHtmlUrl":81},"examples\u002Felement_discovery.py",1463,"https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fwebapp-testing\u002Fexamples\u002Felement_discovery.py",{"path":83,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":84,"sourceHtmlUrl":85},"examples\u002Fstatic_html_automation.py",953,"https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fwebapp-testing\u002Fexamples\u002Fstatic_html_automation.py",{"path":87,"resourceType":88,"resourceTypeDesc":89,"sizeBytes":90,"sourceHtmlUrl":16},"LICENSE.txt","LICENSE","许可证",11357,{"path":92,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":93,"sourceHtmlUrl":94},"scripts\u002Fwith_server.py",3693,"https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fwebapp-testing\u002Fscripts\u002Fwith_server.py",[96,104,130,157,187,213],{"skillNo":97,"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":98,"sourceHtmlUrl":99,"categories":100,"keywords":103,"publishedAt":45},"01M718Y5WMFJNAFNX7H0QPE1X6","https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.junie\u002Fskills\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.junie\u002Fskills\u002Fwebapp-testing\u002FSKILL.md",[101,102],{"categoryNo":20,"categoryName":21,"taxonomyType":22,"taxonomyTypeDesc":23},{"categoryNo":25,"categoryName":26,"taxonomyType":22,"taxonomyTypeDesc":23},[30,28,29,44,43,42,41,40,39,38,37,36,35,34,33,32,31],{"skillNo":105,"name":106,"nameZh":6,"description":107,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":108,"sourceHtmlUrl":109,"categories":110,"keywords":112,"publishedAt":45},"01M718Y2AX5PJ3QZFEV5JG2D8K","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.junie\u002Fskills\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.junie\u002Fskills\u002Fweb-artifacts-builder\u002FSKILL.md",[111],{"categoryNo":25,"categoryName":26,"taxonomyType":22,"taxonomyTypeDesc":23},[113,114,115,34,116,117,118,44,119,120,41,121,122,123,124,125,126,127,128,129],"builder","artifacts builder","artifacts","web artifacts builder","single-file","css","Tailwind","ui components","single","use","file","components","react","multi","state","routing","state management",{"skillNo":131,"name":132,"nameZh":6,"description":133,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":134,"sourceHtmlUrl":135,"categories":136,"keywords":140,"publishedAt":45},"01M718XYVYQSSDJNA4JJPE7N4P","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\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.junie\u002Fskills\u002Ftheme-factory\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.junie\u002Fskills\u002Ftheme-factory\u002FSKILL.md",[137],{"categoryNo":138,"categoryName":139,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000015","视觉设计",[141,142,143,144,145,44,146,147,148,149,150,115,151,39,152,153,36,154,155,156],"theme","theme factory","factory","SET","slides","landing","pages","new","themes","you","apply","can","fonts","artifact","generate","fly",{"skillNo":158,"name":159,"nameZh":6,"description":160,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":161,"sourceHtmlUrl":162,"categories":163,"keywords":170,"publishedAt":45},"01M718XV35MDT1VJ7WCSJ8K896","slack-gif-creator","Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like \"make me a GIF of X doing Y for Slack.\"","https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.junie\u002Fskills\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.junie\u002Fskills\u002Fslack-gif-creator\u002FSKILL.md",[164,167],{"categoryNo":165,"categoryName":166,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000005","邮件与沟通",{"categoryNo":168,"categoryName":169,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000016","图像与多媒体",[171,172,173,174,175,44,176,122,177,178,179,180,181,182,183,184,185,186],"slack","slack gif creator","gif","creator","Animation","knowledge","when","users","me","request","validation","Utilities","concepts","Tools","constraints","make",{"skillNo":188,"name":189,"nameZh":6,"description":190,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":191,"sourceHtmlUrl":192,"categories":193,"keywords":197,"publishedAt":45},"01M718XP003BAMB4XVAZTCDRQS","skill-creator","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.","https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.junie\u002Fskills\u002Fskill-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.junie\u002Fskills\u002Fskill-creator\u002FSKILL.md",[194],{"categoryNo":195,"categoryName":196,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000023","Skill与智能体开发",[198,174,199,200,201,148,177,202,203,204,205,206,207,208,209,210,44,211,212,122],"skill creator","performance","improve","run evals","analysis","create","optimize","variance analysis","run","edit","benchmark","existing skill","evals","accuracy","scratch",{"skillNo":214,"name":215,"nameZh":6,"description":216,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":217,"sourceHtmlUrl":218,"categories":219,"keywords":221,"publishedAt":45},"01M718X8TRA6KDA5Z4FEKSFJ6A","mcp-builder","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).","https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.junie\u002Fskills\u002Fmcp-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fmoarcy\u002Fsolareng\u002Fblob\u002Fmain\u002F.junie\u002Fskills\u002Fmcp-builder\u002FSKILL.md",[220],{"categoryNo":195,"categoryName":196,"taxonomyType":22,"taxonomyTypeDesc":23},[113,222,223,224,225,177,226,227,228,229,230,184,231,232,233,44,234,235,122,36],"MCP","mcp builder","model","building mcp servers","model context protocol","llms","node","typescript","integrate","guide","context","fastmcp","mcp sdk","python"]