skills.rest
tubone24
tubone24COMMUNITY
Explore all skills by this author →
Website𝕏@tubone24GitHub

UIレビュー

Review React component code for quality, accessibility, and dark mode compliance.

Updated Nov 19, 2025
Search Tags:#code quality#accessibility#frontend#ui review#dark mode#ux
One-click install
npx skills add https://github.com/tubone24/tubone-ui-skills --skill ui-tubone24
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UIレビュー
Source: https://github.com/tubone24/tubone-ui-skills/tree/main/.claude/skills/ui-review
Command: npx skills add https://github.com/tubone24/tubone-ui-skills --skill ui-tubone24

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the need for consistent, high-quality UI code by providing a structured review process that checks for code quality, user experience, accessibility, and dark mode compatibility.

Core Features & Use Cases

  • Code Quality Checks: Ensures code is maintainable, well-typed, and efficient.
  • UX & Accessibility Audits: Verifies intuitive user flows, proper error handling, and WCAG compliance.
  • Dark Mode & Theming: Validates adherence to design system standards for light and dark modes.
  • Use Case: A developer submits a new React component. This Skill analyzes the component's code, checks for accessibility issues like missing ARIA attributes, and ensures it correctly implements dark mode theming according to the FinBro style guide.

Quick Start

Use the UIレビュー skill to review the provided React component code for quality and accessibility.

Frequently Asked Questions about UIレビュー

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

FAQPage Schema
How do I review React component code for accessibility and WCAG compliance?▼

To review React component code for accessibility, this Skill analyzes component code to verify keyboard navigation, ARIA attributes, and color contrast ratios. It ensures intuitive user flows and WCAG compliance by checking semantic HTML structure.

What is the best way to validate dark mode support in frontend UI code?▼

The best way to validate dark mode support is to analyze UI code against design system standards for light and dark themes. This Skill checks theming implementation to ensure correct color contrast and adherence to specific style guidelines like the FinBro design system.

Can I use this UI review process to check component code quality and maintainability?▼

Yes, you can use this UI review process to check component code quality. It verifies maintainability, type safety, and efficiency, ensuring frontend code adheres to best practices for long-term maintainability.

Does this UI code review check keyboard navigation and ARIA attributes?▼

Yes, this UI code review checks keyboard navigation and ARIA attributes. It analyzes component code against best practices to verify proper semantic HTML and ARIA implementation, ensuring accessible user experiences for frontend applications.

How do I ensure my UI components follow the FinBro design system guidelines?▼

To ensure UI components follow the FinBro design system guidelines, this Skill analyzes code against specific checks for FinBro standards. It validates dark mode theming, color contrast ratios, and overall design system compliance during the review.

Related Skills

Explore More Software Engineering Skills→
monch1962monch1962
3

coding-standards

Codify TypeScript, JavaScript, React, and Node.js coding standards for team workflows.

Community
Advanced
HsnSaboorHsnSaboor

ui-design-system

Review and improve React UI components with TailwindCSS, Radix UI, and shadcn/ui.

Community
Advanced
lehuuhau1231lehuuhau1231

lint-and-validate

Run linting and type checking across multiple programming ecosystems.

Community
Intermediate
dylantarredylantarre
38

color-contrast

Validate color combinations against WCAG 2.1 contrast requirements and generate accessible pairings.

Community
Basic