frontend-ux-patterns

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

1|Updated Apr 15, 2026

Search Tags:#accessibility #frontend #heuristics #ux-design #design-systems #ux-patterns

Ready to run

npx skills add https://github.com/Paradiddle131/global-ai-customizations --skill frontend-ux-patterns

💬 Prompt for ChatGPT / Claude Chat▼

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.