web-design-reviewer
Visual inspection and source-level fixing of website design issues across responsive, accessibility, and layout concerns.
- Detects layout overflow, alignment problems, responsive breakpoints, accessibility contrast issues, and visual inconsistencies across mobile (375px), tablet (768px), desktop (1280px), and wide (1920px) viewports
- Supports static sites, SPAs (React/Vue/Angular/Svelte), full-stack frameworks (Next.js/Nuxt/SvelteKit), and CMS platforms with automatic framework and styling method detection
- Identifies source files by selector search and component patterns, then applies minimal fixes respecting existing code style and avoiding regressions
- Requires a running target website (local dev server, staging, or production) and workspace access to source code for making fixes; includes before/after screenshot comparison and iteration up to three attempts per issue
Web Design Reviewer
This skill enables visual inspection and validation of website design quality, identifying and fixing issues at the source code level.
Scope of Application
- Static sites (HTML/CSS/JS)
- SPA frameworks such as React / Vue / Angular / Svelte
- Full-stack frameworks such as Next.js / Nuxt / SvelteKit
- CMS platforms such as WordPress / Drupal
- Any other web application
Prerequisites
Required
- Target website must be running
- Local development server (e.g.,
http://localhost:3000) - Staging environment
- Local development server (e.g.,
More from github/awesome-copilot
git-commit
Execute git commit with conventional commit message analysis, intelligent staging, and message generation. Use when user asks to commit changes, create a git commit, or mentions "/commit". Supports: (1) Auto-detecting type and scope from changes, (2) Generating conventional commit messages from diff, (3) Interactive commit with optional type/scope/description overrides, (4) Intelligent file staging for logical grouping
30.2Kgh-cli
GitHub CLI (gh) comprehensive reference for repositories, issues, pull requests, Actions, projects, releases, gists, codespaces, organizations, extensions, and all GitHub operations from the command line.
21.2Kdocumentation-writer
Diátaxis Documentation Expert. An expert technical writer specializing in creating high-quality software documentation, guided by the principles and structure of the Diátaxis technical documentation authoring framework.
17.4Kprd
Generate high-quality Product Requirements Documents (PRDs) for software systems and AI-powered features. Includes executive summaries, user stories, technical specifications, and risk analysis.
17.4Kexcalidraw-diagram-generator
Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw.
16.4Krefactor
Surgical code refactoring to improve maintainability without changing behavior. Covers extracting functions, renaming variables, breaking down god functions, improving type safety, eliminating code smells, and applying design patterns. Less drastic than repo-rebuilder; use for gradual improvements.
16.1K