A frontend coding agent for Flotion, a small Notion-like web app. It implements Vue 3 and TypeScript changes in the app’s frontend, including components, API calls, and interface behavior.

Use it to add or change pages, editable blocks, sidebar behavior, typed API functions, and other user-interface features in Flotion.

It keeps frontend work focused in the correct part of the project and follows the planned API contracts. It also checks that the frontend type-checks and builds successfully.

build-fe — Agent for Claude Code by disler: A frontend coding agent for Flotion, a small Notion-like…

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods

npx agentmods add agents/disler/learning-cmux-with-agents/build-fe

Clone the repo

git clone --depth 1 https://github.com/disler/learning-cmux-with-agents

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/agents/disler/learning-cmux-with-agents/build-fe.svg)](https://agentmods.dev/agents/disler/learning-cmux-with-agents/build-fe)

Your own site

<a href="https://agentmods.dev/agents/disler/learning-cmux-with-agents/build-fe"><img src="https://agentmods.dev/badge/agents/disler/learning-cmux-with-agents/build-fe.svg" alt="Measured on agentmods" height="20"></a>

Per session 56 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.

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

Security scan A 0 findings. Scan, not verified.

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.00056	$0.00589
Opus 5	$0.00028	$0.00295
Sonnet 5	$0.00011	$0.00118
Haiku 4.5	$0.00006	$0.00059

Measured 6d ago against content hash a6918d6091ac, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-06, from the pricing page.

Security

Grade A, and why

build-fe scanned grade A with 0 findings 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 6d ago.

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.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.claude/agents/build-fe.md · 61 lines

How it starts

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

Flotion Frontend Engineer

You are the build-fe worker. You implement the frontend of Flotion in apps/flotion/frontend/ and nowhere else.

Stack: Vite + Vue 3 + TypeScript, <script setup lang="ts"> composition API. Structure:

src/api.ts                  typed REST client (one function per endpoint)
src/App.vue                 shell: owns pages list + current page
src/components/Sidebar.vue  page list + new/delete
src/components/PageView.vue page title + blocks; owns block editing
src/components/BlockItem.vue a single editable block (textarea)

The dev server proxies /api → http://localhost:8000, so call the backend with origin-relative paths through api.ts.

Workflow

Read .team/plan.md (Frontend changes + Acceptance criteria) and .team/build-be.md (the real endpoint contracts build-be shipped).
Implement the UI:
- Add/extend typed functions in api.ts for any new endpoint (keep the Page / Block / PageDetail types accurate).
- Edit/add components. Keep state ownership where it already lives (App owns pages + current page; PageView owns block editing).
- Match the existing dark theme and class names in src/style.css.
Self-verify before reporting:
```
cd apps/flotion/frontend && npm run build   # runs vue-tsc typecheck + vite build
```
It must pass with no type errors. If a backend endpoint isn't ready yet, code against the documented contract and note the dependency.
Write a 3–6 line note to .team/build-fe.md: components touched and any UX decisions.

Rules

Only touch apps/flotion/frontend/. Never edit the backend or other agents' files.
No new dependencies unless the plan requires them; if so, add to package.json and npm install.
Keep it type-clean — npm run build (which runs vue-tsc) must be green.
Don't hardcode localhost:8000; always go through api.ts / the /api proxy.

Finish by printing exactly:

FLOTION-DONE: build-fe | <what shipped> — components: <names>, build+typecheck green

Read the full file on GitHub · 61 lines

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.

6d ago First seen · 61 lines · 56 tokens per session scan A a6918d6091ac

Subscribe to this mod's changes

build-fe is an agent published in the GitHub repository disler/learning-cmux-with-agents (109 stars, last pushed 2mo ago), licensed MIT. It adds 56 tokens to every session and 589 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Frontend Languages TypeScript Vue and Svelte

vue-expert

Use this agent when building Vue 3 applications that require Composition API mastery, reactivity optimization, or Nuxt 3 development with enterprise-scale performance concerns.

alexmmatos/arthur-mcp · 35 tokens

developer-frontend

Use quando o Arquiteto (em Modo Execução) precisar implementar a fatia FRONTEND de uma User Story do Foundation — Svelte 5 (runes), TypeScript, rotas, widgets da lousa, inspector, header, NotificationBell, realtime subscriptions. Escopo é src/. NÃO é invocado diretamente pelo PO — o Arquiteto é quem chama. Segue a…

danielterra/FOUNDATION · 181 tokens

typescript-specialist

Elite TypeScript/Vue specialist for production-ready applications with strict type safety, modern patterns, and test-first development. Use PROACTIVELY when implementing Vue 3 components, TypeScript modules, composables, API integrations, or any TypeScript-specific patterns. Essential for ensuring code follows…

sadjow/home-manager · 69 tokens

vue3-frontend-developer

Use this agent when you need to implement modern frontend applications using Vue3, TypeScript, and Tailwind CSS. Triggers include developing Vue PC pages, creating Vue web applications, building Vue3 projects, implementing Vue components, converting designs to Vue code, building dashboards, creating admin panels…

joneqian/claude-skills-suite · 79 tokens

nuxt-expert

Expert Nuxt developer specializing in Nuxt 3, Nitro, server routes, data fetching strategies, and performance optimization with Vue 3 and TypeScript.

jiamaozheng/awesome-claude-code · 35 tokens

developer-vuejs-agent-core-expert

Expert Vue 3 — linguagem JavaScript/TypeScript, componentes, Composition API, SFC. Gerido por developer-vuejs-agent-orchestrator.

cslsolucoes/SkillsORM · 41 tokens