{"id":"7b2390a2-5b8b-48da-9667-c5e31f081f4a","shortId":"bsR36x","kind":"skill","title":"Web Design Reviewer","tagline":"Awesome Copilot skill by Github","description":"# 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/CSS/JS)\n- SPA frameworks such as React / Vue / Angular / Svelte\n- Full-stack frameworks such as Next.js / Nuxt / SvelteKit\n- CMS platforms such as WordPress / 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://localhost: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://localhost: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 / Vue / Next.js, etc.? |\n| Styling Method | CSS / SCSS / Tailwind / 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/ or app/     → 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/Sass | `*.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/TS files |\n| Emotion | `@emotion/` imports | JS/TS files |\n| CSS-in-JS (other) | Inline styles | JS/TS 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/snapshot (if possible)\n4. If additional pages exist, traverse through navigation\n\n### 2.2 Inspection Items\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/margin 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/12 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/**/*.css, styles/**/*\n   Components: src/components/**/*\n   Pages: src/pages/**, app/**\n   ```\n\n### 3.3 Applying Fixes\n\n#### Framework-specific Fix Guidelines\n\nSee [references/framework-fixes.md](references/framework-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 / Tailwind / 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/After\n\n### [P2] {Issue Title}\n...\n\n## Unfixed Issues (if any)\n\n### {Issue Title}\n- **Reason**: {Why it was not fixed/could 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/Write | 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://github.com/microsoft/playwright-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/mcp@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/Chromium 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","tags":["web","design","reviewer","awesome","copilot","github"],"capabilities":["skill","source-github","category-awesome-copilot"],"categories":["awesome-copilot"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/github/awesome-copilot/web-design-reviewer","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"install_from":"skills.sh"}},"qualityScore":"0.300","qualityRationale":"deterministic score 0.30 from registry signals: · indexed on skills.sh · published under github/awesome-copilot","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T19:40:26.211Z","embedding":null,"createdAt":"2026-04-18T20:25:06.990Z","updatedAt":"2026-04-22T19:40:26.211Z","lastSeenAt":"2026-04-22T19:40:26.211Z","tsv":"'/microsoft/playwright-mcp)':929 '1':67,122,156,332,538,581,646,705,1126,1157,1185 '1.1':160 '1.2':184 '1.3':233 '1.4':268 '1280px':518 '1920px':522 '2':88,127,325,338,599,659,714,757,1131,1165,1188 '2.1':329 '2.2':355 '2.3':496 '3':101,133,341,526,617,670,720,770,1140,1169,1193 '3.1':530 '3.2':571 '3.3':631 '3000':78,183 '375px':510 '4':139,347,681,695,1147,1175,1201 '4.1':700 '4.2':725 '4.3':742 '768px':515 'access':102,433,880,947 'action':863 'add':682,684 'addit':349 'affect':550,678,733,1182 'align':380,385 'alt':459 'altern':462 'alway':1060 'analysi':890 'angular':44 'app':265,630 'appli':632 'applic':34,64 'appropri':693 'area':680,719,735,1184 'arg':991 'ask':169,1148 'attempt':237,772 'autom':90,1000 'automat':234,238 'avail':93 'avoid':671 'awesom':4 'b':125,130,149,753 'background':446 'base':584,602 'before/after':843 'best':1056 'beta':536 'bidi':1023 'block':535,539 'block-beta':534 'brand':483,1106 'break':411,672 'breakpoint':416 'broad':1005 'broken':741 'browser':89,707,945,950,956,964,971,976,999,1006,1167 'build':1145,1174 'button':427 'c':131,136,760 'cach':1168 'cannot':451 'cap':995 'capabl':873,874,939,1045 'captur':95,339,715,885,888 'care':675 'category-awesome-copilot' 'chang':423,648,653,673,841,1087,1187 'check':1127,1158,1176 'choic':1051 'chrome/chromium':1013 'class':589 'classnam':299 'clear':1166 'click':963,965 'clip':394 'cms':55 'code':30,105,307,665,903,910,912,1080 'codebas':587 'color':478,484 'column':537 'command':989 'comment':683,685 'compar':721 'compat':998 'complet':153,763 'compon':223,283,301,304,601,605,626 'component-bas':600 'configur':982 'confirm':162,704,736,1082,1101,1205 'consid':1132,1141,1194 'consist':468 'consol':975,977 'consult':779,1202 'content':365 'contrast':439,441 'copilot':5 'css':208,212,256,277,278,281,284,290,294,297,316,624,802,1137,1142,1177,1196 'css-in-j':211,315,1136 'cypress':1016 'd':137,143 'decis':744 'definit':595 'degrad':559 'depend':250,1128 'descript':361,404,436,470,826,829,839,875 'design':2,10,21,789,1103 'desktop':517,807 'detail':643,828,838,1090 'detect':236,239,245,273,799,810,815,893,979 'determin':452 'develop':74,711,1160 'devic':508 'difficult':1117 'directori':267 'display':524,738 'document':1088 'dom':98,343,894,953,1048 'drupal':60 'e':144,147,150 'e.g':76,181 'e2e':1020 'easi':1017 'edit':274,906 'element':363,369,373,378,494,580,607,823,969 'emot':310,311 'enabl':14 'end':570 'entir':231 'environ':80,82 'error':981 'etc':205,215,804 'exampl':196,983 'exist':111,351,661,664,1079 'explain':687 'explor':593,611 'f':152 'famili':476 'featur':1003 'file':221,241,279,289,295,309,314,323,574,577,613,618,622,834,835,900,1123 'filter':620 'fix':25,108,135,190,528,545,554,563,633,637,644,691,703,718,730,771,813,833,837,861,909,918,1065,1066,1089,1108,1112,1154,1181 'fixed/could':858 'flex':384 'flexibl':1055 'flowchart':118,746 'focus':449,1014 'follow':193,503,663,1075 'font':472,475 'format':783 'found':1125 'framework':39,49,198,248,635,798,800 'framework-specif':634 'friend':409 'full':47 'full-stack':46 'function':551 'futur':870 'gather':124,158,191 'generat':1027,1143 'github':8 'github.com':928 'github.com/microsoft/playwright-mcp)':927 'global':280 'grep':597 'grid':382 'guidelin':638,1107 'handl':398 'haven':731 'high':372,379,415,447,457 'hmr':713,1162 'html/css/js':37 'id':592 'identifi':23,269,572,575,604 'ignor':1102,1110 'imag':465,887,889,959 'immedi':546 'impact':1206 'implement':920,921,935,1034 'import':312 'improv':871 'inconsist':388,391,473,479,487,569 'inform':99,123,157,194 'inlin':320 'inspect':16,129,327,356,962 'insuffici':438 'integr':1018 'interact':966,968 'ipad':516 'iphon':511 'issu':26,134,145,359,360,381,402,403,417,434,435,469,527,531,549,558,658,749,778,809,812,816,818,827,832,845,848,851,892,1068,1114,1179 'item':195,357,793 'iter':743,765 'js':214,318,980,1139 'js/ts':308,313,322 'json':986 'keyboard':455 'languag':1010 'larg':523,1097 'large-scal':1096 'latest':994 'layout':358,410,548 'level':31 'limit':766 'local':73 'localhost':77,182 'locat':217,224 'long':395,1039 'low':440,495 'm':814 'major':1086 'make':107,189,650,1064 'markdown':787 'matrix':542 'mcp':924,926,941,984 'mcpserver':987 'medium':387,392,400,424,432,466,477,485 'mermaid':117,533,745 'messag':978 'method':207,271,272,1152 'mini':513 'minim':647 'minimum':652 'minor':567 'miss':458 'mix':474 'mobil':408,431,509,808 'modul':291,293,1197 'module.css':292 'multi':1009 'multi-languag':1008 'multipl':1113 'must':70,91,110 'n':547,556,566,811 'name':505,590 'navig':97,333,354,456,879,944,946,1046 'necessari':654,1044 'need':774 'next':555,1026 'next-gener':1025 'next.config':257 'next.js':52,204,258 'node.js':1015 'non':407,481,489 'non-mobil':406 'non-unifi':480 'non-uniform':488 'npx':990 'nuxt':53,262 'nuxt.config':261 'one':1067 'output':782 'overflow':364,366 'overlap':374,376 'overview':116 'p1':543,544,817 'p2':552,553,844 'p3':561,562 'package.json':247,1130 'padding/margin':390 'page':96,228,330,350,628,820,821,878,882,886,896 'parent':368 'path':822,836 'pattern':619,662 'pc':520 'perform':1111 'phase':159,328,529,699 'platform':56 'playwright':923,925,940,988 'playwright/mcp':993 'pleas':172 'possibl':346,565,1134 'post':702 'post-fix':701 'practic':1057 'prerequisit':65 'principl':645 'priorit':532 'prioriti':540,541 'problem':386,1121,1153,1180 'problemat':579 'proceed':761 'product':81 'project':109,186,235,669,915,1077,1172 'proper':399 'protocol':1028 'provid':168,173,1042 'puppet':1012 'pure':276 'purpos':943 'qualiti':22 'question':197 'ratio':442 're':141,697 're-verif':140,696 'react':42,202 'read':85,904 'read-on':84 'read/write':901 'reason':689,853 'rebuild':1170 'recommend':862,864,867,899,931,1059,1095 'refactor':1099 'refer':919,934 'references/framework-fixes.md':640,641 'reflect':1156 'regress':726 'relat':612 'reload':706 'remain':146,750 'report':154,764,786 'repres':507 'requir':66,872,876,907,916,1173 'resiz':970,972 'resolv':656 'respect':660 'respons':401,499,737,973 'result':785,791 'retriev':100,342,895,898,952,1049 'return':754 'review':3,11,87,180,225,784,790 'rollback':1186 'run':72 'sass':287 'save':1061 'scale':1098 'scope':32,226,1199,1207 'screen':414,421 'screenshot':94,340,716,842,884,955,958,1047,1062 'scss':209,286,288 'scss/sass':285 'se/12':512 'search':585,586,598,603,616,911,913 'see':639 'selector':583,824,1192 'selector-bas':582 'selenium':1004 'semant':615 'server':75,712,985,1161 'sever':362,405,437,471 'similar':493 'site':36,232 'size':422 'skill':6,13,938 'small':413,429 'snapshot':949,951 'sourc':29,104,216,266,573,576,902 'source-github' 'spa':38 'space':389,486,491 'specif':227,636,777,1178,1191 'specifi':336 'src':263,623 'src/components':627 'src/pages':629 'stack':48 'stage':79 'standard':519,1024 'state':450,453 'static':35 'step':121,126,132,138,155,324,525,694,756 'structur':187,610,897,954 'structure/snapshot':344 'style':206,220,270,303,305,321,594,621,625,666,801,1081,1122,1151,1200 'styled-compon':302 'suggest':868 'summari':792 'support':1007,1011 'svelt':45 'sveltekit':54 'system':1104 'tablet':514 'tailwind':210,255,296,803 'tailwind.config':254,298 'take':957 'target':68,246,275,426,795 'td':119,747 'test':498,500,727,805,974,1021 'text':393,396,444,460,463,608 'thorough':1091 'time':1071,1146 'titl':819,846,852 'tool':942,1001,1002,1037,1053 'touch':425 'transit':419,883 'travers':331,352 'troubleshoot':1120 'tsconfig.json':251 'typescript':252 'understand':185 'unfix':847 'unifi':482 'uniform':490 'unintend':375 'unnatur':418 'url':161,165,175,337,796,797,881,948 'usag':253 'use':201,1189,1195 'user':171,781,866,1084,1149,1203 'ux':560 'valid':18 'valu':794 'verif':142,698 'verifi':728,1073,1119 'viewport':371,497,504,806 'vision':996 'visual':15,128,326,467,557,568,891,961 'vite':260 'vite.config':259 'vue':43,203 'wait':709 'web':1,9,63,788,877 'webdriv':1022 'websit':20,69,178 'wide':521 'width':506 'within':112,914 'without':1100 'wordpress':59 'work':1164 'workflow':115,1031 'workspac':114,244 'y':992 'yes':148,752","prices":[{"id":"d84c0bfe-77c1-4931-98b4-5ff8e671f83a","listingId":"7b2390a2-5b8b-48da-9667-c5e31f081f4a","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"github","category":"awesome-copilot","install_from":"skills.sh"},"createdAt":"2026-04-18T20:25:06.990Z"}],"sources":[{"listingId":"7b2390a2-5b8b-48da-9667-c5e31f081f4a","source":"github","sourceId":"github/awesome-copilot/web-design-reviewer","sourceUrl":"https://github.com/github/awesome-copilot/tree/main/skills/web-design-reviewer","isPrimary":false,"firstSeenAt":"2026-04-18T21:51:37.771Z","lastSeenAt":"2026-04-22T18:53:09.395Z"},{"listingId":"7b2390a2-5b8b-48da-9667-c5e31f081f4a","source":"skills_sh","sourceId":"github/awesome-copilot/web-design-reviewer","sourceUrl":"https://skills.sh/github/awesome-copilot/web-design-reviewer","isPrimary":true,"firstSeenAt":"2026-04-18T20:25:06.990Z","lastSeenAt":"2026-04-22T19:40:26.211Z"}],"details":{"listingId":"7b2390a2-5b8b-48da-9667-c5e31f081f4a","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"github","slug":"web-design-reviewer","source":"skills_sh","category":"awesome-copilot","skills_sh_url":"https://skills.sh/github/awesome-copilot/web-design-reviewer"},"updatedAt":"2026-04-22T19:40:26.211Z"}}