← ClaudeAtlas

frontend-typeslisted

All TypeScript types are defined in `frontend/types/index.ts`. Types match backend API response structure and provide type safety across the frontend application.
aiskillstore/marketplace · ★ 329 · Web & Frontend · score 79
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"