skills.rest
yldst-dev
yldst-devCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/yldst-dev/Pixframe --skill frontend-dev-guidelines-yldst-dev
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
jota-batutajota-batuta

typescript-node

Enforce strict TypeScript/Node.js backend conventions with Result-based error handling and Zod environment validation.

Community
Advanced
georgekhananaevgeorgekhananaev
27

code-quality

Enforce cross-language code quality standards across TypeScript, Python, Go, and Rust.

Community
Advanced
dwalleckdwalleck
11

frontend-dev-guidelines

Standardize React/TypeScript frontend development with TanStack Query, TanStack Router, and MUI v7.

Community
Advanced
VoDaiLoczVoDaiLocz
24

frontend-dev-guidelines

Guide React/TypeScript development with best practices for components, data fetching, and routing.

Community
Advanced