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 commands/christopherlouet/claude-base/dev-componentgit clone --depth 1 https://github.com/christopherlouet/claude-baseWhat 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.00000 | $0.00512 |
| Opus 5 | $0.00000 | $0.00256 |
| Sonnet 5 | $0.00000 | $0.00102 |
| Haiku 4.5 | $0.00000 | $0.00051 |
Grade A, and why
dev-component 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 2d 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 — 56 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Agent DEV-COMPONENT
Generate a complete UI component — or a custom React hook — with tests, types and documentation.
Request context
$ARGUMENTS
Objective
Create a complete React component (or a reusable custom hook) following the TDD approach: types first, then tests (RED), implementation (GREEN), refactoring and Storybook.
Custom hook mode
When the request is a hook rather than a component:
- Define the hook (problem, parameters, return, side effects) and its types (
Options,Return) with JSDoc. - Write tests with
renderHook(initial state, success, errors, refetch, options change). - Implement (useState/useEffect/useCallback/useMemo); clean up side effects (AbortController, clearTimeout, removeEventListener) — no memory leaks.
- Output:
use[HookName].ts+use[HookName].test.ts+ export inindex.ts+ usage docs.
Workflow
- Define the component: name, framework, props/API, internal state, variants
- Create the types (
[ComponentName].types.ts) with JSDoc - Write the tests (
[ComponentName].test.tsx): render, variants, click, disabled, className - Implement the component (
[ComponentName].tsx) with forwardRef, clsx, CSS modules - Create the Storybook stories (
[ComponentName].stories.tsx) with argTypes - Verify: typed props, disabled handling, modular CSS, tests >80%, accessibility (aria-*, role, tabIndex)
Expected output
[ComponentName].tsx- Main component[ComponentName].types.ts- TypeScript types[ComponentName].test.tsx- Unit tests[ComponentName].stories.tsx- Storybook documentation[ComponentName].module.css- Stylesindex.ts- Export
Related agents
| Agent | When to use it |
|---|---|
/dev:dev-tdd |
Complementary tests / TDD cycle |
/qa:wcag-audit |
Component accessibility audit |
/qa:qa-design |
Verify responsive/UI design |
IMPORTANT: Always type props with explicit interfaces.
YOU MUST add tests for each prop and behavior.
NEVER forget accessibility (aria-label, role, keyboard navigation).
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.
- 2d ago First seen · 56 lines · 0 tokens per session scan A 9cd4774a17ec
dev-component is a command published in the GitHub repository christopherlouet/claude-base (5 stars, last pushed 2d ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 512 tokens. 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 commands, from other repositories
cm
Stage working tree changes and create a Conventional Commit (no push).
address
Address code review feedback — corroborate, validate, and implement changes from a review's final.md.
post
Post the current OCR review to a GitHub PR.
show
Display a past OCR review session.
implement
Execute implementation by processing atomic task files one at a time with Context Pinning (Atomic Traceability Model).
contract-version-bump
Classify and apply a version bump to a machine-readable contract (JSON Schema, API spec, config schema) — version literals, consumer compatibility, changelog entry, downstream drift.