skills.rest
MediaAskeyDOJO
MediaAskeyDOJOCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Enforce React and TypeScript frontend standards with Suspense-first data fetching.

Updated Aug 27, 2026
Search Tags:#typescript#architecture#performance#frontend#react#guidelines
One-click install
npx skills add https://github.com/MediaAskeyDOJO/sakuteki-site --skill frontend-dev-guidelines-mediaaskeydojo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/MediaAskeyDOJO/sakuteki-site/tree/main/.skills/source/frontend-dev-guidelines
Command: npx skills add https://github.com/MediaAskeyDOJO/sakuteki-site --skill frontend-dev-guidelines-mediaaskeydojo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enforces opinionated standards for building scalable, predictable, and maintainable React applications, ensuring consistency and quality across frontend development.

Core Features & Use Cases

  • Architectural Enforcement: Guides developers on Suspense-first data fetching, feature-based organization, and strict TypeScript.
  • Performance Optimization: Provides guidelines for lazy loading, memoization, and performance-safe defaults.
  • Use Case: A new developer joins a React project and needs to understand the established best practices for creating components, fetching data, and structuring code to maintain high standards and prevent common pitfalls.

Quick Start

Follow the New Component Checklist to ensure your component adheres to all frontend development standards.

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 scalable React and TypeScript application?▼

Suspense-first data fetching in React involves using Suspense boundaries to manage loading states during asynchronous requests. This strategy provides performance-safe defaults and predictable UI fallbacks while data loads.

How do I optimize React performance with lazy loading and memoization?▼

Optimize React performance by applying lazy loading for components and memoization for expensive renders. These guidelines enforce performance-safe defaults to prevent common frontend bottlenecks and maintain high UI responsiveness.

Can I use MUI v7 and TanStack Router for modern React frontend development?▼

Yes, modern React frontend development can utilize MUI v7 for styling and TanStack Router for navigation. These tools integrate seamlessly within an opinionated, feature-based architecture to build performant user interfaces.

How do I ensure a new React component follows strict frontend development standards?▼

To ensure a new React component follows frontend development standards, use a New Component Checklist. This verifies adherence to strict TypeScript, performance optimization, and architectural guidelines before integration.

Related Skills

Explore More Software Engineering Skills→
Thanh-aperoThanh-apero
1

ck:frontend-development

Guide React/TypeScript frontend development with Suspense, lazy loading, and MUI v7.

Community
Advanced
botPhUbotPhU

nextjs-expert

Diagnose and fix Next.js App Router routing, hydration, and performance issues.

Community
Advanced
hungtrandigitalhungtrandigital

frontend-dev-guidelines

Guide React/TypeScript frontend architecture with TanStack Query, Router, and MUI v7.

Community
Intermediate
levanminhduclevanminhduc

nextjs

Guide Next.js v15+ app development with App Router and Server Components.

Community
Intermediate