typescript-style
TypeScript coding style enforcement (ESLint, type safety, React patterns). Auto-loads when writing or reviewing TypeScript/JavaScript code.
Best use case
typescript-style is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
TypeScript coding style enforcement (ESLint, type safety, React patterns). Auto-loads when writing or reviewing TypeScript/JavaScript code.
Teams using typescript-style should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/typescript-style/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How typescript-style Compares
| Feature / Agent | typescript-style | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
TypeScript coding style enforcement (ESLint, type safety, React patterns). Auto-loads when writing or reviewing TypeScript/JavaScript code.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
SKILL.md Source
# TypeScript/JavaScript Style Best Practices Skill
This skill enforces TypeScript strict mode, ESLint standards, and modern patterns for frontend development.
## Core Standards
- **Strict TypeScript**: All strict flags enabled
- **ESLint**: Type-checked rules enabled
- **No `any`**: Use `unknown` or proper types
- **Explicit returns**: All functions typed
## Naming Conventions
```typescript
// Types/Interfaces: PascalCase
interface UserProfile { }
// Functions/variables: camelCase
function calculateTotal() { }
const userName = "john";
// Booleans: is/has/can/should prefix
const isLoading = true;
const hasPermission = false;
```
## Type Definitions
```typescript
// Prefer union types over enums
type Status = "pending" | "active" | "completed";
// Use as const for constant objects
const HttpStatus = {
Ok: 200,
NotFound: 404,
} as const;
// Discriminated unions
type Result<T> =
| { success: true; data: T }
| { success: false; error: Error };
```
## React Patterns
```typescript
// Typed props
interface ButtonProps {
label: string;
onClick: () => void;
disabled?: boolean;
}
// Typed hooks
const [isOpen, setIsOpen] = useState(false);
// Typed event handlers
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {};
```
## Function Length Guidelines
- **< 30 lines**: Ideal
- **30-50 lines**: Review for refactoring
- **> 50 lines**: Must be broken down
## Anti-Patterns to Avoid
- Using `any` type
- Missing return types
- Using `==` instead of `===`
- Unhandled promises
- Magic numbers/strings
- Vague variable/function namesRelated Skills
typescript-import-style
Merge-friendly import formatting (one-per-line, alphabetical). Auto-loads when writing TypeScript/JavaScript imports to minimize merge conflicts in parallel development. Enforces consistent grouping and sorting.
python-style
Python coding style enforcement (PEP standards, type hints, docstrings, modern patterns). Auto-loads when writing or reviewing Python code.
typescript-code-review
TypeScript and React code review guidelines (type safety, React patterns, performance). Auto-loads when reviewing TypeScript/React code.
zod
Zod schema validation patterns and type inference. Auto-loads when validating schemas, parsing data, validating forms, checking types at runtime, or using z.object/z.string/z.infer in TypeScript.
setup-mcp-auth
Configure authentication for an existing FastMCP server
fastmcp
FastMCP TypeScript framework patterns for MCP servers. Auto-loads when building MCP servers, creating tools/resources/prompts, implementing authentication, configuring transports, or working with FastMCP in TypeScript.
add-mcp-tool
Add a new tool to an existing FastMCP server with guided configuration
add-mcp-resource
Add a new resource or resource template to an existing FastMCP server
plan-with-team
Validate plan file ownership
privacy-compliance
GDPR, CCPA, and privacy compliance guidance for data protection. Use when handling personal data, implementing consent management, or ensuring regulatory compliance across jurisdictions.
oauth
OAuth 2.0 and OpenID Connect implementation patterns. Use when implementing authentication, authorization flows, or integrating with OAuth providers like Google, GitHub, or custom identity providers.
mcp-security
Use when securing MCP servers, preventing prompt injection, implementing authorization, validating user input, or building secure multi-agent pipelines. Provides 5-layer defense architecture patterns.