claude-code-pilot 3.1.1 → 3.3.0

package/src/skills/knowledge-ops/SKILL.md

@@ -0,0 +1,154 @@
+---
+name: knowledge-ops
+description: Knowledge base management, ingestion, sync, and retrieval across multiple storage layers (local files, MCP memory, vector stores, Git repos). Use when the user wants to save, organize, sync, deduplicate, or search across their knowledge systems.
+origin: ECC
+---
+
+# Knowledge Operations
+
+Manage a multi-layered knowledge system for ingesting, organizing, syncing, and retrieving knowledge across multiple stores.
+
+Prefer the live workspace model:
+- code work lives in the real cloned repos
+- active execution context lives in GitHub, Linear, and repo-local working-context files
+- broader human-facing notes can live in a non-repo context/archive folder
+- durable cross-machine memory belongs in the knowledge base, not in a shadow repo workspace
+
+## When to Activate
+
+- User wants to save information to their knowledge base
+- Ingesting documents, conversations, or data into structured storage
+- Syncing knowledge across systems (local files, MCP memory, Supabase, Git repos)
+- Deduplicating or organizing existing knowledge
+- User says "save this to KB", "sync knowledge", "what do I know about X", "ingest this", "update the knowledge base"
+- Any knowledge management task beyond simple memory recall
+
+## Knowledge Architecture
+
+### Layer 1: Active execution truth
+- **Sources:** GitHub issues, PRs, discussions, release notes, Linear issues/projects/docs
+- **Use for:** the current operational state of the work
+- **Rule:** if something affects an active engineering plan, roadmap, rollout, or release, prefer putting it here first
+
+### Layer 2: Claude Code Memory (Quick Access)
+- **Path:** `./.claude/projects/*/memory/`
+- **Format:** Markdown files with frontmatter
+- **Types:** user preferences, feedback, project context, reference
+- **Use for:** quick-access context that persists across conversations
+- **Automatically loaded at session start**
+
+### Layer 3: MCP Memory Server (Structured Knowledge Graph)
+- **Access:** MCP memory tools (create_entities, create_relations, add_observations, search_nodes)
+- **Use for:** Semantic search across all stored memories, relationship mapping
+- **Cross-session persistence with queryable graph structure**
+
+### Layer 4: Knowledge base repo / durable document store
+- **Use for:** curated durable notes, session exports, synthesized research, operator memory, long-form docs
+- **Rule:** this is the preferred durable store for cross-machine context when the content is not repo-owned code
+
+### Layer 5: External Data Store (Supabase, PostgreSQL, etc.)
+- **Use for:** Structured data, large document storage, full-text search
+- **Good for:** Documents too large for memory files, data needing SQL queries
+
+### Layer 6: Local context/archive folder
+- **Use for:** human-facing notes, archived gameplans, local media organization, temporary non-code docs
+- **Rule:** writable for information storage, but not a shadow code workspace
+- **Do not use for:** active code changes or repo truth that should live upstream
+
+## Ingestion Workflow
+
+When new knowledge needs to be captured:
+
+### 1. Classify
+What type of knowledge is it?
+- Business decision -> memory file (project type) + MCP memory
+- Active roadmap / release / implementation state -> GitHub + Linear first
+- Personal preference -> memory file (user/feedback type)
+- Reference info -> memory file (reference type) + MCP memory
+- Large document -> external data store + summary in memory
+- Conversation/session -> knowledge base repo + short summary in memory
+
+### 2. Deduplicate
+Check if this knowledge already exists:
+- Search memory files for existing entries
+- Query MCP memory with relevant terms
+- Check whether the information already exists in GitHub or Linear before creating another local note
+- Do not create duplicates. Update existing entries instead.
+
+### 3. Store
+Write to appropriate layer(s):
+- Always update Claude Code memory for quick access
+- Use MCP memory for semantic searchability and relationship mapping
+- Update GitHub / Linear first when the information changes live project truth
+- Commit to the knowledge base repo for durable long-form additions
+
+### 4. Index
+Update any relevant indexes or summary files.
+
+## Sync Operations
+
+### Conversation Sync
+Periodically sync conversation history into the knowledge base:
+- Sources: Claude session files, Codex sessions, other agent sessions
+- Destination: knowledge base repo
+- Generate a session index for quick browsing
+- Commit and push
+
+### Workspace State Sync
+Mirror important workspace configuration and scripts to the knowledge base:
+- Generate directory maps
+- Redact sensitive config before committing
+- Track changes over time
+- Do not treat the knowledge base or archive folder as the live code workspace
+
+### GitHub / Linear Sync
+When the information affects active execution:
+- update the relevant GitHub issue, PR, discussion, release notes, or roadmap thread
+- attach supporting docs to Linear when the work needs durable planning context
+- only mirror a local note afterwards if it still adds value
+
+### Cross-Source Knowledge Sync
+Pull knowledge from multiple sources into one place:
+- Claude/ChatGPT/Grok conversation exports
+- Browser bookmarks
+- GitHub activity events
+- Write status summary, commit and push
+
+## Memory Patterns
+
+```
+# Short-term: current session context
+Use TodoWrite for in-session task tracking
+
+# Medium-term: project memory files
+Write to ./.claude/projects/*/memory/ for cross-session recall
+
+# Long-term: GitHub / Linear / KB
+Put active execution truth in GitHub + Linear
+Put durable synthesized context in the knowledge base repo
+
+# Semantic layer: MCP knowledge graph
+Use mcp__memory__create_entities for permanent structured data
+Use mcp__memory__create_relations for relationship mapping
+Use mcp__memory__add_observations for new facts about known entities
+Use mcp__memory__search_nodes to find existing knowledge
+```
+
+## Best Practices
+
+- Keep memory files concise. Archive old data rather than letting files grow unbounded.
+- Use frontmatter (YAML) for metadata on all knowledge files.
+- Deduplicate before storing. Search first, then create or update.
+- Prefer one canonical home per fact set. Avoid parallel copies of the same plan across local notes, repo files, and tracker docs.
+- Redact sensitive information (API keys, passwords) before committing to Git.
+- Use consistent naming conventions for knowledge files (lowercase-kebab-case).
+- Tag entries with topics/categories for easier retrieval.
+
+## Quality Gate
+
+Before completing any knowledge operation:
+- no duplicate entries created
+- sensitive data redacted from any Git-tracked files
+- indexes and summaries updated
+- appropriate storage layer chosen for the data type
+- cross-references added where relevant

