skills.rest
untangledfinance
untangledfinanceOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-dev-guidelines

Document React/TypeScript frontend architecture patterns with feature-based structure and alias imports.

Updated May 24, 2025
Search Tags:#development#performance#React#frontend#TypeScript#guidelines#MUI
One-click install
npx skills add https://github.com/untangledfinance/untangled-web --skill frontend-dev-guidelines-untangledfinance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/untangledfinance/untangled-web/tree/main/frontend-development
Command: npx skills add https://github.com/untangledfinance/untangled-web --skill frontend-dev-guidelines-untangledfinance

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive, opinionated guidelines for building high-quality, performant, and maintainable React/TypeScript applications. It solves the problem of inconsistent codebases, slow development, and poor user experience by enforcing modern best practices, allowing developers to focus on features, not boilerplate.

Core Features & Use Cases

  • Modern React Patterns: Guides on Suspense-based data fetching (useSuspenseQuery), lazy loading, and component organization to prevent layout shifts and improve user experience.
  • Structured Codebase: Enforces a features/ directory structure for domain-specific code and components/ for truly reusable UI, ensuring scalability and clarity across large projects.
  • Performance & Type Safety: Covers useMemo, useCallback, React.memo for optimization, and strict TypeScript standards to prevent bugs and improve code reliability.
  • Use Case: A new developer joins your team and needs to quickly get up to speed on the project's frontend standards. This skill can be activated to provide instant, actionable guidance on everything from component creation to data fetching and styling, ensuring they write consistent, high-quality code from day one.

Quick Start

I need to create a new React component that fetches data. Provide a checklist for modern component creation and data fetching using useSuspenseQuery.

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 a React/TypeScript project with consistent frontend architecture?▼

Use a features/ directory for domain-specific code and components/ for reusable UI. This structure enforces modularity, improves scalability, and ensures clarity across large projects by organizing code by feature rather than by type.

What's the best way to fetch data in React using modern patterns?▼

Use useSuspenseQuery with Suspense-based data fetching to prevent layout shifts and improve user experience. This pattern enables lazy loading and cleaner component composition by handling loading states declaratively.

How do I optimize React component performance with TypeScript?▼

Apply useMemo, useCallback, and React.memo strategically to prevent unnecessary re-renders. Combine these with strict TypeScript standards to reduce bugs, improve reliability, and maintain fast rendering in large applications.

Can I use TanStack Query with Suspense in my React components?▼

Yes, useSuspenseQuery integrates TanStack Query with Suspense for declarative data fetching. This approach simplifies component code by eliminating manual loading state management while maintaining type safety with TypeScript.

What TypeScript and styling standards should a React team follow?▼

Enforce strict TypeScript checking and use MUI v7 for consistent, modern styling. These standards prevent type-related bugs, ensure visual consistency, and enable developers to focus on features rather than boilerplate setup.

How do I set up routing and alias-based imports in a large React project?▼

Configure alias-based imports for cleaner module resolution and organize routing alongside feature directories. This reduces import path complexity, improves code maintainability, and makes navigation patterns consistent across the application.

Related Skills

Explore More Software Engineering Skills→
Jeff-StapletonJeff-Stapleton
1

microfrontend-nx

Standardize microfrontend development in NX monorepos with Module Federation.

Community
Advanced
koralliskorallis
90

vercel-deployment

Deploy Next.js applications to Vercel with preview deployments and environment variables.

Community
Intermediate
HieubkavHieubkav

frontend-dev-guidelines

Standardize React/TypeScript frontend development with feature directories and Suspense data fetching.

Community
Advanced
vuminhieuvuminhieu

frontend-dev-guidelines

Standardize React/TypeScript frontend patterns with Suspense, MUI v7, and TanStack Router.

Community
Advanced