Willyu1007 AI First Template Frontend Dev Guidelines

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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.