skills.rest
2good4me
2good4meCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Provides React and TypeScript frontend development guidelines and best practices.

Updated Feb 1, 2026
Search Tags:#typescript#best practices#performance#frontend#react#styling#guidelines
One-click install
npx skills add https://github.com/2good4me/JobNow --skill frontend-dev-guidelines-2good4me
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/2good4me/JobNow/tree/main/.agents/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/2good4me/JobNow --skill frontend-dev-guidelines-2good4me

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of modern frontend development guidelines and patterns to ensure consistency, maintainability, and performance in React/TypeScript applications.

Core Features & Use Cases

  • Modern Patterns: Implements best practices like Suspense, lazy loading, and optimized data fetching.
  • Code Organization: Enforces feature-based directory structures and clear import aliases.
  • Use Case: When starting a new React component, page, or feature, consult this Skill for guidance on structure, data fetching, styling, and routing to ensure adherence to project standards.

Quick Start

Use the frontend-dev-guidelines skill to create a new React component following the recommended structure and patterns.

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 React and TypeScript frontend development?▼

Modern React performance optimization uses Suspense, lazy loading, and useSuspenseQuery for data fetching to ensure consistent, maintainable, and high-performance application rendering.

How do I organize a React project using features directories?▼

Organizing React projects with features directories involves grouping components, pages, and data fetching logic by feature, utilizing clear import aliases to maintain a consistent and maintainable project structure.

How do I implement data fetching with useSuspenseQuery in React?▼

Implementing data fetching with useSuspenseQuery in React utilizes Suspense boundaries to handle asynchronous loading states, providing a modern pattern for fetching data while maintaining performance and consistency.

Can I use MUI v7 and TanStack Router together in a TypeScript app?▼

Yes, you can use MUI v7 for styling and TanStack Router for routing within a TypeScript application, following established frontend guidelines to ensure consistent development across components and pages.

When should I use lazy loading and Suspense in React applications?▼

Lazy loading and Suspense should be used in React applications to optimize performance by deferring component rendering and data fetching until necessary, preventing blocking the main application bundle.

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
xkazm04xkazm04

build-review

Run build and test pipelines and fix detected failures in monorepos.

Community
Advanced
msichtermanmsichterman

vercel-react-best-practices

Enforce React and Next.js performance best practices for components, data fetching, routing, and bundling.

Community
Advanced
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate