skills.rest
haidonglethqb
haidonglethqbCOMMUNITY
Explore all skills by this author →
GitHub

ck:frontend-development

Standardize React/TypeScript frontend development with modern patterns and project structure.

Updated Feb 27, 2026
Search Tags:#typescript#performance#suspense#frontend#react#routing#patterns
One-click install
npx skills add https://github.com/haidonglethqb/CloudSchool --skill ck-frontend-development-haidonglethqb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:frontend-development
Source: https://github.com/haidonglethqb/CloudSchool/tree/main/.qwen/skills/frontend-development
Command: npx skills add https://github.com/haidonglethqb/CloudSchool --skill ck-frontend-development-haidonglethqb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Traditional frontend teams struggle with inconsistent patterns, boilerplate, and unclear project structures across React/TypeScript apps. This Skill provides a standardized playbook to unify architecture, data fetching, and styling practices.

Core Features & Use Cases

  • Enforces modern React/TypeScript patterns (React.FC, lazy loading, Suspense boundaries, useSuspenseQuery, MUI v7 styling, TanStack Router) for consistent code.
  • Defines a scalable project structure (features/, components/, hooks/, api/) and clear public exports to improve collaboration and onboarding.
  • Improves performance, maintainability, and developer experience by promoting patterns such as memoization, proper error handling, and code-splitting.

Quick Start

Create a modern React/TypeScript frontend template that adheres to the guidelines, including a sample component, a route, and a Suspense boundary.

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 TypeScript project to scale features and components?▼

Structure a React TypeScript project by organizing code into features/, components/, hooks/, and api/ directories. This scalable project structure defines clear public exports to improve team collaboration, onboarding, and maintainability.

How do I implement data fetching with Suspense boundaries in React?▼

Implement data fetching with Suspense boundaries by applying useSuspenseQuery and lazy loading patterns. This approach standardizes asynchronous data handling, properly manages loading states, and enforces code-splitting for better performance.

What is the best way to standardize React frontend patterns across a team?▼

Standardize React frontend patterns by enforcing a unified playbook using React.FC, TanStack Router, and MUI v7 styling. Applying these modern TypeScript patterns eliminates inconsistent boilerplate and ensures a cohesive developer experience.

Does this frontend development approach require specific routing or styling libraries?▼

Yes, this frontend development approach requires TanStack Router for routing and MUI v7 for styling. Enforcing these specific libraries ensures consistent component creation, data fetching, and styling practices across the application.

How do I set up a modern React TypeScript frontend template with proper routing?▼

Set up a modern React TypeScript frontend template by creating a sample component, a route using TanStack Router, and a Suspense boundary. The template adheres to enforced guidelines for memoization, error handling, and code-splitting.

Related Skills

Explore More Software Engineering Skills→
bkywksjbkywksj
309

ui-frontend

Define standardized React UI patterns for Tauri desktop apps.

Community
Intermediate
Insik-HanInsik-Han
16

expo-deployment

Deploy Expo apps to iOS, Android, web, and API routes via EAS.

Community
Advanced
ali-masterali-master
8

orpc-tanstack-query

Integrate oRPC with TanStack Query for data fetching and mutations.

Community
Intermediate
blencorpblencorp
101

mui

Provides MUI v7 styling and theming patterns via sx and components.

Official
Intermediate