frontend-typeslisted
Install: claude install-skill aiskillstore/marketplace
# Frontend TypeScript Types Skill
**Purpose**: Guidance for creating TypeScript type definitions following existing patterns from `frontend/types/index.ts`.
## Overview
All TypeScript types are defined in `frontend/types/index.ts`. Types match backend API response structure and provide type safety across the frontend application.
## Type Patterns from `frontend/types/index.ts`
### 1. User Types
```typescript
export interface User {
id: string;
email: string;
name: string;
createdAt?: string;
updatedAt?: string;
}
export interface UserCredentials {
email: string;
password: string;
}
export interface UserSignupData extends UserCredentials {
name: string;
}
```
**Pattern**:
- Use `interface` for object types
- Mark optional fields with `?`
- Use `extends` for type inheritance
- Use camelCase for frontend types (even if backend uses snake_case)
### 2. Task Types
```typescript
export type TaskStatus = "pending" | "completed";
export type TaskPriority = "low" | "medium" | "high";
export interface Task {
id: number;
user_id: string;
title: string;
description?: string;
completed: boolean;
priority: TaskPriority;
due_date?: string;
tags: string[];
created_at: string;
updated_at: string;
}
export interface TaskFormData {
title: string;
description?: string;
priority?: TaskPriority;
due_date?: string;
tags?: string[];
}
export interface TaskQueryParams {
status?: "all" | "pending" | "completed";
sort?: "created" | "title"