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 EliasOulkadi/shokunin --skill component-forgegit clone --depth 1 https://github.com/EliasOulkadi/shokuninWrote 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/eliasoulkadi/shokunin/component-forge)<a href="https://agentmods.dev/skills/eliasoulkadi/shokunin/component-forge"><img src="https://agentmods.dev/badge/skills/eliasoulkadi/shokunin/component-forge/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/skills/eliasoulkadi/shokunin/component-forge"><img src="https://agentmods.dev/badge/skills/eliasoulkadi/shokunin/component-forge.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.03693 |
| Opus 5.5 | $0.00045 | $0.01477 |
| Sonnet 5.5 | $0.00022 | $0.00739 |
| Haiku 4.5 | $0.00011 | $0.00369 |
Grade A, and why
component-forge 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 — 457 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Component Forge
Build components that survive every state, at every screen size, under every edge case. Inspired by Heydon Pickering (Inclusive Components), React core team patterns, and Emil Kowalski's design engineering philosophy.
Workflow
Step 1: Determine component type
| Type | Description | Example |
|---|---|---|
| Presentational | Pure rendering, props-driven | Button, Card, Badge |
| Composable | Wraps children with behavior | Modal, Tooltip, Accordion |
| Data-fetching | Reads from API/store | UserProfile, OrderList |
| Layout | Arranges children | Sidebar, Grid, Stack |
| Form | Input + validation | LoginForm, SearchInput |
Step 2: Scaffold component
scripts/scaffold-component.sh Button react
scripts/scaffold-component.sh Modal vue
scripts/scaffold-component.sh Accordion svelte
Windows: The scaffold script requires Git Bash or WSL. Not compatible with PowerShell or CMD.
Creates:
Button/
Button.tsx
Button.types.ts
Button.test.tsx
index.ts
Step 3: Implement states with discriminated union
type State<T> =
| { status: 'idle' }
| { status: 'loading' }
| { status: 'empty' }
| { status: 'error'; error: Error }
| { status: 'success'; data: T }
function Profile({ userId }: { userId: string }) {
const [state, setState] = useState<State<User>>({ status: 'idle' })
if (state.status === 'loading') return <LoadingSkeleton />
if (state.status === 'error') return <ErrorState error={state.error} onRetry={fetch} />
if (state.status === 'empty') return <EmptyState message="No user found" />
if (state.status === 'success') return <UserProfile user={state.data} />
return null
}
Every data-fetching component renders all five states.
Step 4: Apply accessibility checklist
- All interactive elements keyboard reachable (Tab ? Enter/Space)
- ARIA labels on icon-only buttons
- Focus trap in modals and dialogs
- Loading state announced via
aria-live="polite" - Error state has
role="alert" - Color is not the only differentiator (add icon/text)
- Proper heading hierarchy (h1 ? h2 ? h3, no skips)
- Touch targets = 44-44px
-
prefers-reduced-motionrespected
What ships with it
5 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.
- 1mo ago First seen · 457 lines · 112 tokens per session scan A e014f0ee7c56
component-forge is a skill published in the GitHub repository EliasOulkadi/shokunin (112 stars, last pushed 19d ago), licensed MIT. It adds 112 tokens to every session and 3,693 once invoked, about $0.0004 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-30.
Other skills, from other repositories
portable-text-serialization
Render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text. Use when implementing Portable Text rendering in any frontend framework, building custom serializers for non-standard block types, converting Portable Text to HTML strings server-side, converting Portable Text to Markdown…
graphql-client
Build Apollo Client or urql queries and mutations, manage cache behavior, and handle authentication and errors.
zoom-meeting-sdk-web-component-view
Zoom Meeting SDK Web - Component View. Embeddable Zoom meeting components with Promise-based API for flexible integration. Ideal for React/Vue/Angular apps and custom layouts. Uses ZoomMtgEmbedded with async/await patterns and embeddable UI containers.
frontend
Builds, styles, and polishes anything drawn with HTML, CSS, or SVG: web UI, pages, components, HTML reports rendered to PDF or print, figures, PNG/SVG diagrams, slides, and images for Notion or Slack. Use for any styling, layout, animation, or visual-quality task, or when asked to make something look or feel a certain…
figma-codegen
Generate framework-aware code from a Figma design. Reads the project's stack profile and emits code matching the existing framework (React/Vue/Svelte/Next/etc.) and styling (Tailwind/CSS/CSS-in-JS), reusing existing components and design tokens instead of regenerating from scratch. Triggers whenever the user wants a…
moai-domain-uiux
UI/UX design systems specialist covering accessibility, icons, theming, design tokens, and user experience patterns. Use when working on design systems, WCAG compliance, ARIA patterns, or dark mode theming.