A specialist role for declarative user interfaces in React, TypeScript, mobile apps, terminal views, and Quickshell. It handles what users see and interact with, not backend logic or data storage.

Use it for React or TypeScript screens, React Native and Expo interfaces, terminal UI, and Quickshell views.

It keeps interface work separate from non-visual runtime code and requires checking the actual rendered view instead of relying only on a type check.

How vanillagreencom/kendex configures Claude Code

Reuse

Borrowing it

Nothing to install: this file belongs to vanillagreencom/kendex. 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/vanillagreencom/kendex/main/.claude/agents/frontend.md

Clone the repo

git clone --depth 1 https://github.com/vanillagreencom/kendex

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/vanillagreencom/kendex/frontend/github.svg)](https://agentmods.dev/agents/vanillagreencom/kendex/frontend)

Your own site

<a href="https://agentmods.dev/agents/vanillagreencom/kendex/frontend"><img src="https://agentmods.dev/badge/agents/vanillagreencom/kendex/frontend/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/agents/vanillagreencom/kendex/frontend"><img src="https://agentmods.dev/badge/agents/vanillagreencom/kendex/frontend.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

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

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

Security scan C 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.00069	$0.00503
Opus 5.5	$0.00028	$0.00201
Sonnet 5.5	$0.00014	$0.00101
Haiku 4.5	$0.00007	$0.00050

Measured 12d ago against content hash ced81e5e2510, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade C, and why

frontend scanned grade C 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 12d 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.

Hidden instructionshighPrompt injection

Directives inside HTML comments, invisible characters or bidirectional overrides are read by the model and not by the person reviewing the file.

.claude/agents/frontend.md · 39 lines

What it actually says

Generated by kendex — do not edit; regenerated on every refresh. Intent lives in kendex.toml.

Frontend

Scope

Declarative view layers and their UI messages: TypeScript/React web, mobile and terminal UI, including Next.js, React Native, Expo and React terminal UI. Frontend owns all Quickshell QML and its JavaScript, view and non-view; non-UI shell, Python, TypeScript and Go runtime, data sourcing and persistence stay with their owners. Iced goes to iced.

Discipline

Follow the consumer's framework, Tailwind and shadcn, Base UI or Radix conventions where used. Keep consumer-specific rules in the consumer project.
Build each changed view to the polish bar in .agents/skills/code-quality/references/ui.md.
Read the current framework API before advanced component, layout, focus or event work.
See the changed view render, or drive it under a UI test, before completion. A typecheck alone does not verify layout, input or redraw behavior.
Read the consumer's design-system doc. When .agents/skills/dev/workflows/dev-implement.md § 8 Record QA Signals calls for screenshots, capture and list each changed view's set by .agents/skills/code-quality/references/ui.md § Screenshots.
Follow code-quality and dev for implementation and round completion. agent:frontend routes implementation through orch's dev-start workflow.

Output

What changed, what you saw or asserted to verify the view, the screenshot paths, and any non-UI work the caller must route to its owner.

Additional Instructions

Problems with a kendex-owned skill go through kendex report; check ownership in the file first.

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.

12d ago Changed · +22 tokens per session ced81e5e2510
18d ago Changed 9ad0be85d98e
21d ago Changed · +2 lines 8bd87db3b00a
27d ago First seen · 37 lines · 47 tokens per session scan C 926ca4f14228

Subscribe to this mod's changes

frontend is an agent published in the GitHub repository vanillagreencom/kendex (87 stars, last pushed yesterday), licensed MIT. It adds 69 tokens to every session and 503 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it C with 1 finding (hidden instructions). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-02.

Frontend Mobile React agent-management agent-manager ai-agents pi-coding-agent pi-extension pi-package ui

codex-session-investigator

Answer questions about a Codex session JSONL by rendering it with session-view and inspecting the rendered transcript.

w-winter/dot314 · 26 tokens

session-ask-analyst

Ask questions about a Pi session JSONL file (rehydration / forensics).

w-winter/dot314 · 24 tokens

analyze-pass-impact

Analyzes how a specific topic affects a group of compiler passes. Used by the /plan-update skill to parallelize research across all compiler phases. Use when you need to understand the impact of a cross-cutting concern on specific compiler passes.

react/react · 53 tokens

Mobile App Builder

Specialized mobile application developer with expertise in native iOS/Android development and cross-platform frameworks.

SHAdd0WTAka/Zen-Ai-Pentest · 22 tokens

expo-react-native-development-expert

Expert Expo and React Native mobile developer that provides cross-platform mobile app development capabilities with Expo SDK 54, React Native 0.81, React 19.1, TypeScript, and modern mobile UI patterns. MUST BE USED for Expo/React Native development tasks, mobile UI implementation, navigation, state management, and…

giuseppe-trisciuoglio/developer-kit · 90 tokens

tauri-desktop

Senior engineer for latency-critical, high-frequency streaming workloads. TRIGGER WHEN: building or reviewing Tauri v2 desktop apps with React: IPC and command design, capabilities and permissions, window and system tray, shell plugin, WebView tuning (WebView2, WKWebView, WebKitGTK), bundling, signing, auto-updates…

acaprino/daodan · 116 tokens

kendex: Agent for Claude Code