skills.rest
MeoBaka
MeoBakaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-dev-guidelines

Standardize frontend development with Suspense-first data fetching and strict TypeScript discipline.

Updated Aug 23, 2026
Search Tags:#typescript#architecture#suspense#frontend#react#patterns
One-click install
npx skills add https://github.com/MeoBaka/MeoPanel-Client --skill frontend-dev-guidelines-meobaka
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/MeoBaka/MeoPanel-Client/tree/main/.claude/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/MeoBaka/MeoPanel-Client --skill frontend-dev-guidelines-meobaka

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a cohesive, enforceable standard for frontend codebases to reduce architectural drift and onboarding time by codifying patterns for Suspense-first data loading, feature-based organization, strict TypeScript, and performance practices.

Core Features & Use Cases

  • Opinionated data fetching with useSuspenseQuery and Suspense boundaries to simplify loading states and error handling.
  • Feature-based architecture that keeps domain logic, API calls, and UI components under dedicated features/, enabling scalable collaboration.
  • TypeScript discipline with explicit types, import type usage, and strict null handling to improve safety and maintainability.
  • Performance safeguards such as lazy loading, memoization patterns, and debounced interactions to optimize UX and bundle size.
  • Consistent import aliases, MUI v7 styling conventions, and routing patterns to standardize project structure.

Quick Start

Start by structuring new components under features/, wrapping heavy modules with SuspenseLoader, and using useSuspenseQuery for data.

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 architecture to reduce project drift across teams?▼

Standardize React architecture by enforcing feature-based organization, placing domain logic, API calls, and UI components under dedicated features/ directories to reduce drift and streamline onboarding.

What is Suspense-first data fetching in React and how does it simplify loading states?▼

Suspense-first data fetching uses useSuspenseQuery and Suspense boundaries to manage loading states declaratively, simplifying error handling and removing manual loading conditionals from components.

How do I structure a new React component using feature-based organization?▼

Structure new React components under features/ directories, wrapping heavy modules with SuspenseLoader and using useSuspenseQuery for data fetching to maintain scalable collaboration.

What TypeScript discipline rules should I enforce for scalable frontend apps?▼

Enforce TypeScript discipline by requiring explicit types, import type usage, and strict null handling to improve code safety and maintainability across scalable frontend applications.

What are the best performance safeguards for React routes and heavy components?▼

Apply performance safeguards like lazy loading for routes, memoization patterns for components, and debounced interactions to optimize UX and minimize bundle size in React apps.

Does this frontend guideline require specific styling or routing conventions?▼

Yes, the guidelines enforce consistent import aliases, MUI v7 styling conventions, and standardized routing patterns to maintain uniform project structure across frontend codebases.

Related Skills

Explore More Software Engineering Skills→
hidonguyenhidonguyen

ck:frontend-development

Build React TypeScript frontends with Suspense data fetching, lazy routes, and MUI v7 styling.

Community
Advanced
DaFumDaFum
1

perf-budget-enforcer

Enforce performance budgets for bundle size, load time, and FPS in CI builds.

Community
Intermediate
chef0111chef0111
1

frontend-development

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

Community
Advanced
xiaobei930xiaobei930
49

frontend

Implement frontend patterns for component design, state management, performance, and accessibility across Vue, React, Svelte, and Angular.

Community
Advanced