skills.rest
fredpope
fredpopeCOMMUNITY
Explore all skills by this author →
Website𝕏@fred_popeGitHub

frontend-dev-guidelines

Standardizes React/TypeScript frontend architecture with TanStack Router and Suspense-based data fetching.

Updated Jan 24, 2026
Search Tags:#React#frontend#routing#TypeScript#patterns#Suspense
One-click install
npx skills add https://github.com/fredpope/bench --skill frontend-dev-guidelines-fredpope
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/fredpope/bench/tree/main/.claude/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/fredpope/bench --skill frontend-dev-guidelines-fredpope

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive set of frontend development guidelines to standardize patterns across React/TypeScript projects, improving consistency, maintainability, and onboarding speed.

Core Features & Use Cases

  • Modern React patterns including Suspense-based data fetching, lazy loading, useSuspenseQuery, and a structured component pattern.
  • Project organization guidance with a scalable directory structure (features/ vs components/), plus hooks/, helpers/, and types/ conventions.
  • Routing and styling guidance using TanStack Router, import aliases, shadcn/ui, Tailwind CSS, and MUI sx-based styling for consistency.
  • Performance and quality practices such as memoization, debouncing, typed APIs, and robust error handling patterns.
  • Use cases include building new components/pages, refactoring large frontend codebases, and guiding teams toward a uniform frontend architecture.

Quick Start

Start by reading this Skill's Quick Start section and applying the recommended architecture and patterns when creating or updating frontend features.

Frequently Asked Questions about frontend-dev-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure React and TypeScript projects for scalability?▼

Structure React and TypeScript projects using a feature-based folder architecture with features/ versus components/ directories, plus hooks/, helpers/, and types/ conventions to improve maintainability and onboarding speed.

What's the best way to manage routing in a modern React application?▼

Use TanStack Router for route management in modern React applications to ensure consistent routing patterns and streamlined navigation across feature-based project structures.

How does Suspense-based data fetching work with React?▼

Suspense-based data fetching in React uses useSuspenseQuery and lazy loading to asynchronously load component data, rendering fallback UI states until data resolution completes for smoother user experiences.

Can I use Tailwind CSS and shadcn/ui together in a React project?▼

Yes, combine Tailwind CSS and shadcn/ui alongside MUI sx-based styling to enforce consistent styling patterns and import aliases across your React frontend codebase.

How do I handle errors and optimize performance in React frontend development?▼

Optimize React performance using memoization, debouncing, typed APIs, and robust error handling patterns to ensure high-quality, maintainable frontend applications with consistent data-fetching practices.

Related Skills

Explore More Software Engineering Skills→
rally19rally19

yjs-best-practices

Diagnose and fix Yjs import issues and encoding configuration in JavaScript/TypeScript projects.

Community
Advanced
ksciuskscius
2

error-handling-patterns

Standardize error handling and resilience patterns across software applications.

Community
Advanced
yugasunyugasun
1

dev-web

Scaffold modern web frontend projects with Bun, Vite, React 19, and TypeScript 5.

Community
Advanced
buildworksaibuildworksai

react-best-practices

Enforce React and TypeScript frontend patterns with TanStack Query and Zustand.

Community
Intermediate