MCPInstall

frontend-engineer

by siviter-xyzFrontend & Design

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.

Installs
319
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/siviter-xyz/dot-agent --skill frontend-engineer
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads frontend-engineer automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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 practices

FAQ

What does the frontend-engineer 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.

How do I install frontend-engineer?

Run npx skills add https://github.com/siviter-xyz/dot-agent --skill frontend-engineer in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/frontend-engineer/ (personal) or .claude/skills/frontend-engineer/ (project).

Which AI agents can use frontend-engineer?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is frontend-engineer safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains frontend-engineer?

It is published by siviter-xyz in siviter-xyz/dot-agent. It has 319 recorded installs.

More from siviter-xyz/dot-agent

View all →

create-skill

siviter-xyz/dot-agent

Guide for creating effective skills following best practices. Use when creating or updating skills that extend agent capabilities.

Code Quality & Workflow2.8K installs

cursor-best-practices

siviter-xyz/dot-agent

Best practices for working with Cursor. Use when learning how to effectively use Cursor features or optimizing your workflow.

Code Quality & Workflow636 installs

software-engineer

siviter-xyz/dot-agent

Core software engineering principles for code style, documentation, and development workflow. Applies when editing code, working in software repositories, or performing software development tasks.

Docs & Writing623 installs

python

siviter-xyz/dot-agent

Python development guidelines and best practices. Use when working with Python code.

Code Quality & Workflow349 installs

backend-engineer

siviter-xyz/dot-agent

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.

Backend & APIs342 installs

create-agents-md

siviter-xyz/dot-agent

Open the skill to read its SKILL.md instructions.

303 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs