skills.rest
luan-thnh
luan-thnhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-dev-guidelines

Standardize React/TypeScript frontend development with architecture, component, styling, and routing guidelines.

Updated Jan 31, 2026
Search Tags:#typescript#architecture#frontend#react#routing#styling#patterns
One-click install
npx skills add https://github.com/luan-thnh/hrm-auto-extension --skill frontend-dev-guidelines-luan-thnh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/luan-thnh/hrm-auto-extension/tree/main/.opencode/skills/frontend-development
Command: npx skills add https://github.com/luan-thnh/hrm-auto-extension --skill frontend-dev-guidelines-luan-thnh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle with inconsistent patterns, slow feature delivery, and fragile code bases across React/TypeScript projects. This Skill provides a centralized set of guidelines to standardize component structure, data fetching, styling, routing, and performance practices to improve reliability and velocity.

Core Features & Use Cases

  • Architecture & File Organization: Recommend feature-based structure with clear separation of api, components, hooks, and types to simplify collaboration and scaling.
  • Component Patterns & Data Fetching: Establish React.FC usage, lazy loading, Suspense boundaries, and useSuspenseQuery patterns for clean, predictable UI.
  • Styling & Routing: Enforce MUI sx styling conventions, v7 grid patterns, and TanStack Router folder-based routing for consistent UX and maintainable code.
  • Performance & Type Safety: Promote memoization, stable keys, debouncing, and TypeScript best practices to reduce re-renders and catch errors early.

Quick Start

Implement these guidelines in your project by applying the recommended patterns to new components and refactoring existing ones to align with the standard.

Frequently Asked Questions about frontend-dev-guidelines

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

FAQPage Schema
How do I standardize React and TypeScript architecture to reduce bugs in a growing frontend project?▼

Standardize React and TypeScript architecture by adopting a feature-based structure with clear separation of api, components, hooks, and types to simplify collaboration and accelerate delivery.

What is the best way to structure data fetching and component patterns in React?▼

The best way to structure data fetching is by using React.FC, lazy loading, Suspense boundaries, and useSuspenseQuery patterns to ensure clean, predictable UI rendering.

How do I enforce consistent styling and routing conventions in a modern React application?▼

Enforce consistent styling and routing by applying MUI sx styling conventions, v7 grid patterns, and TanStack Router folder-based routing for maintainable frontend code.

Can I use these frontend patterns to improve performance and type safety in existing React projects?▼

Yes, you can improve performance and type safety in existing projects by applying memoization, stable keys, debouncing, and TypeScript best practices to reduce re-renders and catch errors early.

Do I need strict TypeScript imports and aliases to use these frontend development guidelines?▼

Yes, these frontend development guidelines require clear TypeScript standards, strict imports, and consistent usage of aliases to maintain code base reliability.

Why should I use Suspense boundaries with useSuspenseQuery for frontend data fetching?▼

Use Suspense boundaries with useSuspenseQuery to establish clean, predictable UI rendering patterns that handle asynchronous data fetching consistently across your React components.

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
HieubkavHieubkav

frontend-dev-guidelines

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

Community
Advanced
captain-corgicaptain-corgi

frontend-dev-guidelines

Provide React/TypeScript frontend development guidelines covering Suspense, lazy loading, and MUI v7 styling.

Community
Advanced
jlawsjlaws
2

cmd-frontend-frontend

Diagnose frontend project setups for UI components across React, Next.js, and Svelte.

Community
Intermediate