skills.rest
HiroyukiMakita
HiroyukiMakitaCOMMUNITY
Explore all skills by this author →
GitHub

web-design-reviewer

Inspect website designs and fix responsive, accessibility, and layout issues in source code.

Updated Jan 31, 2026
Search Tags:#accessibility#responsive design#CSS#web design#UI review#layout fixing
One-click install
npx skills add https://github.com/HiroyukiMakita/dev-kintone-plugin --skill web-design-reviewer-hiroyukimakita
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/HiroyukiMakita/dev-kintone-plugin/tree/main/.opencode/skills/web-design-reviewer
Command: npx skills add https://github.com/HiroyukiMakita/dev-kintone-plugin --skill web-design-reviewer-hiroyukimakita

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill identifies and fixes visual and functional design issues on websites, ensuring a polished and user-friendly experience across all devices.

Core Features & Use Cases

  • Visual Inspection: Detects layout, responsiveness, accessibility, and consistency problems.
  • Automated Fixing: Modifies source code to resolve identified issues.
  • Use Case: A marketing team launches a new landing page, but it looks broken on mobile. This skill can automatically detect the layout issues on mobile viewports and apply the necessary CSS fixes to make it responsive.

Quick Start

Review the website design at http://localhost:3000 and fix any layout issues.

Frequently Asked Questions about web-design-reviewer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix website layout breakage and responsiveness issues automatically?▼

To fix website layout breakage and responsiveness issues automatically, you can use a visual inspection process that detects problems across various viewports and modifies the source code to apply the necessary CSS fixes.

What is automated UI review and how does it handle accessibility?▼

Automated UI review is the process of visually inspecting a website to detect visual consistency, responsiveness, and accessibility problems, then applying source code modifications to resolve these identified design flaws.

Does visual inspection for web design require browser automation?▼

Yes, visual inspection for web design requires browser automation capabilities for navigation, screenshotting, and DOM interaction, along with direct access to the project's source code to apply the layout fixes.

Can I modify CSS for mobile responsive design without manual code changes?▼

You can modify CSS for mobile responsive design without manual code changes by using an automated fixing process that detects layout issues on mobile viewports and directly modifies the source code to make it responsive.

What is the best way to review a localhost website for visual consistency?▼

The best way to review a localhost website for visual consistency is to perform automated visual inspection that screenshots the DOM, identifies layout and accessibility flaws, and modifies the source code to ensure a polished user experience.

Related Skills

Explore More Design & Creative Skills→
zivtechzivtech

webapp-testing

Automate local web app testing with Playwright and server lifecycle management.

Official
Intermediate
krzemienskikrzemienski
2

responsive-validation

Validate responsive UI layouts across device viewports and breakpoints.

Community
Advanced
openbotxopenbotx
88

browser

Automate browser navigation and UI interactions with Chromium or Google Chrome.

Official
Intermediate
airoweairowe
14

Accessibility Audit Skill

Audit web projects for WCAG 2.1 violations using axe-core and eslint-plugin-jsx-a11y.

Community
Advanced