skills.rest
SKANL
SKANLCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/SKANL/saas-abogados-nextjs --skill frontend-engineer-skanl
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
aidenreed937aidenreed937

comet-scaffold

Create standardized React Native project scaffolds via CLI and comet.yaml configuration.

Community
Advanced
KrishnatejavepaKrishnatejavepa
14

frontend-ui-engineering

Construct production-quality UI components with accessibility and responsive design standards.

Community
Advanced
trungdo9trungdo9
3

frontend-development

Guide React frontend development with TypeScript, MUI, and TanStack Query.

Community
Intermediate
DatTran26DatTran26

ck:frontend-development

Standardizes modern React/TypeScript frontend development with TanStack Router and MUI v7 styling.

Community
Advanced