frontend-patterns

Frontend Patterns Skill

Instructions for AI

Apply modern frontend patterns, TypeScript best practices, and production-grade standards for Vue.js and Angular applications. Use this skill when writing, reviewing, or refactoring frontend code.

Core Patterns

1. Composable / Hook Pattern (Vue)

Extract reusable stateful logic into composable functions.

import { ref, computed, onUnmounted, type Ref } from 'vue'

interface UsePaginationOptions {
  pageSize?: number
  initialPage?: number
}

interface UsePaginationReturn<T> {
  currentPage: Ref<number>
  pageSize: Ref<number>
  totalPages: Ref<number>
  paginatedItems: Ref<T[]>
  next: () => void
  prev: () => void
  goTo: (page: number) => void
}

export function usePagination<T>(
  items: Ref<T[]>,
  options: UsePaginationOptions = {}
): UsePaginationReturn<T> {
  const currentPage = ref(options.initialPage ?? 1)
  const pageSize = ref(options.pageSize ?? 10)

  const totalPages = computed(() =>
    Math.ceil(items.value.length / pageSize.value)
  )

  const paginatedItems = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value
    return items.value.slice(start, start + pageSize.value)
  })

  const goTo = (page: number) => {
    currentPage.value = Math.max(1, Math.min(page, totalPages.value))
  }

  const next = () => goTo(currentPage.value + 1)
  const prev = () => goTo(currentPage.value - 1)

  return { currentPage, pageSize, totalPages, paginatedItems, next, prev, goTo }
}

2. Service Injection Pattern (Angular)

Typed, injectable services with clean separation of concerns.

import { Injectable, inject } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { Observable, catchError, map } from 'rxjs'

export interface User {
  id: string
  name: string
  email: string
  role: 'admin' | 'user' | 'viewer'
}

type CreateUserDTO = Omit<User, 'id'>

@Injectable({ providedIn: 'root' })
export class UserService {
  private readonly http = inject(HttpClient)
  private readonly baseUrl = '/api/users'

  getAll(): Observable<User[]> {
    return this.http.get<User[]>(this.baseUrl)
  }

  getById(id: string): Observable<User> {
    return this.http.get<User>(`${this.baseUrl}/${id}`)
  }

  create(dto: CreateUserDTO): Observable<User> {
    return this.http.post<User>(this.baseUrl, dto)
  }

  update(id: string, dto: Partial<CreateUserDTO>): Observable<User> {
    return this.http.patch<User>(`${this.baseUrl}/${id}`, dto)
  }

  delete(id: string): Observable<void> {
    return this.http.delete<void>(`${this.baseUrl}/${id}`)
  }
}