skills.rest
htafolla
htafollaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-ux-engineer

Audit frontend layouts for WCAG 2.1 AA accessibility and visual consistency.

Updated Sep 9, 2025
Search Tags:#typography#accessibility#design system#ui design#ux best practices#wcag 2.1 aa
One-click install
npx skills add https://github.com/htafolla/chrono-warp-drive --skill frontend-ui-ux-engineer-htafolla
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux-engineer
Source: https://github.com/htafolla/chrono-warp-drive/tree/main/.opencode/skills/frontend-ui-ux-engineer
Command: npx skills add https://github.com/htafolla/chrono-warp-drive --skill frontend-ui-ux-engineer-htafolla

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you create interfaces that are visually consistent, easy to understand, and usable by everyone, reducing design rework and accessibility issues before implementation.

Core Features & Use Cases

  • Design systems and visual hierarchy: Applies golden-ratio proportions, a 4px spacing rhythm, and consistent size/weight/color to improve scannability and clarity in dashboards, marketing pages, and product flows.
  • Typography guidance: Limits font families, defines a coherent h1–h6 type scale, and keeps readable line height and line length for blogs, docs, and application screens.
  • WCAG-focused accessibility: Enforces semantic HTML, keyboard navigation with visible focus, screen-reader compatibility, and respects prefers-reduced-motion for public-facing web apps and internal tools.

Quick Start

Use the frontend-ui-ux-engineer skill to audit your page layout for hierarchy, typography, and keyboard/screen-reader accessibility, then produce a prioritized set of fixes aligned with WCAG 2.1 AA and consistent spacing and contrast targets.

Frequently Asked Questions about frontend-ui-ux-engineer

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

FAQPage Schema
How do I design a frontend that meets WCAG 2.1 AA accessibility standards?▼

To meet WCAG 2.1 AA standards, design frontends using semantic HTML, appropriate ARIA usage, visible focus states, and specific contrast targets for text and graphics to ensure reliable keyboard navigation and screen-reader compatibility.

What's the best way to establish visual hierarchy and spacing in a UI design system?▼

Establish UI visual hierarchy by applying golden-ratio proportions alongside a consistent 4px spacing rhythm for size, weight, and color, which improves scannability and clarity across dashboards, marketing pages, and product flows.

How do I set up typography for readable application screens and documentation?▼

Set up readable typography by limiting font families, defining a coherent h1–h6 type scale, and maintaining readable line height and line length specifically tailored for blogs, docs, and application screens.

Can I audit an existing web page layout for accessibility and visual consistency?▼

You can audit existing page layouts to evaluate hierarchy, typography, and keyboard or screen-reader accessibility, producing a prioritized set of fixes aligned with consistent spacing and contrast targets.

Does this frontend approach support users who require reduced motion?▼

Yes, this frontend approach supports reduced motion by enforcing preferences for users who need it, ensuring public-facing web apps and internal tools respect prefers-reduced-motion settings alongside standard keyboard navigation.

Related Skills

Explore More Design & Creative Skills→
rp4rirp4ri

accessibility-auditor

Audit design files against WCAG 2.1 AA criteria for accessibility issues.

Community
Advanced
pelcherspelchers

ensuring-accessibility

Implement WCAG 2.1 AA-compliant accessibility patterns for web interfaces.

Community
Advanced
toddmoytoddmoy
1

modernist

Generate Swiss Design and Bauhaus UI layouts with CSS/TSX design tokens.

Community
Advanced
vecearvecear

accessibility-auditor

Audit web applications for WCAG 2.1 accessibility issues.

Community
Advanced