An AI assistant specialized in modern web, mobile, and game frontend architectures, adhering to strict performance and accessibility standards.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install frontend-engineer
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install frontend-engineer using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Frontend Engineer?
The Frontend Engineer skill acts as a versatile polyglot developer capable of operating across diverse frontend domains. By dynamically selecting specialized roles based on user input, it delivers production-grade code that integrates accessibility, performance optimization, and rigorous testing from the start.
Whether scaffolding a React application with Tailwind CSS, structuring a native iOS app with SwiftUI, or writing optimized Minecraft Spigot plugins, this skill structures code around enterprise design patterns. It guarantees compliant layouts, strict TypeScript types, and comprehensive unit tests to reduce development overhead.
Frontend Engineer Use Cases
- Constructing responsive, component-driven web interfaces using React, Vue, Svelte, or Angular with optimized CSS frameworks like Tailwind CSS.
- Designing high-performance native iOS or Android apps, as well as cross-platform mobile solutions using React Native or Flutter.
- Writing interactive game UI scripts in Unity (C#) or crafting robust Minecraft server plugins (Bukkit, Spigot, Paper).
- Designing comprehensive architecture plans, writing Architecture Decision Records (ADRs), and executing UI/UX evaluations and accessibility audits.
How Frontend Engineer Works
- Trigger Detection: Recognizes user intents related to building user interfaces, responsive design, component creation, or framework-specific scaffolding.
- Mode Selection: Evaluates the specified tech stack to select the appropriate specialization mode, defaulting to Web Frontend (React + TypeScript + Tailwind) if none is specified.
- Architecture Planning: Proposes components, state management libraries, and design patterns tailored to the chosen platform.
- Code Generation: Delivers production-ready code complete with TypeScript interfaces, localized resources, and platform-specific optimizations.
- Validation and QA Checklist: Executes quality checks against performance budgets, responsive design breakpoints, and WCAG 2.2 AA accessibility standards.
Frontend Engineer Setup
To install and activate the Frontend Engineer skill, use the CLI:
openclaw skills install frontend-engineer
For advanced security scanning and dependency audits (e.g., XSS/CSRF testing), you can install the optional security companion:
openclaw skills install qa-security
Frontend Engineer Data Schema & Taxonomy
The Frontend Engineer skill organizes outputs according to standardized file structures depending on the selected mode. Below is an overview of the structured folder hierarchy applied to projects:
| Directory / File | Description |
|---|---|
lib/core/ |
Shared utilities, global configurations, routing, and Dependency Injection setup. |
lib/data/ |
Remote API data sources, database implementations, and DTO models. |
lib/domain/ |
Pure business entities and abstract repository contracts. |
lib/presentation/ |
UI pages, custom widgets, state management controllers (Bloc, Riverpod, etc.). |
Each module deliverable enforces a strict standard including TypeScript interfaces for all components, unit tests, and accessible semantic HTML elements mapped in structural order.
Frontend Engineer Advanced Features
- Architecture Decision Records (ADRs): Standardized templates for documenting design trade-offs, constraints, and long-term project consequences.
- Multi-Surface Deployment: Design layouts matching specific desktop, mobile, and web canvas responsive requirements.
- Unidirectional Data Flow: State-driven architectures utilizing modern paradigms like stateful macros (SwiftUI), Jetpack Compose flows, or React state management.
- Performance Budget Alignment: Code optimized for Core Web Vitals targets, including First Contentful Paint (<1.5s) and Cumulative Layout Shift (<0.1).
SKILL.md
Loading
Related Openclaw Skills
MangoGen Ecosystem Quickstart
A local-first onboarding skill that helps you install, pay for, and verify Openclaw Skills without exposing private notes or source code.
dealwork
An autonomous marketplace integration that enables AI agents and humans to hire, collaborate, and pay each other using escrow-backed contracts.
Xiaohongshu Viral Note Agent Skill
An AI-agent capability designed for content research, automated copy generation, compliance auditing, and secure authorized publishing on Xiaohongshu.
Ben McAdams MCP
Openclaw Skills connects AI agents to Ben McAdams's public MCP server for structured access to his resume, portfolio, and blog notes.
Memory System
Openclaw Skills automates a four-layer memory pipeline that captures live signals, distills durable knowledge, and syncs it to Obsidian.
Paper Doctor
Paper Doctor turns academic drafts into peer-review style diagnostic reports with scores, issues, and rewrite guidance.
Featured*
