skills.rest
zircote
zircoteCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-dev-guidelines

Standardize React/TypeScript frontend development with Suspense-based data fetching and feature-based structure.

3|Updated Jan 17, 2026
Search Tags:#typescript#suspense#frontend#react#routing#styling#lazy-loading
One-click install
npx skills add https://github.com/zircote/agents --skill frontend-dev-guidelines-zircote
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/zircote/agents/tree/main/skills/frontend-development
Command: npx skills add https://github.com/zircote/agents --skill frontend-dev-guidelines-zircote

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend development guidelines for React/TypeScript projects, establishing a cohesive set of best practices to improve velocity, quality, and maintainability across teams.

Core Features & Use Cases

  • Patterns for Suspense-based data fetching, lazy loading, and code-splitting with React components and TanStack Router.
  • File organization around a features directory and reusable components to enable scalable growth.
  • Styling with MUI v7 sx-based approach and TypeScript-first practices for reliable typings.

Quick Start

Start every new React/TypeScript feature by applying the frontend guidelines to ensure consistency and quality.

Frequently Asked Questions about frontend-dev-guidelines

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

FAQPage Schema
What are the best practices for structuring a React and TypeScript project?▼

React and TypeScript projects should use a feature-based directory structure with reusable components. This organization separates features and shared UI elements to enable scalable growth and maintain consistent architecture across teams.

How do I implement Suspense-based data fetching with React?▼

Suspense-based data fetching in React is implemented by applying standardized patterns for lazy loading and code-splitting. Combined with TanStack Router, this approach ensures consistent component lifecycles and reliable data handling across new features.

Does this frontend development approach work with TanStack Router and MUI v7?▼

Yes, this frontend development approach supports TanStack Router for routing and MUI v7 for styling. It enforces an sx-based styling approach alongside TypeScript-first practices to ensure reliable typings and cohesive UI architecture.

How do I standardize frontend coding patterns across multiple React projects?▼

Standardize frontend coding patterns across React projects by enforcing requirements for Suspense data fetching, feature-based directory structures, MUI v7 styling, and TypeScript best practices. This unifies modern patterns for faster, maintainable development.

When do I need to use lazy loading and code-splitting in React applications?▼

Lazy loading and code-splitting in React applications are needed when implementing Suspense-based data fetching patterns and routing with TanStack Router. These techniques optimize performance during the component lifecycle and ongoing frontend code maintenance.

Related Skills

Explore More Software Engineering Skills→
Jeff-StapletonJeff-Stapleton
1

microfrontend-nx

Standardize microfrontend development in NX monorepos with Module Federation.

Community
Advanced
futureteafuturetea

Vite Configuration

Generate typed Vite configs for React and TypeScript projects.

Community
Advanced
chef0111chef0111
1

frontend-development

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

Community
Advanced
jlawsjlaws
2

cmd-frontend-frontend

Diagnose frontend project setups for UI components across React, Next.js, and Svelte.

Community
Intermediate