frontend-engineer
Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.
Best use case
frontend-engineer is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.
Teams using frontend-engineer should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/frontend-engineer/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How frontend-engineer Compares
| Feature / Agent | frontend-engineer | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
SKILL.md Source
# 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 `useSuspenseQuery` for data fetching
- [ ] Import aliases: `@/`, `~types`, `~components`, `~features`
- [ ] Styles: Inline if <100 lines, separate file 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 inline, >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 practicesRelated Skills
software-engineer
Core software engineering principles for code style, documentation, and development workflow. Applies when editing code, working in software repositories, or performing software development tasks.
context-engineering
Master context engineering for AI agent systems. Use when designing agent architectures, debugging context failures, optimizing token usage, implementing memory systems, building multi-agent coordination, evaluating agent performance, or developing LLM-powered pipelines. Covers context fundamentals, degradation patterns, optimization techniques, compression strategies, memory architectures, multi-agent patterns, evaluation, tool design, and project development.
backend-engineer
Build robust backend systems with modern technologies (Node.js, Python, Go, Rust), frameworks (NestJS, FastAPI, Django), databases (PostgreSQL, MongoDB, Redis), APIs (REST, GraphQL, gRPC), authentication (OAuth 2.1, JWT), testing strategies, security best practices (OWASP Top 10), performance optimization, scalability patterns (microservices, caching, sharding), DevOps practices (Docker, Kubernetes, CI/CD), and monitoring. Use when designing APIs, implementing authentication, optimizing database queries, setting up CI/CD pipelines, handling security vulnerabilities, building microservices, or developing production-ready backend systems.
typescript
TypeScript standards and best practices with modern tooling. Use when working with TypeScript or TypeScript React files.
semantic-git
Manage Git commits using conventional commit format with atomic staging. Always generate plain git commands before running them and offer to let the user run them manually.
python
Python development guidelines and best practices. Use when working with Python code.
psi
Plan-spec-implement workflow for structured development. Only use when explicitly directed by user or when mentioned in project AGENTS.md file. Generates ephemeral plans in ~/.dot-agent/, applies specs to project docs, then implements test-first.
media-processing
Media processing utilities for images, audio, and video using FFmpeg and ImageMagick. Use when working with media conversion, optimization, or batch processing tasks.
create-skill
Guide for creating effective skills following best practices. Use when creating or updating skills that extend agent capabilities.
create-agents-md
Create AGENTS.md files for project-specific inline rules. Use when adding small, project-specific instructions that should be committed in repos.
code-review
Code review practices emphasizing technical rigor, evidence-based claims, and verification. Use when receiving code review feedback, completing tasks requiring review, or before making completion claims.
cli-building
Build command-line interfaces with async-first design, composable commands, and proper output formatting. Use when creating CLI tools, commands, or interactive terminal applications.