skills.rest
Postalocity
PostalocityOFFICIAL
Explore all skills by this author →
GitHub

frontend-ui-ux-engineer

Define frontend design standards for visuals, typography, and accessibility.

1|Updated Mar 5, 2026
Search Tags:#typography#accessibility#a11y#frontend#ui-ux#responsive-design#design-systems
One-click install
npx skills add https://github.com/Postalocity/template-microsite --skill frontend-ui-ux-engineer-postalocity
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux-engineer
Source: https://github.com/Postalocity/template-microsite/tree/main/.opencode/skills/frontend-ui-ux-engineer
Command: npx skills add https://github.com/Postalocity/template-microsite --skill frontend-ui-ux-engineer-postalocity

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Solve frontend UI/UX consistency problems by defining design standards for visuals, typography, and accessibility.

Core Features & Use Cases

  • Establish design systems and typography scales to ensure cohesive visuals across brands and platforms.
  • Provide accessibility checklists and guidance to meet WCAG 2.1 AA, keyboard navigation, and responsive behavior.
  • Use Case: Apply to a new web app to align UI components, spacing, and contrast guarantees.

Quick Start

Audit an existing page to identify typography, color contrast, and navigation issues and propose concrete improvements.

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 establish a consistent UI design system for a web app?▼

To establish a consistent UI design system, define standardized typography scales, visual rules, and accessible component patterns. This ensures cohesive frontend interfaces, spacing, and color contrast guarantees across your web application projects.

How do I audit an existing web page for accessibility and typography issues?▼

To audit an existing web page for accessibility and typography issues, evaluate semantic HTML structure, keyboard navigation, and color contrast. This process identifies specific WCAG 2.1 AA failures and proposes concrete frontend improvements.

What is mobile-first responsive design and when do I need it for frontend UI?▼

Mobile-first responsive design is an approach that builds web interfaces starting from the smallest screens, ensuring proper layout and interaction patterns. You need it to guarantee accessible, visually compelling UI/UX across all device sizes.

Does this approach help meet WCAG 2.1 AA keyboard navigation requirements?▼

Yes, this approach helps meet WCAG 2.1 AA keyboard navigation requirements by providing specific accessibility checklists and guidance. It ensures your web interfaces enforce proper semantic HTML and keyboard interaction patterns.

What is the best way to fix color contrast problems in a design system?▼

The best way to fix color contrast problems in a design system is to audit visual standards against WCAG 2.1 AA requirements. This establishes guaranteed contrast ratios and defines concrete improvements for your frontend components.

Related Skills

Explore More Design & Creative Skills→
naveedharrinaveedharri
53

redesign-existing-projects

Audit and upgrade typography, color, layout, motion, and accessibility in existing projects.

Community
Advanced
h4vzzh4vzz
33

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

Community
Advanced
phananhtuan09phananhtuan09

frontend-design-fundamentals

Standardize UI visuals with responsive layouts, typography, spacing, and WCAG-compliant color contrast.

Community
Intermediate
dngioidevdngioidev

designer-uxui

Provide UI/UX design patterns, TailwindCSS tokens, and WCAG 2.1 AA accessibility checks.

Community
Advanced