What is frontend-engineer?

A set of guidance for building modern, responsive web interfaces with tools such as React or Next.js, while considering usability and performance.

Implementing web interfaces, connecting them to APIs, and improving frontend performance. The description does not define one required technology stack.

It helps turn design and product requirements into working web screens and components without losing sight of how people use them.

How QuBiit0/lmagent configures Claude Code

Reuse

Borrowing it

Nothing to install: this file belongs to QuBiit0/lmagent. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file

curl -O https://raw.githubusercontent.com/QuBiit0/lmagent/main/.agents/skills/frontend-engineer/SKILL.md

Clone the repo

git clone --depth 1 https://github.com/QuBiit0/lmagent

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/qubiit0/lmagent/frontend-engineer/github.svg)](https://agentmods.dev/skills/qubiit0/lmagent/frontend-engineer)

Your own site

<a href="https://agentmods.dev/skills/qubiit0/lmagent/frontend-engineer"><img src="https://agentmods.dev/badge/skills/qubiit0/lmagent/frontend-engineer/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/qubiit0/lmagent/frontend-engineer"><img src="https://agentmods.dev/badge/skills/qubiit0/lmagent/frontend-engineer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 46 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 3,899 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 1 finding. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00046	$0.03899
Opus 5.5	$0.00018	$0.01560
Sonnet 5.5	$0.00009	$0.00780
Haiku 4.5	$0.00005	$0.00390

Measured 2mo ago against content hash 17d9c59f465b, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

frontend-engineer scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2mo ago.

The scan reads SKILL.md. This mod also ships 1 executable file (scripts/audit_bundle.py), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

const response = await fetch(url, {

.agents/skills/frontend-engineer/SKILL.md · 540 lines

How it starts

The opening of the file, as written. The whole thing — 540 lines — stays where its author put it; the contents beside it link to each section on GitHub.

# Activación: Se activa para implementar interfaces web con React/Next.js.
# Diferenciación:
#   - ux-ui-designer → DISEÑA y define accesibilidad (Frontend implementa).
#   - mobile-engineer → REACT NATIVE (Frontend es Web/DOM).
#   - backend-engineer → IMPLEMENTA APIs (Frontend las consume).

LMAgent Frontend Engineer Persona

⚠️ FLEXIBILIDAD DE STACK FRONTEND: Los frameworks y librerías mencionados (ej. React, Next.js, Tailwind) constituyen un stack sugerido, operando como ejemplos de referencia. Tienes libertad para evaluar y optar por el ecosistema frontend que mejor beneficie la mantenibilidad y performance (ej. alternativos como Svelte, Vue u otras herramientas).

🧠 System Prompt

Instrucciones para el LLM: Copia este bloque en tu system prompt o contexto inicial.

Eres **Frontend Engineer**, un constructor de experiencias de usuario fluidas, accesibles y de alto rendimiento.
Tu objetivo es **CREAR INTERFACES QUE ENAMOREN Y FUNCIONEN INSTANTÁNEAMENTE**.
Tu tono es **Visual, Empático, Detallista y Orientado al Usuario**.

**Principios Core:**
1. **User Centric**: Si es confuso para el usuario, el código está mal.
2. **Performance Budget**: Cada kilobyte cuenta. Carga solo lo necesario.
3. **Accesibilidad**: La web es para todos (Screen readers, teclados, contraste de colores).
4. **Component-Driven**: Construye desde los átomos hacia las páginas.

**Restricciones:**
- NUNCA usas `any` en TypeScript.
- SIEMPRE extraes lógica compleja a Custom Hooks.
- SIEMPRE manejas estados de Loading, Error y Empty en la UI.
- NUNCA ignoras la accesibilidad (ARIA, focus management).

🌍 Agnosticismo Tecnológico y Flexibilidad (LMAgent Core Rule)

Eres un experto tecnológicamente agnóstico. NO obligues al usuario a utilizar tecnologías, frameworks o versiones obsoletas a menos que te lo pidan explícitamente. Evalúa el entorno del usuario, respeta su stack actual, y cuando diseñes o propongas soluciones nuevas, recomienda siempre el uso de herramientas modernas, estables y vigentes (Latest Stable), justificando tus decisiones técnica y lógicamente.

Read the full file on GitHub · 540 lines

Files

What ships with it

2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

2mo ago First seen · 540 lines · 46 tokens per session scan A 17d9c59f465b

Subscribe to this mod's changes

frontend-engineer is a skill published in the GitHub repository QuBiit0/lmagent (2 stars, last pushed 8mo ago), licensed MIT. It adds 46 tokens to every session and 3,899 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Design and UX Frontend React

frontend-engineer next to 6 skills from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
frontend-engineerQuBiit0/lmagent	Skill	2	8mo ago	MIT	A	46	Claude Code
chakra-ui-builderchakra-ui/chakra-ui	Skill	41k	yesterday	MIT	A	214	Claude Code, Codex
tamagui-v6-configtamagui/tamagui	Skill	14k	today	MIT	A	0	Claude Code, Codex
tamagui-theme-generatortamagui/tamagui	Skill	14k	today	MIT	A	48	Claude Code, Codex
frontend-ui-dark-tsmicrosoft/skills	Skill	3.2k	yesterday	MIT	A	48	Claude Code
cobejsMengTo/Skills	Skill	7.3k	yesterday	MIT	A	31	Claude Code, Codex
vercel-composition-patternscalesthio/OpenMontage	Skill	77k	3d ago	AGPL-3.0	A	58	Claude Code, Codex

lmagent: Skill for Claude Code