skills.rest
kagenti
kagentiOFFICIAL
Explore all skills by this author →
GitHub

react-ui-engineering

Standardize React and TypeScript UI coding practices for reviews and refactors.

Updated Aug 27, 2026
Search Tags:#typescript#frontend#react#best-practices#coding-standards#ui-engineering
One-click install
npx skills add https://github.com/kagenti/humr --skill react-ui-engineering
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-ui-engineering
Source: https://github.com/kagenti/humr/tree/main/.agents/skills/react-ui-engineering
Command: npx skills add https://github.com/kagenti/humr --skill react-ui-engineering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a formal rulebook to standardize how React + TypeScript UI code is written, reviewed, and evolved, ensuring consistency, readability, and maintainability across UI projects.

Core Features & Use Cases

  • Clear principles for component design, state organization, and styling.
  • Enforced naming, boundaries, and type-safety at module boundaries.
  • Useful for reviews, onboarding, and UI migrations to reduce drift and improve maintainability.

Quick Start

Review a component or hook in your codebase and apply the documented patterns to improve structure, readability, and safety.

Frequently Asked Questions about react-ui-engineering

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

FAQPage Schema
What are the best practices for standardizing React and TypeScript UI code?▼

Standardizing React and TypeScript UI code involves enforcing naming conventions, file structure, and type-safety at module boundaries. This ensures consistency across component design, hooks, and styling decisions, directly improving code readability and maintainability.

How do I review and refactor React components for better type safety?▼

To review and refactor React components for type safety, apply formal rules for TypeScript typing discipline and module boundaries. This process enforces strict type checks and structural consistency, reducing runtime errors and improving code reliability.

Does this React UI engineering approach work with RHF and Zod for form validation?▼

Yes, this React UI engineering approach explicitly integrates React Hook Form (RHF) and Zod for form validation. Enforcing this combination standardizes form handling and ensures robust type-safe data validation across your UI projects.

Can I use these React TypeScript coding standards with Tailwind CSS styling?▼

Yes, these React TypeScript coding standards are designed to work with Tailwind-based styling. The standardization enforces Tailwind usage for styling decisions, ensuring consistent visual design and maintainable component architecture across your UI.

When do I need formal coding standards for a React TypeScript project?▼

You need formal coding standards for a React TypeScript project during onboarding, code reviews, or UI migrations. Applying a formal rulebook reduces code drift, standardizes state organization, and ensures consistent component design across multiple developers.

Related Skills

Explore More Software Engineering Skills→
ThrookieThrookie
2

coding-standards

Establish coding standards for TypeScript, JavaScript, React, and Node.js projects.

Community
Intermediate
tan-yong-shengtan-yong-sheng
1

coding-standards

Defines coding standards for TypeScript, JavaScript, React, and Node.js projects via linting and code reviews.

Community
Advanced
HeyvhuangHeyvhuang
339

workflow-template-extractor

Copy a real project into templates/NNN-slug/ with de-branding and environment examples.

Community
Intermediate
rsnormanrsnorman

quality-check

Run ESLint, Prettier, and TypeScript type checks on code.

Community
Intermediate