interface-review

Assess web interface implementations across interactivity, typography, motion, touch, performance, accessibility, and UX.

8|1|Updated Dec 28, 2018
One-click install
npx skills add https://github.com/hiro0218/b.0218.jp --skill interface-review
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: interface-review
Source: https://github.com/hiro0218/b.0218.jp/tree/main/.claude/skills/interface-review
Command: npx skills add https://github.com/hiro0218/b.0218.jp --skill interface-review

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill reviews web interfaces for interactivity, typography, motion, touch, performance, accessibility, and UX design, ensuring they are usable, accessible, and performant.

Core Features & Use Cases

  • Interactivity: checks for proper form markup, focus management, and prevention of double submissions.
  • Typography & Motion: ensures readable typography and non-intrusive motion.
  • Accessibility: validates ARIA labels, keyboard navigation, and focus visibility.
  • UX & Design Principles: aligns UI with UX psychology guidelines.
  • Use Case: Review Button.tsx for accessible labeling and responsive interactions.

Quick Start

Review a UI component file, e.g., "src/components/UI/Button/Button.tsx", for accessibility and UX best practices.

Frequently Asked Questions about interface-review

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

FAQPage Schema
How do I review a web interface for accessibility and usability?

Interface review assesses web components across seven dimensions: interactivity, typography, motion, touch support, performance, accessibility, and UX design. It validates ARIA labels, keyboard navigation, focus visibility, form markup, and alignment with UX psychology principles to ensure usable and accessible implementations.

What accessibility checks should I apply to UI components?

Accessibility review validates ARIA labels, keyboard navigation, focus visibility, and focus management in form controls. It prevents double submissions, ensures proper semantic markup, and confirms that interactive elements are keyboard-accessible and screen-reader compatible.

How do I ensure typography and motion enhance usability?

Typography review checks readability, contrast, and hierarchy; motion review ensures animations are non-intrusive and purposeful. Both assess whether they support user intent and conform to accessibility standards rather than creating cognitive or visual barriers.

Can I review UI components for touch device support and performance?

Yes. Touch review evaluates target sizes, gesture responsiveness, and tap affordances for mobile and tablet devices. Performance review checks rendering efficiency, load times, and optimization to ensure the interface remains responsive across devices and network conditions.

What UX principles does an interface review enforce?

The review applies UX psychology principles to design consistency, user mental models, feedback clarity, and error prevention. It ensures UI decisions align with how users perceive and interact with interfaces, improving overall usability and user satisfaction.

Do I need specific tools or frameworks to conduct an interface review?

No specific dependencies are required. You provide a UI component or page file, and the review applies industry best practices and UX psychology criteria across all seven dimensions without requiring external tools or frameworks.