Skip to content
Development
Skill

/watermark-engine

Generates a watermark overlay system for images and video with configurable positioning, opacity, tiling, and paywall integration for automatic removal on subscription or purchase. Use when user wants to add branding, attribution, or free-tier watermarks to visual content.

From plugin
rshankras-apple-skills
848181 skills

Claude Code

$ npx -y skills add rshankras/claude-code-apple-skills --skill watermark-engine --agent claude-code

SKILL.md

watermark-engine.SKILL.md
name: watermark-engine
description: Generates a watermark overlay system for images and video with configurable positioning, opacity, tiling, and paywall integration for automatic removal on subscription or purchase. Use when user wants to add branding, attribution, or free-tier watermarks to visual content.
allowed-tools: [Read, Write, Edit, Glob, Grep, Bash, AskUserQuestion]
last_verified: 2026-11-08
review_by: 2027-06-22
os_version: iOS 27 / macOS 27

Watermark Engine Generator

Generate a production watermarking system with text/image/logo overlays, configurable positioning and opacity, tiled patterns, live SwiftUI preview, and automatic watermark removal on subscription purchase.

When This Skill Activates

Use this skill when the user:

  • Asks to "add watermark" or "watermark images"
  • Wants a "branded overlay" or "logo overlay on photos"
  • Mentions "remove watermark on purchase" or "free tier watermark"
  • Asks about "content watermarking" or "image branding"
  • Wants "tiled watermark" or "diagonal watermark pattern"
  • Mentions "attribution overlay" or "copyright overlay"

Pre-Generation Checks

1. Project Context Detection

  • [ ] Check Swift version (requires Swift 5.9+)
  • [ ] Check deployment target (iOS 16+ / macOS 13+)
  • [ ] Check for @Observable support (iOS 17+ / macOS 14+)
  • [ ] Identify source file locations

2. Conflict Detection

Search for existing watermark or overlay code:

Glob: **/*Watermark*.swift, **/*Overlay*.swift, **/*Branding*.swift
Grep: "watermark" or "overlay" or "CGContext" or "draw(in:"

If existing watermark code found:

  • Ask if user wants to replace or extend it
  • If extending, integrate with existing architecture

3. Dependency Detection

Check for existing image processing infrastructure:

Grep: "CoreImage" or "CoreGraphics" or "CGImage" or "UIGraphicsImageRenderer"
Grep: "StoreKit" or "SubscriptionStatus" or "Product.SubscriptionInfo"

If paywall/subscription code exists, integrate watermark removal with existing subscription logic rather than generating standalone subscription checks.

4. Platform Detection

Determine if generating for iOS (UIImage) or macOS (NSImage) or both (cross-platform typealias).

Configuration Questions

Ask user via AskUserQuestion:

1. **Watermark content type?**

  • Text (e.g., username, app name, copyright)
  • Image/Logo (e.g., brand logo PNG with transparency)
  • Attributed text (styled text with font, color, shadow)

2. **Watermark positioning?**

  • Corner (top-left, top-right, bottom-left, bottom-right) — recommended for branding
  • Center — recommended for free-tier watermark
  • Tiled (repeated diagonal pattern) — strongest protection for freemium

3. **Watermark removal trigger?**

  • Subscription (auto-remove while subscription is active)
  • One-time purchase (remove permanently after purchase)
  • Never (always present, e.g., branding/attribution)

4. **Opacity level?**

  • Subtle (0.15–0.25) — light branding
  • Medium (0.3–0.5) — visible but non-intrusive — recommended
  • Strong (0.6–0.8) — clear protection for free-tier

5. **Platform?**

  • iOS only
  • macOS only
  • Cross-platform (iOS + macOS)

Generation Process

Step 1: Read Templates

Read `templates.md` for production Swift code.

Step 2: Create Core Files

Generate these files: 1. `WatermarkStyle.swift` — Configuration struct for content, position, opacity, scale, padding 2. `WatermarkPosition.swift` — Enum with computed CGRect placement relative to image bounds 3. `WatermarkRenderer.swift` — CoreGraphics-based renderer that composites watermark onto source image

Step 3: Create UI Files

4. `WatermarkOverlayView.swift` — SwiftUI overlay view for live preview of watermark on content

Step 4: Create Manager

5. `WatermarkManager.swift` — @Observable manager that applies/removes watermarks, integrates with subscription status

Step 5: Create Modifier

6. `WatermarkImageModifier.swift` — SwiftUI ViewModifier for declarative watermark application

Step 6: Determine File Location

Check project structure:

  • If `Sources/` exists → `Sources/Watermark/`
  • If `App/` exists → `App/Watermark/`
  • Otherwise → `Watermark/`

Output Format

After generation, provide:

Files Created

Watermark/
├── WatermarkStyle.swift          # Configuration for content, position, opacity
├── WatermarkPosition.swift       # Position enum with CGRect computation
├── WatermarkRenderer.swift       # CoreGraphics compositor
├── WatermarkOverlayView.swift    # SwiftUI live preview overlay
├── WatermarkManager.swift        # Observable manager with paywall integration
└── WatermarkImageModifier.swift  # SwiftUI ViewModifier

Integration Steps

**Apply a text watermark to an exported image:**

let style = WatermarkStyle(
    content: .text("@ MyApp"),
    position: .bottomRight,
    opacity: 0.4,
    scale: 0.08
)
let renderer = WatermarkRenderer()
let watermarked = try renderer.render(source: originalImage, style: style)

**Live preview overlay in SwiftUI:**

Image(uiImage: photo)
    .resizable()
    .aspectRatio(contentMode: .fit)
    .watermark(.text("Preview"), position: .center, opacity: 0.3)

**With subscription-based removal:**

struct PhotoEditorView: View {
    let photo: UIImage
    @State private var manager = WatermarkManager()

    var body: some View {
        Image(uiImage: photo)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .watermark(manager.activeStyle)
    }
}

// WatermarkManager automatically checks subscription status
// and returns .none when user has active subscription

**Tiled diagonal pattern for free-tier:**

let style = WatermarkStyle(
    content: .text("SAMPLE"),
    position: .tiled(angle: -30, spacing: 120),
    opacity: 0.15,
    scale: 0.05
)

Testing

@Test
func textWatermarkRendersAtCorrectPosition() async throws {
    let source = PlatformImage.testImage(s
Read more
@rshankras
Ships withrshankras-apple-skills

A collection of Claude Code skills for iOS, macOS, watchOS, visionOS, and Apple platform development. These skills help you plan and build apps, maintain code quality, ensure HIG compliance, and guide you from idea to App Store.

Stars on GitHub

Momentum

stars in total
848
Star history of rshankras/claude-code-apple-skills on GitHub, a chart by star-history.com

Other skills on rshankras-apple-skills.

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills10d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc12d293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react1d252k
@facebook@facebookInstall Skill

Questions about watermark-engine.

Which coding agents can use watermark-engine?
watermark-engine installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.