🎯

nextfriday-types

🎯Skill

from next-friday/nextfriday-skills

What it does

Defines TypeScript type patterns for React props, function parameters, and return types to improve code consistency and readability.

📦

Part of

next-friday/nextfriday-skills(7 items)

nextfriday-types

Installation

Quick InstallInstall with npx

npx skills add next-friday/nextfriday-skills --skill nextfriday-best-practices

Quick InstallInstall with npx

npx skills add next-friday/nextfriday-skills --skill nextfriday-naming

Quick InstallInstall with npx

npx skills add next-friday/nextfriday-skills --skill nextfriday-code-style

Quick InstallInstall with npx

npx skills add next-friday/nextfriday-skills --skill nextfriday-react

Quick InstallInstall with npx

npx skills add next-friday/nextfriday-skills

📖 Extracted from docs: next-friday/nextfriday-skills

Need more details? View full documentation on GitHub →

1Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Next Friday TypeScript patterns for props, interfaces, and return types. Use when defining types or writing function signatures.

Overview

# Next Friday Types

Rules for TypeScript type definitions and annotations.

React Props

Props Suffix

Interfaces in component files must end with Props.

```tsx

// Bad: Card.tsx

interface Card {}

// Good: Card.tsx

interface CardProps {}

```

Readonly Props

Component props must be wrapped with Readonly<>.

```tsx

// Bad:

const Card = (props: CardProps) => ...

// Good:

const Card = (props: Readonly) => ...

```

No Inline Types

Use interface declarations, not inline types.

```tsx

// Bad:

const Card = (props: { title: string; onClick: () => void }) => ...

// Good:

interface CardProps {

title: string;

onClick: () => void;

}

const Card = (props: Readonly) => ...

```

Function Parameters

Named Param Types

Extract inline object types to named interfaces.

```typescript

// Bad:

function processData({ id, name }: { id: string; name: string }) {}

// Good:

interface ProcessDataParams {

id: string;

name: string;

}

function processData(params: ProcessDataParams) {}

```

Destructuring Params

Use object destructuring for multiple parameters.

```typescript

// Bad:

function createItem(id: string, name: string, price: number, category: string) {}

// Good:

interface CreateItemParams {

id: string;

name: string;

price: number;

category: string;

}

function createItem(params: CreateItemParams) {}

```

Return Types

Explicit Return Types

Always specify return types on functions.

```typescript

// Bad:

function formatValue(value: number) {

return value.toFixed(2);

}

// Good:

function formatValue(value: number): string {

return value.toFixed(2);

}

```

Quick Reference

| Rule | Pattern |

| ---- | ------- |

| Props suffix | CardProps, not Card |

| Readonly props | props: Readonly |

| No inline types | Use interfaces |

| Named param types | Extract to interfaces |

| Destructuring | (params: Params) not (a, b, c) |

| Explicit return | : string, : Promise |

More from this repository6

🎯

nextfriday-react🎯Skill

Provides React/JSX best practices and patterns for clean, maintainable component development and code organization.

🎯

nextfriday-nextjs🎯Skill

Enforces Next.js environment variable best practices by requiring `NEXT_PUBLIC_` prefix and preventing fallback values in client components.

🎯

nextfriday-code-style🎯Skill

Generates clean, consistent code formatting and style guidelines for Next Friday projects using predefined configuration rules.

🎯

nextfriday-naming🎯Skill

Generates unique, memorable names for projects, products, or teams using creative naming strategies and linguistic techniques.

🎯

nextfriday-imports🎯Skill

Enforces consistent import rules with absolute paths, type imports, and standardized date utilities for TypeScript projects.

🎯

nextfriday-best-practices🎯Skill

Enforces comprehensive TypeScript/React/Next.js coding standards across 41 rules for consistent, high-quality project development.