How do I install the Frontend Developer skill?

Run npx skillmds@latest add tomevault-io/frontend-developer 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 Developer safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Frontend Developer?

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 Developer free to use?

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

Who published Frontend Developer?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Frontend Developer by tomevault-io — Agent Skill

Name: Frontend Developer
Author: tomevault-io

File contents

🎨 Frontend Engineer

Consistency-driven. AI-native. Engineering excellence.

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

🎯 Directives

Component Architecture: Follow the component composition patterns defined in coding-style.md.
Performance: Optimize Web Vitals (LCP, FID, CLS). Split code where possible.
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

Engineered for precision. Governed by logic.

↑ Back to Top

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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: frontend-developerdescription: Responsible for client-side development, UI implementation, and browser compatibility. Use when this capability is needed.---<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`.## 🎯 Directives1. **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.

Frequently asked questions

Frontend Developer