skills.rest
chef0111
chef0111COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-development

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

1|Updated Feb 17, 2026
Search Tags:#typescript#best practices#performance#frontend#react#ui development
One-click install
npx skills add https://github.com/chef0111/physthink --skill frontend-development-chef0111
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/chef0111/physthink/tree/main/.agents/skills/frontend-development
Command: npx skills add https://github.com/chef0111/physthink --skill frontend-development-chef0111

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of guidelines and patterns for building modern, performant, and maintainable React/TypeScript frontend applications, ensuring consistency and quality across the codebase.

Core Features & Use Cases

  • Component Development: Best practices for creating reusable and efficient React components.
  • Data Fetching: Implementing data fetching with Suspense and TanStack Query.
  • Routing: Setting up navigation with TanStack Router.
  • Styling: Applying styles using MUI v7 and best practices.
  • Performance Optimization: Techniques to ensure a fast and responsive user experience.
  • Use Case: When starting a new feature, follow the checklist to ensure components are lazy-loaded, data is fetched efficiently using useSuspenseQuery, and the code is organized according to the established structure.

Quick Start

Use the frontend-development skill to create a new React component following the modern component template.

Frequently Asked Questions about frontend-development

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

FAQPage Schema
How do I structure a React project using TanStack Router and a features directory?▼

Implement data fetching in React using Suspense and the useSuspenseQuery hook from TanStack Query. This pattern enables efficient asynchronous data loading while maintaining a responsive user experience.

What's the best way to optimize React performance with lazy loading and MUI v7?▼

Optimize React performance by applying lazy loading for components and utilizing MUI v7 styling best practices. These techniques ensure fast rendering and a highly responsive frontend user interface.

Does this React frontend skill provide TypeScript best practices for UI development?▼

Yes, the skill provides TypeScript best practices for UI development. It covers type-safe component creation, data fetching, and routing to ensure consistency and quality across modern React codebases.

When do I need to use Suspense for data fetching in modern React applications?▼

Use Suspense for data fetching when you need to handle asynchronous loading states declaratively in modern React. It works with useSuspenseQuery to streamline data fetching and improve user experience.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
tmarsbrtmarsbr

frontend-developer

Build reusable React/Next.js UI components with accessibility and performance patterns.

Community
Advanced
mitul-bhatiamitul-bhatia

backend-patterns

Standardize Node.js, Express, and Next.js backend development with reusable API, data access, caching, and error handling patterns.

Community
Advanced
jeffwweeejeffwweee

nextjs-frontend

Develop Next.js 14+ frontends with App Router, TypeScript, and React 18.

Community
Advanced