skills.rest
aleph23
aleph23COMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Codify React/TypeScript project conventions for components, data fetching, routing, and styling.

Updated Feb 15, 2026
Search Tags:#typescript#architecture#performance#frontend#react#routing#patterns
One-click install
npx skills add https://github.com/aleph23/Natasha --skill frontend-dev-guidelines-aleph23
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/aleph23/Natasha/tree/main/skills/frontend-development
Command: npx skills add https://github.com/aleph23/Natasha --skill frontend-dev-guidelines-aleph23

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Frontend Development Guidelines provide a centralized, enforceable playbook to standardize how React/TypeScript projects are structured, built, and optimized.

Core Features & Use Cases

  • Consistent architecture for components, data fetching, routing, styling, and performance patterns.
  • Guided workflows for creating components, pages, and features, with best-practice patterns like Suspense, lazy loading, TanStack Router, and MUI styling.
  • Real-world use cases across typical frontend tasks to reduce ambiguity and rework.

Quick Start

Read this guide to bootstrap standard frontend projects, align on conventions, and begin applying the patterns immediately.

Frequently Asked Questions about frontend-dev-guidelines

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

FAQPage Schema
How do I structure a modern React and TypeScript project for consistency?▼

Structure a React and TypeScript project by codifying conventions for component architecture, data fetching, routing, and styling to ensure consistency and reduce rework across frontend workflows.

What is the best way to manage routing and data fetching in a TypeScript frontend?▼

Manage routing and data fetching using guided workflows that implement best-practice patterns like TanStack Router and Suspense, ensuring standardized data handling across pages and features.

How do I apply performance patterns like lazy loading to React components?▼

Apply performance patterns like lazy loading and Suspense to React components by following structured workflows that standardize optimization practices across typical frontend feature development.

Does this frontend architecture guide require specific dependencies to work?▼

No specific dependencies are required, but the architecture patterns assume a modern frontend stack utilizing React, TypeScript, and MUI styling conventions.

When do I need standardized conventions for building pages and features in React?▼

You need standardized conventions for building pages and features when frontend ambiguity causes rework, requiring a centralized playbook to enforce consistent component structure and styling practices.

Related Skills

Explore More Software Engineering Skills→
tkmh04tkmh04

typescript

Establish TypeScript coding, architecture, testing, and tooling standards.

Community
Advanced
yuhle-qugyuhle-qug

vite-expert

Optimize Vite configuration for faster builds and HMR.

Community
Advanced
Hoang130203Hoang130203

frontend-dev-guidelines

Guide React and TypeScript frontend development with modern architectural patterns.

Community
Advanced
STier-AiSTier-Ai
5

frontend-mobile-development-component-scaffold

Generate React/React Native components with TypeScript interfaces, styling, and tests.

Official
Intermediate