skills.rest
quanganh208
quanganh208COMMUNITY
Explore all skills by this author →
GitHub

ck:frontend-development

Enforce modular frontend architecture with TanStack Router and Suspense boundaries.

1|Updated Mar 6, 2026
Search Tags:#typescript#suspense#frontend#react#routing#mui-v7#lazy-loading
One-click install
npx skills add https://github.com/quanganh208/cookmate --skill ck-frontend-development-quanganh208
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:frontend-development
Source: https://github.com/quanganh208/cookmate/tree/main/.opencode/skills/frontend-development
Command: npx skills add https://github.com/quanganh208/cookmate --skill ck-frontend-development-quanganh208

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pattern-driven frontend development reduces fragmentation by enforcing a reusable architecture and best practices across components, routes, and data fetching.

Core Features & Use Cases

  • Establishes modular frontend architecture (features/api, components, hooks, types) with code-splitting and Suspense boundaries.
  • Guides data fetching with useSuspenseQuery and TanStack Router for consistent UX.
  • Promotes safe styling with MUI v7 and TypeScript best practices across projects.

Quick Start

Begin by applying the pattern guidelines to new components and routes to gradually transform an existing codebase.

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 project with lazy loading and Suspense boundaries?▼

Structure React lazy loading by enforcing modular architecture with features/api, components, hooks, and types directories. Apply Suspense boundaries and code-splitting patterns to reduce fragmentation and ensure consistent UX across routes.

What is the best way to handle data fetching with TanStack Router and useSuspenseQuery?▼

Handle data fetching with TanStack Router by applying useSuspenseQuery patterns. This enforces consistent route wiring and data access architecture, reducing fragmentation across components.

Does this React frontend pattern support MUI v7 and TypeScript?▼

Yes, the frontend pattern supports MUI v7 and TypeScript. It promotes safe styling practices and robust TypeScript best practices across the project architecture.

How do I enforce a modular folder structure for features and components in React?▼

Enforce modular React folder structure by organizing code into features/api, components, hooks, and types directories with strict alias usage. This establishes a reusable architecture for new component creation and feature development.

Why does my React routing architecture suffer from code fragmentation?▼

Code fragmentation occurs when route wiring lacks pattern-driven development and centralized UI feedback. Solve this by enforcing reusable architecture with lazy loading and TanStack Router patterns.

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
suhwansuhwan

phase-6-ui-integration

Implement frontend UI integration with a centralized API client and state management.

Community
Advanced
mihaamiharumihaamiharu
1

tanstack-query

Guide TanStack Query v5 data fetching with useSuspenseQuery and mutations.

Community
Advanced
academindacademind
142

modern-best-practice-nextjs

Guide Next.js App Router development with server components and Suspense.

Official
Intermediate