ck:frontend-development

Standardizes modern React/TypeScript frontend development with TanStack Router and MUI v7 styling.

Updated Apr 9, 2026
One-click install
npx skills add https://github.com/DatTran26/KienTruThiHanh --skill ck-frontend-development-dattran26
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:frontend-development
Source: https://github.com/DatTran26/KienTruThiHanh/tree/main/.agents/skills/frontend-development
Command: npx skills add https://github.com/DatTran26/KienTruThiHanh --skill ck-frontend-development-dattran26

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Modern frontend teams often struggle to implement and maintain consistent React/TypeScript patterns, leading to inconsistent code quality and longer delivery times.

Core Features & Use Cases

  • Guides modern React patterns: Suspense, lazy loading, useSuspenseQuery, TanStack Router, and MUI v7 styling.
  • Enforces a scalable project structure: features/, components/, hooks/, api/ with strict import aliases.
  • Use cases include building new components/pages, data fetching with caching, and robust, scalable routing.

Quick Start

Generate a new React/TypeScript frontend module following the frontend-development guidelines, using Suspense, lazy loading, TanStack Router, and MUI v7 styling.

Frequently Asked Questions about ck:frontend-development

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

FAQPage Schema
How do I standardize React and TypeScript frontend patterns across my team?▼

To standardize React and TypeScript frontend patterns, enforce a scalable project structure using features/, components/, hooks/, and api/ directories alongside strict import aliases to reduce inconsistency and accelerate delivery.

What is the best way to structure data fetching with Suspense in React?▼

The best way to structure data fetching with Suspense in React is to use useSuspenseQuery combined with Suspense boundaries and snackbar-based errors to handle loading and error states consistently across your application.

How do I implement lazy loading with TanStack Router in a TypeScript project?▼

You can implement lazy loading with TanStack Router by generating new frontend modules that follow standardized routing guidelines, ensuring your TypeScript project maintains scalable navigation and strict import aliases.

Can I use MUI v7 styling with standardized React component libraries?▼

Yes, you can use MUI v7 styling with standardized React component libraries. The guidelines apply MUI v7 across new features to ensure consistent UI design and scalable component architecture.

Why should I use strict import aliases like @/ and ~features in a React project?▼

You should use strict import aliases like @/ and ~features in a React project to enforce a scalable project structure, prevent inconsistent referencing, and accelerate delivery times across modern frontend teams.