[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6HSP8TPJGF4KVFFGG188QRM":3,"skill-same:01M6HSP8TPJGF4KVFFGG188QRM":70},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":25,"publishedAt":41,"linkOnly":42,"markdownContent":43,"markdownBody":44,"frontMatter":45,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":53,"repositoryHtmlUrl":54,"repositoryHomepageUrl":6,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":56,"install":57,"resources":69},"01M6HSP8TPJGF4KVFFGG188QRM","playwright",null,"Browser automation with Playwright MCP. Use for web scraping, testing, screenshots, and browser interactions.","welflau\u002Fai-dev-system","welflau","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F7010385?v=4","01M6HPTDGF18RFY07M229P8CTM","01M6HPTDMRMZCJPYBFEA9XVVYT",3,"MIT","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Foh-my-codebuddy\u002Fskills\u002Fplaywright\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[5,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40],"testing","MCP","screenshots","browser automation","automation","web","browser","web scraping","scraping","use","npx","with","playwright mcp","latest","for","2026-11-10 10:12:30",false,"---\ndescription: Browser automation with Playwright MCP. Use for web scraping, testing, screenshots, and browser interactions.\nmcp:\n  playwright:\n    command: npx\n    args: [\"@playwright\u002Fmcp@latest\"]\n---\n\n# Playwright Browser Automation\n\nThis skill provides browser automation capabilities via the Playwright MCP server.\n\n## When to Use\n\nUse this skill for:\n- Web scraping and data extraction\n- Automated browser testing\n- Taking screenshots of web pages\n- Form filling and user interaction simulation\n- Monitoring and validation of web applications\n- DOM element inspection and manipulation\n\n## Capabilities\n\nThrough the Playwright MCP, this skill provides:\n\n### Navigation & Page Control\n- Navigate to URLs\n- Take screenshots (full page or specific elements)\n- Execute JavaScript in page context\n- Get page content and HTML\n\n### Element Interaction\n- Click elements\n- Fill in forms and inputs\n- Select dropdown options\n- Hover over elements\n- Press keyboard keys\n\n### Inspection & Validation\n- Get element attributes and properties\n- Extract text content\n- Verify element existence\n- Check element visibility\n- Validate page state\n\n### Advanced Features\n- Handle multiple tabs\u002Fwindows\n- Wait for specific conditions\n- Capture network requests\n- Manage browser cookies\n- Handle file uploads\u002Fdownloads\n\n## Usage Examples\n\n### Basic Navigation and Screenshot\n```\nUse skill playwright to navigate to https:\u002F\u002Fexample.com and take a screenshot\n```\n\n### Form Automation\n```\nUse skill playwright to:\n1. Navigate to https:\u002F\u002Fexample.com\u002Flogin\n2. Fill in username field with \"test@example.com\"\n3. Fill in password field with \"password123\"\n4. Click the submit button\n5. Take a screenshot of the result\n```\n\n### Data Extraction\n```\nUse skill playwright to scrape product prices from https:\u002F\u002Fexample.com\u002Fproducts\n```\n\n### Testing\n```\nUse skill playwright to test the checkout flow on our staging site\n```\n\n## Notes\n\n- The Playwright MCP server will be automatically started when this skill is used\n- Browser runs in headless mode by default\n- Screenshots are saved to the current directory\n- Supports modern web standards (ES6+, Web Components, etc.)\n- Works with SPA frameworks (React, Vue, Angular)\n\n## Requirements\n\n- Node.js 14+ (for npx)\n- Internet connection (to install MCP server on first use)\n- Sufficient disk space for Chromium browser\n\n## Troubleshooting\n\nIf the skill fails to start:\n1. Verify Node.js is installed: `node --version`\n2. Check network connectivity\n3. Try manual installation: `npm install -g @playwright\u002Fmcp`\n4. Check system resources (RAM, disk space)\n\n\n","# Playwright Browser Automation\n\nThis skill provides browser automation capabilities via the Playwright MCP server.\n\n## When to Use\n\nUse this skill for:\n- Web scraping and data extraction\n- Automated browser testing\n- Taking screenshots of web pages\n- Form filling and user interaction simulation\n- Monitoring and validation of web applications\n- DOM element inspection and manipulation\n\n## Capabilities\n\nThrough the Playwright MCP, this skill provides:\n\n### Navigation & Page Control\n- Navigate to URLs\n- Take screenshots (full page or specific elements)\n- Execute JavaScript in page context\n- Get page content and HTML\n\n### Element Interaction\n- Click elements\n- Fill in forms and inputs\n- Select dropdown options\n- Hover over elements\n- Press keyboard keys\n\n### Inspection & Validation\n- Get element attributes and properties\n- Extract text content\n- Verify element existence\n- Check element visibility\n- Validate page state\n\n### Advanced Features\n- Handle multiple tabs\u002Fwindows\n- Wait for specific conditions\n- Capture network requests\n- Manage browser cookies\n- Handle file uploads\u002Fdownloads\n\n## Usage Examples\n\n### Basic Navigation and Screenshot\n```\nUse skill playwright to navigate to https:\u002F\u002Fexample.com and take a screenshot\n```\n\n### Form Automation\n```\nUse skill playwright to:\n1. Navigate to https:\u002F\u002Fexample.com\u002Flogin\n2. Fill in username field with \"test@example.com\"\n3. Fill in password field with \"password123\"\n4. Click the submit button\n5. Take a screenshot of the result\n```\n\n### Data Extraction\n```\nUse skill playwright to scrape product prices from https:\u002F\u002Fexample.com\u002Fproducts\n```\n\n### Testing\n```\nUse skill playwright to test the checkout flow on our staging site\n```\n\n## Notes\n\n- The Playwright MCP server will be automatically started when this skill is used\n- Browser runs in headless mode by default\n- Screenshots are saved to the current directory\n- Supports modern web standards (ES6+, Web Components, etc.)\n- Works with SPA frameworks (React, Vue, Angular)\n\n## Requirements\n\n- Node.js 14+ (for npx)\n- Internet connection (to install MCP server on first use)\n- Sufficient disk space for Chromium browser\n\n## Troubleshooting\n\nIf the skill fails to start:\n1. Verify Node.js is installed: `node --version`\n2. Check network connectivity\n3. Try manual installation: `npm install -g @playwright\u002Fmcp`\n4. Check system resources (RAM, disk space)\n\n\n",{"mcp":46,"description":7},{"playwright":47},{"args":48,"command":36},[49],"@playwright\u002Fmcp@latest","main","18d0e63d1313ca87098f614aa7c1e2dcf6de79c7","backend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Foh-my-codebuddy\u002Fskills\u002Fplaywright",1,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system","https:\u002F\u002Fgithub.com\u002Fwelflau","2026-11-12 14:55:20",{"source":8,"skillName":5,"commands":58,"prompt":67,"zipAvailable":68},[59,61,64],{"tool":36,"command":60},"npx skills add welflau\u002Fai-dev-system --skill playwright",{"tool":62,"command":63},"bunx","bunx skills add welflau\u002Fai-dev-system --skill playwright",{"tool":65,"command":66},"pnpm","pnpm dlx skills add welflau\u002Fai-dev-system --skill playwright","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Foh-my-codebuddy\u002Fskills\u002Fplaywright\u002FSKILL.md",true,[],[71,101,132,157,183,202],{"skillNo":72,"name":73,"nameZh":6,"description":74,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":75,"licenseFileUrl":76,"sourceHtmlUrl":77,"categories":78,"keywords":82,"publishedAt":41},"01M6HSTDP4M3JFXEBK91VFB4PA","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.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Fweb-artifacts-builder\u002FSKILL.md",[79],{"categoryNo":80,"categoryName":81,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",[83,31,84,85,86,87,88,89,90,91,92,93,94,95,35,96,97,98,99,40,100],"web artifacts builder","artifacts","artifacts builder","builder","frontend","css","components","react","routing","state management","state","file","Tailwind","single-file","simple","ui components","multi","single",{"skillNo":102,"name":103,"nameZh":6,"description":104,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":75,"licenseFileUrl":105,"sourceHtmlUrl":106,"categories":107,"keywords":117,"publishedAt":41},"01M6HSDXH0JSP8R3QTNY9XZ8HN","frontend-design","Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML\u002FCSS layouts, or when styling\u002Fbeautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Ffrontend-design\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Ffrontend-design\u002FSKILL.md",[108,109,112],{"categoryNo":80,"categoryName":81,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":110,"categoryName":111,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":113,"categoryName":114,"taxonomyType":115,"taxonomyTypeDesc":116},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[87,118,119,88,31,89,90,120,121,122,84,123,124,125,35,126,127,128,129,37,130,131],"design","frontend design","react components","create","code","examples","applications","landing","ui design","pages","aesthetics","web ui","generic","when",{"skillNo":133,"name":134,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":75,"licenseFileUrl":136,"sourceHtmlUrl":137,"categories":138,"keywords":140,"publishedAt":41},"01M6HSA77QYVP7A72HREGTDN2C","algorithmic-art","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.","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Falgorithmic-art\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Falgorithmic-art\u002FSKILL.md",[139],{"categoryNo":110,"categoryName":111,"taxonomyType":20,"taxonomyTypeDesc":21},[141,142,143,121,122,144,145,146,147,35,148,149,150,151,37,152,153,154,155,156,131],"algorithmic art","Art","algorithmic","flow","js","work","interactive","generative art","exploration","systems","users","Existing","request","generative","copyright","fields",{"skillNo":158,"name":159,"nameZh":6,"description":160,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":75,"licenseFileUrl":161,"sourceHtmlUrl":162,"categories":163,"keywords":165,"publishedAt":41},"01M6HS9HE0X390Y6RQKTY1YNGJ","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\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Ftheme-factory\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Ftheme-factory\u002FSKILL.md",[164],{"categoryNo":110,"categoryName":111,"taxonomyType":20,"taxonomyTypeDesc":21},[166,167,168,169,170,171,84,172,173,174,125,175,176,127,177,37,178,179,180,40,181,182],"theme factory","factory","theme","docs","toolkit","generate","SET","fly","slides","styling","artifact","themes","you","fonts","can","apply","new",{"skillNo":184,"name":185,"nameZh":6,"description":186,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":187,"categories":188,"keywords":190,"publishedAt":41},"01M6HS74GASM6FJ77F83EY679E","browsing","Use when you need direct browser control - teaches Chrome DevTools Protocol for controlling existing browser sessions, multi-tab management, form automation, and content extraction via use_browser MCP tool","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002FSKILL.md",[189],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[185,27,30,191,192,193,32,194,195,196,197,35,198,199,200,201,99,178,40,152],"chrome","sessions","protocol","devtools","chrome devtools","tool","direct","browser control","control","via","form",{"skillNo":203,"name":204,"nameZh":6,"description":205,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":75,"licenseFileUrl":206,"sourceHtmlUrl":207,"categories":208,"keywords":215,"publishedAt":41},"01M6HS6BZT2CKDNQ6YF20DXN4T","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\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fslack-gif-creator\u002FSKILL.md",[209,212],{"categoryNo":210,"categoryName":211,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000005","邮件与沟通",{"categoryNo":213,"categoryName":214,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",[216,217,218,219,220,221,222,223,224,35,225,151,226,227,228,40,153,131],"slack gif creator","slack","gif","creator","validation","Tools","constraints","Animation","knowledge","me","make","Utilities","concepts"]