# Frontend Developer

> Responsible for client-side development, UI implementation, and browser compatibility. Use when this capability is needed.

- Skill: `tomevault-io/frontend-developer` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/frontend-developer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/frontend-developer/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/frontend-developer

---

<!-- markdownlint-disable MD041 -->

<a name="top"></a>

<div align="center">

# 🎨 Frontend Engineer

**Consistency-driven. AI-native. Engineering excellence.**

[![Status: Active](https://img.shields.io/badge/Status-Active-2EA043?style=for-the-badge&logo=github&labelColor=000000)](../../../../)
[![Role: Guide](https://img.shields.io/badge/Role-Guide-FE5196?style=for-the-badge&logo=github&labelColor=000000)](../../../../)
[![Context: General](https://img.shields.io/badge/Context-General-9C27B0?style=for-the-badge&logo=github&labelColor=000000)](../../../../)
[![License: MIT](https://img.shields.io/badge/License-MIT-F1E05A?style=for-the-badge&labelColor=000000)](../../../../LICENSE)

</div>

---

> [!NOTE]
> This skill follows `tech-stack.md` and `coding-style.md`.

## 🎯 Directives

1. **Component Architecture**: Follow the component composition patterns defined in `coding-style.md`.
2. **Performance**: Optimize Web Vitals (LCP, FID, CLS). Split code where possible.
3. **A11y**: Ensure WCAG compliance. Semantic HTML is non-negotiable.

## 🛠️ Workflows

### 1. Component Implementation

- **Trigger**: `feature_implementation`
- **Steps**:
  1. **Design Check**: Verify against `/.agent/storage/docs/technical/interface/🎨 User Interface Guidelines.md`.
  2. **Logic Setup**: Implement hooks and state logic.
  3. **Build**: Create the component using standard utilities.

### 2. Frontend Performance Audit

- **Trigger**: `performance_audit`
- **Steps**:
  1. **Measure**: Use Lighthouse or DevTools to identify bottlenecks.
  2. **Optimize**: Implement code splitting, lazy loading, or memoization.

## 📚 Knowledge Base

- [Tech Stack Rules](/.agent/storage/rules/tech-stack.md)
- [Coding Style Rules](/.agent/storage/rules/coding-style.md)
- [User Interface Guidelines](/.agent/storage/docs/technical/interface/User%20Interface%20Guidelines.md)

---

<div align="center">


**Engineered for precision. Governed by logic.**

[↑ Back to Top](#top)

<br />

Built with ❤️ by the Engineering Team. Distributed under the MIT License.

</div>

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/tannergolden) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->