Engineering

Frontend

engineering/skills/frontend

Frontend engineering skill for browser-facing implementation, UI systems, and design-quality work.

Use for frontend engineering work such as components, routes, state management, accessibility, performance, design-system integration, and browser-facing debugging or refactors.

Install This Skill

This skill now lives in the engineering department plugin, so every command targets the department-scoped path instead of the old flat skills/ layout.

Vercel `npx skills`

npx -y skills add ./engineering/skills/frontend

Portable single-skill install. Use the department root to install the full plugin as skills.

Codex manual install

mkdir -p ~/.codex/skills
cp -R engineering/skills/frontend ~/.codex/skills/

Copies only this skill into Codex from the new department-scoped repo layout.

Codex `$skill-installer`

https://github.com/alvarovillalbaa/plugins/tree/main/engineering/skills/frontend

Direct GitHub path for Codex skill-installer or any runtime that installs from a skill folder URL.

OpenClaw manual install

mkdir -p ~/.openclaw/skills
cp -R engineering/skills/frontend ~/.openclaw/skills/

Useful when OpenClaw should load one skill without importing the whole department.

Repo source

https://github.com/alvarovillalbaa/plugins/tree/main/engineering/skills/frontend

Browse the live source, references, examples, templates, and scripts directly.

Department plugin

engineering

What it does

Frontend engineering skill for browser-facing implementation, UI systems, and design-quality work.

How it works

Pair with [`../agentic-development/SKILL.md`](../agentic-development/SKILL.md) for repo orientation and proof planning.
Map framework boundaries, route ownership, state owners, design-system sources, analytics seams, and error-reporting seams before editing.
Choose the right artifact level before coding: primitive, composed control, domain component, page section, hook, store, or route.