@cregis-dev/cckit 0.2.0 → 0.4.0

package/templates/ecc/skills/swiftui-patterns/SKILL.md

@@ -0,0 +1,259 @@
+---
+name: swiftui-patterns
+description: SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS/macOS UI best practices.
+---
+
+# SwiftUI Patterns
+
+Modern SwiftUI patterns for building declarative, performant user interfaces on Apple platforms. Covers the Observation framework, view composition, type-safe navigation, and performance optimization.
+
+## When to Activate
+
+- Building SwiftUI views and managing state (`@State`, `@Observable`, `@Binding`)
+- Designing navigation flows with `NavigationStack`
+- Structuring view models and data flow
+- Optimizing rendering performance for lists and complex layouts
+- Working with environment values and dependency injection in SwiftUI
+
+## State Management
+
+### Property Wrapper Selection
+
+Choose the simplest wrapper that fits:
+
+| Wrapper | Use Case |
+|---------|----------|
+| `@State` | View-local value types (toggles, form fields, sheet presentation) |
+| `@Binding` | Two-way reference to parent's `@State` |
+| `@Observable` class + `@State` | Owned model with multiple properties |
+| `@Observable` class (no wrapper) | Read-only reference passed from parent |
+| `@Bindable` | Two-way binding to an `@Observable` property |
+| `@Environment` | Shared dependencies injected via `.environment()` |
+
+### @Observable ViewModel
+
+Use `@Observable` (not `ObservableObject`) — it tracks property-level changes so SwiftUI only re-renders views that read the changed property:
+
+```swift
+@Observable
+final class ItemListViewModel {
+    private(set) var items: [Item] = []
+    private(set) var isLoading = false
+    var searchText = ""
+
+    private let repository: any ItemRepository
+
+    init(repository: any ItemRepository = DefaultItemRepository()) {
+        self.repository = repository
+    }
+
+    func load() async {
+        isLoading = true
+        defer { isLoading = false }
+        items = (try? await repository.fetchAll()) ?? []
+    }
+}
+```
+
+### View Consuming the ViewModel
+
+```swift
+struct ItemListView: View {
+    @State private var viewModel: ItemListViewModel
+
+    init(viewModel: ItemListViewModel = ItemListViewModel()) {
+        _viewModel = State(initialValue: viewModel)
+    }
+
+    var body: some View {
+        List(viewModel.items) { item in
+            ItemRow(item: item)
+        }
+        .searchable(text: $viewModel.searchText)
+        .overlay { if viewModel.isLoading { ProgressView() } }
+        .task { await viewModel.load() }
+    }
+}
+```
+
+### Environment Injection
+
+Replace `@EnvironmentObject` with `@Environment`:
+
+```swift
+// Inject
+ContentView()
+    .environment(authManager)
+
+// Consume
+struct ProfileView: View {
+    @Environment(AuthManager.self) private var auth
+
+    var body: some View {
+        Text(auth.currentUser?.name ?? "Guest")
+    }
+}
+```
+
+## View Composition
+
+### Extract Subviews to Limit Invalidation
+
+Break views into small, focused structs. When state changes, only the subview reading that state re-renders:
+
+```swift
+struct OrderView: View {
+    @State private var viewModel = OrderViewModel()
+
+    var body: some View {
+        VStack {
+            OrderHeader(title: viewModel.title)
+            OrderItemList(items: viewModel.items)
+            OrderTotal(total: viewModel.total)
+        }
+    }
+}
+```
+
+### ViewModifier for Reusable Styling
+
+```swift
+struct CardModifier: ViewModifier {
+    func body(content: Content) -> some View {
+        content
+            .padding()
+            .background(.regularMaterial)
+            .clipShape(RoundedRectangle(cornerRadius: 12))
+    }
+}
+
+extension View {
+    func cardStyle() -> some View {
+        modifier(CardModifier())
+    }
+}
+```
+
+## Navigation
+
+### Type-Safe NavigationStack
+
+Use `NavigationStack` with `NavigationPath` for programmatic, type-safe routing:
+
+```swift
+@Observable
+final class Router {
+    var path = NavigationPath()
+
+    func navigate(to destination: Destination) {
+        path.append(destination)
+    }
+
+    func popToRoot() {
+        path = NavigationPath()
+    }
+}
+
+enum Destination: Hashable {
+    case detail(Item.ID)
+    case settings
+    case profile(User.ID)
+}
+
+struct RootView: View {
+    @State private var router = Router()
+
+    var body: some View {
+        NavigationStack(path: $router.path) {
+            HomeView()
+                .navigationDestination(for: Destination.self) { dest in
+                    switch dest {
+                    case .detail(let id): ItemDetailView(itemID: id)
+                    case .settings: SettingsView()
+                    case .profile(let id): ProfileView(userID: id)
+                    }
+                }
+        }
+        .environment(router)
+    }
+}
+```
+
+## Performance
+
+### Use Lazy Containers for Large Collections
+
+`LazyVStack` and `LazyHStack` create views only when visible:
+
+```swift
+ScrollView {
+    LazyVStack(spacing: 8) {
+        ForEach(items) { item in
+            ItemRow(item: item)
+        }
+    }
+}
+```
+
+### Stable Identifiers
+
+Always use stable, unique IDs in `ForEach` — avoid using array indices:
+
+```swift
+// Use Identifiable conformance or explicit id
+ForEach(items, id: \.stableID) { item in
+    ItemRow(item: item)
+}
+```
+
+### Avoid Expensive Work in body
+
+- Never perform I/O, network calls, or heavy computation inside `body`
+- Use `.task {}` for async work — it cancels automatically when the view disappears
+- Use `.sensoryFeedback()` and `.geometryGroup()` sparingly in scroll views
+- Minimize `.shadow()`, `.blur()`, and `.mask()` in lists — they trigger offscreen rendering
+
+### Equatable Conformance
+
+For views with expensive bodies, conform to `Equatable` to skip unnecessary re-renders:
+
+```swift
+struct ExpensiveChartView: View, Equatable {
+    let dataPoints: [DataPoint] // DataPoint must conform to Equatable
+
+    static func == (lhs: Self, rhs: Self) -> Bool {
+        lhs.dataPoints == rhs.dataPoints
+    }
+
+    var body: some View {
+        // Complex chart rendering
+    }
+}
+```
+
+## Previews
+
+Use `#Preview` macro with inline mock data for fast iteration:
+
+```swift
+#Preview("Empty state") {
+    ItemListView(viewModel: ItemListViewModel(repository: EmptyMockRepository()))
+}
+
+#Preview("Loaded") {
+    ItemListView(viewModel: ItemListViewModel(repository: PopulatedMockRepository()))
+}
+```
+
+## Anti-Patterns to Avoid
+
+- Using `ObservableObject` / `@Published` / `@StateObject` / `@EnvironmentObject` in new code — migrate to `@Observable`
+- Putting async work directly in `body` or `init` — use `.task {}` or explicit load methods
+- Creating view models as `@State` inside child views that don't own the data — pass from parent instead
+- Using `AnyView` type erasure — prefer `@ViewBuilder` or `Group` for conditional views
+- Ignoring `Sendable` requirements when passing data to/from actors
+
+## References
+
+See skill: `swift-actor-persistence` for actor-based persistence patterns.
+See skill: `swift-protocol-di-testing` for protocol-based DI and testing with Swift Testing.

