skills.rest
aubrian-halili
aubrian-haliliCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Evaluate frontend designs for WCAG 2.1 AA accessibility and visual hierarchy.

Updated Feb 13, 2026
Search Tags:#typography#accessibility#responsive design#design system#wcag#ui design#visual hierarchy
One-click install
npx skills add https://github.com/aubrian-halili/ai-experience --skill frontend-design-aubrian-halili
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/aubrian-halili/ai-experience/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/aubrian-halili/ai-experience --skill frontend-design-aubrian-halili

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps users create visually appealing, accessible, and responsive user interfaces by providing guidance on design principles, best practices, and implementation details.

Core Features & Use Cases

  • Design System Guidance: Provides principles for visual hierarchy, spacing, typography, and color.
  • Accessibility Audits: Checks for WCAG 2.1 AA compliance and suggests improvements.
  • Responsive Design: Offers strategies for creating layouts that adapt to various screen sizes.
  • Use Case: A developer needs to design a new modal component. They can ask the skill for guidance on visual hierarchy, appropriate spacing, and accessibility considerations for interactive elements.

Quick Start

Use the frontend-design skill to audit the accessibility of the file 'src/components/Button.tsx'.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I check if my UI components meet WCAG accessibility standards?▼

To check WCAG accessibility, evaluate your UI components against WCAG 2.1 AA criteria. This skill audits existing designs for compliance and provides actionable recommendations to improve visual hierarchy and interactive elements.

What principles should guide responsive design for multiple screen sizes?▼

Responsive design requires strategies that adapt layouts fluidly across screen sizes. This skill offers framework-agnostic guidance on visual hierarchy, spacing, and typography to ensure interfaces remain accessible and visually appealing on any device.

Can I use this for design system guidance on spacing and typography?▼

Yes, you can use this for design system guidance. It provides framework-agnostic principles for establishing visual hierarchy, spacing, typography, and color to help you craft production-grade interfaces with consistent UI design.

How do I improve visual hierarchy in my frontend design?▼

Improve visual hierarchy by applying established design principles to structure content effectively. This skill evaluates your existing interfaces and provides actionable implementation recommendations to enhance UI design through proper spacing and typography.

Does this skill provide framework-agnostic UI design advice?▼

Yes, this skill provides framework-agnostic UI design advice. It guides the creation of production-grade interfaces by addressing visual hierarchy, accessibility, and responsive design principles without relying on specific frontend dependencies.

What is the best way to audit an existing component file for accessibility?▼

The best way to audit accessibility is to evaluate existing component files against established design principles. This skill analyzes your code for WCAG 2.1 AA compliance and suggests actionable improvements for interactive elements.

Related Skills

Explore More Design & Creative Skills→
8GG-Git8GG-Git

design-critique

Evaluates digital designs for usability, visual hierarchy, consistency, and accessibility.

Community
Intermediate
idchain-worldidchain-world
16

frontend-design

Generate production-grade HTML/CSS/JS interfaces with responsive and accessible design.

Official
Advanced
terrene-foundationterrene-foundation
1

uiux-design-principles

Provide UI/UX design principles for enterprise applications with WCAG 2.1 AA accessibility.

Official
Intermediate
InnerScopeHearingInnerScopeHearing

wcag-audit-patterns

Audit web content for WCAG 2.2 compliance with automated testing and remediation guidance.

Official
Intermediate