web-designer

Name: web-designer
Availability: InStock
Author: kchapl

Audit web pages for accessibility, typography, and responsive layout.

Updated Sep 21, 2025

Search Tags:#typography #design #accessibility #responsive #web-design #UI-UX

Ready to run

npx skills add https://github.com/kchapl/book-lamp --skill web-designer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-designer
Source: https://github.com/kchapl/book-lamp/tree/main/.agent/skills/web-designer
Command: npx skills add https://github.com/kchapl/book-lamp --skill web-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web pages often fail accessibility, readability, and responsive requirements, leading to poor user experiences and lost engagement.

Core Features & Use Cases

Accessibility-first guidance covering semantic HTML, ARIA, keyboard navigation, color contrast, and motion considerations.
Responsive and scalable typography, grid/Flexbox layouts, and breakpoint planning for mobile-first design.
Consistent design patterns, component usage, and visual hierarchy for cohesive UI across pages.
Use Case: A designer asks for a quick audit of a product landing page to improve accessibility and readability.

Quick Start

Provide a rapid design audit of a provided webpage, focusing on accessibility, typography, and responsive layout, with concrete improvements.

Frequently Asked Questions about web-designer

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

FAQPage Schema

How do I audit a webpage for accessibility and readability issues?▼

To audit a webpage for accessibility and readability, review semantic HTML structure, color contrast ratios, keyboard navigation, ARIA usage, and typography scale to identify concrete improvements for better user engagement.

What is the best way to plan responsive typography and breakpoints for mobile-first design?▼

The best way to plan responsive typography for mobile-first design is establishing a scalable typography system and grid breakpoints that adapt layout proportions and text sizes across different devices.

How do I implement accessible UI components with proper semantic HTML and ARIA?▼

Implement accessible UI components by applying semantic HTML tags, adding ARIA roles where necessary, ensuring keyboard navigation support, and maintaining visual hierarchy for cohesive page interactions.

Can I use this approach for a quick design review of a product landing page?▼

Yes, you can use this approach for a product landing page design review to receive actionable recommendations on color contrast, responsive layout adjustments, and accessible component implementation.

Why does my web design fail accessibility requirements across different devices?▼

Web design fails accessibility requirements when pages lack semantic HTML, have insufficient color contrast, miss keyboard navigation support, or use static typography scales that do not adapt responsively across devices.

What are the limitations of relying solely on visual hierarchy for UI consistency?▼

Relying solely on visual hierarchy for UI consistency limits accessibility if semantic HTML and ARIA attributes are absent, meaning screen readers and keyboard users cannot navigate the page structure effectively.