skills.rest
TheBoomerDev
TheBoomerDevCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-engineer

Enforce React/TypeScript patterns for components, pages, features, data fetching, styling, and routing.

Updated Aug 27, 2026
Search Tags:#typescript#suspense#frontend#react#routing#patterns
One-click install
npx skills add https://github.com/TheBoomerDev/feedback_proyect --skill frontend-engineer-theboomerdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/TheBoomerDev/feedback_proyect/tree/main/.agents/skills/frontend-engineer
Command: npx skills add https://github.com/TheBoomerDev/feedback_proyect --skill frontend-engineer-theboomerdev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend engineering guidelines that codify modern React/TypeScript patterns and best practices to ensure scalable, maintainable, and high-performance UI code across components, pages, and features.

Core Features & Use Cases

  • Standardized component architecture with feature-based organization
  • Suspense-based data fetching, lazy loading, and useSuspenseQuery
  • TanStack Router-based routing and MUI v7 styling conventions
  • Performance optimization and TypeScript safety across frontend code
  • Use cases include building new components/pages, adding features, styling, routing, and data fetching

Quick Start

Analyze a new frontend feature and implement according to guidelines to ensure consistency and quality.

Frequently Asked Questions about frontend-engineer

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

FAQPage Schema
How do I structure React components for scalable frontend applications?▼

Use feature-based file organization to structure scalable React components. This pattern enforces strict TypeScript typing and standardized architecture across pages and features, ensuring maintainability and reliable UI code as your project grows.

What is the best way to implement data fetching with React Suspense?▼

Implement React Suspense data fetching using the useSuspenseQuery hook. This pattern integrates lazy loading to streamline data retrieval and optimize rendering performance in modern TypeScript UI projects.

How do I set up routing and styling in a modern React TypeScript project?▼

Apply TanStack Router-based routing conventions alongside MUI v7 styling rules to set up routing and styling in a React TypeScript project. This enforces UI consistency and strict type safety across your frontend features.

Can I use these React patterns for adding new features to an existing UI?▼

Yes, you can apply these React patterns when adding new features to an existing UI. The guidelines cover creating components, pages, styling, routing, and data fetching to ensure consistency and quality during feature expansion.

Why does my React frontend need strict TypeScript typing and lazy loading?▼

Your React frontend needs strict TypeScript typing and lazy loading to ensure reliable, scalable code. These patterns enforce type safety across components and optimize rendering performance by deferring resource loading until required.

Related Skills

Explore More Software Engineering Skills→
shafibabarshafibabar
1

react-project-structure

Standardize React and TypeScript project layouts for microfrontend architectures with Vite and Module Federation.

Community
Advanced
chrishuffman5chrishuffman5

webapp-testing

Automate web application testing with Playwright scripts for UI debugging and log analysis.

Community
Intermediate
chef0111chef0111
1

frontend-development

Provide React/TypeScript frontend development guidelines covering components, data fetching, routing, and styling.

Community
Advanced
vuminhieuvuminhieu

frontend-dev-guidelines

Standardize React/TypeScript frontend patterns with Suspense, MUI v7, and TanStack Router.

Community
Advanced