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.