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 skills add cuongtl1992/vibe-skills --skill angular-tddgit clone --depth 1 https://github.com/cuongtl1992/vibe-skillsWrote 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/cuongtl1992/vibe-skills/angular-tdd)<a href="https://agentmods.dev/skills/cuongtl1992/vibe-skills/angular-tdd"><img src="https://agentmods.dev/badge/skills/cuongtl1992/vibe-skills/angular-tdd.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.00112 | $0.01842 |
| Opus 5 | $0.00056 | $0.00921 |
| Sonnet 5 | $0.00022 | $0.00368 |
| Haiku 4.5 | $0.00011 | $0.00184 |
Grade A, and why
angular-tdd 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 8d 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 — 221 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Angular TDD Workflow
Test-Driven Development workflow for Angular applications using Jest + TestBed.
Every piece of code follows the Explore → Plan → Test (RED) → Implement (GREEN) → Refactor → Review cycle.
Phase 0: EXPLORE
Before writing any code, understand the project you are working in.
- Identify Angular version — standalone components or NgModule? Signal-based or RxJS?
- Understand project structure — Nx monorepo? Feature libs? Hexagonal layers?
- Find testing setup — Jest or Karma? TestBed patterns? Existing mock strategies?
- Review existing patterns — component style, state management, data fetching approach
- Check styling — SCSS, Tailwind, Angular Material, component-scoped vs global
Exploration Output Template
Angular Version: [version] ([standalone/NgModule])
Reactivity: [Signals / RxJS / hybrid]
Project Type: [Nx monorepo / standalone app]
Structure: [feature-based / layer-based / hexagonal]
Testing: [Jest / Karma] + [TestBed patterns]
Styling: [SCSS / Tailwind / Angular Material / CSS]
State: [Signals / NgRx / RxJS services / state service pattern]
API Layer: [HttpClient + interceptors / custom client]
Key Conventions: [list notable patterns]
For the full exploration checklist, consult references/exploration-checklist.md.
Phase 1: PLAN
Analyze the requirement before writing any code or test.
Step 1: Figma Design Check
If the task involves UI work, ask the user:
"Does this task have a Figma design? If yes, please share the Figma link so I can review the design specifications (layout, spacing, colors, typography, responsive breakpoints)."
When a Figma link is provided:
- Identify all visual components needed
- Note spacing, colors, typography tokens
- Identify responsive breakpoints and variants
- Map design components to Angular components
For detailed Figma analysis process, consult references/figma-workflow.md.
Step 2: Requirement Analysis
- Understand the requirement — what is the expected behavior?
- Identify components — which Angular components, services, use cases are needed?
- List test cases — happy path, edge cases, error states, loading states, empty states
- Define the public API — component inputs/outputs, service methods, return types
What ships with it
3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 8d ago First seen · 221 lines · 112 tokens per session scan A dac923530686
angular-tdd is a skill published in the GitHub repository cuongtl1992/vibe-skills (10 stars, last pushed 5mo ago), licensed MIT. It adds 112 tokens to every session and 1,842 once invoked, about $0.0006 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
react-web
React web development with hooks, React Query, Zustand.
review-screenshot
A standard workflow for taking screenshots to check a user interface, using a dedicated review process for different verification modes.
web-dev-standards
Use when designing software architectures ('codebase-design' Deep Modules/Design-It-Twice), writing tests ('test-driven-development' mock boundaries), creating setup scripts ('interactive-wizard'), TypeScript standards, Next.js, Expo, or Monorepos.
fec-tdd-workflow
A frontend test-driven development workflow, or TDD, describes the expected behavior with a failing test, implements the smallest change to pass it, and then refactors. It covers UI components, hooks, API clients, route guards, and user workflows.
figma-to-react-workflow
Orchestrates end-to-end Figma-to-React conversion pipeline with enforced TDD, automated pixel-diff visual QA, E2E testing, and app-type awareness (web apps, Chrome extensions, PWAs). Keywords: Figma to React, design tokens, autonomous component generation, Figma conversion, Tailwind config, component library, TDD…
tdd-from-figma
Writes failing tests FIRST from Figma structure and the design token lockfile, then implementation makes them pass. Per-component TDD cycle using exact values from design-tokens.lock.json. App-type-aware: generates Chrome extension, PWA, and web app test templates. Keywords: TDD, test-driven development, Figma tests…