skills.rest
hidonguyen
hidonguyenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ck:frontend-development

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

Updated Apr 2, 2026
Search Tags:#typescript#performance#suspense#react#mui#tanstack-query#tanstack-router
One-click install
npx skills add https://github.com/hidonguyen/trade-ops --skill ck-frontend-development-hidonguyen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:frontend-development
Source: https://github.com/hidonguyen/trade-ops/tree/main/.opencode/skills/frontend-development
Command: npx skills add https://github.com/hidonguyen/trade-ops --skill ck-frontend-development-hidonguyen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Modern frontend projects suffer from inconsistent patterns, layout shifts, and inefficient data fetching; these guidelines provide a coherent, production-ready approach to building React + TypeScript frontends that use Suspense, lazy loading, and consistent styling to reduce bugs and improve performance.

Core Features & Use Cases

  • Suspense-based data fetching: patterns for useSuspenseQuery, cache-first strategies, parallel queries, and error handling with boundaries.
  • Routing & code-splitting: folder-based TanStack Router routes with lazy-loaded page components and breadcrumb loaders.
  • Styling & UI conventions: MUI v7 sx prop usage, responsive Grid size syntax, inline vs separate styles guidance, and theme-aware patterns.
  • Component & file organization: feature-oriented directories (api/, components/, hooks/, helpers/, types/), import aliases, component templates, and export patterns.
  • Performance & UX: SuspenseLoader usage to avoid early returns/layout shift, memoization, debounced search, and cleanup best practices for memory safety.

Quick Start

Use the ck:frontend-development guidelines to create a new feature folder with a lazy route, SuspenseLoader wrapping, a useSuspenseQuery hook, and MUI v7 styled components.

Frequently Asked Questions about ck:frontend-development

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

FAQPage Schema
How do I implement Suspense-based data fetching in React with TanStack Query?▼

To implement Suspense-based data fetching in React, use the useSuspenseQuery hook with cache-first strategies and wrap components in SuspenseLoader boundaries to prevent layout shifts.

What is the best way to organize React feature folders for lazy-loaded routes?▼

Organize React feature folders using directories like api/, components/, hooks/, helpers/, and types/. Apply TanStack Router with lazy-loaded page components and import aliases to achieve clean code-splitting.

How do I style React components using MUI v7 responsive Grid syntax?▼

Style React components using the MUI v7 sx prop and responsive Grid size syntax. Apply theme-aware patterns and inline vs separate styles guidance to maintain consistent UI conventions across your application.

Why does my React component layout shift during lazy code-splitting?▼

Layout shift during lazy code-splitting occurs when using early returns for loading states. Use a SuspenseLoader boundary instead to maintain stable UI structure while lazy-loaded page components resolve.

Can I use TanStack Router and TanStack Query together in a single-page application?▼

Yes, you can integrate TanStack Router and TanStack Query in a single-page application. Use folder-based routes with lazy-loaded page components, breadcrumb loaders, and useSuspenseQuery patterns for parallel data queries.

How do I prevent memory leaks when debouncing search in React?▼

To prevent memory leaks when debouncing search in React, apply cleanup best practices and memoization. Ensure proper effect teardowns when components unmount to maintain memory safety during asynchronous operations.

Related Skills

Explore More Software Engineering Skills→
joshka0joshka0
3

frontend-dev-guidelines

Guide React and TypeScript component structure, routing, and data fetching.

Community
Intermediate
epiphanyappsepiphanyapps

expo-deployment

Automate Expo app deployments to iOS, Android, and web via EAS CLI.

Official
Advanced
kaiomaced0kaiomaced0

tanstack-query

Fetch, cache, and update data with TanStack Query hooks.

Community
Intermediate
dwalleckdwalleck
11

frontend-dev-guidelines

Standardize React/TypeScript frontend development with TanStack Query, TanStack Router, and MUI v7.

Community
Advanced