typescript-pro
Implements advanced TypeScript type systems, creates custom type guards, utility types, and branded types, and configures tRPC for end-to-end type safety.
Skill by https://github.com/Jeffallan
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/12-studio-typescript-pro
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions: not checked yet.
What's inside
- Skill name
typescript-pro- Description
- Implements advanced TypeScript type systems, creates custom type guards, utility types, and branded types, and configures tRPC for end-to-end type safety. Use when building TypeScript applications requiring advanced generics, conditional or mapped types, discriminated unions, monorepo setup, or full-stack type safety with tRPC.
- License
- MIT
- Metadata
- role: specialist · scope: implementation · author: https://github.com/Jeffallan · domain: language · version: 1.1.0 · triggers: TypeScript, generics, type safety, conditional types, mapped types, tRPC, tsconfig, type guards, discriminated unions · output-format: code · related-skills: fullstack-guardian, api-designer
- Instructions
- 134 lines in SKILL.md · view on GitHub
Files (6)
- SKILL.md
- advanced-types.md · references/
- configuration.md · references/
- patterns.md · references/
- type-guards.md · references/
- utility-types.md · references/
SKILL.md (first lines)
# TypeScript Pro
## Core Workflow
1. **Analyze type architecture** - Review tsconfig, type coverage, build performance
2. **Design type-first APIs** - Create branded types, generics, utility types
3. **Implement with type safety** - Write type guards, discriminated unions, conditional types; run `tsc --noEmit` to catch type errors before proceeding
4. **Optimize build** - Configure project references, incremental compilation, tree shaking; re-run `tsc --noEmit` to confirm zero errors after changes
5. **Test types** - Confirm type coverage with a tool like `type-coverage`; validate that all public APIs have explicit return types; iterate on steps 3–4 until all checks pass
## Reference Guide
Load detailed guidance based on context:
| Topic | Reference | Load When |
|-------|-----------|-----------|
| Advanced Types | `references/advanced-types.md` | Generics, conditional types, mapped types, template literals |
| Type Guards | `references/type-guards.md` | Type narrowing, discriminated unions, assertion functions |
| Utility Types | `references/utility-types.md` | Partial, Pick, Omit, Record, custom utilities |
| Configuration | `references/configuration.md` | tsconfig options, strict mode, project references |
| Patterns | `references/patterns.md` | Builder pattern, factory pattern, type-safe APIs |
## Code Examples
### Branded Types
```typescript
// Branded type for domain modeling
type Brand<T, B extends string> = T & { readonly __brand: B };
type UserId = Brand<string, "UserId">;
type OrderId = Brand<number, "OrderId">;
const toUserId = (id: string): UserId => id as UserId;
const toOrderId = (id: number): OrderId => id as OrderId;
// Usage — prevents accidental id mix-ups at compile time
function getOrder(userId: UserId, orderId: OrderId) { /* ... */ }
```
### Discriminated Unions & Type Guards
```typescript
type LoadingState = { status: "loading" };
type SuccessState = { status: "success"; data: string[] };
type ErrorState = { status: "error"; error: Error };
type RequestState = LoadingState | SuccessState | ErrorState;
// Type predicate guard
function isSuccess(state: RequestState): state is SuccessState {
return state.status === "success";
}
// Exhaustive switch with discriminated union
function renderState(state: RequestState): string {
switch (state.status) {
case "loading": return "Loading…";
case "success": return state.data.join(", ");
case "error": return state.error.message;
default: {
const _exhaustive: never = state;
throw new Error(`Unhandled state: ${_exhaustive}`);
}
}
}
```
### Custom Utility Types
```typescript
// Deep readonly — immutable nested objects
type DeepReadonly<T> = {
readonly [K in keyof T]: T[K] extends object ? DeepReadonly<T[K]> : T[K];
};
// Require exactly one of a set of keys
type RequireExactlyOne<T, Keys extends keyof T = keyof T> =
Pick<T, Exclude<keyof T, Keys>> &
{ [K in Keys]-?: Required<Pick<T, K>> & Partial<Record<Exclude<Keys, K>, never>> }[Keys];
```
### Recommended tsconfig.json
```json
{
"compilerOptions": {
"target": "ES2022",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"strict": true,
"noUncheckedIndexedAccess": true,
"noImplicitOverride": true,
"exactOptionalPropertyTypes": true,
"isolatedModules": true,
"declaration": true,
"declarationMap": true,
"incremental": true,
"skipLibCheck": false
}
}
```
## Constraints
### MUST DO
- Enable strict mode with all compiler flags
- Use type-first API design
- Implement branded types for domain modeling
- Use `satisfies` operator for type validation
- Create discriminated unions for state machines
- Use `Annotated` pattern with type predicates
- Generate declaration files for libraries
- Optimize for type inference
### MUST NOT DO
- Use explicit `any` without justification
- Skip type coverage for public APIs
- Mix type-only and value imports
- Disable strict null checks
- Use `as` assertions without necessity
- Ignore compiler performance warnings
- Skip declaration file generation
- Use enums (prefer const objects with `as const`)From 12-Studio/Tackl, MIT.
More from 12-Studio/Tackl
- 0.635score
lenis-react
12-Studio
Integrate Lenis smooth scroll into React and Next.js projects.
SkillAFreshness: A★ 10Claude Code +9 - 0.630score
webgl-expert
12-Studio
Expert guide for WebGL API development including 3D graphics, shaders (GLSL), rendering pipeline, textures, buffers, performance optimization, and canvas…
SkillAFreshness: A★ 10Claude Code +9 - 0.630score
gsap-tackl
12-Studio
Implements and orchestrates GSAP in Tackl — useAnimation, useGSAP, ScrollTrigger, Lenis sync, page transitions, and reduced-motion fallbacks.
SkillAFreshness: A★ 10Claude Code +9 - 0.630score
react-hook-creator
12-Studio
Create react hook creator operations.
SkillAFreshness: A★ 10Claude Code +9 - 0.630score
tackl-performance
12-Studio
Optimizes Tackl apps for Web Vitals, reduced motion, and scroll performance.
SkillAFreshness: A★ 10Claude Code +9 - 0.630score
react-context-setup
12-Studio
Configure react context setup operations.
SkillAFreshness: A★ 10Claude Code +9 - 0.630score
scss-modules
12-Studio
Styles React components with SCSS CSS Modules and the Tackl design system.
SkillAFreshness: A★ 10Claude Code +9 - 0.626score
motion-framer
12-Studio
Modern animation library for React and JavaScript.
SkillAFreshness: A★ 10Claude Code +9 - 0.626score
threejs-webgl
12-Studio
Comprehensive skill for Three.js 3D web development.
SkillAFreshness: A★ 10Claude Code +9 - 0.622score
react-three-fiber
12-Studio
Build declarative 3D scenes with React Three Fiber (R3F) - a React renderer for Three.js.
SkillAFreshness: A★ 10Claude Code +9 - 0.621score
web3d-integration-patterns
12-Studio
Meta-skill for combining Three.js, GSAP ScrollTrigger, React Three Fiber, Motion, and React Spring for complex 3D web experiences.
SkillAFreshness: A★ 10Claude Code +9 - 0.600score
grilling
12-Studio
Grill the user relentlessly about a plan or design.
SkillAFreshness: A★ 10Claude Code +9
Signals
- Stars
- 10
- Forks
- 2
- Open issues
- 0
- Last commit (this folder)
- Jul 22, 2026 (3 months ago)
- Last release
- Oct 11, 2026 (17 days ago)
From GitHub (fetched Oct 24, 2026).
Details
- Version
- 1.1.0
- License
- MIT
- Repository
- github.com/12-Studio/Tackl
- Website
- tackl.netlify.app/
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
Same skill elsewhere
Copies of this SKILL.md published by others; search shows only one of them.
More from https://github.com/Jeffallan
- 0.697score
angular-architect
https://github.com/Jeffallan
Generates Angular 17+ standalone components, configures advanced routing with lazy loading and guards, implements NgRx state management, applies RxJS…
SkillAFreshness: A★ 12KClaude Code +9 - 0.697score
spec-miner
https://github.com/Jeffallan
Reverse-engineering specialist that extracts specifications from existing codebases.
SkillAFreshness: A★ 12KClaude Code +9 - 0.697score
cpp-pro
https://github.com/Jeffallan
Writes, optimizes, and debugs C++ applications using modern C++20/23 features, template metaprogramming, and high-performance systems techniques.
SkillAFreshness: A★ 12KClaude Code +9 - 0.697score
code-documenter
https://github.com/Jeffallan
Generates, formats, and validates technical documentation — including docstrings, OpenAPI/Swagger specs, JSDoc annotations, doc portals, and user guides.
SkillAFreshness: A★ 12KClaude Code +9 - 0.697score
fullstack-guardian
https://github.com/Jeffallan
Builds security-focused full-stack web applications by implementing integrated frontend and backend components with layered security at every level.
SkillAFreshness: A★ 12KClaude Code +9 - 0.697score
api-designer
https://github.com/Jeffallan
Use when designing REST or GraphQL APIs, creating OpenAPI specifications, or planning API architecture.
SkillAFreshness: A★ 12KClaude Code +9
Cite this page
typescript-pro skill. Agent Mart. https://agentmart.dev/skills/12-studio-typescript-pro (last updated 2026-10-24)