frontend-engineer

Enforce React/TypeScript frontend guidelines for components, data fetching, routing, and styling.

Updated Jan 9, 2026

Search Tags:#typescript #performance #suspense #frontend #react #routing

Ready to run

npx skills add https://github.com/SKANL/saas-abogados-nextjs --skill frontend-engineer-skanl

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/SKANL/saas-abogados-nextjs/tree/main/.agents/skills/frontend-engineer
Command: npx skills add https://github.com/SKANL/saas-abogados-nextjs --skill frontend-engineer-skanl

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 standardize React/TypeScript projects, improving consistency, maintainability, and performance across teams.

Core Features & Use Cases

Suspense-based data fetching patterns and lazy loading for scalable UI components.
Feature-based project organization using a dedicated folders structure to separate concerns.
Routing and styling conventions with TanStack Router and MUI v7 to ensure consistent UX.
Code quality and performance best practices, including type-safe components, incremental loading, and accessible markup.

Quick Start

Use the frontend-engineer skill to scaffold a new React component with Suspense, lazy loading, and TanStack Router integration.

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 project for better maintainability?▼

Structure React projects using feature-based organization to separate concerns into dedicated folders. This approach improves consistency and maintainability across teams by keeping related components, pages, and data fetching logic grouped together.

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

Implement data fetching in modern React apps using Suspense-based patterns and lazy loading. This enforces scalable UI components, incremental loading, and consistent UX across your TypeScript application architecture.

How do I set up routing with TanStack Router in a TypeScript project?▼

Set up TanStack Router by following specific routing conventions designed for React and TypeScript projects. This ensures type-safe routing integration and consistent user experiences across modern React application architectures.

Does this React frontend guideline support MUI v7 styling conventions?▼

Yes, these React frontend guidelines support MUI v7 styling conventions. They provide specific rules to ensure consistent UX, type-safe components, and accessible markup across your application's user interface layers.

How do I scaffold a new React component with Suspense and lazy loading?▼

Scaffold new React components with Suspense and lazy loading by applying the provided frontend engineering guidelines. This quickly establishes scalable UI components integrated with TanStack Router and TypeScript best practices.