frontend-design

Enforce typography, spacing, color contrast, and interaction states in frontend UI design workflows.

Updated Feb 4, 2026

Search Tags:#typography #design #accessibility #frontend #UI #design-review

Ready to run

npx skills add https://github.com/SuperCorks/agent-skills --skill frontend-design-supercorks

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides configurable guidelines to help designers and developers craft distinctive, non-generic frontend user interfaces that avoid common AI-generated aesthetics.

Core Features & Use Cases

Typography Guidance: Emphasizes typographic hierarchy, varied weights, and readable fonts outside default stacks.
Layout & Spacing: Encourages asymmetric layouts, balanced density, and intentional grid breaking for focal points.
Color & Accessibility: Recommends high-contrast palettes and subtle textures to reduce flat visuals while meeting WCAG AA standards.
Interaction Patterns: Defines hover/active states, transitions, and accessible focus rings for interactive elements.
Use Case: You are reviewing a dashboard or designing a new component and want to ensure it stands out without looking generic.

Quick Start

Start by applying the typography, spacing, color, and accessibility principles to your next UI component.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I make my frontend UI design look less generic and avoid common AI aesthetics?▼

To make your frontend UI design less generic, apply typographic hierarchy with varied weights, asymmetric layouts, and high-contrast color palettes. This approach enforces spacing rules and subtle textures to produce distinctive, non-default web interfaces.

How do I ensure accessibility-compliant color contrast when creating frontend components?▼

Ensure accessibility-compliant color contrast by selecting high-contrast palettes that meet WCAG AA standards. You should also define accessible focus rings and clear interaction states for all interactive elements in your web application.

What is the best way to establish typography hierarchy for a web application dashboard?▼

The best way to establish typography hierarchy is using readable fonts outside default stacks, varied font weights, and intentional spacing. This creates focal points through grid breaking and balanced density rather than flat, uniform layouts.

Can I use these design-system guidelines to review existing frontend components?▼

Yes, you can use these design-system guidelines to review existing frontend components. The workflow evaluates typographic hierarchy, spacing rules, interaction patterns, and accessibility compliance to ensure your dashboard or component stands out effectively.

Why do my interactive elements need defined hover and active states in frontend design?▼

Interactive elements need defined hover and active states, transitions, and accessible focus rings to provide clear interaction patterns. Defining these states ensures users receive proper visual feedback and navigational clarity within the user interface.