Frontend Engineer

Frontend Engineer

Comprehensive guide for modern React development, emphasizing Suspense-based data fetching, lazy loading, proper file organization, and performance optimization.

When to Use

• Creating new components or pages
• Building new features
• Fetching data with TanStack Query
• Setting up routing with TanStack Router
• Styling components
• Performance optimization
• Organizing frontend code
• TypeScript best practices

Quick Start

New Component Checklist

• [ ] Use React.FC pattern with TypeScript
• [ ] Lazy load if heavy component: React.lazy(() => import())
• [ ] Wrap in `` for loading states
• [ ] Use useSuspenseQuery for data fetching
• [ ] Import aliases: @/, ~types, ~components, ~features
• [ ] Styles: Inline if 100 lines
• [ ] Use useCallback for event handlers passed to children
• [ ] Default export at bottom
• [ ] No early returns with loading spinners
• [ ] Use notification system for user feedback

New Feature Checklist

• [ ] Create features/{feature-name}/ directory
• [ ] Create subdirectories: api/, components/, hooks/, helpers/, types/
• [ ] Create API service file: api/{feature}Api.ts
• [ ] Set up TypeScript types in types/
• [ ] Create route in routes/{feature-name}/index.tsx
• [ ] Lazy load feature components
• [ ] Use Suspense boundaries
• [ ] Export public API from feature index.ts

Core Principles

1. Lazy Load Everything Heavy: Routes, DataGrid, charts, editors
2. Suspense for Loading: Use SuspenseLoader, not early returns
3. useSuspenseQuery: Primary data fetching pattern for new code
4. Features are Organized: api/, components/, hooks/, helpers/ subdirs
5. Styles Based on Size: 100 separate
6. Import Aliases: Use @/, ~types, ~components, ~features
7. No Early Returns: Prevents layout shift
8. TypeScript First: Strict mode, no any type

Implementation Workflow

When implementing frontend code:

• Check for existing workflow patterns (spec-first, TDD, etc.) and follow them
• Ensure code passes CI checks (types, tests, lint) before committing
• Group related changes with tests in atomic commits

References

For detailed guidance, see:

• references/component-patterns.md - Modern React component patterns
• references/data-fetching.md - Suspense-based data fetching
• references/file-organization.md - Feature-based organization
• references/styling-guide.md - Styling patterns and best practices
• references/routing-guide.md - TanStack Router patterns
• references/performance.md - Performance optimization
• references/typescript-standards.md - TypeScript best practices

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: siviter-xyz
• Source: siviter-xyz/dot-agent
• License: MIT

Install and usage instructions live in the source repository linked above.