Back to Skills
Skill

design-media-strategy

From content-management-system
40
Install
1
Install the plugin
$
npx claudepluginhub melodic-software/claude-code-plugins --plugin content-management-system

Want just this skill?

Add to a custom plugin, then install with one command.

Description

Design media and DAM architecture including storage, processing, and delivery. Covers images, video, and documents.

Tool Access

This skill is limited to using the following tools:

ReadGlobGrepTaskSkillAskUserQuestion
Skill Content

Design Media Strategy Command

Design a comprehensive media and Digital Asset Management (DAM) architecture.

Usage

/cms:design-media-strategy --scope all
/cms:design-media-strategy --scope images --storage azure
/cms:design-media-strategy --scope video --storage aws

Scope Options

  • images: Image storage, optimization, delivery
  • video: Video hosting, transcoding, streaming
  • documents: PDF, Office documents, downloads
  • all: Complete media strategy

Workflow

Step 1: Parse Arguments

Extract scope and storage provider from command.

Step 2: Gather Requirements

Use AskUserQuestion to understand:

  • What is the expected media volume?
  • Are there specific format requirements?
  • What CDN/delivery requirements exist?
  • Are there compliance/security needs (watermarking, access control)?

Step 3: Invoke Agent

Invoke cms-advisor media-strategy agent for comprehensive analysis.

Step 4: Generate Storage Architecture

Azure Blob Storage Configuration:

storage:
  provider: azure_blob

  containers:
    - name: cms-media-originals
      access: private
      purpose: Original uploaded files
      retention: indefinite

    - name: cms-media-processed
      access: private
      purpose: Processed/transformed files
      retention: 30_days_unused

    - name: cms-media-public
      access: blob  # Public read, private list
      purpose: Public CDN-served assets
      cdn: true

  lifecycle_rules:
    - name: archive-old-originals
      condition:
        days_since_modification: 365
      action: move_to_cool

    - name: delete-temp
      prefix: temp/
      condition:
        days_since_creation: 7
      action: delete

  security:
    encryption: AES256
    https_only: true
    sas_tokens:
      enabled: true
      max_duration: 1_hour

AWS S3 Configuration:

storage:
  provider: aws_s3

  buckets:
    - name: cms-media-originals
      region: us-east-1
      versioning: true

    - name: cms-media-processed
      region: us-east-1
      intelligent_tiering: true

  cloudfront:
    enabled: true
    price_class: PriceClass_100
    origins:
      - bucket: cms-media-processed
        path: /public/*
    behaviors:
      - path: /images/*
        compress: true
        cache_ttl: 86400
      - path: /videos/*
        streaming: true

Step 5: Design Processing Pipeline

Image Processing:

image_pipeline:
  upload:
    max_size: 50MB
    allowed_types: [jpg, jpeg, png, gif, webp, svg, avif]
    scan_for_malware: true
    extract_metadata: true

  processing:
    profiles:
      thumbnail:
        width: 150
        height: 150
        fit: cover
        format: webp
        quality: 80

      small:
        width: 400
        height: 300
        fit: contain
        format: webp
        quality: 85

      medium:
        width: 800
        height: 600
        fit: contain
        format: webp
        quality: 85

      large:
        width: 1600
        height: 1200
        fit: contain
        format: webp
        quality: 90

      hero:
        width: 1920
        height: 1080
        fit: cover
        format: webp
        quality: 90
        focal_point: true

    responsive_breakpoints:
      - 320
      - 640
      - 768
      - 1024
      - 1280
      - 1920

    formats:
      modern: [avif, webp]
      fallback: jpg

  optimization:
    strip_metadata: true
    progressive: true
    preserve_color_profile: sRGB

Video Processing:

video_pipeline:
  upload:
    max_size: 5GB
    allowed_types: [mp4, mov, avi, webm, mkv]

  transcoding:
    provider: azure_media_services  # or aws_mediaconvert

    profiles:
      web_hd:
        codec: h264
        resolution: 1080p
        bitrate: 5000kbps
        audio: aac_128

      web_sd:
        codec: h264
        resolution: 720p
        bitrate: 2500kbps
        audio: aac_128

      mobile:
        codec: h264
        resolution: 480p
        bitrate: 1000kbps
        audio: aac_96

    adaptive_streaming:
      enabled: true
      protocols: [hls, dash]

  thumbnails:
    count: 10
    interval: auto
    sprite_sheet: true

Document Processing:

document_pipeline:
  upload:
    max_size: 100MB
    allowed_types: [pdf, doc, docx, xls, xlsx, ppt, pptx]

  processing:
    pdf:
      generate_preview: true
      extract_text: true
      page_thumbnails: true

    office:
      convert_to_pdf: true
      extract_metadata: true

  security:
    virus_scan: true
    password_detection: true

Step 6: Design Asset Metadata Model

EF Core Model:

public class MediaAsset
{
    public Guid Id { get; set; }
    public string FileName { get; set; }
    public string ContentType { get; set; }
    public long FileSize { get; set; }
    public string StoragePath { get; set; }
    public MediaAssetType Type { get; set; }
    public MediaStatus Status { get; set; }

    // Extracted metadata (JSON column)
    public MediaMetadata Metadata { get; set; }

    // Processed variants
    public List<MediaVariant> Variants { get; set; }

    // DAM features
    public List<string> Tags { get; set; }
    public string AltText { get; set; }
    public string Caption { get; set; }
    public string Copyright { get; set; }
    public FocalPoint FocalPoint { get; set; }

    // Audit
    public Guid UploadedById { get; set; }
    public DateTime UploadedAt { get; set; }
}

[Owned]
public class MediaMetadata
{
    // Image metadata
    public int? Width { get; set; }
    public int? Height { get; set; }
    public string ColorSpace { get; set; }

    // Video metadata
    public TimeSpan? Duration { get; set; }
    public string Codec { get; set; }
    public int? Bitrate { get; set; }

    // Document metadata
    public int? PageCount { get; set; }
    public string Author { get; set; }
    public string Title { get; set; }

    // EXIF data
    public DateTime? DateTaken { get; set; }
    public string CameraModel { get; set; }
    public GeoLocation Location { get; set; }
}

[Owned]
public class FocalPoint
{
    public decimal X { get; set; }  // 0-1
    public decimal Y { get; set; }  // 0-1
}

Step 7: Generate CDN Configuration

Azure Front Door:

cdn:
  provider: azure_front_door

  endpoints:
    - name: media
      origin: cms-media-public.blob.core.windows.net

  rules:
    - name: images
      match:
        path: /images/*
      actions:
        cache_ttl: 7_days
        compression: true

    - name: transform
      match:
        path: /transform/*
      actions:
        origin_override: image-transform-function.azurewebsites.net

  security:
    waf: enabled
    rate_limiting: 1000/minute
    geo_filtering:
      allowed: [US, CA, EU]

API Endpoints

api:
  upload:
    - POST /api/media/upload
    - POST /api/media/upload/chunk (for large files)

  retrieve:
    - GET /api/media/{id}
    - GET /api/media/{id}/variants
    - GET /api/media/{id}/download

  transform:
    - GET /media/transform/{id}?w=800&h=600&fit=cover&format=webp

  search:
    - GET /api/media?tags=product&type=image

  manage:
    - PATCH /api/media/{id}/metadata
    - DELETE /api/media/{id}

Related Skills

  • media-asset-management - DAM patterns
  • image-optimization - Responsive images
  • cdn-media-delivery - CDN configuration
Stats
Stars40
Forks6
Last CommitMar 17, 2026
Actions

Similar Skills