skills.rest
ai-for-war
ai-for-warOFFICIAL
Explore all skills by this author →
GitHub

frontend-engineer-skill

Implements React and TypeScript frontend code with TailwindCSS, shadcn/ui, and Zustand.

1|Updated Mar 4, 2026
Search Tags:#typescript#Zustand#React#frontend#components#TailwindCSS#ShadCN
One-click install
npx skills add https://github.com/ai-for-war/war_mind_fe --skill frontend-engineer-skill-ai-for-war
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-engineer-skill
Source: https://github.com/ai-for-war/war_mind_fe/tree/main/.agents/skills/frontend-engineer-skill
Command: npx skills add https://github.com/ai-for-war/war_mind_fe --skill frontend-engineer-skill-ai-for-war

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent, accessible React frontends requires juggling many conventions—styling with TailwindCSS, choosing shadcn/ui components, managing state with Zustand, and wiring data fetching correctly. This Skill encodes those conventions so generated code follows best practices without repeated manual review. ## Core Features & Use Cases - React/TypeScript Implementation: Generates complete components, hooks, forms, and API integrations with proper typing, imports, and naming conventions. - Modern UI Patterns: Applies TailwindCSS-only styling, shadcn/ui component lookup, accessibility attributes, and early-return readability rules. - Performance & Data Fetching Discipline: Enforces useCallback/useMemo memoization, useQuery for cached reads, and useMutation for write operations. - Use Case: Ask it to build a real-time chat panel in a feature-first React app, and it will plan the structure, use Socket.io for events, Zustand for state, and shadcn/ui components styled with Tailwind classes. ## Quick Start Use the frontend-engineer-skill to build a responsive user profile form component in React with TypeScript, TailwindCSS styling, and shadcn/ui inputs.

Frequently Asked Questions about frontend-engineer-skill

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

FAQPage Schema
How do I build React components with TailwindCSS and shadcn/ui?▼

Describe the component you need and the Skill generates complete TypeScript code styled exclusively with Tailwind classes. It checks the shadcn/ui library first for existing components and only writes custom implementations when none exist.

How to manage state in React with Zustand?▼

Zustand provides lightweight global state management without boilerplate reducers or providers. The Skill creates typed stores and connects them to components, combining them with useQuery for server state and useMutation for writes.

When should I use useCallback and useMemo in React?▼

Use useCallback to keep function references stable between renders and useMemo to cache expensive computed values until dependencies change. The Skill applies both by default to avoid unnecessary re-renders and recalculations.

Does this approach support real-time features with Socket.io?▼

Yes, Socket.io is part of the supported stack for real-time communication such as chat or live updates. The Skill integrates socket event handling into React components alongside Zustand state management.

What accessibility features are included in generated components?▼

Generated interactive elements include tabindex, aria-label, onClick, and onKeyDown attributes by default. Event handlers follow the handle-prefix naming convention such as handleClick and handleKeyDown for clarity.

Related Skills

Explore More Software Engineering Skills→
gmackiegmackie

react-project-init

Initialize React projects with Vite, TypeScript, TanStack Query, Zustand, and shadcn/ui.

Community
Intermediate
kasiopeiyakasiopeiya
1

unit-test

Execute backend and frontend unit tests with Vitest and generate detailed reports.

Community
Intermediate
SethyPagnaSethyPagna

popular-web-designs

Generate HTML and CSS pages from brand-specific design templates.

Community
Advanced
PatternsDevPatternsDev
235

react-server-components

Server-render React components to reduce client-side JavaScript in Next.js App Router.

Official
Intermediate