react-engineer

Implements React components and app logic from behavioral specifications using strict TypeScript and Next.js App Router conventions.

Updated Jun 24, 2026
One-click install
npx skills add https://github.com/mostafa-ismail-2004/codex-plugin --skill react-engineer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-engineer
Source: https://github.com/mostafa-ismail-2004/codex-plugin/tree/main/skills/react-engineer
Command: npx skills add https://github.com/mostafa-ismail-2004/codex-plugin --skill react-engineer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns behavioral requirements into production-ready React implementations, reducing guesswork and helping you ship clean, type-safe UI code with confidence.

Core Features & Use Cases

  • React and Next.js implementation: Builds new components, pages, and application logic using App Router conventions, strict TypeScript, and Tailwind CSS.
  • Refactoring and enhancement: Improves existing React code for readability, performance, correctness, and maintainability.
  • Verification-driven delivery: Guides local linting, type-checking, and testing so implementation is validated before handoff.
  • Use Case: A product spec describes a dashboard with loading, empty, and error states; this Skill translates it into a typed Next.js component tree and verifies it locally.

Quick Start

Implement the React component from this specification, following strict TypeScript and Next.js App Router conventions, then verify it locally before delivering the code.

Frequently Asked Questions about react-engineer

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

FAQPage Schema
How do I generate production-ready React components from behavioral specifications?

You can generate production-ready React components from behavioral specifications by translating requirements into a typed Next.js component tree using strict TypeScript, App Router conventions, and Tailwind CSS.

Can I refactor existing Next.js frontend code to improve performance and maintainability?

Yes, you can refactor existing Next.js frontend code to improve performance, readability, and maintainability while ensuring correctness through local linting, type-checking, and testing.

What's the best way to implement loading, empty, and error states in a Next.js App Router component?

The best way to implement these states in a Next.js App Router component is to build a typed component tree from the product spec, applying strict TypeScript and Tailwind CSS for styling.

Does this approach require strict TypeScript and Tailwind CSS for React feature implementation?

Yes, this approach requires strict TypeScript and Tailwind CSS for React feature implementation, applying App Router conventions and optional local verification to ensure production-grade delivery.

How do I verify React application logic and state management locally before delivery?

You verify React application logic and state management locally by executing lint, type-check, and test commands, ensuring the implementation is validated before handoff.

What is the process for extending a React component with data fetching and accessibility support?

The process for extending a React component involves implementing data fetching and accessibility features using App Router conventions and strict TypeScript, then verifying the code locally.