skills.rest
kchapl
kchaplCOMMUNITY
Explore all skills by this author →
GitHub

web-designer

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

Updated Sep 21, 2025
Search Tags:#typography#design#accessibility#responsive#web-design#UI-UX
One-click install
npx skills add https://github.com/kchapl/book-lamp --skill web-designer
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
guyruguyru

ddg-search

Search the web via DuckDuckGo HTML and output titles, URLs, and snippets.

Community
Intermediate
htlin222htlin222
77

frontend

Develop React components with responsive layouts and state management.

Community
Intermediate
BarisSozenBarisSozen
1

apple-ui-design

Generate Apple-inspired UI design guidelines with typography, color, and spacing tokens.

Community
Basic
indykishindykish
2

frontend-design

Plan and implement accessible React and TypeScript frontend interfaces with token-based theming.

Community
Advanced