frontend-dev-guidelines

Name: frontend-dev-guidelines
Availability: InStock
Author: SUN-Underwriting

Enforce React and TypeScript frontend standards with Suspense-first data fetching.

Updated Aug 27, 2026

Search Tags:#typescript #architecture #best practices #performance #suspense #frontend #react

Ready to run

npx skills add https://github.com/SUN-Underwriting/SunFlowCRM_DB --skill frontend-dev-guidelines-sun-underwriting

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/SUN-Underwriting/SunFlowCRM_DB/tree/main/.agent/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/SUN-Underwriting/SunFlowCRM_DB --skill frontend-dev-guidelines-sun-underwriting

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enforces a strict, opinionated set of frontend development standards to ensure scalability, performance, and maintainability in modern React + TypeScript applications.

Core Features & Use Cases

Suspense-First Data Fetching: Mandates useSuspenseQuery for cleaner components and better loading states.
Feature-Based Architecture: Promotes organized code structure within features/ directories.
Performance Optimization: Enforces memoization (useMemo, useCallback), lazy loading, and performance-safe defaults.
Strict TypeScript: Requires explicit types, no any, and type-safe styling.
Use Case: When starting a new React project or onboarding new developers, this Skill provides a clear, non-negotiable blueprint for writing high-quality frontend code that aligns with best practices.

Quick Start

Use the frontend-dev-guidelines skill to review a new React component for adherence to Suspense-first data fetching and feature-based organization.

Frequently Asked Questions about frontend-dev-guidelines

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

FAQPage Schema

What's the best way to structure a scalable React and TypeScript application?▼

A scalable React and TypeScript application should use a feature-based architecture, organizing code within `features/` directories to ensure maintainability and strict type safety across modules.

How do I implement Suspense-first data fetching in React?▼

Implement Suspense-first data fetching in React by mandating `useSuspenseQuery` for data retrieval, which ensures cleaner components and streamlined loading states without manual conditional rendering.

When should I use useMemo and useCallback for performance optimization in frontend development?▼

Use `useMemo` and `useCallback` for performance optimization in frontend development to enforce memoization and performance-safe defaults, preventing unnecessary re-renders in complex React components.

Can I use strict TypeScript practices without `any` types in my React project?▼

Yes, you can use strict TypeScript practices in your React project by requiring explicit types, eliminating `any`, and applying type-safe styling to guarantee type safety across the application.

How do I assess architectural fit and complexity for new React features?▼

Assess architectural fit and complexity for new React features by evaluating them against complexity metrics like FFCI, ensuring adherence to core doctrines like lazy loading and type safety.