skills.rest
tylergibbs1
tylergibbs1COMMUNITY
Explore all skills by this author →
Website𝕏@TylerbryyGitHub

ui-ux-guidelines

Enforce accessible UI guidelines for React/TypeScript frontend components.

1|Updated Dec 10, 2025
Search Tags:#design#performance#accessibility#frontend#react#ux#ui-guidelines
One-click install
npx skills add https://github.com/tylergibbs1/codewarden --skill ui-ux-guidelines-tylergibbs1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-guidelines
Source: https://github.com/tylergibbs1/codewarden/tree/main/skills/ui-ux-guidelines
Command: npx skills add https://github.com/tylergibbs1/codewarden --skill ui-ux-guidelines-tylergibbs1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The UI/UX Guidelines skill codifies and enforces accessible, performant UI standards to ensure consistent user experiences across frontend components and projects.

Core Features & Use Cases

  • Activation patterns: automatic and manual invocation during code reviews to validate UI constraints.
  • Guideline enforcement: checks for keyboard navigation, focus management, touch targets, form behavior, and layout accessibility.
  • Integrations: designed to work alongside Ultracite and React Next Modern to unify quality signals for UI.
  • Use Case: When reviewing a React/TypeScript component, run the skill to ensure it meets accessibility and performance guidelines before merge or deployment.

Quick Start

Trigger the UI/UX guidelines during code review to verify components meet accessibility, keyboard, and layout standards. Note: For high-level rules, defer to vercel-design-guidelines and use this skill for implementation-level checks.

Frequently Asked Questions about ui-ux-guidelines

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

FAQPage Schema
How do I enforce accessibility guidelines for React components during code review?▼

To enforce accessibility guidelines for React components, trigger the UI/UX review process to validate keyboard navigation, focus management, and touch targets. It automatically checks interactive elements to ensure they meet mandatory layout and form behavior standards before merge.

What UI accessibility checks should I run on frontend forms and navigation?▼

UI accessibility checks for frontend forms and navigation should verify keyboard support, focus management, and touch handling. Running an automated guideline review ensures interactive elements maintain consistent UX and meet performance constraints during development.

Does this UI guidelines skill work with TypeScript projects?▼

Yes, this UI guidelines skill works directly with TypeScript projects. It is designed to apply accessible and performant UI constraints to React and TypeScript codebases, validating forms, navigation, and interactive elements during your workflow.

How do I check keyboard support and focus management in frontend UI components?▼

To check keyboard support and focus management in frontend UI components, run an automated UX constraint review. This validates that interactive elements meet mandatory requirements for touch handling and layout accessibility before deployment.

When should I use implementation-level UI checks versus high-level design rules?▼

You should use implementation-level UI checks for validating specific component constraints like keyboard support and form behavior. For high-level design rules, defer to a broader design guideline tool, using this skill to enforce code-level accessibility and performance.

Can I validate touch target and layout accessibility for interactive elements automatically?▼

Yes, you can validate touch target and layout accessibility automatically by invoking UI guidelines during code review. This process enforces mandatory requirements for touch handling and layout considerations across your frontend components.

Related Skills

Explore More Design & Creative Skills→
iulspopiulspop

frontend-accessibility-best-practices

Review React components for accessibility best practices and WCAG standards.

Community
Intermediate
ITSaltITSalt
23

nacl-tl-hotfix

Automate a nine-step emergency hotfix workflow for main production branches.

Community
Advanced
redpanda-dataredpanda-data
34

setup-biome

Automate Biome linter setup with the Ultracite preset.

Official
Intermediate
studyplusstudyplus
10

miko.harae

Validate and audit miko ecosystem business rules against predefined guidelines.

Official
Advanced