web-design-reviewer

Name: web-design-reviewer
Author: github

12kinstalls4.6kforks

How to install web-design-reviewer?

github/awesome-copilot/web-design-reviewer

$npx -y skills add github/awesome-copilot --skill web-design-reviewer

Installs into the current project.

Summary

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, visua

Files · 1

View on GitHub

SKILL.md

1	# Web Design Reviewer
2
3	This skill enables visual inspection and validation of website design quality, identifying and fixing issues at the source code level.
4
5	## Scope of Application
6
7	- Static sites (HTML/CSS/JS)
8	- SPA frameworks such as React / Vue / Angular / Svelte
9	- Full-stack frameworks such as Next.js / Nuxt / SvelteKit
10	- CMS platforms such as WordPress / Drupal
11	- Any other web application
12
13	## Prerequisites
14
15	### Required
16
17	1. Target website must be running
18	- Local development server (e.g., `http://localhost:3000`)
19	- Staging environment
20	- Production environment (for read-only reviews)
21
22	2. Browser automation must be available
23	- Screenshot capture
24	- Page navigation
25	- DOM information retrieval
26
27	3. Access to source code (when making fixes)
28	- Project must exist within the workspace
29
30	## Workflow Overview
31
32	```mermaid
33	flowchart TD
34	A[Step 1: Information Gathering] --> B[Step 2: Visual Inspection]
35	B --> C[Step 3: Issue Fixing]
36	C --> D[Step 4: Re-verification]
37	D --> E{Issues Remaining?}
38	E -->\|Yes\| B
39	E -->\|No\| F[Completion Report]
40	```
41
42	---
43
44	## Step 1: Information Gathering Phase
45
46	### 1.1 URL Confirmation
47
48	If the URL is not provided, ask the user:
49
50	> Please provide the URL of the website to review (e.g., `http://localhost:3000`)
51
52	### 1.2 Understanding Project Structure
53
54	When making fixes, gather the following information:
55
56	\| Item \| Example Question \|
57	\|------\|------------------\|
58	\| Framework \| Are you using React / Vue / Next.js, etc.? \|
59	\| Styling Method \| CSS / SCSS / Tailwind / CSS-in-JS, etc. \|
60	\| Source Location \| Where are style files and components located? \|
61	\| Review Scope \| Specific pages only or entire site? \|
62
63	### 1.3 Automatic Project Detection
64
65	Attempt automatic detection from files in the workspace:
66
67	```
68	Detection targets:
69	├── package.json → Framework and dependencies
70	├── tsconfig.json → TypeScript usage
71	├── tailwind.config → Tailwind CSS
72	├── next.config → Next.js
73	├── vite.config → Vite
74	├── nuxt.config → Nuxt
75	└── src/ or app/ → Source directory
76	```
77
78	### 1.4 Identifying Styling Method
79
80	\| Method \| Detection \| Edit Target \|
81	\|--------\|-----------\|-------------\|
82	\| Pure CSS \| `*.css` files \| Global CSS or component CSS \|
83	\| SCSS/Sass \| `.scss`, `.sass` \| SCSS files \|
84	\| CSS Modules \| `*.module.css` \| Module CSS files \|
85	\| Tailwind CSS \| `tailwind.config.*` \| className in components \|
86	\| styled-components \| `styled.` in code \| JS/TS files \|
87	\| Emotion \| `@emotion/` imports \| JS/TS files \|
88	\| CSS-in-JS (other) \| Inline styles \| JS/TS files \|
89
90	---
91
92	## Step 2: Visual Inspection Phase
93
94	### 2.1 Page Traversal
95
96	1. Navigate to the specified URL
97	2. Capture screenshots
98	3. Retrieve DOM structure/snapshot (if possible)
99	4. If additional pages exist, traverse through navigation
100
101	### 2.2 Inspection Items
102
103	#### Layout Issues
104
105	\| Issue \| Description \| Severity \|
106	\|-------\|-------------\|----------\|
107	\| Element Overflow \| Content overflows from parent element or viewport \| High \|
108	\| Element Overlap \| Unintended overlapping of elements \| High \|
109	\| Alignment Issues \| Grid or flex alignment problems \| Medium \|
110	\| Inconsistent Spacing \| Padding/margin inconsistencies \| Medium \|
111	\| Text Clipping \| Long text not handled properly \| Medium \|
112
113	#### Responsive Issues
114
115	\| Issue \| Description \| Severity \|
116	\|-------\|-------------\|----------\|
117	\| Non-mobile Friendly \| Layout breaks on small screens \| High \|
118	\| Breakpoint Issues \| Unnatural transitions when screen size changes \| Medium \|
119	\| Touch Targets \| Buttons too small on mobile \| Medium \|
120
121	#### Accessibility Issues
122
123	\| Issue \| Description \| Severity \|
124	\|-------\|-------------\|----------\|
125	\| Insufficient Contrast \| Low contrast ratio between text and background \| High \|
126	\| No Focus State \| Cannot determine state during keyboard navigation \| High \|
127	\| Missing alt Text \| No alternative text for images \| Medium \|
128
129	#### Visual Consistency
130
131	\| Issue \| Description \| Severity \|
132	\|-------\|-------------\|----------\|
133	\| Font Inconsistency \| Mixed font families \| Medium \|
134	\| Color Inconsistency \| Non-unified brand colors \| Medium \|
135	\| Spacing Inconsistency \| Non-uniform spacing between similar elements \| Low \|
136
137	### 2.3 Viewport Testing (Responsive)
138
139	Test at the following viewports:
140
141	\| Name \| Width \| Representative Device \|
142	\|------\|-------\|----------------------\|
143	\| Mobile \| 375px \| iPhone SE/12 mini \|
144	\| Tablet \| 768px \| iPad \|
145	\| Desktop \| 1280px \| Standard PC \|
146	\| Wide \| 1920px \| Large display \|
147
148	---
149
150	## Step 3: Issue Fixing Phase
151
152	### 3.1 Issue Prioritization
153
154	```mermaid
155	block-beta
156	columns 1
157	block:priority["Priority Matrix"]
158	P1["

People who liked this also viewed

6 picks

Type

web-design-reviewer

12kinstalls4.6kforks

View on GitHub

How to install web-design-reviewer?

github/awesome-copilot/web-design-reviewer

$npx -y skills add github/awesome-copilot --skill web-design-reviewer

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Web Design Reviewer
2
3	This skill enables visual inspection and validation of website design quality, identifying and fixing issues at the source code level.
4
5	## Scope of Application
6
7	- Static sites (HTML/CSS/JS)
8	- SPA frameworks such as React / Vue / Angular / Svelte
9	- Full-stack frameworks such as Next.js / Nuxt / SvelteKit
10	- CMS platforms such as WordPress / Drupal
11	- Any other web application
12
13	## Prerequisites
14
15	### Required
16
17	1. Target website must be running
18	- Local development server (e.g., `http://localhost:3000`)
19	- Staging environment
20	- Production environment (for read-only reviews)
21
22	2. Browser automation must be available
23	- Screenshot capture
24	- Page navigation
25	- DOM information retrieval
26
27	3. Access to source code (when making fixes)
28	- Project must exist within the workspace
29
30	## Workflow Overview
31
32	```mermaid
33	flowchart TD
34	A[Step 1: Information Gathering] --> B[Step 2: Visual Inspection]
35	B --> C[Step 3: Issue Fixing]
36	C --> D[Step 4: Re-verification]
37	D --> E{Issues Remaining?}
38	E -->\|Yes\| B
39	E -->\|No\| F[Completion Report]
40	```
41
42	---
43
44	## Step 1: Information Gathering Phase
45
46	### 1.1 URL Confirmation
47
48	If the URL is not provided, ask the user:
49
50	> Please provide the URL of the website to review (e.g., `http://localhost:3000`)
51
52	### 1.2 Understanding Project Structure
53
54	When making fixes, gather the following information:
55
56	\| Item \| Example Question \|
57	\|------\|------------------\|
58	\| Framework \| Are you using React / Vue / Next.js, etc.? \|
59	\| Styling Method \| CSS / SCSS / Tailwind / CSS-in-JS, etc. \|
60	\| Source Location \| Where are style files and components located? \|
61	\| Review Scope \| Specific pages only or entire site? \|
62
63	### 1.3 Automatic Project Detection
64
65	Attempt automatic detection from files in the workspace:
66
67	```
68	Detection targets:
69	├── package.json → Framework and dependencies
70	├── tsconfig.json → TypeScript usage
71	├── tailwind.config → Tailwind CSS
72	├── next.config → Next.js
73	├── vite.config → Vite
74	├── nuxt.config → Nuxt
75	└── src/ or app/ → Source directory
76	```
77
78	### 1.4 Identifying Styling Method
79
80	\| Method \| Detection \| Edit Target \|
81	\|--------\|-----------\|-------------\|
82	\| Pure CSS \| `*.css` files \| Global CSS or component CSS \|
83	\| SCSS/Sass \| `.scss`, `.sass` \| SCSS files \|
84	\| CSS Modules \| `*.module.css` \| Module CSS files \|
85	\| Tailwind CSS \| `tailwind.config.*` \| className in components \|
86	\| styled-components \| `styled.` in code \| JS/TS files \|
87	\| Emotion \| `@emotion/` imports \| JS/TS files \|
88	\| CSS-in-JS (other) \| Inline styles \| JS/TS files \|
89
90	---
91
92	## Step 2: Visual Inspection Phase
93
94	### 2.1 Page Traversal
95
96	1. Navigate to the specified URL
97	2. Capture screenshots
98	3. Retrieve DOM structure/snapshot (if possible)
99	4. If additional pages exist, traverse through navigation
100
101	### 2.2 Inspection Items
102
103	#### Layout Issues
104
105	\| Issue \| Description \| Severity \|
106	\|-------\|-------------\|----------\|
107	\| Element Overflow \| Content overflows from parent element or viewport \| High \|
108	\| Element Overlap \| Unintended overlapping of elements \| High \|
109	\| Alignment Issues \| Grid or flex alignment problems \| Medium \|
110	\| Inconsistent Spacing \| Padding/margin inconsistencies \| Medium \|
111	\| Text Clipping \| Long text not handled properly \| Medium \|
112
113	#### Responsive Issues
114
115	\| Issue \| Description \| Severity \|
116	\|-------\|-------------\|----------\|
117	\| Non-mobile Friendly \| Layout breaks on small screens \| High \|
118	\| Breakpoint Issues \| Unnatural transitions when screen size changes \| Medium \|
119	\| Touch Targets \| Buttons too small on mobile \| Medium \|
120
121	#### Accessibility Issues
122
123	\| Issue \| Description \| Severity \|
124	\|-------\|-------------\|----------\|
125	\| Insufficient Contrast \| Low contrast ratio between text and background \| High \|
126	\| No Focus State \| Cannot determine state during keyboard navigation \| High \|
127	\| Missing alt Text \| No alternative text for images \| Medium \|
128
129	#### Visual Consistency
130
131	\| Issue \| Description \| Severity \|
132	\|-------\|-------------\|----------\|
133	\| Font Inconsistency \| Mixed font families \| Medium \|
134	\| Color Inconsistency \| Non-unified brand colors \| Medium \|
135	\| Spacing Inconsistency \| Non-uniform spacing between similar elements \| Low \|
136
137	### 2.3 Viewport Testing (Responsive)
138
139	Test at the following viewports:
140
141	\| Name \| Width \| Representative Device \|
142	\|------\|-------\|----------------------\|
143	\| Mobile \| 375px \| iPhone SE/12 mini \|
144	\| Tablet \| 768px \| iPad \|
145	\| Desktop \| 1280px \| Standard PC \|
146	\| Wide \| 1920px \| Large display \|
147
148	---
149
150	## Step 3: Issue Fixing Phase
151
152	### 3.1 Issue Prioritization
153
154	```mermaid
155	block-beta
156	columns 1
157	block:priority["Priority Matrix"]
158	P1["

People who liked this also viewed

6 picks

Type