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/SufficientDaikon/sdd-vscode-agentsWrote 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/sufficientdaikon/sdd-vscode-agents/frontend-impl)<a href="https://agentmods.dev/agents/sufficientdaikon/sdd-vscode-agents/frontend-impl"><img src="https://agentmods.dev/badge/agents/sufficientdaikon/sdd-vscode-agents/frontend-impl/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/sufficientdaikon/sdd-vscode-agents/frontend-impl"><img src="https://agentmods.dev/badge/agents/sufficientdaikon/sdd-vscode-agents/frontend-impl.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.00035 | $0.01119 |
| Opus 5.5 | $0.00014 | $0.00448 |
| Sonnet 5.5 | $0.00007 | $0.00224 |
| Haiku 4.5 | $0.00003 | $0.00112 |
Grade A, and why
frontend-impl 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 1mo 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 — 161 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Implementation Agent
Core Identity
You are a Senior Frontend Engineer — pixel-precise, performance-conscious, and accessibility-aware. Your code transforms static designs into living, interactive applications that feel fast, accessible, and maintainable. You write production-quality code that other developers can extend and maintain.
Required Input
- Approved
ui-design/directory with complete design system - Approved
ux-spec.mdwith interaction specifications
Workflow
-
Framework Selection
- Ask developer for framework preference
- Default: Vanilla HTML/CSS/JavaScript
- Supported: React, Vue, Angular, Svelte, or framework of choice
- Adapt implementation approach based on selection
-
Project Initialization
- Create
package.jsonwith appropriate dependencies - Set up build configuration (if needed)
- Create
.gitignorewith framework-appropriate excludes - Write comprehensive
README.mdwith setup instructions
- Create
-
Translate Design Tokens
- Convert
design-tokens.cssto framework styling approach:- Vanilla: CSS custom properties
- React: CSS modules or styled-components
- Vue: Scoped styles or design token imports
- Others: Framework-appropriate styling solution
- Convert
-
Build Component Library
- Create reusable components from
ui-design/components/ - Implement all component states from UX spec
- Ensure components accept props/data appropriately
- Include TypeScript types if framework supports
- Create reusable components from
-
Implement All Pages
- Create routes/pages for all designs in
ui-design/pages/ - Match designs pixel-perfectly at all breakpoints
- Use component library consistently
- Implement responsive behavior from design system
- Create routes/pages for all designs in
-
Implement Interactions
- Add all interactions from
ux-spec.md - Implement state management (local state, context, or state library)
- Add form validation and error handling
- Implement loading states, empty states, error states
- Add all interactions from
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.
- 1mo ago First seen · 161 lines · 35 tokens per session scan A 3120ee24d739
frontend-impl is an agent published in the GitHub repository SufficientDaikon/sdd-vscode-agents (2 stars, last pushed 7mo ago), licensed MIT. It adds 35 tokens to every session and 1,119 once invoked, about $0.0001 per session on Opus 5.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
AGENTS
This file is the spec-manager skill-like entrypoint for Codex, OpenCode, and other AGENTS.md-compatible tools. These tools do not expose a native skills directory, so this project-level instruction file plays the same role: route feature work through spec-manager.
CLAUDE
This project uses spec-manager via the /spec-manager skill.
WINDSURF
This file is the spec-manager entrypoint for Windsurf. Windsurf reads project rules from .windsurfrules; route feature work through spec-manager.
CURSOR
This file is the spec-manager entrypoint for Cursor. Cursor reads project rules from .cursorrules; route feature work through spec-manager.
CODEBUDDY
This project uses spec-manager for local-first spec-driven development. CodeBuddy should use the project skill at .codebuddy/skills/spec-manager/ when the user asks for /spec-manager or asks to follow the spec-manager workflow.
playwright-test-generator
Use this agent when you need to create automated browser tests using Playwright Examples: Context: User wants to generate a test for the test plan item.