skills.rest
JoseMas68
JoseMas68COMMUNITY
Explore all skills by this author →
GitHub

ck:frontend-development

Build React/TypeScript frontends with Suspense data fetching and standardized component patterns.

Updated Aug 23, 2026
Search Tags:#typescript#performance#suspense#frontend#react#mui#tanstack-query
One-click install
npx skills add https://github.com/JoseMas68/CRMDev --skill ck-frontend-development
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:frontend-development
Source: https://github.com/JoseMas68/CRMDev/tree/main/.claude/skills/frontend-development
Command: npx skills add https://github.com/JoseMas68/CRMDev --skill ck-frontend-development

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams often face inconsistent component patterns, manual data fetching, and performance bottlenecks when building React applications, leading to duplicated effort and slower delivery.

Core Features & Use Cases

  • Component Blueprint: Enforces React.FC with TypeScript, lazy loading, and Suspense loaders for consistent, testable components.
  • Data Layer: Standardized useSuspenseQuery with TanStack Query for cache‑first fetching, reducing API calls.
  • File Organization: Clear features versus components structure, import aliases, and styling conventions.
  • Performance Toolkit: Guidelines for useMemo, useCallback, and React.memo to optimize rendering.
  • Error & Loading Strategy: Mandatory Suspense boundaries, Snackbar notifications, and no early returns to prevent layout shift. These features help build new feature modules, create reusable UI components, and optimize existing pages in a Next.js TypeScript codebase.

Quick Start

Generate a new “user-profile” feature with a lazy‑loaded React component that uses useSuspenseQuery for data fetching.

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 React components with TypeScript and Suspense for data fetching?▼

Organize Next.js TypeScript projects by separating features versus components directories, configuring import aliases, and applying MUI v7 styling conventions to ensure maintainable and scalable frontend module architecture.

What is the best way to optimize React rendering performance and prevent layout shift?▼

Optimize React rendering performance by applying useMemo, useCallback, and React.memo guidelines, while preventing layout shift through mandatory Suspense boundaries, Snackbar notifications, and avoiding early returns in components.

Do I need React 18 and TanStack Query to build high-performance frontends with this approach?▼

Yes, building high-performance frontends with this approach requires React 18+, TypeScript strict mode, TanStack Query with Suspense enabled, and MUI v7 styling to support the standardized component and data fetching patterns.

How do I generate a new feature module with lazy loading and cache-first data fetching?▼

Generate a new feature module by creating a lazy-loaded React component that leverages useSuspenseQuery for data fetching, ensuring consistent testable components with standardized Suspense boundaries and error handling strategies.

Related Skills

Explore More Software Engineering Skills→
NammDevNammDev
2

frontend-dev-guidelines

Automate React/TypeScript frontend architecture guidance with MUI v7 and TanStack Router.

Community
Advanced
hainamchunghainamchung
54

nextjs-developer

Build Next.js 14+ applications with App Router and server components.

Community
Advanced
locdinh209locdinh209

frontend-dev-guidelines

Guide React/TypeScript frontend development with Suspense, lazy loading, and TanStack Query.

Community
Advanced
SlanyCukrSlanyCukr
2

React 19

Build React 19 applications with server components, actions, and TypeScript.

Community
Advanced