skills.rest
Rok2025
Rok2025COMMUNITY
Explore all skills by this author →
𝕏@zhangrf0GitHub

frontend-dev-guidelines

Enforces React and TypeScript frontend development standards including Suspense-first data fetching and TanStack Router routing.

Updated Feb 4, 2026
Search Tags:#typescript#architecture#best practices#performance#suspense#frontend#react
One-click install
npx skills add https://github.com/Rok2025/life-ops --skill frontend-dev-guidelines-rok2025
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/Rok2025/life-ops/tree/main/.agents/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/Rok2025/life-ops --skill frontend-dev-guidelines-rok2025

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 code quality, maintainability, and performance in modern React + TypeScript applications.

Core Features & Use Cases

  • Architectural Enforcement: Ensures adherence to Suspense-first data fetching, feature-based organization, and strict TypeScript.
  • Performance Guardrails: Provides guidelines for lazy loading, memoization, and error handling to prevent performance regressions.
  • Use Case: A new developer joins a project and needs to understand the established best practices for creating components, fetching data, and structuring code. This Skill acts as their definitive guide.

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 is the best way to structure a scalable React and TypeScript application?▼

A scalable React and TypeScript application should use a feature-based architecture, organizing code by domain rather than file type. This approach enforces strict component structure and maintainability standards.

How do I implement data fetching in React using Suspense?▼

To implement data fetching in React using Suspense, adopt a Suspense-first pattern where components suspend while waiting for asynchronous data. This ensures strict architectural enforcement and prevents waterfall loading issues.

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

Yes, this frontend development approach explicitly supports routing with TanStack Router and styling with MUI v7. These integrations provide guardrails for component structure and styling discipline.

How do I optimize React performance and prevent regressions?▼

Optimize React performance by applying strict guardrails for lazy loading and component memoization. Proper error handling and Suspense-first data fetching also prevent common performance regressions.

What TypeScript discipline is required for modern React development?▼

Modern React development requires strict TypeScript discipline to enforce type safety and maintainability. This prevents runtime errors and ensures code quality across feature-based architectural components.

Related Skills

Explore More Software Engineering Skills→
QvvvvvvQQvvvvvvQ
25

webapp-building

Automates React web application initialization with TypeScript, Vite, Tailwind CSS, and shadcn/ui.

Community
Intermediate
protofireprotofire
3

protofire-qa-agent

Audit smart contracts with Slither, Echidna, and Foundry fuzz testing.

Official
Advanced
chef0111chef0111
1

frontend-development

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

Community
Advanced
CsHengCsHeng
10

development-standards

Define development standards for naming, structure, and code quality across languages.

Community
Advanced