frontend-engineer

Enforce architectural patterns and strict typing for React 18+ applications.

Updated Mar 4, 2026
One-click install
npx skills add https://github.com/samura-dev/antigravity-kit --skill frontend-engineer-samura-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/samura-dev/antigravity-kit/tree/main/.agent/skills/frontend-engineer
Command: npx skills add https://github.com/samura-dev/antigravity-kit --skill frontend-engineer-samura-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the need for high-quality, maintainable, and performant frontend code by enforcing strict architectural patterns, best practices, and modern technology standards.

Core Features & Use Cases

  • Architectural Enforcement: Implements Feature-Sliced Design (FSD) and promotes component-based architecture.
  • State Management: Leverages Zustand for efficient and atomic state management.
  • TypeScript & Optimization: Enforces strict TypeScript typing and optimizes React components for performance.
  • Use Case: Develop a complex user dashboard with real-time data updates, ensuring a clean separation of concerns, efficient state handling, and optimal rendering performance.

Quick Start

Use the frontend-engineer skill to create a new React component for a user profile card.

Frequently Asked Questions about frontend-engineer

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

FAQPage Schema
How do I structure a scalable React application using Feature-Sliced Design?

Feature-Sliced Design structures scalable React applications by enforcing strict layer boundaries for features and entities. This architectural pattern ensures maintainable frontend code and clean separation of concerns as your project grows.

What's the best way to manage state in Next.js with Zustand and TypeScript?

Managing state in Next.js with Zustand provides efficient, atomic state handling without Redux boilerplate. Pairing it with strict TypeScript typing ensures type-safe stores, enabling predictable client-side state updates and optimal rendering performance.

How do I optimize React 18 component rendering performance?

Optimize React 18 component rendering performance through strategic memoization and component composition. Preventing unnecessary re-renders via these strict optimization patterns ensures complex applications maintain fast, responsive client-side user experiences.

Does this approach work for building a real-time user dashboard with Next.js App Router?

Yes, this approach works for real-time user dashboards using the Next.js App Router. It enforces strict architectural patterns and Zustand state management to handle real-time data updates efficiently while maintaining high rendering performance.

Why use strict TypeScript typing for frontend architecture?

Strict TypeScript typing for frontend architecture catches type errors at compile time and enforces robust component contracts. This practice guarantees maintainable, high-quality client-side applications and prevents runtime failures in complex codebases.