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/thebeardedbearsas/claude-craft/component-specgit clone --depth 1 https://github.com/TheBeardedBearSAS/claude-craftWrote 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/commands/thebeardedbearsas/claude-craft/component-spec)<a href="https://agentmods.dev/commands/thebeardedbearsas/claude-craft/component-spec"><img src="https://agentmods.dev/badge/commands/thebeardedbearsas/claude-craft/component-spec.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.00014 | $0.01861 |
| Opus 5 | $0.00007 | $0.00931 |
| Sonnet 5 | $0.00003 | $0.00372 |
| Haiku 4.5 | $0.00001 | $0.00186 |
Grade A, and why
component-spec 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 yesterday.
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 — 265 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Spécification Complète Composant UI/UX/A11y
Tu es l'Orchestrateur UI/UX. Tu dois produire une spécification complète d'un composant en mobilisant les 3 experts : UX pour le comportement, UI pour le visuel, A11y pour l'accessibilité.
Arguments
$ARGUMENTS
Arguments :
- Nom du composant à spécifier
- (Optionnel) Contexte d'usage
Exemple : /uiux:component-spec Button ou /uiux:component-spec "Card Séjour" contexte SaaS tourisme
MISSION
Étape 1 : Analyse UX (Expert UX)
Définir le comportement et l'usage :
- Objectif du composant
- Cas d'utilisation principaux
- Interactions attendues
- États fonctionnels
Étape 2 : Spécification UI (Expert UI)
Définir le visuel :
- Anatomie et structure
- Variantes
- États visuels
- Tokens utilisés
- Responsive
Étape 3 : Spécification A11y (Expert A11y)
Définir l'accessibilité :
- Sémantique HTML
- Attributs ARIA
- Navigation clavier
- Annonces lecteur d'écran
Étape 4 : Synthèse
══════════════════════════════════════════════════════════════
📦 SPÉCIFICATION COMPOSANT : {NOM}
══════════════════════════════════════════════════════════════
Catégorie : Atom | Molecule | Organism
Date : {date}
Version : 1.0
──────────────────────────────────────────────────────────────
🧠 COMPORTEMENT (UX)
──────────────────────────────────────────────────────────────
### Objectif
{Description du rôle et de la valeur pour l'utilisateur}
### Cas d'utilisation
| Cas | Contexte | Comportement attendu |
|-----|----------|---------------------|
| Principal | {contexte} | {comportement} |
| Secondaire | {contexte} | {comportement} |
### États fonctionnels
| État | Déclencheur | Comportement |
|------|-------------|--------------|
| default | Initial | {comportement} |
| loading | Action en cours | {comportement} |
| success | Action réussie | {comportement} |
| error | Échec | {comportement} |
| empty | Pas de données | {comportement} |
### Feedback utilisateur
| Action | Feedback | Délai |
|--------|----------|-------|
| Click | {feedback} | Immédiat |
| Hover | {feedback} | Immédiat |
| Submit | {feedback} | < 200ms |
──────────────────────────────────────────────────────────────
🎨 VISUEL (UI)
──────────────────────────────────────────────────────────────
### Anatomie
┌─────────────────────────────────┐ │ [Icon] Label [Action] │ │ Description │ └─────────────────────────────────┘
- **Slot 1** : {description}
- **Slot 2** : {description}
### Dimensions
| Propriété | Mobile | Tablet | Desktop |
|-----------|--------|--------|---------|
| min-width | {val} | {val} | {val} |
| height | {val} | {val} | {val} |
| padding | {val} | {val} | {val} |
### Variantes
| Variante | Usage | Différences visuelles |
|----------|-------|----------------------|
| primary | CTA principal | {tokens} |
| secondary | Action secondaire | {tokens} |
| ghost | Action tertiaire | {tokens} |
| destructive | Suppression | {tokens} |
### États visuels
| État | Background | Border | Text | Autres |
|------|------------|--------|------|--------|
| default | --color-{x} | --color-{x} | --color-{x} | |
| hover | --color-{x} | --color-{x} | --color-{x} | cursor: pointer |
| focus | --color-{x} | --color-{x} | --color-{x} | outline: 2px |
| active | --color-{x} | --color-{x} | --color-{x} | transform |
| disabled | --color-{x} | --color-{x} | --color-{x} | opacity: 0.5 |
| loading | --color-{x} | --color-{x} | --color-{x} | spinner |
### Micro-interactions
| Trigger | Animation | Duration | Easing |
|---------|-----------|----------|--------|
| hover | {effect} | 150ms | ease-out |
| click | {effect} | 100ms | ease-in |
| focus | {effect} | 0ms | - |
### Tokens utilisés
```css
/* Couleurs */
--color-primary-500
--color-neutral-100
--color-error-500
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.
- yesterday First seen · 265 lines · 14 tokens per session scan A 1595634ecc58
component-spec is a command published in the GitHub repository TheBeardedBearSAS/claude-craft (105 stars, last pushed 2d ago), licensed MIT. It adds 14 tokens to every session and 1,861 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-09-03.
Other commands, from other repositories
test-suite
Run comprehensive test suite with coverage analysis.
assemble-team
Assemble a pre-built agent team for parallel work - review, feature, debug, cross-platform, full-stack, or research.
standardize-claude-md
Add missing toolkit sections (Related Global Rules, Quick Start) to existing CLAUDE.md.
checklist
Generate a custom checklist for the current feature based on user requirements.
clarify
Identify underspecified areas in the current feature spec by asking up to 5 highly targeted clarification questions and encoding answers back into the spec.
specify
Create or update the feature specification from a natural language feature description.