package/src/skills/liquid-glass-design/SKILL.md

@@ -0,0 +1,279 @@
+---
+name: liquid-glass-design
+description: iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit.
+---
+
+# Liquid Glass Design System (iOS 26)
+
+Patterns for implementing Apple's Liquid Glass — a dynamic material that blurs content behind it, reflects color and light from surrounding content, and reacts to touch and pointer interactions. Covers SwiftUI, UIKit, and WidgetKit integration.
+
+## When to Activate
+
+- Building or updating apps for iOS 26+ with the new design language
+- Implementing glass-style buttons, cards, toolbars, or containers
+- Creating morphing transitions between glass elements
+- Applying Liquid Glass effects to widgets
+- Migrating existing blur/material effects to the new Liquid Glass API
+
+## Core Pattern — SwiftUI
+
+### Basic Glass Effect
+
+The simplest way to add Liquid Glass to any view:
+
+```swift
+Text("Hello, World!")
+    .font(.title)
+    .padding()
+    .glassEffect()  // Default: regular variant, capsule shape
+```
+
+### Customizing Shape and Tint
+
+```swift
+Text("Hello, World!")
+    .font(.title)
+    .padding()
+    .glassEffect(.regular.tint(.orange).interactive(), in: .rect(cornerRadius: 16.0))
+```
+
+Key customization options:
+- `.regular` — standard glass effect
+- `.tint(Color)` — add color tint for prominence
+- `.interactive()` — react to touch and pointer interactions
+- Shape: `.capsule` (default), `.rect(cornerRadius:)`, `.circle`
+
+### Glass Button Styles
+
+```swift
+Button("Click Me") { /* action */ }
+    .buttonStyle(.glass)
+
+Button("Important") { /* action */ }
+    .buttonStyle(.glassProminent)
+```
+
+### GlassEffectContainer for Multiple Elements
+
+Always wrap multiple glass views in a container for performance and morphing:
+
+```swift
+GlassEffectContainer(spacing: 40.0) {
+    HStack(spacing: 40.0) {
+        Image(systemName: "scribble.variable")
+            .frame(width: 80.0, height: 80.0)
+            .font(.system(size: 36))
+            .glassEffect()
+
+        Image(systemName: "eraser.fill")
+            .frame(width: 80.0, height: 80.0)
+            .font(.system(size: 36))
+            .glassEffect()
+    }
+}
+```
+
+The `spacing` parameter controls merge distance — closer elements blend their glass shapes together.
+
+### Uniting Glass Effects
+
+Combine multiple views into a single glass shape with `glassEffectUnion`:
+
+```swift
+@Namespace private var namespace
+
+GlassEffectContainer(spacing: 20.0) {
+    HStack(spacing: 20.0) {
+        ForEach(symbolSet.indices, id: \.self) { item in
+            Image(systemName: symbolSet[item])
+                .frame(width: 80.0, height: 80.0)
+                .glassEffect()
+                .glassEffectUnion(id: item < 2 ? "group1" : "group2", namespace: namespace)
+        }
+    }
+}
+```
+
+### Morphing Transitions
+
+Create smooth morphing when glass elements appear/disappear:
+
+```swift
+@State private var isExpanded = false
+@Namespace private var namespace
+
+GlassEffectContainer(spacing: 40.0) {
+    HStack(spacing: 40.0) {
+        Image(systemName: "scribble.variable")
+            .frame(width: 80.0, height: 80.0)
+            .glassEffect()
+            .glassEffectID("pencil", in: namespace)
+
+        if isExpanded {
+            Image(systemName: "eraser.fill")
+                .frame(width: 80.0, height: 80.0)
+                .glassEffect()
+                .glassEffectID("eraser", in: namespace)
+        }
+    }
+}
+
+Button("Toggle") {
+    withAnimation { isExpanded.toggle() }
+}
+.buttonStyle(.glass)
+```
+
+### Extending Horizontal Scrolling Under Sidebar
+
+To allow horizontal scroll content to extend under a sidebar or inspector, ensure the `ScrollView` content reaches the leading/trailing edges of the container. The system automatically handles the under-sidebar scrolling behavior when the layout extends to the edges — no additional modifier is needed.
+
+## Core Pattern — UIKit
+
+### Basic UIGlassEffect
+
+```swift
+let glassEffect = UIGlassEffect()
+glassEffect.tintColor = UIColor.systemBlue.withAlphaComponent(0.3)
+glassEffect.isInteractive = true
+
+let visualEffectView = UIVisualEffectView(effect: glassEffect)
+visualEffectView.translatesAutoresizingMaskIntoConstraints = false
+visualEffectView.layer.cornerRadius = 20
+visualEffectView.clipsToBounds = true
+
+view.addSubview(visualEffectView)
+NSLayoutConstraint.activate([
+    visualEffectView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
+    visualEffectView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
+    visualEffectView.widthAnchor.constraint(equalToConstant: 200),
+    visualEffectView.heightAnchor.constraint(equalToConstant: 120)
+])
+
+// Add content to contentView
+let label = UILabel()
+label.text = "Liquid Glass"
+label.translatesAutoresizingMaskIntoConstraints = false
+visualEffectView.contentView.addSubview(label)
+NSLayoutConstraint.activate([
+    label.centerXAnchor.constraint(equalTo: visualEffectView.contentView.centerXAnchor),
+    label.centerYAnchor.constraint(equalTo: visualEffectView.contentView.centerYAnchor)
+])
+```
+
+### UIGlassContainerEffect for Multiple Elements
+
+```swift
+let containerEffect = UIGlassContainerEffect()
+containerEffect.spacing = 40.0
+
+let containerView = UIVisualEffectView(effect: containerEffect)
+
+let firstGlass = UIVisualEffectView(effect: UIGlassEffect())
+let secondGlass = UIVisualEffectView(effect: UIGlassEffect())
+
+containerView.contentView.addSubview(firstGlass)
+containerView.contentView.addSubview(secondGlass)
+```
+
+### Scroll Edge Effects
+
+```swift
+scrollView.topEdgeEffect.style = .automatic
+scrollView.bottomEdgeEffect.style = .hard
+scrollView.leftEdgeEffect.isHidden = true
+```
+
+### Toolbar Glass Integration
+
+```swift
+let favoriteButton = UIBarButtonItem(image: UIImage(systemName: "heart"), style: .plain, target: self, action: #selector(favoriteAction))
+favoriteButton.hidesSharedBackground = true  // Opt out of shared glass background
+```
+
+## Core Pattern — WidgetKit
+
+### Rendering Mode Detection
+
+```swift
+struct MyWidgetView: View {
+    @Environment(\.widgetRenderingMode) var renderingMode
+
+    var body: some View {
+        if renderingMode == .accented {
+            // Tinted mode: white-tinted, themed glass background
+        } else {
+            // Full color mode: standard appearance
+        }
+    }
+}
+```
+
+### Accent Groups for Visual Hierarchy
+
+```swift
+HStack {
+    VStack(alignment: .leading) {
+        Text("Title")
+            .widgetAccentable()  // Accent group
+        Text("Subtitle")
+            // Primary group (default)
+    }
+    Image(systemName: "star.fill")
+        .widgetAccentable()  // Accent group
+}
+```
+
+### Image Rendering in Accented Mode
+
+```swift
+Image("myImage")
+    .widgetAccentedRenderingMode(.monochrome)
+```
+
+### Container Background
+
+```swift
+VStack { /* content */ }
+    .containerBackground(for: .widget) {
+        Color.blue.opacity(0.2)
+    }
+```
+
+## Key Design Decisions
+
+| Decision | Rationale |
+|----------|-----------|
+| GlassEffectContainer wrapping | Performance optimization, enables morphing between glass elements |
+| `spacing` parameter | Controls merge distance — fine-tune how close elements must be to blend |
+| `@Namespace` + `glassEffectID` | Enables smooth morphing transitions on view hierarchy changes |
+| `interactive()` modifier | Explicit opt-in for touch/pointer reactions — not all glass should respond |
+| UIGlassContainerEffect in UIKit | Same container pattern as SwiftUI for consistency |
+| Accented rendering mode in widgets | System applies tinted glass when user selects tinted Home Screen |
+
+## Best Practices
+
+- **Always use GlassEffectContainer** when applying glass to multiple sibling views — it enables morphing and improves rendering performance
+- **Apply `.glassEffect()` after** other appearance modifiers (frame, font, padding)
+- **Use `.interactive()`** only on elements that respond to user interaction (buttons, toggleable items)
+- **Choose spacing carefully** in containers to control when glass effects merge
+- **Use `withAnimation`** when changing view hierarchies to enable smooth morphing transitions
+- **Test across appearances** — light mode, dark mode, and accented/tinted modes
+- **Ensure accessibility contrast** — text on glass must remain readable
+
+## Anti-Patterns to Avoid
+
+- Using multiple standalone `.glassEffect()` views without a GlassEffectContainer
+- Nesting too many glass effects — degrades performance and visual clarity
+- Applying glass to every view — reserve for interactive elements, toolbars, and cards
+- Forgetting `clipsToBounds = true` in UIKit when using corner radii
+- Ignoring accented rendering mode in widgets — breaks tinted Home Screen appearance
+- Using opaque backgrounds behind glass — defeats the translucency effect
+
+## When to Use
+
+- Navigation bars, toolbars, and tab bars with the new iOS 26 design
+- Floating action buttons and card-style containers
+- Interactive controls that need visual depth and touch feedback
+- Widgets that should integrate with the system's Liquid Glass appearance
+- Morphing transitions between related UI states