package/templates/ecc/skills/tdd-workflow/SKILL.md

@@ -1,6 +1,7 @@
 ---
 name: tdd-workflow
 description: Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage including unit, integration, and E2E tests.
+origin: ECC
 ---
 
 # Test-Driven Development Workflow

package/templates/ecc/skills/verification-loop/SKILL.md

@@ -1,6 +1,7 @@
 ---
 name: verification-loop
 description: "A comprehensive verification system for Claude Code sessions."
+origin: ECC
 ---
 
 # Verification Loop Skill

package/templates/ecc/skills/visa-doc-translate/README.md

@@ -0,0 +1,86 @@
+# Visa Document Translator
+
+Automatically translate visa application documents from images to professional English PDFs.
+
+## Features
+
+- 🔄 **Automatic OCR**: Tries multiple OCR methods (macOS Vision, EasyOCR, Tesseract)
+- 📄 **Bilingual PDF**: Original image + professional English translation
+- 🌍 **Multi-language**: Supports Chinese, and other languages
+- 📋 **Professional Format**: Suitable for official visa applications
+- 🚀 **Fully Automated**: No manual intervention required
+
+## Supported Documents
+
+- Bank deposit certificates (存款证明)
+- Employment certificates (在职证明)
+- Retirement certificates (退休证明)
+- Income certificates (收入证明)
+- Property certificates (房产证明)
+- Business licenses (营业执照)
+- ID cards and passports
+
+## Usage
+
+```bash
+/visa-doc-translate <image-file>
+```
+
+### Examples
+
+```bash
+/visa-doc-translate RetirementCertificate.PNG
+/visa-doc-translate BankStatement.HEIC
+/visa-doc-translate EmploymentLetter.jpg
+```
+
+## Output
+
+Creates `<filename>_Translated.pdf` with:
+- **Page 1**: Original document image (centered, A4 size)
+- **Page 2**: Professional English translation
+
+## Requirements
+
+### Python Libraries
+```bash
+pip install pillow reportlab
+```
+
+### OCR (one of the following)
+
+**macOS (recommended)**:
+```bash
+pip install pyobjc-framework-Vision pyobjc-framework-Quartz
+```
+
+**Cross-platform**:
+```bash
+pip install easyocr
+```
+
+**Tesseract**:
+```bash
+brew install tesseract tesseract-lang
+pip install pytesseract
+```
+
+## How It Works
+
+1. Converts HEIC to PNG if needed
+2. Checks and applies EXIF rotation
+3. Extracts text using available OCR method
+4. Translates to professional English
+5. Generates bilingual PDF
+
+## Perfect For
+
+- 🇦🇺 Australia visa applications
+- 🇺🇸 USA visa applications
+- 🇨🇦 Canada visa applications
+- 🇬🇧 UK visa applications
+- 🇪🇺 EU visa applications
+
+## License
+
+MIT

