skills.rest
Tgoldi
TgoldiCOMMUNITY
Explore all skills by this author →
GitHub

frontend-engineer

Implements React and TypeScript frontend code using Suspense, TanStack Query, and MUI v7 patterns.

1|Updated May 10, 2026
Search Tags:#typescript#suspense#frontend#react#lazy loading#mui#tanstack query
One-click install
npx skills add https://github.com/Tgoldi/claude-skills --skill frontend-engineer-tgoldi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/Tgoldi/claude-skills/tree/main/frontend-engineer
Command: npx skills add https://github.com/Tgoldi/claude-skills --skill frontend-engineer-tgoldi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend codebases often become inconsistent when components, data fetching, styling, and routing follow ad-hoc patterns. This Skill enforces a unified set of React/TypeScript conventions so every component, feature, and route follows the same structure and performance practices. ## Core Features & Use Cases - Component Patterns: Standardizes React.FC typing, lazy loading with React.lazy, SuspenseLoader boundaries, and useCallback for handlers passed to children. - Data Fetching & Routing: Establishes useSuspenseQuery as the primary fetching pattern with feature-based API service layers, plus TanStack Router folder-based routes with lazy-loaded pages. - File Organization & Styling: Defines the features/ directory structure (api/, components/, hooks/, helpers/, types/), import aliases (@/, ~types, ~components, ~features), and MUI v7 sx-prop styling rules. - Use Case: When asked to build a new dashboard page, the Skill scaffolds the feature directory, creates the API service file, wires up a lazy-loaded route with breadcrumb data, and fetches data via useSuspenseQuery without early-return loading spinners. ## Quick Start Ask the assistant to create a new React feature or component following the frontend-engineer guidelines, for example to build a user profile page with Suspense-based data fetching and MUI styling.

Frequently Asked Questions about frontend-engineer

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

FAQPage Schema
How do I fetch data in React with useSuspenseQuery?▼

Use useSuspenseQuery from TanStack Query inside a component wrapped in a Suspense boundary. Pass a queryKey and queryFn that calls your feature API service, and the component renders only after data resolves, eliminating isLoading checks.

How should I organize React feature folders?▼

Create a features/{feature-name}/ directory with api/, components/, hooks/, helpers/, and types/ subdirectories. Put the API service in api/{feature}Api.ts, define TypeScript types in types/, and export the public API from the feature index file.

When should I use React.lazy and Suspense for components?▼

Lazy load heavy components such as DataGrids, charts, editors, and route pages using React.lazy with dynamic imports. Always wrap them in a Suspense boundary with a loader component instead of returning early with loading spinners.

Why avoid early returns with loading spinners in React?▼

Early returns with loading spinners cause Cumulative Layout Shift because the component tree unmounts and remounts when data arrives. Suspense boundaries keep layout consistent and provide a better user experience.

Does MUI v7 Grid use a different syntax than older versions?▼

Yes, MUI v7 Grid uses the size prop, such as size={{ xs: 12, md: 6 }}, instead of the old xs and md boolean-style props. Style components with the sx prop typed as SxProps<Theme> for theme access.

When should component styles go in a separate file?▼

Keep styles inline as a Record<string, SxProps<Theme>> when under 100 lines. Move them to a separate .styles.ts file when they exceed 100 lines to keep component files readable.

Related Skills

Explore More Software Engineering Skills→
chef0111chef0111
1

frontend-development

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

Community
Advanced
TheCardGoatTheCardGoat
14

source-command-review-pr-comments

Resolve unanswered GitHub pull request review comments and run tests.

Official
Intermediate
Lucien-1127Lucien-1127

runtime-api-verification

Validates frontend-backend API data pipelines by comparing curl responses against TypeScript types.

Community
Intermediate
Fabric-ProFabric-Pro
3

nextjs-server-components

Implements React Server Components patterns in Next.js App Router applications.

Official
Basic