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 AsyrafHussin/agent-skills --skill typescript-react-patternsgit clone --depth 1 https://github.com/AsyrafHussin/agent-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/asyrafhussin/agent-skills/typescript-react-patterns)<a href="https://agentmods.dev/skills/asyrafhussin/agent-skills/typescript-react-patterns"><img src="https://agentmods.dev/badge/skills/asyrafhussin/agent-skills/typescript-react-patterns/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/asyrafhussin/agent-skills/typescript-react-patterns"><img src="https://agentmods.dev/badge/skills/asyrafhussin/agent-skills/typescript-react-patterns.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk pass
- 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.00051 | $0.01325 |
| Opus 5.5 | $0.00020 | $0.00530 |
| Sonnet 5.5 | $0.00010 | $0.00265 |
| Haiku 4.5 | $0.00005 | $0.00133 |
Grade A, and why
typescript-react-patterns 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 — 173 lines — stays where its author put it; the contents beside it link to each section on GitHub.
TypeScript React Patterns
Type-safe React with TypeScript. Contains 33 rules across 7 categories covering component typing, hooks, event handling, refs, generics, context, and utility types.
Metadata
- Version: 2.0.0
- Rule Count: 33 rules across 7 categories
- License: MIT
When to Apply
Reference these guidelines when:
- Typing React component props
- Creating custom hooks with TypeScript
- Handling events with proper types
- Working with refs (DOM, mutable, imperative)
- Building generic, reusable components
- Setting up typed Context providers
- Fixing TypeScript errors in React code
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Component Typing | CRITICAL | comp- |
| 2 | Hook Typing | CRITICAL | hook- |
| 3 | Event Handling | HIGH | event- |
| 4 | Ref Typing | HIGH | ref- |
| 5 | Generic Components | MEDIUM | generic- |
| 6 | Context & State | MEDIUM | ctx- |
| 7 | Utility Types | LOW | util- |
Quick Reference
1. Component Typing (CRITICAL)
comp-props-interface- Use interface for props, type for unionscomp-children-types- Correct children typing (ReactNode, ReactElement)comp-default-props- Default props with destructuring defaultscomp-forward-ref- Typing forwardRef componentscomp-polymorphic- Polymorphic "as" prop typingcomp-fc-vs-function- Function declaration vs React.FCcomp-display-name- Display names for debuggingcomp-rest-props- Spreading rest props with proper types
2. Hook Typing (CRITICAL)
hook-usestate- useState with proper generic typeshook-useref- useRef for DOM elements and mutable valueshook-use-reducer- useReducer with discriminated union actionshook-use-callback- useCallback with typed parametershook-use-memo- useMemo with typed return valueshook-use-context- useContext with null checkinghook-custom-hooks- Custom hook return typeshook-generic-hooks- Generic custom hooks
What ships with it
38 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.
- AGENTS.md 149 KB
- metadata.json 1.4 KB
- README.md 1.7 KB
- rules/_sections.md 2.0 KB
- rules/_template.md 2.3 KB
- rules/comp-children-types.md 3.5 KB
- rules/comp-default-props.md 5.4 KB
- rules/comp-display-name.md 4.4 KB
- rules/comp-fc-vs-function.md 2.7 KB
- rules/comp-forward-ref.md 5.1 KB
- rules/comp-polymorphic.md 4.7 KB
- rules/comp-props-interface.md 3.2 KB
- rules/comp-rest-props.md 4.9 KB
- rules/ctx-create.md 5.0 KB
- rules/ctx-provider.md 3.9 KB
- rules/ctx-reducer.md 4.9 KB
- rules/event-click-handler.md 4.5 KB
- rules/event-form.md 3.7 KB
- rules/event-handler-types.md 3.9 KB
- rules/event-keyboard.md 3.6 KB
- rules/generic-constraints.md 4.0 KB
- rules/generic-list.md 4.4 KB
- rules/generic-select.md 3.8 KB
- rules/generic-table.md 3.7 KB
- rules/hook-custom-hooks.md 7.2 KB
- rules/hook-generic-hooks.md 9.4 KB
- rules/hook-use-callback.md 5.2 KB
- rules/hook-use-context.md 6.1 KB
- rules/hook-use-memo.md 6.4 KB
- rules/hook-use-reducer.md 7.1 KB
- rules/hook-useref.md 4.3 KB
- rules/hook-usestate.md 3.9 KB
- rules/ref-callback.md 3.3 KB
- rules/ref-dom-elements.md 3.6 KB
- rules/ref-imperative-handle.md 3.7 KB
- rules/util-component-props.md 3.8 KB
- rules/util-discriminated-unions.md 5.0 KB
- rules/util-pick-omit.md 4.1 KB
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 · 173 lines · 51 tokens per session scan A c36b24820648
typescript-react-patterns is a skill published in the GitHub repository AsyrafHussin/agent-skills (90 stars, last pushed 1mo ago), licensed MIT. It adds 51 tokens to every session and 1,325 once invoked, about $0.0002 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
frontend-ai-guide
Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates. Use when reviewing components, hooks, browser behavior, or frontend implementation completeness.
typescript-rules
React/TypeScript frontend development rules including type safety, component design, state management, and error handling. Use when implementing React components, TypeScript code, or frontend features.
flockion_engineering_typescript_react
Forces the simplest, shortest, safest solution that actually works for Flockion engineering work. Combines lazy senior-developer pragmatism with practical clean-code standards for TypeScript, React, frontend, Python, backend, APIs, cloud platforms, AI agents, orchestration services, YAML workflows, and infrastructure…
client-setup
Create a vanilla tRPC client with createTRPCClient (), configure link chain with httpBatchLink/httpLink, dynamic headers for auth, transformer on links (not client constructor). Infer types with inferRouterInputs and inferRouterOutputs. AbortController signal support. TRPCClientError typing.
adapter-express
Mount tRPC as Express middleware with createExpressMiddleware() from @trpc/server/adapters/express. Access Express req/res in createContext via CreateExpressContextOptions. Mount at a path prefix like app.use('/trpc', ...). Avoid global express.json() conflicting with tRPC body parsing for FormData.
trpc-router
Entry point for all tRPC skills. Decision tree routing by task: initTRPC.create(), t.router(), t.procedure, createTRPCClient, adapters, subscriptions, React Query, Next.js, links, middleware, validators, error handling, caching, FormData.