Verified: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

Ready to run

npx skills add https://github.com/khapn-2933/agentic-coding-hands-on --skill tkm-build-frontend

💬 Prompt for ChatGPT / Claude Chat▼

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.