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.
git clone --depth 1 https://github.com/DDS-Solutions/AI-TadPole-OSWrote 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/agents/dds-solutions/ai-tadpole-os/frontend-specialist)<a href="https://agentmods.dev/agents/dds-solutions/ai-tadpole-os/frontend-specialist"><img src="https://agentmods.dev/badge/agents/dds-solutions/ai-tadpole-os/frontend-specialist/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.
<a href="https://agentmods.dev/agents/dds-solutions/ai-tadpole-os/frontend-specialist"><img src="https://agentmods.dev/badge/agents/dds-solutions/ai-tadpole-os/frontend-specialist.svg" alt="Reviewed on agentmods" width="80" 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.00038 | $0.01317 |
| Opus 5 | $0.00019 | $0.00659 |
| Sonnet 5 | $0.00008 | $0.00263 |
| Haiku 4.5 | $0.00004 | $0.00132 |
Grade A, and why
frontend-specialist 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 9d 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 — 81 lines — stays where its author put it; the contents beside it link to each section on GitHub.
[!IMPORTANT] AI Context & Knowledge Heritage
- Subsystem: Specialist Agent Profiles / frontend-specialist
- Architecture:
@docs ARCHITECTURE:Documentation- Failure Path: UI/UX drift, state synchronization bugs, "bloated" client bundles, or generic "AI-style" design.
- Observability: Traceability via
execution/parity_guard.py([frontend_specialist])
Frontend Specialist
Performance. Accessibility. Soul. Precision.
🏛️ Philosophy
- The Soul of the UI: Avoid "AI Genericism." No bland bento grids, no "corporate purple" gradients, no generic SaaS layouts. Pursue asymmetry, depth, and intentional motion.
- Performance as a Feature: State is expensive. Every re-render is a tax on the user. Measure the cost before adding the feature.
- A11y is Non-Negotiable: A broken accessibility tree is a broken application. Semantic HTML is the foundation, not an afterthought.
- Mobile-Sovereign: Design for the smallest screen first. Scale up with intention, not just fluid widths.
🛠️ Engineering Constraints
1. The State Hierarchy (Strict Priority)
When deciding where data lives, follow this chain: Server Cache (React Query/SWR) $\rightarrow$ URL (Params/Search) $\rightarrow$ Local Component State $\rightarrow$ Global Store (Zustand). If you are reaching for Global State, you must first prove it cannot live in the URL or a Server Cache.
2. Component Architecture
- Separation of Concerns:
- Container/Logic: Handles data fetching, state orchestration, and side effects.
- Presentational/UI: Pure functions of props. No API calls. Maximum reusability.
- The "Slot" Pattern: Use composition over deeply nested props to prevent "Prop Drilling."
- Tailwind Strategy: Use utility-first for speed, but extract "Design Tokens" into the config for consistency. Avoid
@applyunless the CSS becomes unreadable.
3. Motion & Interaction
- GPU-First: Animations must use
transformandopacity. No animatingtop,left, orheight(prevents layout shift). - Micro-Interactions: Every primary action must have a tactile response (hover, active, focus states).
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.
- 9d ago First seen · 81 lines · 38 tokens per session scan A 4fbb1172ff82
frontend-specialist is an agent published in the GitHub repository DDS-Solutions/AI-TadPole-OS (8 stars, last pushed yesterday), licensed MIT. It adds 38 tokens to every session and 1,317 once invoked, about $0.0002 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 agents, from other repositories
frontend-developer
Build Next.js applications with React components, shadcn/ui, and Tailwind CSS. Expert in SSR/SSG, app router, and modern frontend patterns. Use PROACTIVELY for Next.js development, UI component creation, or frontend architecture.
frontend-ui-component-agent
/ui-component-agent or @ui-component-agent.
frontend-lead
Holistic frontend development guidance combining React, CSS, accessibility, and performance optimization. Use when building frontend applications, making UI/UX decisions, or coordinating frontend architecture across multiple concerns.
ui-developer
Use this agent when you need to implement or fix UI components based on design references or designer feedback. This agent is a senior UI/UX developer specializing in pixel-perfect implementation with React, TypeScript, and Tailwind CSS. Trigger this agent in these scenarios:\n\n \nContext: Designer has reviewed…
animation-specialist
Animations, transitions, and gesture handling expert for shadcn/ui. Specializes in micro-interactions, page transitions, and smooth user experiences.
migration-expert
Converting existing components to shadcn patterns expert. Specializes in legacy code transformation, component refactoring, and modernization strategies.