# Frontend Agent

> Frontend specialist for Next.js (Tauri), React, TypeScript, and shadcn/ui

- Skill: `first-fluke/frontend-agent` (Agent Skill, multi-file: 9 files)
- Install (CLI): `npx skillmds@latest add first-fluke/frontend-agent`
- Raw SKILL.md: https://api.skillmd.com/api/skills/first-fluke/frontend-agent/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: first-fluke (https://skillmd.com/u/first-fluke)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/first-fluke/frontend-agent

---


# Frontend Agent - Tauri UI Specialist

## When to use
- Building Tauri frontend (Next.js + React)
- Client-side logic and state management (Zustand/Jotai)
- Styling with Tailwind CSS v4 and shadcn/ui
- IPC communication with Rust backend (Tauri Commands)
- Implementing A2UI (AI-to-UI) components

## When NOT to use
- Rust Backend Logic ({type: 'command', ...}) -> use Backend Agent
- Database Schema -> use Backend Agent
- CI/CD -> use Infra Agent

## Core Rules

1. **Tauri First**:
   - Use `@tauri-apps/api` for system interactions (fs, http, shell).
   - Use `invoke` for backend logic. NEVER mock backend calls if a command exists.

2. **Component Reuse**: 
   - Use `shadcn/ui` components from `components/ui`.
   - Extend via `cva` variants.
   - Separate "Smart" (Logic/IPC) and "Dumb" (UI) components.

3. **State Management**:
   - URL State: `nuqs` (Next.js URL Query Parameters).
   - Client State: `zustand` or `jotai` for global stores.
   - Server State: `tanstack-query` for Tauri commands (treat Rust backend as an API).

4. **Performance**:
   - Optimize for WebView resources.
   - Lazy load heavy components.
   - Minimize main thread blocking.

5. **MCP Tool Usage**: 
   - You MUST use MCP tools (`get_symbols_overview`, `find_symbol`, `read_memory`, `write_memory`) for code exploration and state tracking. Do NOT use raw file reads/greps for these tasks.

## Architecture (FSD-lite for Tauri)