expert-react-frontend-developer

Scaffold React 18+ and TypeScript features with Clean Architecture and validation.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/phungkhactubg/ai-dlc-demo --skill expert-react-frontend-developer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: expert-react-frontend-developer
Source: https://github.com/phungkhactubg/ai-dlc-demo/tree/main/.github/skills/expert-react-frontend-developer
Command: npx skills add https://github.com/phungkhactubg/ai-dlc-demo --skill expert-react-frontend-developer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pypdf, pdfplumber, pdf2image, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive framework and set of best practices for developing React 18+ and TypeScript frontend applications, ensuring maintainability, performance, and adherence to architectural standards.

Core Features & Use Cases

  • Architectural Guidance: Enforces Clean Architecture and Feature-Sliced Design principles.
  • Best Practice Enforcement: Implements strict TypeScript usage, Zod validation, and performance optimization techniques.
  • Developer Tooling: Integrates utility scripts for scaffolding, validation, and API contract generation.
  • Use Case: A new feature needs to be developed within the apps/frontend codebase. This Skill ensures the feature is built according to the established "Golden Standard," maintaining consistency and quality across the entire application.

Quick Start

Use the expert-react-frontend-developer skill to scaffold a new feature module named 'user-profile' within the 'apps/frontend/src' directory.

Frequently Asked Questions about expert-react-frontend-developer

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

FAQPage Schema
How do I enforce Clean Architecture and Feature-Sliced Design in a React 18+ and TypeScript project?

To enforce Clean Architecture and Feature-Sliced Design in React and TypeScript, this framework provides expert guidance and scaffolding scripts to ensure new feature modules within the apps/frontend directory maintain strict architectural boundaries and consistency.

What is the best way to scaffold a new React feature module while maintaining architectural standards?

The best way to scaffold a React feature module is using dedicated utility scripts that generate the directory structure, such as creating a 'user-profile' module within apps/frontend/src, ensuring automatic alignment with the Golden Standard.

How do I set up strict TypeScript usage and Zod validation for React frontend applications?

You can set up strict TypeScript usage and Zod validation by applying integrated best practice enforcement and validation scripts, which ensure type safety and schema validation across the React frontend codebase during development.

Does this React frontend development approach include API contract generation?

Yes, this React frontend development approach includes developer tooling with utility scripts specifically designed for API contract generation, ensuring validated data structures and seamless integration between the frontend and backend services.

Can I use this framework to improve performance and maintainability for existing React 18+ features?

Yes, you can use this framework to improve performance and maintainability for existing React 18+ features by applying its performance optimization techniques, strict TypeScript checks, and architectural validation rules to refactor code.

When should I not use Feature-Sliced Design for my frontend architecture?

You should avoid Feature-Sliced Design for small-scale frontend applications where the architectural overhead of strict layer separation and scaffolding exceeds the maintainability benefits required for the project.