skills.rest
khapn-2933
khapn-2933COMMUNITY
Explore all skills by this author →
GitHub

tkm:build-frontend

Create React/TypeScript components with MUI and TanStack Router.

Updated May 13, 2026
Search Tags:#React#TypeScript#performance optimization#frontend development#lazy loading#code splitting#TanStack Router
One-click install
npx skills add https://github.com/khapn-2933/agentic-coding-hands-on --skill tkm-build-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tkm:build-frontend
Source: https://github.com/khapn-2933/agentic-coding-hands-on/tree/main/.claude/skills/build-frontend
Command: npx skills add https://github.com/khapn-2933/agentic-coding-hands-on --skill tkm-build-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, typescript, @mui/material, @tanstack/react-query, @tanstack/react-router, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps developers streamline the process of building modern React/TypeScript frontends, addressing common challenges like component development, performance optimization, and routing.

Core Features & Use Cases

  • Component Development: Provides guidelines for building efficient and reusable React components with TypeScript.
  • Performance Optimization: Offers strategies for improving frontend performance, including lazy loading and code splitting.
  • Routing: Guides on setting up and managing routes with TanStack Router.
  • Use Case: If you're building a new web application and need to create components, fetch data, and manage navigation, this Skill provides the framework and best practices to help you achieve that efficiently.

Quick Start

Use the tkm:build-frontend skill to generate a new component for your application with the following command: build-frontend component myComponentName.

Frequently Asked Questions about tkm:build-frontend

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

FAQPage Schema
How do I build React components with TypeScript and TanStack Router?▼

This Skill automates React component creation using TypeScript and TanStack Router, generating efficient code structures with built-in performance optimization strategies like code splitting and lazy loading.

What's the best way to optimize React frontend performance with code splitting?▼

The best way to optimize React frontend performance is applying lazy loading and code splitting strategies. This Skill provides built-in guidelines to automatically implement these performance optimizations during component development.

Do I need MUI and TanStack Router to build modern React frontends?▼

Yes, you need MUI and TanStack Router. This Skill requires React, TypeScript, MUI, and TanStack Router to automate component development, data fetching via TanStack React Query, and advanced routing setup.

Can I automate React component development and routing setup?▼

Yes, you can automate React component development and routing setup. Use the command 'build-frontend component myComponentName' to generate new application components with integrated best practices and TanStack Router configurations.

How does lazy loading work with TanStack Router in a TypeScript application?▼

Lazy loading with TanStack Router in TypeScript delays loading route components until needed. This Skill guides setting up these routes and applying code splitting to improve overall web application performance.

Related Skills

Explore More Software Engineering Skills→
Thanh-aperoThanh-apero
1

ck:frontend-development

Guide React/TypeScript frontend development with Suspense, lazy loading, and MUI v7.

Community
Advanced
brainbrewlabsbrainbrewlabs
7

vercel-react-best-practices

Audit React and Next.js code for performance regressions and actionable fixes.

Official
Advanced
trungdo9trungdo9
3

frontend-development

Guide React frontend development with TypeScript, MUI, and TanStack Query.

Community
Intermediate
IoT-VNIoT-VN

frontend-dev-guidelines

Standardize React and TypeScript frontend development with modern patterns and libraries.

Community
Advanced