[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6AEB9QX7A3F98GARJGAY9R3":3,"skill-same:01M6AEB9QX7A3F98GARJGAY9R3":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":6,"sourceHtmlUrl":16,"categories":17,"keywords":34,"publishedAt":56,"linkOnly":57,"markdownContent":58,"markdownBody":59,"frontMatter":60,"refName":61,"commitSha":62,"skillDirectory":63,"forksCount":64,"repositoryHtmlUrl":65,"repositoryHomepageUrl":66,"ownerHtmlUrl":67,"ownerBlogUrl":68,"ownerDescription":69,"updatedAt":70,"install":71,"resources":84},"01M6AEB9QX7A3F98GARJGAY9R3","web-design-reviewer",null,"This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like \"review website design\", \"check the UI\", \"fix the layout\", \"find design problems\". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.","github\u002Fawesome-copilot","github","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F9919?v=4","01M6AC83DS133TPXFSP1DHNCC6","GitHub","01M6AD3PBDYPK7NVFJNJ66Y8RS",41162,"MIT","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fweb-design-reviewer\u002FSKILL.md",[18,23,26,29],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55],"design","web","web design reviewer","web design","reviewer","inspection","running","source code","source","at","consistency","layout","responsive","responsive design","fix","ui","website","issues","code","accessibility","review","2026-11-10 10:12:30",false,"---\nname: web-design-reviewer\ndescription: 'This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like \"review website design\", \"check the UI\", \"fix the layout\", \"find design problems\". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.'\n---\n\n# Web Design Reviewer\n\nThis skill enables visual inspection and validation of website design quality, identifying and fixing issues at the source code level.\n\n## Scope of Application\n\n- Static sites (HTML\u002FCSS\u002FJS)\n- SPA frameworks such as React \u002F Vue \u002F Angular \u002F Svelte\n- Full-stack frameworks such as Next.js \u002F Nuxt \u002F SvelteKit\n- CMS platforms such as WordPress \u002F Drupal\n- Any other web application\n\n## Prerequisites\n\n### Required\n\n1. **Target website must be running**\n   - Local development server (e.g., `http:\u002F\u002Flocalhost:3000`)\n   - Staging environment\n   - Production environment (for read-only reviews)\n\n2. **Browser automation must be available**\n   - Screenshot capture\n   - Page navigation\n   - DOM information retrieval\n\n3. **Access to source code (when making fixes)**\n   - Project must exist within the workspace\n\n## Workflow Overview\n\n```mermaid\nflowchart TD\n    A[Step 1: Information Gathering] --> B[Step 2: Visual Inspection]\n    B --> C[Step 3: Issue Fixing]\n    C --> D[Step 4: Re-verification]\n    D --> E{Issues Remaining?}\n    E -->|Yes| B\n    E -->|No| F[Completion Report]\n```\n\n---\n\n## Step 1: Information Gathering Phase\n\n### 1.1 URL Confirmation\n\nIf the URL is not provided, ask the user:\n\n> Please provide the URL of the website to review (e.g., `http:\u002F\u002Flocalhost:3000`)\n\n### 1.2 Understanding Project Structure\n\nWhen making fixes, gather the following information:\n\n| Item | Example Question |\n|------|------------------|\n| Framework | Are you using React \u002F Vue \u002F Next.js, etc.? |\n| Styling Method | CSS \u002F SCSS \u002F Tailwind \u002F CSS-in-JS, etc. |\n| Source Location | Where are style files and components located? |\n| Review Scope | Specific pages only or entire site? |\n\n### 1.3 Automatic Project Detection\n\nAttempt automatic detection from files in the workspace:\n\n```\nDetection targets:\n├── package.json     → Framework and dependencies\n├── tsconfig.json    → TypeScript usage\n├── tailwind.config  → Tailwind CSS\n├── next.config      → Next.js\n├── vite.config      → Vite\n├── nuxt.config      → Nuxt\n└── src\u002F or app\u002F     → Source directory\n```\n\n### 1.4 Identifying Styling Method\n\n| Method | Detection | Edit Target |\n|--------|-----------|-------------|\n| Pure CSS | `*.css` files | Global CSS or component CSS |\n| SCSS\u002FSass | `*.scss`, `*.sass` | SCSS files |\n| CSS Modules | `*.module.css` | Module CSS files |\n| Tailwind CSS | `tailwind.config.*` | className in components |\n| styled-components | `styled.` in code | JS\u002FTS files |\n| Emotion | `@emotion\u002F` imports | JS\u002FTS files |\n| CSS-in-JS (other) | Inline styles | JS\u002FTS files |\n\n---\n\n## Step 2: Visual Inspection Phase\n\n### 2.1 Page Traversal\n\n1. Navigate to the specified URL\n2. Capture screenshots\n3. Retrieve DOM structure\u002Fsnapshot (if possible)\n4. If additional pages exist, traverse through navigation\n\n### 2.2 Inspection Items\n\nWork through [references\u002Fvisual-checklist.md](references\u002Fvisual-checklist.md) during inspection and again during post-fix verification.\n\n#### Layout Issues\n\n| Issue | Description | Severity |\n|-------|-------------|----------|\n| Element Overflow | Content overflows from parent element or viewport | High |\n| Element Overlap | Unintended overlapping of elements | High |\n| Alignment Issues | Grid or flex alignment problems | Medium |\n| Inconsistent Spacing | Padding\u002Fmargin inconsistencies | Medium |\n| Text Clipping | Long text not handled properly | Medium |\n\n#### Responsive Issues\n\n| Issue | Description | Severity |\n|-------|-------------|----------|\n| Non-mobile Friendly | Layout breaks on small screens | High |\n| Breakpoint Issues | Unnatural transitions when screen size changes | Medium |\n| Touch Targets | Buttons too small on mobile | Medium |\n\n#### Accessibility Issues\n\n| Issue | Description | Severity |\n|-------|-------------|----------|\n| Insufficient Contrast | Low contrast ratio between text and background | High |\n| No Focus State | Cannot determine state during keyboard navigation | High |\n| Missing alt Text | No alternative text for images | Medium |\n\n#### Visual Consistency\n\n| Issue | Description | Severity |\n|-------|-------------|----------|\n| Font Inconsistency | Mixed font families | Medium |\n| Color Inconsistency | Non-unified brand colors | Medium |\n| Spacing Inconsistency | Non-uniform spacing between similar elements | Low |\n\n### 2.3 Viewport Testing (Responsive)\n\nTest at the following viewports:\n\n| Name | Width | Representative Device |\n|------|-------|----------------------|\n| Mobile | 375px | iPhone SE\u002F12 mini |\n| Tablet | 768px | iPad |\n| Desktop | 1280px | Standard PC |\n| Wide | 1920px | Large display |\n\n---\n\n## Step 3: Issue Fixing Phase\n\n### 3.1 Issue Prioritization\n\n```mermaid\nblock-beta\n    columns 1\n    block:priority[\"Priority Matrix\"]\n        P1[\"P1: Fix Immediately\\n(Layout issues affecting functionality)\"]\n        P2[\"P2: Fix Next\\n(Visual issues degrading UX)\"]\n        P3[\"P3: Fix If Possible\\n(Minor visual inconsistencies)\"]\n    end\n```\n\n### 3.2 Identifying Source Files\n\nIdentify source files from problematic elements:\n\n1. **Selector-based Search**\n   - Search codebase by class name or ID\n   - Explore style definitions with `grep_search`\n\n2. **Component-based Search**\n   - Identify components from element text or structure\n   - Explore related files with `semantic_search`\n\n3. **File Pattern Filtering**\n   ```\n   Style files: src\u002F**\u002F*.css, styles\u002F**\u002F*\n   Components: src\u002Fcomponents\u002F**\u002F*\n   Pages: src\u002Fpages\u002F**, app\u002F**\n   ```\n\n### 3.3 Applying Fixes\n\n#### Framework-specific Fix Guidelines\n\nSee [references\u002Fframework-fixes.md](references\u002Fframework-fixes.md) for details.\n\n#### Fix Principles\n\n1. **Minimal Changes**: Only make the minimum changes necessary to resolve the issue\n2. **Respect Existing Patterns**: Follow existing code style in the project\n3. **Avoid Breaking Changes**: Be careful not to affect other areas\n4. **Add Comments**: Add comments to explain the reason for fixes where appropriate\n\n---\n\n## Step 4: Re-verification Phase\n\n### 4.1 Post-fix Confirmation\n\n1. Reload browser (or wait for development server HMR)\n2. Capture screenshots of fixed areas\n3. Compare before and after\n\n### 4.2 Regression Testing\n\n- Verify that fixes haven't affected other areas\n- Confirm responsive display is not broken\n\n### 4.3 Iteration Decision\n\n```mermaid\nflowchart TD\n    A{Issues Remaining?}\n    A -->|Yes| B[Return to Step 2]\n    A -->|No| C[Proceed to Completion Report]\n```\n\n**Iteration Limit**: If more than 3 fix attempts are needed for a specific issue, consult the user\n\n---\n\n## Output Format\n\n### Review Results Report\n\n```markdown\n# Web Design Review Results\n\n## Summary\n\n| Item | Value |\n|------|-------|\n| Target URL | {URL} |\n| Framework | {Detected framework} |\n| Styling | {CSS \u002F Tailwind \u002F etc.} |\n| Tested Viewports | Desktop, Mobile |\n| Issues Detected | {N} |\n| Issues Fixed | {M} |\n\n## Detected Issues\n\n### [P1] {Issue Title}\n\n- **Page**: {Page path}\n- **Element**: {Selector or description}\n- **Issue**: {Detailed description of the issue}\n- **Fixed File**: `{File path}`\n- **Fix Details**: {Description of changes}\n- **Screenshot**: Before\u002FAfter\n\n### [P2] {Issue Title}\n...\n\n## Unfixed Issues (if any)\n\n### {Issue Title}\n- **Reason**: {Why it was not fixed\u002Fcould not be fixed}\n- **Recommended Action**: {Recommendations for user}\n\n## Recommendations\n\n- {Suggestions for future improvements}\n```\n\n---\n\n## Required Capabilities\n\n| Capability | Description | Required |\n|------------|-------------|----------|\n| Web Page Navigation | Access URLs, page transitions | ✅ |\n| Screenshot Capture | Page image capture | ✅ |\n| Image Analysis | Visual issue detection | ✅ |\n| DOM Retrieval | Page structure retrieval | Recommended |\n| File Read\u002FWrite | Source code reading and editing | Required for fixes |\n| Code Search | Code search within project | Required for fixes |\n\n---\n\n## Reference Implementation\n\n### Implementation with Playwright MCP\n\n[Playwright MCP](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fplaywright-mcp) is recommended as the reference implementation for this skill.\n\n| Capability | Playwright MCP Tool | Purpose |\n|------------|---------------------|---------|\n| Navigation | `browser_navigate` | Access URLs |\n| Snapshot | `browser_snapshot` | Retrieve DOM structure |\n| Screenshot | `browser_take_screenshot` | Images for visual inspection |\n| Click | `browser_click` | Interact with interactive elements |\n| Resize | `browser_resize` | Responsive testing |\n| Console | `browser_console_messages` | Detect JS errors |\n\n#### Configuration Example (MCP Server)\n\n```json\n{\n  \"mcpServers\": {\n    \"playwright\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@playwright\u002Fmcp@latest\", \"--caps=vision\"]\n    }\n  }\n}\n```\n\n### Other Compatible Browser Automation Tools\n\n| Tool | Features |\n|------|----------|\n| Selenium | Broad browser support, multi-language support |\n| Puppeteer | Chrome\u002FChromium focused, Node.js |\n| Cypress | Easy integration with E2E testing |\n| WebDriver BiDi | Standardized next-generation protocol |\n\nThe same workflow can be implemented with these tools. As long as they provide the necessary capabilities (navigation, screenshot, DOM retrieval), the choice of tool is flexible.\n\n---\n\n## Best Practices\n\n### DO (Recommended)\n\n- ✅ Always save screenshots before making fixes\n- ✅ Fix one issue at a time and verify each\n- ✅ Follow the project's existing code style\n- ✅ Confirm with user before major changes\n- ✅ Document fix details thoroughly\n\n### DON'T (Not Recommended)\n\n- ❌ Large-scale refactoring without confirmation\n- ❌ Ignoring design systems or brand guidelines\n- ❌ Fixes that ignore performance\n- ❌ Fixing multiple issues at once (difficult to verify)\n\n---\n\n## Troubleshooting\n\n### Problem: Style files not found\n\n1. Check dependencies in `package.json`\n2. Consider the possibility of CSS-in-JS\n3. Consider CSS generated at build time\n4. Ask user about styling method\n\n### Problem: Fixes not reflected\n\n1. Check if development server HMR is working\n2. Clear browser cache\n3. Rebuild if project requires build\n4. Check CSS specificity issues\n\n### Problem: Fixes affecting other areas\n\n1. Rollback changes\n2. Use more specific selectors\n3. Consider using CSS Modules or scoped styles\n4. Consult user to confirm impact scope\n","# Web Design Reviewer\n\nThis skill enables visual inspection and validation of website design quality, identifying and fixing issues at the source code level.\n\n## Scope of Application\n\n- Static sites (HTML\u002FCSS\u002FJS)\n- SPA frameworks such as React \u002F Vue \u002F Angular \u002F Svelte\n- Full-stack frameworks such as Next.js \u002F Nuxt \u002F SvelteKit\n- CMS platforms such as WordPress \u002F Drupal\n- Any other web application\n\n## Prerequisites\n\n### Required\n\n1. **Target website must be running**\n   - Local development server (e.g., `http:\u002F\u002Flocalhost:3000`)\n   - Staging environment\n   - Production environment (for read-only reviews)\n\n2. **Browser automation must be available**\n   - Screenshot capture\n   - Page navigation\n   - DOM information retrieval\n\n3. **Access to source code (when making fixes)**\n   - Project must exist within the workspace\n\n## Workflow Overview\n\n```mermaid\nflowchart TD\n    A[Step 1: Information Gathering] --> B[Step 2: Visual Inspection]\n    B --> C[Step 3: Issue Fixing]\n    C --> D[Step 4: Re-verification]\n    D --> E{Issues Remaining?}\n    E -->|Yes| B\n    E -->|No| F[Completion Report]\n```\n\n---\n\n## Step 1: Information Gathering Phase\n\n### 1.1 URL Confirmation\n\nIf the URL is not provided, ask the user:\n\n> Please provide the URL of the website to review (e.g., `http:\u002F\u002Flocalhost:3000`)\n\n### 1.2 Understanding Project Structure\n\nWhen making fixes, gather the following information:\n\n| Item | Example Question |\n|------|------------------|\n| Framework | Are you using React \u002F Vue \u002F Next.js, etc.? |\n| Styling Method | CSS \u002F SCSS \u002F Tailwind \u002F CSS-in-JS, etc. |\n| Source Location | Where are style files and components located? |\n| Review Scope | Specific pages only or entire site? |\n\n### 1.3 Automatic Project Detection\n\nAttempt automatic detection from files in the workspace:\n\n```\nDetection targets:\n├── package.json     → Framework and dependencies\n├── tsconfig.json    → TypeScript usage\n├── tailwind.config  → Tailwind CSS\n├── next.config      → Next.js\n├── vite.config      → Vite\n├── nuxt.config      → Nuxt\n└── src\u002F or app\u002F     → Source directory\n```\n\n### 1.4 Identifying Styling Method\n\n| Method | Detection | Edit Target |\n|--------|-----------|-------------|\n| Pure CSS | `*.css` files | Global CSS or component CSS |\n| SCSS\u002FSass | `*.scss`, `*.sass` | SCSS files |\n| CSS Modules | `*.module.css` | Module CSS files |\n| Tailwind CSS | `tailwind.config.*` | className in components |\n| styled-components | `styled.` in code | JS\u002FTS files |\n| Emotion | `@emotion\u002F` imports | JS\u002FTS files |\n| CSS-in-JS (other) | Inline styles | JS\u002FTS files |\n\n---\n\n## Step 2: Visual Inspection Phase\n\n### 2.1 Page Traversal\n\n1. Navigate to the specified URL\n2. Capture screenshots\n3. Retrieve DOM structure\u002Fsnapshot (if possible)\n4. If additional pages exist, traverse through navigation\n\n### 2.2 Inspection Items\n\nWork through [references\u002Fvisual-checklist.md](references\u002Fvisual-checklist.md) during inspection and again during post-fix verification.\n\n#### Layout Issues\n\n| Issue | Description | Severity |\n|-------|-------------|----------|\n| Element Overflow | Content overflows from parent element or viewport | High |\n| Element Overlap | Unintended overlapping of elements | High |\n| Alignment Issues | Grid or flex alignment problems | Medium |\n| Inconsistent Spacing | Padding\u002Fmargin inconsistencies | Medium |\n| Text Clipping | Long text not handled properly | Medium |\n\n#### Responsive Issues\n\n| Issue | Description | Severity |\n|-------|-------------|----------|\n| Non-mobile Friendly | Layout breaks on small screens | High |\n| Breakpoint Issues | Unnatural transitions when screen size changes | Medium |\n| Touch Targets | Buttons too small on mobile | Medium |\n\n#### Accessibility Issues\n\n| Issue | Description | Severity |\n|-------|-------------|----------|\n| Insufficient Contrast | Low contrast ratio between text and background | High |\n| No Focus State | Cannot determine state during keyboard navigation | High |\n| Missing alt Text | No alternative text for images | Medium |\n\n#### Visual Consistency\n\n| Issue | Description | Severity |\n|-------|-------------|----------|\n| Font Inconsistency | Mixed font families | Medium |\n| Color Inconsistency | Non-unified brand colors | Medium |\n| Spacing Inconsistency | Non-uniform spacing between similar elements | Low |\n\n### 2.3 Viewport Testing (Responsive)\n\nTest at the following viewports:\n\n| Name | Width | Representative Device |\n|------|-------|----------------------|\n| Mobile | 375px | iPhone SE\u002F12 mini |\n| Tablet | 768px | iPad |\n| Desktop | 1280px | Standard PC |\n| Wide | 1920px | Large display |\n\n---\n\n## Step 3: Issue Fixing Phase\n\n### 3.1 Issue Prioritization\n\n```mermaid\nblock-beta\n    columns 1\n    block:priority[\"Priority Matrix\"]\n        P1[\"P1: Fix Immediately\\n(Layout issues affecting functionality)\"]\n        P2[\"P2: Fix Next\\n(Visual issues degrading UX)\"]\n        P3[\"P3: Fix If Possible\\n(Minor visual inconsistencies)\"]\n    end\n```\n\n### 3.2 Identifying Source Files\n\nIdentify source files from problematic elements:\n\n1. **Selector-based Search**\n   - Search codebase by class name or ID\n   - Explore style definitions with `grep_search`\n\n2. **Component-based Search**\n   - Identify components from element text or structure\n   - Explore related files with `semantic_search`\n\n3. **File Pattern Filtering**\n   ```\n   Style files: src\u002F**\u002F*.css, styles\u002F**\u002F*\n   Components: src\u002Fcomponents\u002F**\u002F*\n   Pages: src\u002Fpages\u002F**, app\u002F**\n   ```\n\n### 3.3 Applying Fixes\n\n#### Framework-specific Fix Guidelines\n\nSee [references\u002Fframework-fixes.md](references\u002Fframework-fixes.md) for details.\n\n#### Fix Principles\n\n1. **Minimal Changes**: Only make the minimum changes necessary to resolve the issue\n2. **Respect Existing Patterns**: Follow existing code style in the project\n3. **Avoid Breaking Changes**: Be careful not to affect other areas\n4. **Add Comments**: Add comments to explain the reason for fixes where appropriate\n\n---\n\n## Step 4: Re-verification Phase\n\n### 4.1 Post-fix Confirmation\n\n1. Reload browser (or wait for development server HMR)\n2. Capture screenshots of fixed areas\n3. Compare before and after\n\n### 4.2 Regression Testing\n\n- Verify that fixes haven't affected other areas\n- Confirm responsive display is not broken\n\n### 4.3 Iteration Decision\n\n```mermaid\nflowchart TD\n    A{Issues Remaining?}\n    A -->|Yes| B[Return to Step 2]\n    A -->|No| C[Proceed to Completion Report]\n```\n\n**Iteration Limit**: If more than 3 fix attempts are needed for a specific issue, consult the user\n\n---\n\n## Output Format\n\n### Review Results Report\n\n```markdown\n# Web Design Review Results\n\n## Summary\n\n| Item | Value |\n|------|-------|\n| Target URL | {URL} |\n| Framework | {Detected framework} |\n| Styling | {CSS \u002F Tailwind \u002F etc.} |\n| Tested Viewports | Desktop, Mobile |\n| Issues Detected | {N} |\n| Issues Fixed | {M} |\n\n## Detected Issues\n\n### [P1] {Issue Title}\n\n- **Page**: {Page path}\n- **Element**: {Selector or description}\n- **Issue**: {Detailed description of the issue}\n- **Fixed File**: `{File path}`\n- **Fix Details**: {Description of changes}\n- **Screenshot**: Before\u002FAfter\n\n### [P2] {Issue Title}\n...\n\n## Unfixed Issues (if any)\n\n### {Issue Title}\n- **Reason**: {Why it was not fixed\u002Fcould not be fixed}\n- **Recommended Action**: {Recommendations for user}\n\n## Recommendations\n\n- {Suggestions for future improvements}\n```\n\n---\n\n## Required Capabilities\n\n| Capability | Description | Required |\n|------------|-------------|----------|\n| Web Page Navigation | Access URLs, page transitions | ✅ |\n| Screenshot Capture | Page image capture | ✅ |\n| Image Analysis | Visual issue detection | ✅ |\n| DOM Retrieval | Page structure retrieval | Recommended |\n| File Read\u002FWrite | Source code reading and editing | Required for fixes |\n| Code Search | Code search within project | Required for fixes |\n\n---\n\n## Reference Implementation\n\n### Implementation with Playwright MCP\n\n[Playwright MCP](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fplaywright-mcp) is recommended as the reference implementation for this skill.\n\n| Capability | Playwright MCP Tool | Purpose |\n|------------|---------------------|---------|\n| Navigation | `browser_navigate` | Access URLs |\n| Snapshot | `browser_snapshot` | Retrieve DOM structure |\n| Screenshot | `browser_take_screenshot` | Images for visual inspection |\n| Click | `browser_click` | Interact with interactive elements |\n| Resize | `browser_resize` | Responsive testing |\n| Console | `browser_console_messages` | Detect JS errors |\n\n#### Configuration Example (MCP Server)\n\n```json\n{\n  \"mcpServers\": {\n    \"playwright\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@playwright\u002Fmcp@latest\", \"--caps=vision\"]\n    }\n  }\n}\n```\n\n### Other Compatible Browser Automation Tools\n\n| Tool | Features |\n|------|----------|\n| Selenium | Broad browser support, multi-language support |\n| Puppeteer | Chrome\u002FChromium focused, Node.js |\n| Cypress | Easy integration with E2E testing |\n| WebDriver BiDi | Standardized next-generation protocol |\n\nThe same workflow can be implemented with these tools. As long as they provide the necessary capabilities (navigation, screenshot, DOM retrieval), the choice of tool is flexible.\n\n---\n\n## Best Practices\n\n### DO (Recommended)\n\n- ✅ Always save screenshots before making fixes\n- ✅ Fix one issue at a time and verify each\n- ✅ Follow the project's existing code style\n- ✅ Confirm with user before major changes\n- ✅ Document fix details thoroughly\n\n### DON'T (Not Recommended)\n\n- ❌ Large-scale refactoring without confirmation\n- ❌ Ignoring design systems or brand guidelines\n- ❌ Fixes that ignore performance\n- ❌ Fixing multiple issues at once (difficult to verify)\n\n---\n\n## Troubleshooting\n\n### Problem: Style files not found\n\n1. Check dependencies in `package.json`\n2. Consider the possibility of CSS-in-JS\n3. Consider CSS generated at build time\n4. Ask user about styling method\n\n### Problem: Fixes not reflected\n\n1. Check if development server HMR is working\n2. Clear browser cache\n3. Rebuild if project requires build\n4. Check CSS specificity issues\n\n### Problem: Fixes affecting other areas\n\n1. Rollback changes\n2. Use more specific selectors\n3. Consider using CSS Modules or scoped styles\n4. Consult user to confirm impact scope\n",{"name":5,"description":7},"main","5269f7ea2d6c3a9bfda5ed878b6726cf509121fd","skills\u002Fweb-design-reviewer",5360,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot","https:\u002F\u002Fawesome-copilot.github.com\u002F","https:\u002F\u002Fgithub.com\u002Fgithub","https:\u002F\u002Fgithub.com\u002Fabout","How people build software.","2026-11-15 04:42:30",{"source":8,"skillName":5,"commands":72,"prompt":82,"zipAvailable":83},[73,76,79],{"tool":74,"command":75},"npx","npx skills add github\u002Fawesome-copilot --skill web-design-reviewer",{"tool":77,"command":78},"bunx","bunx skills add github\u002Fawesome-copilot --skill web-design-reviewer",{"tool":80,"command":81},"pnpm","pnpm dlx skills add github\u002Fawesome-copilot --skill web-design-reviewer","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fweb-design-reviewer\u002FSKILL.md",true,[85,91],{"path":86,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":89,"sourceHtmlUrl":90},"references\u002Fframework-fixes.md","REFERENCE","参考文档",7437,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fweb-design-reviewer\u002Freferences\u002Fframework-fixes.md",{"path":92,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":93,"sourceHtmlUrl":94},"references\u002Fvisual-checklist.md",5989,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fweb-design-reviewer\u002Freferences\u002Fvisual-checklist.md",[96,124,152,179,212,229],{"skillNo":97,"name":98,"nameZh":6,"description":99,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":100,"categories":101,"keywords":104,"publishedAt":56},"01M70KXZNX9ES38N2A8M58ZZMZ","supabase-rls-policies","Write, review, and test Supabase Row Level Security (RLS) policies so that one user cannot read or change another user's rows. Use when creating or changing tables, policies, views, or security definer functions in a Supabase project, when reviewing a migration that touches RLS, or when asked to prove user isolation with pgTAP tests that sign in as two users.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fsupabase-rls-policies\u002FSKILL.md",[102,103],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},[105,106,107,108,109,110,55,111,112,113,114,115,116,117,118,119,120,121,122,123],"supabase","rls","supabase rls","supabase rls policies","project","when","change","read","write","security","isolation","tables","as","tests","prove","use","users","functions","with",{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":128,"categories":129,"keywords":131,"publishedAt":56},"01M70KWA5YWXDV6V8DZ19E3T2Y","skill-distribution-audit","Audit a skill collection before release or investigate installer omissions, archived\u002Ftemplate leakage, duplicate identities, and manifest drift. Reconcile the intended public source set, distribution manifest, and actual discovery output for a specified consumer version. Includes a deterministic set-comparison helper.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fskill-distribution-audit\u002FSKILL.md",[130],{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},[132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151],"distribution","skill distribution audit","audit","SET","deterministic","installer","for","discovery","comparison","helper","manifest","version","collection","drift","output","investigate","duplicate","template","release","reconcile",{"skillNo":153,"name":154,"nameZh":6,"description":155,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":156,"sourceHtmlUrl":157,"categories":158,"keywords":162,"publishedAt":56},"01M70KCJPFVW7PPQ49CC5R8JGK","logicapps-custom-code-net10-migration","Migrate Azure Logic Apps Standard local-function custom-code projects from .NET 8 to .NET 10. Use for legacy Logic Apps custom-code workspace upgrades, project\u002Fpackage configuration, custom-worker settings, publication, and integrated VS Code debugging. Not for ordinary .NET applications, standalone Azure Functions, Consumption workflows, or cloud deployment.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Flogicapps-custom-code-net10-migration\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Flogicapps-custom-code-net10-migration\u002FSKILL.md",[159],{"categoryNo":160,"categoryName":161,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000030","开发工程师",[163,53,164,165,166,167,138,109,168,169,170,171,172,173,174,120,175,176,177,178],"custom","logicapps custom code net10 migration","migration","projects","standalone","deployment","applications","local","azure","worker","upgrades","package","apps","Legacy","debugging","workflows",{"skillNo":180,"name":181,"nameZh":6,"description":182,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":183,"sourceHtmlUrl":184,"categories":185,"keywords":190,"publishedAt":56},"01M6AEBN37RQMXJ3298PEY7PG1","winmd-api-search","Find and explore Windows desktop APIs. Use when building features that need platform capabilities — camera, file access, notifications, UI controls, AI\u002FML, sensors, networking, etc. Discovers the right API for a task and retrieves full type details (methods, properties, events, enumeration values).","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fwinmd-api-search\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fwinmd-api-search\u002FSKILL.md",[186,189],{"categoryNo":187,"categoryName":188,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":160,"categoryName":161,"taxonomyType":32,"taxonomyTypeDesc":33},[191,192,193,194,195,196,197,50,198,199,200,201,202,203,204,110,205,206,207,208,209,138,210,211],"winmd api search","search","api","windows","desktop","file access","enumeration","ml","file","networking","capabilities","notifications","explore","access","features","full","camera","events","platform","methods","controls",{"skillNo":213,"name":214,"nameZh":6,"description":215,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":216,"licenseFileUrl":217,"sourceHtmlUrl":218,"categories":219,"keywords":225,"publishedAt":56},"01M6AE571R3SC1ZGE202B3NB5S","resemble-detect","Deepfake detection and media safety — detect AI-generated audio, images, video, and text, trace synthesis sources, apply watermarks, verify speaker identity, and analyze media intelligence using Resemble AI","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fresemble-detect\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fresemble-detect\u002FSKILL.md",[220,221,224],{"categoryNo":187,"categoryName":188,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":222,"categoryName":223,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},[226,135,199,227,228],"resemble detect","https","identity",{"skillNo":230,"name":231,"nameZh":6,"description":232,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":216,"licenseFileUrl":233,"sourceHtmlUrl":234,"categories":235,"keywords":240,"publishedAt":56},"01M6AE30BSK2HCY4TQQ22Z8JRD","quality-playbook","Run a complete quality engineering audit on any codebase. Derives behavioral requirements from the code, generates spec-traced functional tests, runs a three-pass code review with regression tests, executes a multi-model spec audit (Council of Three), and produces a consolidated bug report with TDD-verified patches. Finds the 35% of real defects that structural code review alone cannot catch. Works with any language. Trigger on 'quality playbook', 'spec audit', 'Council of Three', 'fitness-to-purpose', or 'coverage theater'.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fquality-playbook\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fquality-playbook\u002FSKILL.md",[236,239],{"categoryNo":237,"categoryName":238,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},[241,242,243,244,53,55,9,134,245,246,227,247,248,249,250,251,252,253,254,255,256,257,118,258,259,260,261],"playbook","quality playbook","quality","code review","tdd","run","report","spec","bug report","council","engineering","functional","spec audit","bug","verified","multi-model","three","coverage","model","regression","structural"]