[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M77PVC71FF1450G1PSDST67J":3,"skill-same:01M77PVC71FF1450G1PSDST67J":46},{"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":6,"updatedAt":31,"install":32,"resources":45},"01M77PVC71FF1450G1PSDST67J","chrome-devtools",null,"Expert-level browser automation, debugging, and performance analysis using Chrome DevTools MCP. Use for interacting with web pages, capturing screenshots, analyzing network traffic, and profiling performance.","Reihantt6\u002Fsns-myagent","Reihantt6","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F219822095?v=4","01M77KK94PV8B7C2D9XWXNS8DJ","Mohamad Reihan tegar prasetya","01M77KK958QFMTHYXGXFV7KZ79",2,"MIT","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fchrome-devtools\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\ndescription: \"Expert-level browser automation, debugging, and performance analysis using Chrome DevTools MCP. Use for interacting with web pages, capturing screenshots, analyzing network traffic, and profiling performance.\"\nlicense: \"MIT\"\n---\n# Chrome DevTools Agent\n\n## Overview\n\nA specialized skill for controlling and inspecting a live Chrome browser. This skill leverages the `chrome-devtools` MCP server to perform a wide range of browser-related tasks, from simple navigation to complex performance profiling.\n\n## When to Use\n\nUse this skill when:\n\n- **Browser Automation**: Navigating pages, clicking elements, filling forms, and handling dialogs.\n- **Visual Inspection**: Taking screenshots or text snapshots of web pages.\n- **Debugging**: Inspecting console messages, evaluating JavaScript in the page context, and analyzing network requests.\n- **Performance Analysis**: Recording and analyzing performance traces to identify bottlenecks and Core Web Vital issues.\n- **Emulation**: Resizing the viewport or emulating network\u002FCPU conditions.\n\n## Tool Categories\n\n### 1. Navigation & Page Management\n\n- `new_page`: Open a new tab\u002Fpage.\n- `navigate_page`: Go to a specific URL, reload, or navigate history.\n- `select_page`: Switch context between open pages.\n- `list_pages`: See all open pages and their IDs.\n- `close_page`: Close a specific page.\n- `wait_for`: Wait for specific text to appear on the page.\n\n### 2. Input & Interaction\n\n- `click`: Click on an element (use `uid` from snapshot).\n- `fill` \u002F `fill_form`: Type text into inputs or fill multiple fields at once.\n- `hover`: Move the mouse over an element.\n- `press_key`: Send keyboard shortcuts or special keys (e.g., \"Enter\", \"Control+C\").\n- `drag`: Drag and drop elements.\n- `handle_dialog`: Accept or dismiss browser alerts\u002Fprompts.\n- `upload_file`: Upload a file through a file input.\n\n### 3. Debugging & Inspection\n\n- `take_snapshot`: Get a text-based accessibility tree (best for identifying elements).\n- `take_screenshot`: Capture a visual representation of the page or a specific element.\n- `list_console_messages` \u002F `get_console_message`: Inspect the page's console output.\n- `evaluate_script`: Run custom JavaScript in the page context.\n- `list_network_requests` \u002F `get_network_request`: Analyze network traffic and request details.\n\n### 4. Emulation & Performance\n\n- `resize_page`: Change the viewport dimensions.\n- `emulate`: Throttling CPU\u002FNetwork or emulating geolocation.\n- `performance_start_trace`: Start recording a performance profile.\n- `performance_stop_trace`: Stop recording and save the trace.\n- `performance_analyze_insight`: Get detailed analysis from recorded performance data.\n\n## Workflow Patterns\n\n### Pattern A: Identifying Elements (Snapshot-First)\n\nAlways prefer `take_snapshot` over `take_screenshot` for finding elements. The snapshot provides `uid` values which are required by interaction tools.\n\n```markdown\n1. `take_snapshot` to get the current page structure.\n2. Find the `uid` of the target element.\n3. Use `click(uid=...)` or `fill(uid=..., value=...)`.\n```\n\n### Pattern B: Troubleshooting Errors\n\nWhen a page is failing, check both console logs and network requests.\n\n```markdown\n1. `list_console_messages` to check for JavaScript errors.\n2. `list_network_requests` to identify failed (4xx\u002F5xx) resources.\n3. `evaluate_script` to check the value of specific DOM elements or global variables.\n```\n\n### Pattern C: Performance Profiling\n\nIdentify why a page is slow.\n\n```markdown\n1. `performance_start_trace(reload=true, autoStop=true)`\n2. Wait for the page to load\u002Ftrace to finish.\n3. `performance_analyze_insight` to find LCP issues or layout shifts.\n```\n\n## Best Practices\n\n- **Context Awareness**: Always run `list_pages` and `select_page` if you are unsure which tab is currently active.\n- **Snapshots**: Take a new snapshot after any major navigation or DOM change, as `uid` values may change.\n- **Timeouts**: Use reasonable timeouts for `wait_for` to avoid hanging on slow-loading elements.\n- **Screenshots**: Use `take_screenshot` sparingly for visual verification, but rely on `take_snapshot` for logic.\n","# Chrome DevTools Agent\n\n## Overview\n\nA specialized skill for controlling and inspecting a live Chrome browser. This skill leverages the `chrome-devtools` MCP server to perform a wide range of browser-related tasks, from simple navigation to complex performance profiling.\n\n## When to Use\n\nUse this skill when:\n\n- **Browser Automation**: Navigating pages, clicking elements, filling forms, and handling dialogs.\n- **Visual Inspection**: Taking screenshots or text snapshots of web pages.\n- **Debugging**: Inspecting console messages, evaluating JavaScript in the page context, and analyzing network requests.\n- **Performance Analysis**: Recording and analyzing performance traces to identify bottlenecks and Core Web Vital issues.\n- **Emulation**: Resizing the viewport or emulating network\u002FCPU conditions.\n\n## Tool Categories\n\n### 1. Navigation & Page Management\n\n- `new_page`: Open a new tab\u002Fpage.\n- `navigate_page`: Go to a specific URL, reload, or navigate history.\n- `select_page`: Switch context between open pages.\n- `list_pages`: See all open pages and their IDs.\n- `close_page`: Close a specific page.\n- `wait_for`: Wait for specific text to appear on the page.\n\n### 2. Input & Interaction\n\n- `click`: Click on an element (use `uid` from snapshot).\n- `fill` \u002F `fill_form`: Type text into inputs or fill multiple fields at once.\n- `hover`: Move the mouse over an element.\n- `press_key`: Send keyboard shortcuts or special keys (e.g., \"Enter\", \"Control+C\").\n- `drag`: Drag and drop elements.\n- `handle_dialog`: Accept or dismiss browser alerts\u002Fprompts.\n- `upload_file`: Upload a file through a file input.\n\n### 3. Debugging & Inspection\n\n- `take_snapshot`: Get a text-based accessibility tree (best for identifying elements).\n- `take_screenshot`: Capture a visual representation of the page or a specific element.\n- `list_console_messages` \u002F `get_console_message`: Inspect the page's console output.\n- `evaluate_script`: Run custom JavaScript in the page context.\n- `list_network_requests` \u002F `get_network_request`: Analyze network traffic and request details.\n\n### 4. Emulation & Performance\n\n- `resize_page`: Change the viewport dimensions.\n- `emulate`: Throttling CPU\u002FNetwork or emulating geolocation.\n- `performance_start_trace`: Start recording a performance profile.\n- `performance_stop_trace`: Stop recording and save the trace.\n- `performance_analyze_insight`: Get detailed analysis from recorded performance data.\n\n## Workflow Patterns\n\n### Pattern A: Identifying Elements (Snapshot-First)\n\nAlways prefer `take_snapshot` over `take_screenshot` for finding elements. The snapshot provides `uid` values which are required by interaction tools.\n\n```markdown\n1. `take_snapshot` to get the current page structure.\n2. Find the `uid` of the target element.\n3. Use `click(uid=...)` or `fill(uid=..., value=...)`.\n```\n\n### Pattern B: Troubleshooting Errors\n\nWhen a page is failing, check both console logs and network requests.\n\n```markdown\n1. `list_console_messages` to check for JavaScript errors.\n2. `list_network_requests` to identify failed (4xx\u002F5xx) resources.\n3. `evaluate_script` to check the value of specific DOM elements or global variables.\n```\n\n### Pattern C: Performance Profiling\n\nIdentify why a page is slow.\n\n```markdown\n1. `performance_start_trace(reload=true, autoStop=true)`\n2. Wait for the page to load\u002Ftrace to finish.\n3. `performance_analyze_insight` to find LCP issues or layout shifts.\n```\n\n## Best Practices\n\n- **Context Awareness**: Always run `list_pages` and `select_page` if you are unsure which tab is currently active.\n- **Snapshots**: Take a new snapshot after any major navigation or DOM change, as `uid` values may change.\n- **Timeouts**: Use reasonable timeouts for `wait_for` to avoid hanging on slow-loading elements.\n- **Screenshots**: Use `take_screenshot` sparingly for visual verification, but rely on `take_snapshot` for logic.\n",{"license":15,"description":7},"main","58843b159d7a4050d6b785a98b908cce505c0b92","agent\u002Fskills\u002Fchrome-devtools",0,"https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent","https:\u002F\u002Fgithub.com\u002FReihantt6","reihsns.web.id","2026-08-19 20:08:18",{"source":8,"skillName":5,"commands":33,"prompt":43,"zipAvailable":44},[34,37,40],{"tool":35,"command":36},"npx","npx skills add Reihantt6\u002Fsns-myagent --skill chrome-devtools",{"tool":38,"command":39},"bunx","bunx skills add Reihantt6\u002Fsns-myagent --skill chrome-devtools",{"tool":41,"command":42},"pnpm","pnpm dlx skills add Reihantt6\u002Fsns-myagent --skill chrome-devtools","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fchrome-devtools\u002FSKILL.md",true,[],[47,54,61,68,75,82],{"skillNo":48,"name":49,"nameZh":6,"description":50,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":51,"categories":52,"keywords":53,"publishedAt":19},"01M77XDCYZ407XYMF2T4P6F7VT","youtube-transcript","Extract transcripts from YouTube videos. Use when the user asks for a transcript, subtitles, or captions of a YouTube video and provides a YouTube URL (youtube.com\u002Fwatch?v=, youtu.be\u002F, or similar). Supports output with or without timestamps.","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fyoutube-transcript\u002FSKILL.md",[],[],{"skillNo":55,"name":56,"nameZh":6,"description":57,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":58,"categories":59,"keywords":60,"publishedAt":19},"01M77XD7PBC98J6MXGJJ2TJ8DX","youtube-thumbnail-design","YouTube thumbnail design with specific dimensions, contrast rules, and mobile preview optimization. Covers safe zones, text placement, face expression psychology, and A\u002FB testing. Use for: YouTube thumbnails, video cover images, click-through optimization. Triggers: youtube thumbnail, thumbnail design, video thumbnail, click through rate, ctr optimization, youtube cover, video cover image, thumbnail maker, thumbnail tips, youtube design, video preview image","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fyoutube-thumbnail-design\u002FSKILL.md",[],[],{"skillNo":62,"name":63,"nameZh":6,"description":64,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":65,"categories":66,"keywords":67,"publishedAt":19},"01M77XD2541C8HXJ6RHYZP4NGJ","youtube-short-maker","Make YouTube Shorts that hold attention with Pexo — vertical 9:16, fast-paced, hook in the first 3 seconds. Describe your topic and Pexo writes the script, generates the shots, picks the models, and assembles a finished Short with music and captions. Use for YouTube Shorts: \"youtube short\", \"make a youtube short\", \"shorts video\", \"short-form video\". NOT for long-form or landscape video.","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fyoutube-short-maker\u002FSKILL.md",[],[],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":74,"publishedAt":19},"01M77XCXKVSYK7KTZ3PQBVVGFD","xcode-project-setup","Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fxcode-project-setup\u002FSKILL.md",[],[],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":19},"01M77XCR1DV8ZQK2NHWKVY4EWX","x402","Set up Browser Use Cloud payments with x402 — pay per request from a crypto wallet (USDC on Base mainnet), no signup or API key. Two setups it works out up front — \"just use it\" (set up a wallet so you or Claude Code can run cloud browser tasks paid from the wallet — Claude writes and runs throwaway scripts, nothing touches your codebase) or \"build it in\" (install the SDK and write the key + code into your project). Walks through wallet setup, funding, .env, and a ~$1 test run. Use when the user asks about x402, pay-per-use, USDC payments, or wants Browser Use Cloud without an API key. For the free-tier signup (reverse-CAPTCHA → API key), use `browser-use cloud signup` or the `cloud` skill instead.","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fx402\u002FSKILL.md",[],[],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":19},"01M77XCMD3R3ZBZQQSW6E0793B","x-twitter-scraper","Build GitHub Copilot workflows with Xquik X API SDKs, REST endpoints, hosted Apify Actor runs, MCP tools, TweetClaw OpenClaw plugin installs, signed webhooks, tweet search, user lookup, follower exports, media actions, and agent automation.","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fx-twitter-scraper\u002FSKILL.md",[],[]]