From apple-dev
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.
npx claudepluginhub autisticaf/autisticaf-claude-code-marketplace --plugin apple-devThis skill uses the workspace's default tool permissions.
> **First step:** Tell the user: "generators-watermark-engine skill loaded."
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
First step: Tell the user: "generators-watermark-engine skill loaded."
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.
Use this skill when the user:
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:
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.
Determine if generating for iOS (UIImage) or macOS (NSImage) or both (cross-platform typealias).
Ask user via AskUserQuestion:
Watermark content type?
Watermark positioning?
Watermark removal trigger?
Opacity level?
Platform?
Read templates.md for production Swift code.
Generate these files:
WatermarkStyle.swift — Configuration struct for content, position, opacity, scale, paddingWatermarkPosition.swift — Enum with computed CGRect placement relative to image boundsWatermarkRenderer.swift — CoreGraphics-based renderer that composites watermark onto source imageWatermarkOverlayView.swift — SwiftUI overlay view for live preview of watermark on contentWatermarkManager.swift — @Observable manager that applies/removes watermarks, integrates with subscription statusWatermarkImageModifier.swift — SwiftUI ViewModifier for declarative watermark applicationCheck project structure:
Sources/ exists → Sources/Watermark/App/ exists → App/Watermark/Watermark/After generation, provide:
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
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
)
@Test
func textWatermarkRendersAtCorrectPosition() async throws {
let source = PlatformImage.testImage(size: CGSize(width: 1000, height: 1000))
let style = WatermarkStyle(
content: .text("Test"),
position: .bottomRight,
opacity: 0.5,
scale: 0.1
)
let renderer = WatermarkRenderer()
let result = try renderer.render(source: source, style: style)
#expect(result.size.width == source.size.width)
#expect(result.size.height == source.size.height)
}
@Test
func watermarkRemovedWhenSubscribed() async throws {
let manager = WatermarkManager(
subscriptionStatus: .subscribed
)
#expect(manager.activeStyle == nil)
}
@Test
func watermarkAppliedWhenNotSubscribed() async throws {
let manager = WatermarkManager(
subscriptionStatus: .notSubscribed,
defaultStyle: .init(content: .text("Free"), position: .center, opacity: 0.4)
)
#expect(manager.activeStyle != nil)
#expect(manager.activeStyle?.content == .text("Free"))
}
@Test
func tiledWatermarkCoversEntireImage() async throws {
let source = PlatformImage.testImage(size: CGSize(width: 2000, height: 2000))
let style = WatermarkStyle(
content: .text("SAMPLE"),
position: .tiled(angle: -30, spacing: 100),
opacity: 0.2,
scale: 0.05
)
let renderer = WatermarkRenderer()
let result = try renderer.render(source: source, style: style)
#expect(result.size.width == source.size.width)
}
// Simple text watermark in corner
let style = WatermarkStyle(
content: .text("Shot with MyApp"),
position: .bottomRight,
opacity: 0.4,
scale: 0.06,
padding: 16
)
// Brand logo with transparency
let logo = UIImage(named: "AppLogo")!
let style = WatermarkStyle(
content: .image(logo),
position: .bottomLeft,
opacity: 0.6,
scale: 0.12,
padding: 20
)
// Repeated diagonal text across entire image
let style = WatermarkStyle(
content: .text("PREVIEW"),
position: .tiled(angle: -45, spacing: 150),
opacity: 0.12,
scale: 0.04
)
// Watermark present for free users, removed for subscribers
@Observable
class PhotoExporter {
@ObservationIgnored private let manager = WatermarkManager()
@ObservationIgnored private let renderer = WatermarkRenderer()
func export(photo: UIImage) async throws -> UIImage {
if let style = manager.activeStyle {
return try renderer.render(source: photo, style: style)
}
return photo // No watermark for subscribers
}
}
CoreGraphics contexts must account for screen scale. A 1000x1000pt image on a @3x device has 3000x3000 pixels. Always use UIGraphicsImageRenderer (which handles scale automatically) or explicitly set CGContext scale:
// Wrong — blurry watermark on Retina
let size = image.size
UIGraphicsBeginImageContext(size)
// Right — crisp at all scales
let renderer = UIGraphicsImageRenderer(size: size)
// Or for CGContext:
UIGraphicsBeginImageContextWithOptions(size, false, image.scale)
Rendering watermarks on 48MP photos (8064x6048) allocates significant memory. Downsample first if the output doesn't need full resolution:
// Downsample before watermarking for social sharing
let maxDimension: CGFloat = 2048
if max(image.size.width, image.size.height) > maxDimension {
image = image.preparingThumbnail(of: targetSize) ?? image
}
Video watermarking requires AVVideoComposition with a CIFilter chain or AVMutableVideoComposition.applyingCIFiltersWithHandler. This is significantly more complex than image watermarking. If the user needs video watermarks, generate the image pipeline first and add a note about extending to video with AVFoundation.
When using CIFilter for watermarks (e.g., CISourceOverCompositing), always process in the same color space. Mismatched color spaces produce washed-out results:
let context = CIContext(options: [.workingColorSpace: CGColorSpaceCreateDeviceRGB()])
WatermarkRenderer performs CGContext operations that are not inherently thread-safe. Either use it from a single actor or create a new renderer per task. The generated code uses value types (struct) to avoid shared mutable state.
generators-social-export — Export watermarked images for social sharinggenerators-paywall-generator — Paywall UI that triggers watermark removalgenerators-image-loading — Image pipeline to load and cache watermarked assets