skills.rest
NmBoyd
NmBoydCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Standardizes React/TypeScript project structure, naming, and component patterns.

Updated Dec 5, 2025
Search Tags:#typescript#architecture#frontend#react#patterns#guidelines
One-click install
npx skills add https://github.com/NmBoyd/claude_setup --skill frontend-dev-guidelines-nmboyd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/NmBoyd/claude_setup/tree/main/.claude/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/NmBoyd/claude_setup --skill frontend-dev-guidelines-nmboyd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This comprehensive guide standardizes frontend engineering practices across projects, reducing cognitive load and enabling consistent, high-quality React and TypeScript code.

Core Features & Use Cases

  • Establishes React/TypeScript conventions (React.FC, lazy loading, Suspense boundaries, TanStack Query patterns)
  • Defines project structure and organization (features/, components/, hooks/, api/, types/)
  • Provides routing, alias imports, and styling conventions to improve developer experience
  • Includes practical examples and complete feature skeletons to accelerate delivery

Quick Start

Create a new frontend feature by following the guidelines to structure directories (features/, components/, hooks/, API), apply lazy loading and Suspense boundaries, and adopt the project's import aliases and styling conventions.

Frequently Asked Questions about frontend-dev-guidelines

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

FAQPage Schema
What is the best way to structure a modern React and TypeScript frontend project?▼

To structure a modern React and TypeScript frontend project, organize directories into features/, components/, hooks/, api/, and types/ to ensure reliable, scalable UI code and reduce cognitive load.

How do I standardize React component patterns and data fetching across a codebase?▼

Standardize React component patterns and data fetching by adopting React.FC, implementing lazy loading with Suspense boundaries, and applying TanStack Query patterns to enforce consistent structure.

Does this frontend guidelines skill provide conventions for routing and import aliases?▼

Yes, this frontend guidelines skill provides routing and import alias conventions to improve developer experience, alongside standardized styling rules and documented patterns with practical examples.

Can I use these React and TypeScript guidelines to scaffold a complete feature quickly?▼

Yes, you can use these React and TypeScript guidelines to scaffold a complete feature quickly by following the directory structures, applying lazy loading, and utilizing the included complete feature skeletons.

Why should I enforce lazy loading and Suspense boundaries in my React applications?▼

Enforce lazy loading and Suspense boundaries in your React applications to ensure reliable, scalable UI code, optimize component rendering, and maintain consistent structure across real-world projects.

Related Skills

Explore More Software Engineering Skills→
Jeff-StapletonJeff-Stapleton
1

microfrontend-nx

Standardize microfrontend development in NX monorepos with Module Federation.

Community
Advanced
benediktmsbenediktms

style-reviewer

Check code against project linter conventions for naming, formatting, and structure.

Community
Intermediate
kaiomaced0kaiomaced0

tanstack-query

Fetch, cache, and update data with TanStack Query hooks.

Community
Intermediate
vadimgaidaivadimgaidai

feature-sliced-design

Guide Feature-Sliced Design implementation for Next.js applications with layered architecture.

Community
Advanced