skills.rest
MinhQuyen274
MinhQuyen274COMMUNITY
Explore all skills by this author →
GitHub

ck:frontend-development

Standardize React and TypeScript frontend features with Suspense-based data fetching.

Updated Aug 27, 2026
Search Tags:#typescript#suspense#frontend architecture#react#tanstack query#mui v7#tanstack router
One-click install
npx skills add https://github.com/MinhQuyen274/smartify --skill ck-frontend-development-minhquyen274
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:frontend-development
Source: https://github.com/MinhQuyen274/smartify/tree/main/Frontend_PROJECT_Figma/.opencode/skills/frontend-development
Command: npx skills add https://github.com/MinhQuyen274/smartify --skill ck-frontend-development-minhquyen274

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of inconsistent, hard-to-maintain frontend implementations by providing a practical, opinionated checklist for building React + TypeScript code that performs well and stays organized.

Core Features & Use Cases

  • Suspense-first React patterns: use SuspenseLoader and useSuspenseQuery for data fetching without isLoading layout hacks.
  • Feature-based architecture: structure code under src/features/{feature-name}/ with api/, components/, hooks/, helpers/, and types/ for scalable growth.
  • Modern routing and performance: use TanStack Router with folder-based routes and lazy loading to reduce initial bundle size.
  • Consistent UI + ergonomics: apply MUI v7 sx styling, use import aliases (@/, ~types, ~components, ~features), and handle UX notifications with useMuiSnackbar.

Quick Start

Build a new feature named "billing" by following the checklist in SKILL.md: create the features/billing/ structure, add billing/api/billingApi.ts, implement route code under routes/billing/index.tsx, and ensure the UI uses Suspense + useSuspenseQuery with MUI v7 styling and no early loading returns.

Frequently Asked Questions about ck:frontend-development

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

FAQPage Schema
How do I structure a React and TypeScript project using feature-based architecture?▼

Feature-based architecture organizes code under `src/features/{feature-name}/` with `api/`, `components/`, `hooks/`, `helpers/`, and `types/` directories. This structure ensures scalable growth and consistent project organization across team implementations.

How does Suspense-based data fetching work with TanStack Query?▼

Suspense-based data fetching uses `SuspenseLoader` with `useSuspenseQuery` to manage server state. This approach eliminates `isLoading` layout hacks and early loading returns, ensuring cleaner component logic and consistent React performance patterns.

What is the best way to reduce initial bundle size in a React application?▼

Reducing initial bundle size is achieved by using TanStack Router with folder-based routes and lazy loading. This modern routing approach delays loading feature code until needed, optimizing application performance.

How do I apply consistent styling and UX notifications with MUI v7?▼

Consistent MUI v7 styling applies the `sx` prop for component ergonomics and handles UX notifications using `useMuiSnackbar`. Combined with defined import aliases like `@/` and `~components`, this ensures uniform UI implementation.

Can I use early loading returns when building React components with TanStack Query?▼

Early loading returns are explicitly avoided when building React components with TanStack Query. Instead, Suspense boundaries and `useSuspenseQuery` handle loading states natively, preventing layout hacks and ensuring consistent rendering.

What import aliases should I configure for a React and TypeScript frontend project?▼

Configured import aliases for React and TypeScript projects include `@/`, `~types`, `~components`, and `~features`. These aliases streamline imports and enforce feature-based architecture boundaries across the codebase.

Related Skills

Explore More Software Engineering Skills→
lukebazelukebaze

frontend-dev-guidelines

Standardize React/TypeScript frontend architecture with routing and data fetching patterns.

Community
Advanced
raulnqraulnq

add_frontend_feature

Generate React 19 frontend feature files with routing and data fetching.

Community
Intermediate
hidonguyenhidonguyen

ck:frontend-development

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

Community
Advanced
vuminhieuvuminhieu

frontend-dev-guidelines

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

Community
Advanced