skills.rest
khoi1009
khoi1009COMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Apply React/TypeScript frontend guidelines for components, routing, and MUI styling.

Updated Jan 1, 2026
Search Tags:#typescript#suspense#frontend#react#routing#mui#tanstack-query
One-click install
npx skills add https://github.com/khoi1009/Vibecode-with-Multi-Agent-LongCoT --skill frontend-dev-guidelines-khoi1009
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/khoi1009/Vibecode-with-Multi-Agent-LongCoT/tree/main/skills/frontend-development
Command: npx skills add https://github.com/khoi1009/Vibecode-with-Multi-Agent-LongCoT --skill frontend-dev-guidelines-khoi1009

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a modern frontend development playbook to reduce boilerplate, align patterns, and accelerate building components, pages, and features in React/TypeScript projects.

Core Features & Use Cases

  • Suspense-based data fetching: Use useSuspenseQuery with Suspense boundaries to simplify loading states.
  • Routing and organization: TanStack Router and a features-directory approach to scale frontend apps.
  • Styling best practices: MUI v7 with sx-based styling for consistent theming.
  • Use Case: When starting a new React project, apply the guidelines to structure files and patterns to save time and avoid rework.

Quick Start

Create a new component following the checklist in this Skill, apply Suspense-based data fetching, proper routing, and MUI styling to establish a clean, maintainable frontend foundation.