package/src/skills/make-interfaces-feel-better/SKILL.md

@@ -0,0 +1,151 @@
+---
+name: make-interfaces-feel-better
+description: Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states.
+origin: community
+---
+
+# Make Interfaces Feel Better
+
+Use this skill for the small design-engineering details that compound into a
+more polished interface.
+
+Source: salvaged from stale community PR #1659 by `linus707`.
+
+## When to Use
+
+- The user says the UI feels off, flat, generic, cramped, jumpy, or unfinished.
+- You are building controls, cards, lists, dashboards, navigation, forms, or
+  toolbars.
+- A component needs hover, active, focus, enter, exit, loading, or empty states.
+- A frontend review needs specific before/after recommendations.
+
+## Core Principles
+
+### Concentric Radius
+
+For nearby nested rounded surfaces:
+
+```text
+outer radius = inner radius + padding
+```
+
+If padding is large, treat layers as separate surfaces instead of forcing the
+math. The point is optical coherence, not formula worship.
+
+### Optical Alignment
+
+Geometric centering is not always visual centering. Icon buttons, play
+triangles, arrows, stars, and asymmetric icons often need a small offset. Fix the
+SVG when possible; otherwise adjust with a pixel-level margin or padding change.
+
+### Shadows And Borders
+
+Use borders for separation and focus rings. Use layered shadows when a card,
+button, dropdown, or popover needs depth. Shadows should be transparent and
+subtle enough to work across backgrounds.
+
+### Text Wrapping
+
+- Use `text-wrap: balance` on headings and short titles.
+- Use `text-wrap: pretty` on short-to-medium body text, captions, descriptions,
+  and list items.
+- Avoid both on long prose, code, and preformatted content.
+- Use `font-variant-numeric: tabular-nums` for counters, timers, prices, tables,
+  and other updating numbers.
+
+### Font Smoothing
+
+On macOS, apply antialiased font smoothing at the root layout when the project
+does not already do so:
+
+```css
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+```
+
+### Image Outlines
+
+Images often need a subtle inset outline so their edges do not blur into the
+surface.
+
+```css
+img {
+  outline: 1px solid rgba(0, 0, 0, 0.1);
+  outline-offset: -1px;
+}
+
+@media (prefers-color-scheme: dark) {
+  img {
+    outline-color: rgba(255, 255, 255, 0.1);
+  }
+}
+```
+
+Use neutral black or white alpha outlines. Do not tint image outlines with the
+brand palette.
+
+### Motion
+
+Use CSS transitions for interactive state changes because they can retarget
+when the user changes intent mid-motion. Reserve keyframes for staged
+one-shot entrances or loading sequences.
+
+Good motion defaults:
+
+- Enter: combine opacity, small `translateY`, and optionally blur.
+- Exit: shorter and quieter than enter, usually 150ms.
+- Press: `scale(0.96)` for tactile buttons, with a way to disable it when the
+  movement distracts.
+- Icon swaps: cross-fade with opacity, scale, and blur instead of instant
+  visibility toggles.
+
+### Transition Scope
+
+Never use `transition: all`. Specify the changed properties:
+
+```css
+.button {
+  transition-property: transform, background-color, box-shadow;
+  transition-duration: 150ms;
+  transition-timing-function: ease-out;
+}
+```
+
+Use `will-change` only for first-frame stutter on compositor-friendly
+properties such as `transform`, `opacity`, and `filter`. Never use
+`will-change: all`.
+
+### Hit Areas
+
+Interactive controls should have at least a 40x40px hit area, ideally 44x44px
+where the layout allows it. Expand with a pseudo-element when the visible icon
+is smaller, but do not let expanded hit areas overlap.
+
+## Review Output
+
+When reviewing a UI polish pass, report concrete changes in before/after rows:
+
+| Principle | Before | After |
+| --- | --- | --- |
+| Concentric radius | Same radius on parent and child | Parent radius accounts for padding |
+| Tabular numbers | Counter shifts as digits change | Counter uses `tabular-nums` |
+| Transition scope | `transition: all` | Explicit transition properties |
+
+Include file paths and properties when they are not obvious from the snippets.
+Omit principles that you checked but did not change.
+
+## Checklist
+
+- Nested rounded elements are optically coherent.
+- Icons are visually centered.
+- Buttons, cards, and popovers use borders or shadows for the right reason.
+- Headings and short text avoid awkward wrapping.
+- Dynamic numbers use tabular numerals.
+- Images have neutral outlines where needed.
+- Enter and exit animations are split, subtle, and interruptible where
+  appropriate.
+- Buttons have tactile active states without exaggerated motion.
+- `transition: all` and `will-change: all` are absent.
+- Small controls still have usable hit areas.