Delegate independent tasks to specialized agents working concurrently with isolated context.
295.4K 206.3K
View 
Browser DevTools - 浏览器级研发调试
browser-dev-tools
使用 Chrome DevTools MCP 进行前端页面调试、布局优化、性能诊断及交互验证。
SKILL.md
Full skill instructions
Browser DevTools - 浏览器级研发调试
此 Skill 允许 AI 直接与实际运行的浏览器窗口交互，通过 DevTools 协议实现精准的 UI 修补和性能优化。
何时使用此 Skill
- 样式微调：需要观察组件在不同屏幕尺寸下的布局表现。
- 深度调试：控制台报错、网络请求失败或复杂的各种竞态条件。
- 性能评估：测量 C# 或 Vue 变更后对浏览器渲染管道（LCP, CLS）的实际影响。
- UI 验收：自动执行点击流并截图以确认交互逻辑。
核心工具流
1. 现状感知 (Initial Assessment)
在开始任何修改前，先观察页面：
list_pages: 找到目标页面索引。capture_screenshot: 获取视觉反馈，确认当前样式。text_snapshot: 获取无障碍树和 UID，确定要操作的元素。
2. 交互验证 (Interaction)
click: 模拟点击。fill_form: 批量填充测试数据。evaluate_script: 执行 JS 检查当前组件状态（如__vue_app__数据）。
3. 样式与布局调优 (Design Inspection)
- 使用
resize_page切换移动端/桌面端。 - 使用
capture_screenshot配合evaluate_script修改运行时 CSS，实时验证效果。
4. 性能与错误诊断 (Diagnostics)
list_console_messages: 定位 runtime errors。performance_start_trace: 开始性能采样。performance_analyze_insight: 分析特定性能瓶颈（如 DocumentLatency 或 LCPBreakdown）。
最佳实践规范
- 调试优先：在修改持久化代码前，先尝试用
evaluate_script手动改动运行时 DOM/CSS 以验证猜想。 - 对比一致性：在优化样式后，必须取
capture_screenshot并查看其快照，确保符合 设计系统规范。 - 清理工作：如果打开了新页面或开始了追踪，操作结束后记得关闭或停止。
使用示例
- “请帮我检查
/articles/new页面在 iPhone 12 尺寸下的布局，如果提交按钮被遮挡请修复 CSS。” - “这个组件渲染太慢了，请运行性能追踪，找出占用主线程最长的任务。”
- “自动填充该注册表单，并告诉我在点击注册后，控制台是否输出了任何网络错误。”
More Other skills
Other
brand-guidelines
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.
179.7K 100.1K
View Other
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/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
179.7K 89.5K
View Other
internal-comms
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.).
179.7K 76.1K
View Fundamental design principles for writing maintainable, testable Python code.
40.2K 21.9K
View 
Other
responsive-design
Modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first strategies.
40.2K 20K
View Generate Playwright tests from scenarios using interactive browser exploration and validation.
39.7K 18.2K
View Automated website exploration and test case generation using Playwright.
39.7K 14.9K
View Modern React state management with Redux Toolkit, Zustand, Jotai, and React Query for every state category.
40.2K 14.7K
View Other
gdpr-data-handling
GDPR-compliant data handling with consent management, data subject rights, and privacy controls.
40.2K 14.3K
View Python error handling patterns including input validation, exception hierarchies, and partial failure handling. Use when implementing validation logic, designing exception strategies, handling batch processing failures, or building robust APIs.
40.2K 13.5K
View 
Other
refactor-plan
Detailed multi-file refactor planning with safety checks and rollback guidance.
39.7K 13K
View