frontend-design

Audit UI mockups for accessibility, typography, color, and layout.

Updated Mar 25, 2026

Search Tags:#typography #design #accessibility #frontend #color #ux #design-tokens

Ready to run

npx skills add https://github.com/tuanldas/superteam --skill frontend-design-tuanldas

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/tuanldas/superteam/tree/main/skills/frontend-design
Command: npx skills add https://github.com/tuanldas/superteam --skill frontend-design-tuanldas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend Design Knowledge provides concrete, rule-based guidance for making UI/UX decisions, ensuring consistency, accessibility, and measurable quality across projects.

Core Features & Use Cases

Priority-driven design rules spanning accessibility, typography, color, layout, spacing, animation, and design tokens.
Centralized reference content for audits, critiques, and decision justification, including anti-patterns and token architecture.
Use Case: when evaluating a UI mock, agents can verify WCAG compliance, typography scale, color contrast, responsive behavior, and motion guidelines.

Quick Start

Audit a provided UI mockup for accessibility, typography, color, and layout to produce concrete recommendations.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I audit a UI mockup for accessibility and typography compliance?▼

Auditing a UI mockup for accessibility and typography involves checking WCAG compliance, evaluating font scales, and verifying layout spacing. This provides concrete, rule-based recommendations to ensure measurable frontend design quality and consistency across components.

What are design tokens and how do they drive frontend architecture?▼

Design tokens are centralized variables storing visual attributes like color, typography, and spacing to drive scalable frontend architecture. They ensure consistent UI decisions and measurable quality across web interfaces and design systems without hardcoding values.

Do I need a specific framework to implement token-driven design systems?▼

No specific framework is required to implement a token-driven design system. The rules and architecture are framework-agnostic, allowing application of priority-driven guidance for color, spacing, and typography across any web interface or component structure.

How do I check color contrast and responsive layout for web interfaces?▼

Checking color contrast and responsive layout for web interfaces requires verifying WCAG accessibility standards and evaluating spacing rules against your design system. This yields concrete recommendations for improving visual hierarchy and multi-device behavior.

What is the best way to justify UX decisions during a design review?▼

The best way to justify UX decisions during a design review is referencing centralized, priority-driven rules for accessibility, typography, and color systems. This provides measurable, anti-pattern-aware criteria to validate UI choices and critique web interface components objectively.

When should I avoid using generic frontend design rules for audits?▼

Avoid generic frontend design rules during audits when evaluating highly specialized UI interactions outside standard web interfaces. If your project lacks a token-driven architecture, general rules may not provide sufficiently measurable recommendations for complex component behavior.