Frontend Development Guidelines (React / TypeScript)

This skill provides reusable guidance for building modern frontend applications with React and TypeScript.

Purpose

• •Keep UI code consistent, predictable, and testable.
• •Avoid common UX regressions (layout shift, inconsistent loading states).
• •Improve performance via code splitting and memoization patterns.
• •Keep type safety high and any usage low.

When to Use

Use this skill when:

• •Creating components, pages, or UI features
• •Adding client-side data fetching and caching
• •Working on routing/navigation
• •Styling components and defining UI patterns
• •Optimizing rendering performance
• •Defining TypeScript standards for the frontend

Quick Start (high-signal checklist)

New component

• • Define a clear Props type/interface
• • Keep render pure; move side effects into hooks
• • Use memoization (useMemo / useCallback) only when it matters
• • Prefer consistent loading/error UX (Suspense or explicit states)
• • Ensure accessibility basics (labels, focus order, keyboard support)

New feature

• • Create a feature folder with a small public surface (index.ts)
• • Separate API/data access, UI components, hooks, and types
• • Add at least one integration test for the critical user flow (if test harness exists)

Related Skills