userinterface-wiki

Analyze web interfaces against structured UI/UX rules for motion, accessibility, typography, and visual design.

1|Updated Jul 13, 2026
One-click install
npx skills add https://github.com/vh2224/forge-executor --skill userinterface-wiki-vh2224
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: userinterface-wiki
Source: https://github.com/vh2224/forge-executor/tree/main/src/resources/skills/userinterface-wiki
Command: npx skills add https://github.com/vh2224/forge-executor --skill userinterface-wiki-vh2224

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you evaluate and improve web user interfaces by applying a large, organized set of UI/UX rules for motion, typography, spacing, accessibility, and visual polish. It is designed to catch subtle quality issues that make interfaces feel awkward, inconsistent, or hard to use.

Core Features & Use Cases

  • Animation Review: Checks motion timing, easing, springs, exit animations, and container transitions for natural behavior.
  • UI Quality Review: Flags common visual and interaction issues such as weak hit targets, poor contrast, inconsistent spacing, and overuse of animation.
  • Accessibility and Typography Guidance: Covers reduced-motion support, sound accessibility, numeric alignment, font rendering, and other overlooked interface details.
  • Use Case: A frontend engineer can use this Skill to review a React or CSS implementation and identify line-level UI issues before shipping.

Quick Start

Ask for a UI review of your component or stylesheet and specify the interaction, motion, typography, or accessibility concerns you want checked.

Frequently Asked Questions about userinterface-wiki

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

FAQPage Schema
How do I review my React component for UI and accessibility issues?▼

UI review for frontend code evaluates implementations against structured UI/UX rules covering motion, typography, accessibility, and visual polish. It provides line-level findings and best-practice recommendations to catch inconsistent spacing, weak hit targets, and poor contrast in React and CSS code.

What is the best way to validate CSS animation timing and easing?▼

Animation review checks motion timing, easing, springs, exit animations, and container transitions for natural behavior. It validates frontend code against structured UI rules to identify line-level issues and provides best-practice recommendations for motion patterns.

Can I check my interface for reduced-motion and typography support?▼

Yes, accessibility and typography guidance covers reduced-motion support, sound accessibility, numeric alignment, and font rendering. The UI review checks frontend code against structured rules to identify overlooked interface details and provides best-practice recommendations for compliance.

Does this UI review work for both CSS and React implementations?▼

Yes, UI review applies to frontend code review across CSS and React implementations. It analyzes interfaces against a structured UI/UX rule set covering motion, accessibility, typography, and visual design to identify line-level findings and provide best-practice recommendations.

How do I identify weak hit targets and inconsistent spacing in my interface?▼

UI quality review flags common visual and interaction issues such as weak hit targets, poor contrast, inconsistent spacing, and overuse of animation. It applies structured UI/UX rules to frontend code and provides line-level findings and best-practice recommendations for interface refinement.

What are the limitations of deterministic UI evaluation for web interfaces?▼

Deterministic UI evaluation focuses on applying structured UI/UX rules for motion, typography, accessibility, and visual design to frontend code. It provides line-level findings and best-practice recommendations but does not replace subjective visual design preferences or user testing feedback.