How do I install the Frontend Engineering skill?

Run npx skillmds@latest add adityahegde712/frontend-engineering in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Frontend Engineering safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Frontend Engineering?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Frontend Engineering free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Frontend Engineering?

AdityaHegde712 (@adityahegde712) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Frontend Engineering by adityahegde712

Name: Frontend Engineering
Author: AdityaHegde712

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.

File contents

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.

---name: frontend-engineeringdescription: 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.---<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>

Frequently asked questions