frontend-dev-guidelines

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

1|1|Updated Sep 12, 2025

Search Tags:#typescript #architecture #performance #frontend #react #guidelines

Ready to run

npx skills add https://github.com/yldst-dev/Pixframe --skill frontend-dev-guidelines-yldst-dev

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/yldst-dev/Pixframe/tree/main/.skills/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/yldst-dev/Pixframe --skill frontend-dev-guidelines-yldst-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enforces a strict, opinionated set of frontend development standards to ensure consistency, maintainability, and performance in modern React + TypeScript applications.

Core Features & Use Cases

Architectural Enforcement: Guides development with Suspense-first data fetching, feature-based organization, and strict TypeScript.
Performance Optimization: Provides clear guidelines on lazy loading, memoization, and avoiding common performance pitfalls.
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. This Skill provides a comprehensive reference.

Quick Start

Follow the frontend development guidelines when creating a new React component.

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

Best practices for structuring modern React applications involve adopting a feature-based architecture, enforcing strict TypeScript, and organizing code around domain capabilities to ensure scalable and maintainable codebases.

How do I implement Suspense-first data fetching in React?▼

Implement Suspense-first data fetching by configuring data layers to suspend component rendering until data resolves, ensuring predictable loading states and avoiding waterfall requests in modern React applications.

What's the best way to optimize performance and enable lazy loading in React?▼

Optimize React performance by applying component lazy loading, strategic memoization, and avoiding common rendering pitfalls to maintain fast, responsive frontend applications.

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

Yes, these frontend development guidelines specifically support MUI v7 styling and TanStack Router, providing opinionated standards for integrating these tools into scalable React applications.

Why use strict TypeScript practices in React projects?▼

Strict TypeScript practices in React projects enforce type safety, catch errors at compile time, and ensure predictable data flows, resulting in maintainable and reliable frontend codebases.