skills.rest
arthrod
arthrodCOMMUNITY
Explore all skills by this author →
GitHub

react

Enforce React Compiler memoization and Tailwind v4 styling conventions.

Updated Jul 18, 2026
Search Tags:#typescript#frontend#react#optimization#tailwind#compiler
One-click install
npx skills add https://github.com/arthrod/conejo-skills --skill react-arthrod
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/arthrod/conejo-skills/tree/main/skills/react
Command: npx skills add https://github.com/arthrod/conejo-skills --skill react-arthrod

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill eliminates common React anti-patterns, such as unnecessary manual memoization and improper Effect usage, ensuring your codebase remains clean, performant, and aligned with modern compiler-optimized standards.

Core Features & Use Cases

  • Compiler-First Development: Leverages React Compiler to handle memoization automatically, removing the need for manual useMemo or useCallback.
  • Tailwind v4 Integration: Provides strict syntax rules for the latest Tailwind version, including CSS variable usage and descendant selectors.
  • State Management: Enforces clean data attribute styling (data-slot, data-state) and pure rendering logic to prevent common state-synchronization bugs.

Quick Start

Apply the react skill guidelines to refactor the current component by removing manual memoization and implementing data-slot patterns for styling.

Frequently Asked Questions about react

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

FAQPage Schema
How do I remove manual useMemo and useCallback when optimizing React components?▼

React compiler-first optimization eliminates manual memoization by automatically handling useMemo and useCallback, ensuring pure rendering principles and high-performance component composition without boilerplate code.

What is the correct way to use data attributes for Tailwind v4 styling in React?▼

Tailwind v4 integration enforces strict syntax rules using data-slot and data-state attributes for descendant selectors and CSS variable usage, replacing manual style synchronization with pure rendering logic.

How do I prevent state synchronization bugs in React Effect usage?▼

Proper Effect synchronization patterns enforce pure rendering logic and data-attribute-based styling to prevent common state-synchronization bugs and eliminate improper Effect usage in modern React.

Does the React Compiler work with TypeScript and Tailwind v4?▼

Yes, compiler-first development leverages the React Compiler alongside strict Tailwind v4 styling conventions and TypeScript, standardizing UI component architecture for high-performance rendering workflows.

Why does my React component architecture need compiler-optimized memoization?▼

Compiler-optimized memoization standardizes React component architecture by enforcing pure rendering principles, eliminating unnecessary manual memoization and improper Effect usage for maintainable composition.

What are the limitations of using data-attribute-based styling in React?▼

Data-attribute-based styling requires strict adherence to pure rendering principles and Tailwind v4 syntax conventions, meaning developers must abandon manual memoization and legacy style synchronization patterns entirely.

Related Skills

Explore More Software Engineering Skills→
crozzbitecrozzbite

react-19

Provide React 19 component patterns using the React Compiler without manual memoization.

Community
Intermediate
timequitytimequity
6

react-native-expert

Standardize React Native navigation, state management, and performance optimization.

Official
Advanced
elab-developmentelab-development

tailwindcss-development

Automate web interface styling with Tailwind CSS v4 utilities.

Official
Intermediate
CodenburgCodenburg

react-19

Optimize React 19 components using the React Compiler without manual memoization.

Community
Intermediate