frontend-engineer

Name: frontend-engineer
Availability: InStock
Author: tkmh04

Enforce modern React/TypeScript patterns and feature-based project organization.

Updated Mar 24, 2026

Search Tags:#typescript #suspense #frontend #react #routing #design-patterns #lazy-loading

Ready to run

npx skills add https://github.com/tkmh04/CoffeeHouse-Management-System --skill frontend-engineer-tkmh04

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/tkmh04/CoffeeHouse-Management-System/tree/main/.agents/skills/frontend-engineer
Command: npx skills add https://github.com/tkmh04/CoffeeHouse-Management-System --skill frontend-engineer-tkmh04

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of frontend engineering guidelines to help teams build scalable, maintainable React and TypeScript applications with modern patterns and best practices.

Core Features & Use Cases

Consistent architecture: feature-based organization and file layouts.
Modern patterns: suspense-based data fetching, lazy loading, and robust routing.
Quality standards: TypeScript-first approach, strict typing, and reusable components.

Quick Start

Create a new component following the guidelines and organize code under a features-based directory.

Frequently Asked Questions about frontend-engineer

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

FAQPage Schema

How do I structure a React and TypeScript frontend for maintainability?▼

Structure your React and TypeScript frontend using feature-based directory organization to improve maintainability. This pattern groups components, pages, and data fetching logic by feature, ensuring modular codebases and scalable project organization across your application.

What is the best way to implement data fetching in a modern React application?▼

The best way to implement data fetching in modern React is using Suspense-based patterns. This approach enforces modern frontend best practices, handling asynchronous data loading states declaratively while maintaining strict TypeScript typing standards.

How does lazy loading work with React routing?▼

Lazy loading in React routing works by deferring component loading until they are needed, improving performance. Combined with Suspense, this modern pattern ensures robust routing and efficient resource loading within your modular feature-based codebase.

Can I use strict TypeScript standards with feature-based React architectures?▼

Yes, you can apply strict TypeScript standards within a feature-based React architecture. This approach enforces strict typing and reusable components, ensuring quality standards and consistent architecture across all features, pages, and components in your project.

Why should I use feature-based directories instead of component-type folders?▼

You should use feature-based directories instead of component-type folders to improve maintainability and scalability. Feature-based organization groups related routing, data fetching, and styling together, creating modular codebases that enforce modern React and TypeScript best practices.