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.
npx agentmods add skills/soden46/engineer-flow/frontend-uinpx skills add soden46/engineer-flow --skill frontend-uigit clone --depth 1 https://github.com/soden46/engineer-flowWrote 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/soden46/engineer-flow/frontend-ui)<a href="https://agentmods.dev/skills/soden46/engineer-flow/frontend-ui"><img src="https://agentmods.dev/badge/skills/soden46/engineer-flow/frontend-ui.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 | $0.00023 | $0.00950 |
| Opus 5 | $0.00012 | $0.00475 |
| Sonnet 5 | $0.00005 | $0.00190 |
| Haiku 4.5 | $0.00002 | $0.00095 |
Grade A, and why
frontend-ui 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 5d 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 — 135 lines — stays where its author put it; the contents beside it link to each section on GitHub.
frontend-ui
Use this skill for UI components, forms, layouts, interaction behavior, responsive design, and accessibility.
Principles
Keep UI state explicit.
Separate presentation from unrelated business or persistence logic where practical.
Forms should provide:
- clear labels
- validation feedback
- useful error states
- loading/submission state
- accessible interaction
Consider:
- keyboard usage
- focus management
- semantic structure
- screen readers
- responsive layouts
- empty states
- loading states
- error states
Avoid unnecessary rendering or state duplication.
Preserve user input where practical when recoverable errors occur.
Use the project's existing design system and component conventions.
Browser-Driven UI Inspection
When the task involves visual UI work and a browser-capable tool is available, inspect the real rendered interface instead of relying only on source files.
Useful browser-capable tools may include:
- host browser tools
- browser MCP tools
- Playwright or Playwright MCP
- agent-browser
- compatible external browser or UI inspection skills
Do not hardcode a single browser tool as mandatory. Use the best available tool for the host and project.
If no browser-capable tool or runnable app is available, state that limitation and avoid claiming visual or runtime parity.
Inspect relevant:
- rendered layout and visual hierarchy
- DOM structure
- accessibility tree or semantic structure
- typography
- spacing
- color usage
- component density
- navigation structure
- loading, empty, error, hover, focus, and active states
- console errors
- network or asset failures when visible in the browser
Reference-Driven UI Reconstruction
Use this workflow when the user provides a reference website, screenshot, design, or existing UI to emulate.
- Open or inspect the reference with the best available browser-capable tool.
- Capture the interface structure, layout, spacing rhythm, typography scale, color tokens, component patterns, navigation, responsive behavior, and interaction states.
- Separate the reusable visual language from site-specific content, logos, proprietary media, brand assets, and exact copy.
- Inspect the target project and its current design system, components, routes, backend contracts, and frontend stack.
- Map the reference design into the target project's existing conventions instead of blindly cloning markup or adding an unrelated design system.
- Implement the smallest coherent UI change that satisfies the task.
- Re-open the local app and compare against the intended visual direction.
- Iterate until the implemented UI is visually coherent across the required states and viewports.
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.
- 5d ago First seen · 135 lines · 23 tokens per session scan A e134fefececb
frontend-ui is a skill published in the GitHub repository soden46/engineer-flow (3 stars, last pushed 2d ago), licensed MIT. It adds 23 tokens to every session and 950 once invoked, about $0.0001 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-31.
Other skills, from other repositories
todos
This chat has a shared, live TODO plan — your tasks for the conversation, which the user also edits. Read this skill and reach for the todo tools whenever a request takes more than a couple of steps. It covers the plan model (group = task, items = its steps; loose items are the user's lane), how to work it: propose…
writing-workflow-skills
Use when adding a new workflow skill to pi-thinkrail-workflow, changing an existing workflow skill's role, trigger, handoff, or structure, or checking a workflow skill against the workflow system's rules. Not for authoring general-purpose skills outside this package.
writing-specs
Use when a workflow step drafts or revises a spec artifact — a goal-and-requirements, an architecture, or a module SPEC — or when a workflow skill names it at such a step. The shared quality bar for specs — not a workflow, nothing to execute.
clarify
Adaptive requirements clarification with auto-depth routing. Shallow (Q&A) for simple tasks, Deep (exploration + DRAFT + PLAN) for complex ones. Escalates automatically when ambiguity persists.
ai-ml-development
AI and machine learning development with PyTorch, TensorFlow, and LLM integration. Use when building ML models, training pipelines, fine-tuning LLMs, or implementing AI features.
espalier-migrate
Migrate an existing harness/espalier install to the current Espalier version — auto-detects which of v0.1→v0.2, v0.3→v0.4, v0.4→v0.5, the v0.5.3 coder-agent patch, v0.5→v0.6 (Stage 1 grill), v0.6→v0.7 (read-only /espalier-ask lane), v0.7→v0.8 (requirements approval gate), the v0.8.1 impact-analysis agent patch, the…