skills.rest
tesfaye174
tesfaye174COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Enforces web design system standards for UI development and review.

Updated Mar 4, 2026
Search Tags:#ui#accessibility#web development#frontend#design system#guidelines#ux
One-click install
npx skills add https://github.com/tesfaye174/ESG-BALANCE --skill web-design-guidelines-tesfaye174
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/tesfaye174/ESG-BALANCE/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/tesfaye174/ESG-BALANCE --skill web-design-guidelines-tesfaye174

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive set of senior-level web design principles and patterns to ensure consistency, accessibility, and performance in UI development and review.

Core Features & Use Cases

  • Design System Enforcement: Ensures adherence to established design tokens, layout, typography, and component standards.
  • Accessibility Auditing: Guides the creation and review of interfaces that meet WCAG AA standards.
  • Performance Optimization: Provides guidelines for efficient loading and animation.
  • Use Case: A development team is building a new feature. They can use this Skill to audit the UI mockups and code against best practices, catching potential issues before they reach production.

Quick Start

Use the web-design-guidelines skill to audit the layout and spacing of the main dashboard page.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I enforce web design system standards for UI development and review?▼

Enforce web design system standards by applying a systematic, principle-rooted approach to layout, design tokens, typography, and components. This ensures consistency, accessibility, and performance across all frontend interfaces during development and review.

What are the WCAG 2.2 AA accessibility guidelines for frontend web development?▼

WCAG 2.2 AA accessibility guidelines for frontend development require auditing UI layouts, forms, and navigation patterns to ensure usability. This process enforces design system standards that catch potential accessibility issues before production.

How do I audit UI mockups and code against best practices before production?▼

Audit UI mockups and code against best practices by reviewing them for layout, responsive design, typography, and performance optimization. This systematic approach catches design system inconsistencies and accessibility issues early.

Does this web design guidelines skill work without external dependencies or components?▼

This web design guidelines skill works completely standalone without external dependencies or components. It provides a comprehensive set of senior-level UI and UX principles directly applicable to frontend web development.

What is the best way to maintain consistency and usability across web interfaces?▼

The best way to maintain consistency and usability across web interfaces is enforcing senior-level design system standards. This covers design tokens, responsive design, components, and UX patterns using a principle-rooted approach.

Why does my UI development lack consistency in design tokens and typography?▼

UI development lacks consistency in design tokens and typography when not adhering to established design system standards. Applying systematic, principle-rooted guidelines for layout and components resolves these usability gaps.

Related Skills

Explore More Design & Creative Skills→
priyansh19priyansh19
1

design-guide

Establish and enforce CrewSpace UI design system standards across frontend components.

Community
Advanced
Exia-thdExia-thd

accessibility-engineer

Audit and remediate web and mobile accessibility issues for WCAG 2.2 compliance.

Community
Advanced
stericisherestericishere
1

design-frontend

Route UI/UX and frontend requests to relevant design guidance.

Community
Intermediate
SensLiaoSensLiao

qa-a11y-compliance

Scan web applications for WCAG 2.2 AA accessibility compliance.

Community
Advanced