skills.rest
Komi-san-kugi
Komi-san-kugiCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Provide React and TypeScript frontend guidelines for data fetching, routing, styling, and code organization.

Updated Jan 4, 2026
Search Tags:#React#frontend#routing#TypeScript#styling#TanStack
One-click install
npx skills add https://github.com/Komi-san-kugi/elaina-portfolio --skill frontend-dev-guidelines-komi-san-kugi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/Komi-san-kugi/elaina-portfolio/tree/main/.claude/skills/frontend-development
Command: npx skills add https://github.com/Komi-san-kugi/elaina-portfolio --skill frontend-dev-guidelines-komi-san-kugi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a comprehensive, opinionated set of frontend guidelines for building React and TypeScript apps, covering modern data fetching, routing, styling, and code organization to reduce complexity and accelerate delivery.

Core Features & Use Cases

  • Frontend patterns: React.FC<Props>, lazy loading, Suspense boundaries, and useSuspenseQuery with strong TypeScript typing.
  • Architecture guidance: Feature-based file organization (features/ directories), clear routing and data flow, and import alias usage.
  • Styling & performance: MUI v7 styling conventions, best practices for responsive layouts, and performance-focused patterns.
  • Use Case: When starting a new React/TypeScript project, follow these guidelines to ensure scalable structure and maintainable code.

Quick Start

Quickly adopt Modern React/TS frontend guidelines by creating a new component with React.FC<Props>, applying lazy loading for heavy components, wrapping them in Suspense, and using useSuspenseQuery for data.