package/templates/ecc/skills/visa-doc-translate/SKILL.md

@@ -0,0 +1,117 @@
+---
+name: visa-doc-translate
+description: Translate visa application documents (images) to English and create a bilingual PDF with original and translation
+---
+
+You are helping translate visa application documents for visa applications.
+
+## Instructions
+
+When the user provides an image file path, AUTOMATICALLY execute the following steps WITHOUT asking for confirmation:
+
+1. **Image Conversion**: If the file is HEIC, convert it to PNG using `sips -s format png <input> --out <output>`
+
+2. **Image Rotation**:
+   - Check EXIF orientation data
+   - Automatically rotate the image based on EXIF data
+   - If EXIF orientation is 6, rotate 90 degrees counterclockwise
+   - Apply additional rotation as needed (test 180 degrees if document appears upside down)
+
+3. **OCR Text Extraction**:
+   - Try multiple OCR methods automatically:
+     - macOS Vision framework (preferred for macOS)
+     - EasyOCR (cross-platform, no tesseract required)
+     - Tesseract OCR (if available)
+   - Extract all text information from the document
+   - Identify document type (deposit certificate, employment certificate, retirement certificate, etc.)
+
+4. **Translation**:
+   - Translate all text content to English professionally
+   - Maintain the original document structure and format
+   - Use professional terminology appropriate for visa applications
+   - Keep proper names in original language with English in parentheses
+   - For Chinese names, use pinyin format (e.g., WU Zhengye)
+   - Preserve all numbers, dates, and amounts accurately
+
+5. **PDF Generation**:
+   - Create a Python script using PIL and reportlab libraries
+   - Page 1: Display the rotated original image, centered and scaled to fit A4 page
+   - Page 2: Display the English translation with proper formatting:
+     - Title centered and bold
+     - Content left-aligned with appropriate spacing
+     - Professional layout suitable for official documents
+   - Add a note at the bottom: "This is a certified English translation of the original document"
+   - Execute the script to generate the PDF
+
+6. **Output**: Create a PDF file named `<original_filename>_Translated.pdf` in the same directory
+
+## Supported Documents
+
+- Bank deposit certificates (存款证明)
+- Income certificates (收入证明)
+- Employment certificates (在职证明)
+- Retirement certificates (退休证明)
+- Property certificates (房产证明)
+- Business licenses (营业执照)
+- ID cards and passports
+- Other official documents
+
+## Technical Implementation
+
+### OCR Methods (tried in order)
+
+1. **macOS Vision Framework** (macOS only):
+   ```python
+   import Vision
+   from Foundation import NSURL
+   ```
+
+2. **EasyOCR** (cross-platform):
+   ```bash
+   pip install easyocr
+   ```
+
+3. **Tesseract OCR** (if available):
+   ```bash
+   brew install tesseract tesseract-lang
+   pip install pytesseract
+   ```
+
+### Required Python Libraries
+
+```bash
+pip install pillow reportlab
+```
+
+For macOS Vision framework:
+```bash
+pip install pyobjc-framework-Vision pyobjc-framework-Quartz
+```
+
+## Important Guidelines
+
+- DO NOT ask for user confirmation at each step
+- Automatically determine the best rotation angle
+- Try multiple OCR methods if one fails
+- Ensure all numbers, dates, and amounts are accurately translated
+- Use clean, professional formatting
+- Complete the entire process and report the final PDF location
+
+## Example Usage
+
+```bash
+/visa-doc-translate RetirementCertificate.PNG
+/visa-doc-translate BankStatement.HEIC
+/visa-doc-translate EmploymentLetter.jpg
+```
+
+## Output Example
+
+The skill will:
+1. Extract text using available OCR method
+2. Translate to professional English
+3. Generate `<filename>_Translated.pdf` with:
+   - Page 1: Original document image
+   - Page 2: Professional English translation
+
+Perfect for visa applications to Australia, USA, Canada, UK, and other countries requiring translated documents.