skills.rest
KanTrun
KanTrunCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Generate React/TypeScript frontend code with Suspense-based data fetching and MUI v7 styling.

Updated Dec 4, 2025
Search Tags:#typescript#suspense#frontend#react#routing#mui#tanstack-query
One-click install
npx skills add https://github.com/KanTrun/KLelite_Web --skill frontend-dev-guidelines-kantrun
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/KanTrun/KLelite_Web/tree/main/.claude/skills/frontend-development
Command: npx skills add https://github.com/KanTrun/KLelite_Web --skill frontend-dev-guidelines-kantrun

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates modern frontend practices into a practical, opinionated guide that helps you build React/TypeScript apps with Suspense-based data fetching, lazy loading, feature-oriented file organization, MUI v7 styling, routing, and performance patterns, reducing boilerplate and decision fatigue.

Core Features & Use Cases

  • Frontend patterns: Suspense-based data fetching, lazy loading, and useSuspenseQuery for deterministic tasks.
  • Project organization: Features directory structure with api/, components/, hooks/, and types for scalable frontend code.
  • Routing & styling: TanStack Router, MUI v7 styling, and alias imports to speed up development.
  • Use Case: Kickstart a React/TS project with a clean architecture and proven patterns, reducing decision fatigue.

Quick Start

Use this Skill when starting a new React/TypeScript component, page, or feature. For example: create a new component with TS props, lazy-load it, fetch data with useSuspenseQuery, and style with MUI.