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 shinpr/claude-code-workflows --skill typescript-rulesgit clone --depth 1 https://github.com/shinpr/claude-code-workflowsWrote 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/shinpr/claude-code-workflows/typescript-rules)<a href="https://agentmods.dev/skills/shinpr/claude-code-workflows/typescript-rules"><img src="https://agentmods.dev/badge/skills/shinpr/claude-code-workflows/typescript-rules/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/shinpr/claude-code-workflows/typescript-rules"><img src="https://agentmods.dev/badge/skills/shinpr/claude-code-workflows/typescript-rules.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.00039 | $0.01300 |
| Opus 5.5 | $0.00016 | $0.00520 |
| Sonnet 5.5 | $0.00008 | $0.00260 |
| Haiku 4.5 | $0.00004 | $0.00130 |
Grade A, and why
typescript-rules 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 — 101 lines — stays where its author put it; the contents beside it link to each section on GitHub.
TypeScript Development Rules (Frontend)
Comment Writing Rules
Code first: names and types carry meaning; a comment must add what code cannot, and one comment per decision is enough.
- Explain why a component memoizes, guards, or re-renders, not what the JSX renders.
- Record decisions and rationale; leave chronological history to version control.
Type Safety
Default Rule: Prefer unknown, generics, or union types over any. Retain any only when an existing external, generated, or legacy public signature requires it, or when replacing it prevents the project type check from expressing a safe generic relationship. Record the declaration path or type-check result that proves the constraint. When a local adapter can preserve compatibility and expose a safer type within the user request or current task/design artifact, implement the adapter; otherwise confine any to the smallest adapter or public-signature boundary, document the reason, and validate untrusted data before it enters typed application code.
Frontend Boundaries
- React Props/State: use the declared application types.
- External API responses: treat unvalidated payloads as
unknownand validate at the boundary. A generated client may retain its declared type when it also enforces the contract at runtime. localStorage/sessionStorage: handlestring | null; treat parsed data asunknownuntil validated.- URL parameters: handle the router or platform's nullable string shape, then parse and validate before converting to a domain type.
- Exported APIs and important boundaries: declare return types; allow inference for local implementations when the contract remains clear.
Type Complexity Review Signals
Use these as review prompts, not pass/fail thresholds. Existing project conventions and the component's responsibility take precedence.
- Props count: review ownership or splitting above 10.
- Optional props: review defaults or ownership when more than half are optional.
- Nested prop structures: review flattening beyond 2 levels.
- Type assertions: review the boundary when 3+ assertions are required.
- External API types: represent the actual external shape and convert at the application boundary.
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 · 101 lines · 39 tokens per session scan A 132fcc9ed782
typescript-rules is a skill published in the GitHub repository shinpr/claude-code-workflows (698 stars, last pushed 4d ago), licensed MIT. It adds 39 tokens to every session and 1,300 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-typescript-rules
Applies React/TypeScript type safety, component design, and state management rules. Use when implementing React components.
tanstack-form-composition
Migrate a React @tanstack/react-form codebase from the prop-drilled useForm + erased-form-type pattern to the official createFormHook composition API (useAppForm / withForm / field.X). Use when a project threads a form object (often cast to an any-erased type like ReactFormExtendedApi ) through field-wrapper…
react-frontend
React, TypeScript, and Next.js patterns for frontend development. Use when building React components, managing state, fetching data, optimizing performance, or working with Next.js App Router. Covers React 18-19, hooks, Server Components, and type-safe patterns.
react-patterns
React + TypeScript component and hook standards. TRIGGER when: creating components, custom hooks, or reviewing React code. SKIP: visual styling and theme tokens (use mui-styling); global store design (use state-management).
typescript-react-patterns
TypeScript best practices for React development. Use when writing typed React components, hooks, events, refs, or generic components. Triggers on tasks involving TypeScript errors, type definitions, props typing, or type-safe React patterns.
async-state-type
Avoid contradictory state types for async data fetching. Use Suspense or discriminated unions instead. Use when writing or reviewing async data fetching code in React/TypeScript.