Frontend Engineer
This is a comprehensive React/TypeScript playbook that pushes Suspense-based patterns and lazy loading as the default approach. It's opinionated about file organization (features directories with api/, components/, hooks/ subdirs), data fetching (useSuspenseQuery over traditional patterns), and even styling decisions (inline under 100 lines, separate file above). The checklists are genuinely useful if you're onboarding developers or want consistency across a team. The no early returns rule is interesting, it prevents layout shift but requires buying into the Suspense model completely. Best for teams already using TanStack Query and Router who want to codify their conventions, less useful if you're on a different stack or prefer more flexibility in your patterns.
- skills.sh installs
- 322
- GitHub stars
- 22
- last updated
- Aug 21, 2026
Install
$ npx -y skills add siviter-xyz/dot-agent --skill frontend-engineer --agent claude-codeInstalls into .claude/skills of the current project.
Files
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<Props>pattern with TypeScript - Lazy load if heavy component:
React.lazy(() => import()) - Wrap in
<SuspenseLoader>for loading states - Use
useSuspenseQueryfor data fetching - Import aliases:
@/,~types,~components,~features - Styles: Inline if <100 lines, separate file if >100 lines
- Use
useCallbackfor event handlers passed to children - Default export at bottom
- No early returns with loading spinners
- Use notification system for user feedback
New Feature Checklist
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/siviter-xyz/dot-agent
- Categories
- Frontend Development, AI & Agent Building, Debugging
- First seen
- Jun 3, 2026
More from siviter-xyz/dot-agent
All 11Recommended
More Frontend Development
integration-nextjs-app-routerposthog/skillsPostHog integration for Next.js App Router applications316skills.sh installs
nextjs-use-search-params-suspensewsimmonds/claude-nextjs-skillsPattern for using useSearchParams hook with Suspense boundary in Next.js. Covers the required combination of 'use client' directive and Suspense wrapper when ac313skills.sh installsnextjs-pathname-id-fetchwsimmonds/claude-nextjs-skillsFocused pattern for fetching data using URL parameters in Next.js. Covers creating dynamic routes ([id], [slug]) and accessing route parameters in server compon296skills.sh installs
wix-cli-site-widgetwix/skillsUse when building interactive widgets, custom data displays, or configurable site components with settings panels. Triggers include widget, custom element, inte288skills.sh installs
perf-astrotech-leads-club/agent-skillsAstro-specific performance optimizations for 95+ Lighthouse scores. Covers critical CSS inlining, compression, font loading, and LCP optimization. Use when opti286skills.sh installs
react-server-componentspatricio0312rev/skillsImplements React Server Components (RSC) patterns with Next.js App Router including data fetching, streaming, selective hydration, and server/client composition284skills.sh installs