skills.rest
giosuetedeschi-spec
giosuetedeschi-specCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Standardize React and TypeScript patterns in Next.js applications.

Updated Jan 12, 2026
Search Tags:#typescript#frontend#react#nextjs#mui#tanstack-query
One-click install
npx skills add https://github.com/giosuetedeschi-spec/bobu-website --skill frontend-dev-guidelines-giosuetedeschi-spec
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/giosuetedeschi-spec/bobu-website/tree/main/.claude/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/giosuetedeschi-spec/bobu-website --skill frontend-dev-guidelines-giosuetedeschi-spec

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates inconsistency and technical debt in React/TypeScript projects by enforcing modern architectural patterns, performance best practices, and standardized file organization.

Core Features & Use Cases

  • Architectural Standards: Enforces Suspense-based data fetching, lazy loading, and feature-based directory structures.
  • Performance Optimization: Provides clear rules for avoiding layout shifts, implementing memoization, and optimizing component rendering.
  • Use Case: When onboarding a new developer or starting a new feature, use this Skill to ensure the code follows the project's strict requirements for MUI v7 styling, TanStack Query usage, and TypeScript standards.

Quick Start

Apply the frontend development guidelines to the current component to ensure it uses React.FC, SuspenseLoader, and proper import aliases.

Frequently Asked Questions about frontend-dev-guidelines

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

FAQPage Schema
How do I standardize React and TypeScript component creation in Next.js?▼

To standardize React and TypeScript component creation, apply architectural patterns enforcing React.FC usage, strict type safety, and feature-based file organization within your Next.js application architecture.

What is the best way to implement data fetching with TanStack Query in React?▼

The best way to implement TanStack Query data fetching is by utilizing Suspense-based loading patterns alongside lazy loading to ensure architectural consistency and optimize component rendering performance.

How do I avoid layout shifts when loading components with MUI v7?▼

To avoid layout shifts with MUI v7 styling, implement memoization, optimize component rendering, and standardize SuspenseLoader usage to handle asynchronous UI states predictably.

Does this approach enforce strict TypeScript type safety for frontend development?▼

Yes, this approach enforces strict TypeScript type safety by standardizing modern React development patterns, ensuring architectural consistency across component creation and data fetching processes.

Can I use this guideline to onboard developers to a feature-based directory structure?▼

Yes, you can use this guideline to onboard developers to a feature-based directory structure, ensuring new code follows strict requirements for MUI v7 styling and TanStack Query usage.

Related Skills

Explore More Software Engineering Skills→
alfadocsalfadocs

alfadocs-typescript-setup

Enforce strict TypeScript tsconfig.json baselines for Vite-based AlfaDocs/Lovable apps.

Official
Intermediate
joshkellett87joshkellett87

frontend-dev-guidelines

Standardize React and TypeScript frontend development with project conventions.

Community
Advanced
chef0111chef0111
1

frontend-development

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

Community
Advanced
efekrbasefekrbas
41

frontend-dev-guidelines

Standardize React component creation, data fetching, and routing in TypeScript applications.

Community
Advanced