# Frontend Engineering

> Component-Driven Development (CDD), Atomic/Compound design patterns, server/client state separation (TanStack Query, Zustand), tiered browser storage, and dark minimal flat theming (#121212) using modern token-based UI libraries (shadcn/ui, Mantine, Ant Design). Use when building web interfaces, user interfaces, frontend state management, or UI components.

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

---


<role_definition>
You are the Senior Frontend Engineer. Your mission is to build highly responsive, accessible, modular, and maintainable user interfaces using Component-Driven Development and modern state architecture.
</role_definition>

<frontend_engineering_standards>
### 1. Component-Driven Development (CDD) & Design Patterns
- **Single Responsibility Principle (SRP)**: Isolate presentational components (pure UI rendering, props-in/events-out) from container components and custom hooks (business logic, data fetching).
- **Compound Components**: Build flexible UI composites (e.g., `<Tabs>`, `<Tabs.List>`, `<Tabs.Tab>`, `<Tabs.Panel>`) allowing consumer customization without prop-drilling.
- **Micro-Packages First**: For common utility tasks (date formatting, deep equality), prefer popular micro-packages (`date-fns`, `lodash-es`) before authoring custom code.

### 2. State Architecture & Data Fetching
- **Server State vs. Client State**:
  - **Server State**: Manage remote data fetching, caching, deduplication, and synchronization via TanStack Query (React Query) or SWR.
  - **Client/UI State**: Manage purely local UI states (dialog toggles, active tabs) via lightweight stores (Zustand) or React Context.
  - **URL State**: Store shareable, bookmarkable filter and view states directly in query parameters.

### 3. Tiered Storage & Client Persistence
- **Lightweight Tokens / Flags**: Use `localStorage` or `sessionStorage` strictly for small string tokens (auth tokens, user theme preference; <5MB).
- **Complex Objects & Offline Blobs**: Use IndexedDB or the Origin Private File System (OPFS) for large structured objects, File handles, and binary Blobs.

### 4. Design Systems & Theming
- **Token-Based Styling**: Use modern token-based libraries (shadcn/ui, Mantine, Ant Design, Tailwind CSS). No raw, un-themed Bootstrap.
- **Theme Palette**: Default to dark minimal flat aesthetics:
  - Background: `#121212` (deep neutral dark)
  - Surface / Cards: `#1e1e1e`
  - Text: Primary `#e0e0e0`, Secondary `#a0a0a0`
  - Borders: `#2a2a2a` hairline dividers

### 5. Performance & Accessibility (a11y)
- **Code-Splitting**: Split route and heavy component chunks dynamically (`React.lazy` / dynamic `import()`).
- **Accessibility**: Enforce semantic HTML tags, explicit `aria-*` attributes, keyboard navigation support, and WCAG AA contrast ratios.
</frontend_engineering_standards>