Claude Code Plugins

Community-maintained marketplace

Feedback

TypeScript enum pattern with Castable interface for model integration. Use when creating enums with behavior methods (colors, labels), defining fixed value sets, or integrating enums with the model casting system.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name nuxt-enums
description TypeScript enum pattern with Castable interface for model integration. Use when creating enums with behavior methods (colors, labels), defining fixed value sets, or integrating enums with the model casting system.

Nuxt Enums

Class-based enums with behavior methods and model casting integration.

Core Concepts

enums.md - Complete enum patterns, behavior methods, UI integration

Basic Enum

// app/enums/PostStatus.ts
import Enum from '#layers/base/app/enums/Enum'
import type { Castable } from '#layers/base/app/types'

export default class PostStatus extends Enum implements Castable {
  // Static enum values
  static readonly Draft = PostStatus.create('draft')
  static readonly PendingReview = PostStatus.create('pending review')
  static readonly Published = PostStatus.create('published')
  static readonly Archived = PostStatus.create('archived')

  // Cast method for model system
  static cast(value: string): PostStatus {
    return PostStatus.coerce(value)
  }

  // Behavior methods
  color(): string {
    switch (this.value) {
      case 'draft': return 'neutral'
      case 'pending review': return 'warning'
      case 'published': return 'success'
      case 'archived': return 'error'
      default: return 'neutral'
    }
  }

  get text(): string {
    return this.value
  }
}

Usage

// In models (auto-cast from API string)
status: PostStatus

// Comparisons
post.status.is(PostStatus.Published)

// Get all values
PostStatus.values()

// In templates
<UBadge :color="post.status.color()">{{ post.status.text }}</UBadge>