Latitude is an open-source platform for monitoring AI agents by collecting execution traces, grouping failures, dispatching coding agents to make fixes, and replaying failures to verify them. Teams use it to observe agent behavior, investigate errors, and monitor whether fixes prevent regressions. The catalogue entries include skills, instructions, and an MCP server for working with Latitude.
Borrowing it
Nothing to install: this file belongs to latitude-dev/latitude-llm. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/latitude-dev/latitude-llm/development/.agents/skills/web-frontend/SKILL.mdgit clone --depth 1 https://github.com/latitude-dev/latitude-llmWrote 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.
[](https://agentmods.dev/skills/latitude-dev/latitude-llm/web-frontend)<a href="https://agentmods.dev/skills/latitude-dev/latitude-llm/web-frontend"><img src="https://agentmods.dev/badge/skills/latitude-dev/latitude-llm/web-frontend.svg" alt="Measured on agentmods" height="20"></a>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.00067 | $0.05002 |
| Opus 5 | $0.00034 | $0.02501 |
| Sonnet 5 | $0.00013 | $0.01000 |
| Haiku 4.5 | $0.00007 | $0.00500 |
Grade A, and why
web-frontend 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 3d 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.
How it starts
The opening of the file, as written. The whole thing — 395 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Web app frontend (apps/web)
When to use: apps/web UI — routes, @repo/ui, TanStack Start server functions and collections, navigation (Link vs useNavigate), forms (useForm with createFormSubmitHandler + fieldErrorsAsStrings when Zod validation errors should appear on fields), Tailwind layout rules, design-system updates, and useEffect / useMountEffect policy.
Required design context
Before designing or editing any user-facing UI, read the root design.md. It defines the Latitude product UI rules for reuse-first discovery, composition, hierarchy, spacing, actions, responsive behavior, and route versus modal versus drawer decisions.
Treat packages/ui/src/components/, packages/ui/src/tokens/, the live apps/design-system inventory, and adjacent apps/web routes as the implementation source of truth. Search for an existing component and a comparable in-product pattern before creating a component, introducing custom styling, or adding a new token. Follow design.md when deciding whether new UI is justified; follow this skill for the required React, TanStack, route, form, and component APIs.
For project-route UI, use the local -components/section-header.tsx SectionHeader once for the route-level header, matching the Behaviors page's Layout.Header composition. A project overview defaults to the standard variant so its title has the same size and weight as the Behaviors route header; use variant="xl" only when the task and a comparable existing route justify it. Import the existing header and layout rather than recreating their structure or classes locally.
Project overview content has a strict default hierarchy: metric values may use Text.H5; panels use muted Text.H6 labels; repeated row and issue titles use compact Text.H6B; supporting copy uses muted Text.H6. Do not use Text.H3*, Text.H4*, or Text.H5* as panel, row, issue, or block titles. Do not use SectionHeader as a panel heading.
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.
- 3d ago Changed · +12 lines f03ed97ec7a3
- 7d ago First seen · 383 lines · 67 tokens per session scan A 853404afb2eb
web-frontend is a skill published in the GitHub repository latitude-dev/latitude-llm (4,629 stars, last pushed yesterday), licensed MIT. It adds 67 tokens to every session and 5,002 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.
Other skills, from other repositories
ui-checkstyle
Run the exact ESLint + Prettier + organize-imports sequence that CI's UI Checkstyle workflow runs — on just the files the PR changed — and fail the task if any file ends up with a diff. Invoke after authoring or modifying any .ts, .tsx, .js, .jsx, or .json file under openmetadata-ui/src/main/resources/ui/src/…
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
moai-design-tools
Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil designs, or exporting to React/Tailwind code.
byted-util-vite-react-tailwind
A setup guide for building frontend projects with Vite, React, Tailwind CSS, TypeScript, and Lucide icons.
remotion-video
Create motion graphics and videos using Remotion (React) with audio sync, web fonts, and TailwindCSS. Triggers on: "create a Remotion video", "React video", "motion graphics", "branded video", "product demo video", "video with voiceover". NOT for math animations, use concept-to-video.
quill-code
Edit the @posthog/quill design system locally and consume the change in products/desktop before it is published to npm. Use when changing quill components/primitives/tokens, when a quill change must be tested inside the Code app, or when the user mentions quill, the design system, the .local-quill tarball, or the…