skills.rest
Elric412
Elric412COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audit frontend UI code for accessibility, performance, responsive design, and best-practice violations.

Updated Aug 23, 2026
Search Tags:#accessibility#a11y#audit#ux#responsive-design#web-performance#css-best-practices
One-click install
npx skills add https://github.com/Elric412/Leica-cam --skill web-design-guidelines-elric412
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Elric412/Leica-cam/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/Elric412/Leica-cam --skill web-design-guidelines-elric412

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Web Interface Guidelines Skill provides a structured, repeatable checklist to find accessibility, performance, responsive design, and security issues in frontend code so teams can ship usable and compliant web interfaces.

Core Features & Use Cases

  • Accessibility checks: semantic HTML, ARIA labeling, keyboard navigation, focus management, contrast and screen reader considerations.
  • Performance guidance: image optimization, bundle and rendering best practices, and Core Web Vitals recommendations.
  • Responsive and UX patterns: mobile-first layouts, fluid typography, breakpoints, forms, loading and error states, and modal behaviors.
  • Security and internationalization: content sanitization, external link safety, i18n considerations and RTL support.
  • Use Case: Run the checklist against a repository or a single component to produce a per-file, rule-tagged audit report for developers and designers.

Quick Start

Run a UI audit and report each finding as file:line — [RULE_ID] description following the guidelines.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I audit frontend code for accessibility and performance issues?▼

You can audit frontend code for accessibility and performance by running a structured checklist that verifies semantic HTML, ARIA support, keyboard navigation, image optimization, and Core Web Vitals recommendations to produce a per-file, rule-tagged audit report.

What does a UI accessibility check cover for web components?▼

A UI accessibility check covers semantic HTML, ARIA labeling, keyboard navigation, focus management, contrast, and screen reader considerations to ensure web components are usable and compliant.

Can I use this to audit responsive design and CSS patterns in a component library?▼

Yes, you can audit responsive design and CSS patterns in a component library by verifying mobile-first layouts, fluid typography, breakpoints, and modal behaviors to ensure proper rendering across devices.

How do I check Core Web Vitals guidance and rendering best practices in my static site?▼

You can check Core Web Vitals guidance and rendering best practices in a static site by auditing image optimization, bundle sizes, and rendering patterns to identify performance bottlenecks and improve loading metrics.

Does the audit include security and internationalization checks for web interfaces?▼

Yes, the audit includes security and internationalization checks by verifying content sanitization, external link safety, i18n considerations, and RTL support to ensure secure and globally usable web interfaces.

What's the best way to generate an audit report for developers and designers?▼

The best way to generate an audit report for developers and designers is to run the checklist against a repository or single component, outputting findings as file:line — [RULE_ID] description for actionable tracking.

Related Skills

Explore More Design & Creative Skills→
lth0lth0

frontend-design

Generate production-grade HTML/CSS/JS frontend interfaces with cohesive typography, color, and motion.

Community
Advanced
pingwupingwu
12

frontend-ui-ux

Design accessible, mobile-first frontend UI/UX for modern web apps.

Community
Advanced
aarushlohitaarushlohit

landing-craft

Design, test, and optimize landing pages with A/B testing and CRO.

Community
Advanced
warpdotdevwarpdotdev
820

web-accessibility-audit

Audit web pages against WCAG standards using automated tools and manual review.

Official
Intermediate