frontend-ux-patterns

Encode UX rules and patterns for frontend usability and accessibility standards.

1|Updated Apr 15, 2026
One-click install
npx skills add https://github.com/Paradiddle131/global-ai-customizations --skill frontend-ux-patterns
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-ux-patterns
Source: https://github.com/Paradiddle131/global-ai-customizations/tree/main/skills/frontend-ux-patterns
Command: npx skills add https://github.com/Paradiddle131/global-ai-customizations --skill frontend-ux-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a framework-agnostic, battle-tested set of UX rules and patterns to ensure AI-generated frontend work meets usability, accessibility, and consistency standards across components, pages, and dashboards.

Core Features & Use Cases

  • Encodes Nielsen's heuristics, Shneiderman's rules, and spacing/typography/color systems as actionable guidelines.
  • Covers form, table, dashboard patterns, accessibility, and acceptance criteria to guide design and development.
  • Use case: when building a new frontend feature, run this skill's patterns as a quality floor to validate UX decisions and generate acceptance criteria.

Quick Start

When planning a new frontend feature, apply the provided UX rules to guide design decisions and create testable acceptance criteria.

Frequently Asked Questions about frontend-ux-patterns

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

FAQPage Schema
How do I apply UX heuristics to AI-generated frontend components?

To apply UX heuristics to AI-generated frontend components, use a framework-agnostic skill that encodes Nielsen's and Shneiderman's rules to validate usability, accessibility, and consistency across designs.

What UX patterns should I use for dashboard and form layouts?

For dashboard and form layouts, use established UX patterns that cover spacing, typography, and color systems to ensure structural consistency and accessibility across your frontend project.

Can I generate accessibility acceptance criteria for frontend pages?

Yes, you can generate accessibility and UX acceptance criteria for frontend pages by running a comprehensive ruleset that encodes spacing, typography, and color standards to validate design decisions.

Does this frontend UX ruleset work with specific frameworks?

This frontend UX ruleset is framework-agnostic, meaning it applies to the design, review, and generation of components and layouts across any frontend project without framework dependencies.

How do I set a quality floor for frontend UX design?

To set a quality floor for frontend UX design, encode comprehensive rules covering heuristics, accessibility, and design systems to validate AI-generated components and generate testable acceptance criteria.

What is the best way to validate accessibility in frontend design systems?

The best way to validate accessibility in frontend design systems is to apply a framework-agnostic ruleset that enforces spacing, typography, color standards, and established UX heuristics.