@slycode/slycode 0.1.1 → 0.1.3

package/templates/tutorial-project/.claude/skills/context-priming/references/areas/web-frontend.md

@@ -0,0 +1,252 @@
+# Web Frontend
+
+Updated: 2026-02-14
+
+## Overview
+
+Next.js 16 command center for project management. Features project cards with health scoring, kanban boards with drag-drop, card modals, command configuration, system health monitoring, cross-project toolkit/asset management, global search, activity feed, project scaffolding, and graceful reconnection handling. Neon-minimalist theme (SlyCode Neon) with Tailwind CSS v4, featuring lane-colored gradients, SVG noise textures, and theme-aware terminal styling.
+
+## Key Files
+
+### Pages & Layout
+- `web/src/app/page.tsx` - Home dashboard, lists projects from registry
+- `web/src/app/project/[id]/page.tsx` - Project detail page with kanban
+- `web/src/components/ProjectPageClient.tsx` - Client wrapper for project pages, global terminal activity polling
+- `web/src/components/ProjectView.tsx` - Project view wrapper, manages archive toggle state
+
+### Core Components
+- `web/src/components/Dashboard.tsx` - Project card grid + Toolkit tab, global search, number-key shortcuts
+- `web/src/components/ProjectKanban.tsx` - Kanban board container, drag-drop logic
+- `web/src/components/KanbanColumn.tsx` - Stage columns (backlog, design, impl, testing, done)
+- `web/src/components/KanbanCardItem.tsx` - Individual card, status indicators, active glow effect
+- `web/src/components/CardModal.tsx` - Full card editor with dynamic tabs, edit session protection
+- `web/src/components/ProjectHeader.tsx` - Header with Commands, Archive toggle, HealthMonitor
+
+### Project Management
+- `web/src/components/ProjectCard.tsx` - Enhanced project card with health dot, platform badges, edit/delete
+- `web/src/components/AddProjectModal.tsx` - Multi-phase project creation wizard (details → analysis → scaffold → done)
+- `web/src/components/HealthDot.tsx` - Health score indicator with tooltip (green/amber/red)
+- `web/src/components/PlatformBadges.tsx` - Detected AI platform badges (Claude, Gemini, Codex)
+- `web/src/components/SearchBar.tsx` - Global/contextual search across all kanban cards
+
+### Terminal & Commands
+- `web/src/components/ClaudeTerminalPanel.tsx` - Reusable terminal with provider selector, startupCommands/activeCommands, card area filtering
+- `web/src/components/Terminal.tsx` - xterm.js terminal with ConnectionManager integration
+- `web/src/components/CommandConfigModal.tsx` - Command configuration UI with Command Assistant terminal
+- `web/src/components/GlobalClaudePanel.tsx` - Floating panel for project-wide session, supports session/CWD/class overrides
+
+### Toolkit & Assets
+- `web/src/components/ToolkitTab.tsx` - Asset management tab with matrix view and pending changes
+- `web/src/components/AssetMatrix.tsx` - Cross-project asset deployment matrix with click-to-deploy/remove
+- `web/src/components/AssetViewer.tsx` - Modal viewer for asset content with frontmatter display
+
+### Activity & Content
+- `web/src/components/ActivityFeed.tsx` - Collapsible event log with day grouping and stage indicators
+- `web/src/components/MarkdownContent.tsx` - Markdown renderer using react-markdown with GFM support
+
+### Health & Connection
+- `web/src/components/HealthMonitor.tsx` - System stats widget (CPU, memory, terminals)
+- `web/src/components/ConnectionStatusIndicator.tsx` - Reconnection toast indicator
+- `web/src/lib/connection-manager.ts` - Centralized SSE reconnection with Page Visibility API
+
+### Hooks
+- `web/src/hooks/useConnectionStatus.ts` - Hook for connection state subscription
+- `web/src/hooks/useKeyboardShortcuts.ts` - Keyboard navigation (1-9 project jump, Escape)
+- `web/src/hooks/useCommandsConfig.ts` - Polling-based commands config loader (30s intervals)
+- `web/src/hooks/usePolling.ts` - Generic polling hook
+
+### Utilities
+- `web/src/lib/types.ts` - All shared types (see Data Models)
+- `web/src/lib/claude-actions.ts` - getStartupCommands(), getActiveCommands(), renderTemplate()
+- `web/src/lib/registry.ts` - Project registry loader with kanban, health scoring, platform detection
+- `web/src/lib/paths.ts` - Dynamic path resolution for SlyCode root and project directories
+- `web/src/lib/kanban-paths.ts` - Project-aware kanban file path resolution with tiered backup
+- `web/src/lib/asset-scanner.ts` - Asset scanning, frontmatter parsing, version comparison, platform detection
+- `web/src/lib/event-log.ts` - Append-only activity log with filtering/querying (500 event cap)
+- `web/src/lib/health-score.ts` - Health score calculator with configurable weights
+- `web/src/lib/tab-sync.ts` - Cross-tab synchronization using BroadcastChannel API
+
+### API Routes
+- `web/src/app/api/kanban/route.ts` - Kanban CRUD
+- `web/src/app/api/bridge/[...path]/route.ts` - Bridge proxy
+- `web/src/app/api/commands/route.ts` - Commands CRUD
+- `web/src/app/api/commands/stream/route.ts` - SSE for command file changes
+- `web/src/app/api/system-stats/route.ts` - CPU/memory metrics
+- `web/src/app/api/areas/route.ts` - Available areas list
+- `web/src/app/api/terminal-classes/route.ts` - Terminal class definitions
+- `web/src/app/api/claude-actions/route.ts` - Commands in ClaudeActionsConfig format
+- `web/src/app/api/toolkit/route.ts` - Scan all project assets, build matrix
+- `web/src/app/api/toolkit/sync/route.ts` - Batch deploy/remove assets
+- `web/src/app/api/toolkit/import/route.ts` - Import asset from project to ClaudeMaster
+- `web/src/app/api/events/route.ts` - Query activity log with filters
+- `web/src/app/api/search/route.ts` - Cross-project card search
+- `web/src/app/api/projects/route.ts` - List/create projects
+- `web/src/app/api/projects/[id]/route.ts` - GET/PUT/DELETE individual project
+- `web/src/app/api/projects/analyze/route.ts` - Analyze directory before scaffolding
+- `web/src/app/api/providers/route.ts` - GET/PUT for providers.json (provider list + stage defaults)
+- `web/src/app/api/file/route.ts` - Read files from approved directories
+- `web/src/app/api/git-status/route.ts` - Git status for projects
+
+## Key Functions
+
+- `ProjectKanban.handleDragEnd()` - Reorders cards, handles cross-column moves
+- `ConnectionManager.createManagedEventSource()` - Auto-reconnecting SSE with backoff
+- `getStartupCommands(commands, terminalClass, hasHistory)` - Filter commands for session start
+- `getActiveCommands(commands, terminalClass)` - Filter commands for running session toolbar
+- `scanProjectAssets()` - Scan commands/skills/agents across projects, build matrix
+- `calculateHealthScore()` - Score 0-100 based on configurable weighted factors
+
+## CardModal Tabs
+
+- **Details** - Edit fields, dropdowns for stage/priority, editable areas/tags chips, delete button
+- **Design** - Shows if `design_ref` exists, renders markdown with copy path button
+- **Feature** - Shows if `feature_ref` exists, renders markdown
+- **Test** - Shows if `test_ref` exists, renders markdown
+- **Checklist** - Interactive checkboxes with progress bar (uses ref-based state for rapid clicks)
+- **Terminal** - AI session with provider selector, auto-connect, startupCommands/activeCommands
+
+CardModal uses edit session protection: last-known-value tracking, 2000ms grace period for field editing, prevents overwriting active edits from external updates.
+
+## Health Scoring
+
+- **Factors**: outdated assets, stale cards, unresolved problems, missing CLAUDE.md, non-compliant frontmatter
+- **Levels**: green (≥80), amber (≥50), red (<50)
+- **Display**: HealthDot component with tooltip showing score breakdown
+- Located on ProjectCard in Dashboard
+
+## Toolkit (Asset Management)
+
+- Scans commands/skills/agents across all projects
+- Frontmatter validation: name, version, updated, description required
+- Version comparison for detecting outdated assets
+- Matrix view: rows=assets, columns=projects, cells=status
+- Batch operations: deploy to / remove from projects
+- Import from project back to ClaudeMaster
+
+## Connection Management
+
+- `ConnectionManager` - Singleton managing all SSE connections
+- Page Visibility API detection for sleep/wake cycles
+- Exponential backoff with jitter (1s initial, 30s max)
+- `ConnectionStatusIndicator` - Toast showing "Reconnecting..." during recovery
+
+## Data Models
+
+- `KanbanCard` - id, title, description, type, priority, order, areas[], tags[], problems[], checklist[], archived?, design_ref?, feature_ref?, test_ref?, claude_session?
+- `Command` - label, description, group, cardTypes[], prompt, visibleIn, scope, sessionState
+- `BridgeStats` - bridgeTerminals, connectedClients, activelyWorking, sessions[]
+- `SystemStats` - cpu (0-100), memory {used, total}, swap {used, total}
+- `SessionActivity` - name, status, lastOutputAt, isActive
+- `AssetInfo` - name, type, version, updated, description, filePath, frontmatter
+- `AssetCell` - status (present|outdated|missing|extra), masterVersion?, projectVersion?
+- `ToolkitData` - rows (AssetRow[]), projects (string[])
+- `HealthScore` - score (0-100), level (green|amber|red), factors[]
+- `ActivityEvent` - type, timestamp, project, detail, cardId?
+- `SearchResult` - card, project, matchedFields[]
+- `ProjectWithBacklog` - extends Project with assets, gitUncommitted, healthScore, platforms, lastActivity, activeSessions
+- `ProvidersData` - providers (Record<id, ProviderConfig>), defaults (stages, global, projects)
+- `ProviderConfig` - id, displayName, command, permissions, resume, prompt
+
+## Design System — SlyCode Neon Theme
+
+### Philosophy
+Neon-minimalist aesthetic. Clean surfaces with subtle texture for life and depth. Never sterile/flat, never over-the-top. The theme should feel like a premium tool — atmospheric but professional. Light mode is clean with color; dark mode is moody with glow.
+
+### Color Palette
+- **Neon Blue** (`--neon-blue: #00bfff`) — Primary accent, design/implementation lanes, links, active states
+- **Neon Orange** (`--neon-orange: #ff8c00`) — Global/project terminal headers, warnings
+- **Red-Orange** (`#ff6a33`) — Testing lane (NOT standard orange, which looks brown in dark mode)
+- **Green** — Done lane, success states, running indicators
+- **Void** — Neutral grey scale for backgrounds, borders, muted text
+- **Red** (`#ff3b5c`) — Critical/bug indicators, stop buttons
+
+### Critical Color Lesson
+Dark-end scale colors (e.g. `neon-orange-950 = #2b1700`) are inherently brown. For vibrant dark mode colors, use the BRIGHT color at LOW OPACITY (e.g. `neon-orange-400/15`) instead of dark scale values.
+
+### Texture System (globals.css)
+Three-layer texture approach for gradient surfaces:
+
+1. **Fine grain** (`.grain`) — High-frequency SVG feTurbulence noise (`baseFrequency: 0.65`), overlay blend. Desaturate with `feColorMatrix type='saturate' values='0'` when color neutrality matters.
+2. **Perlin noise** (`.depth-glow`) — Low-frequency organic texture (`baseFrequency: 0.015` light, `0.012` dark), large 400px tiles. Light mode uses `screen` blend (lightens), dark mode uses `soft-light`. Masked with left-to-right gradient fade.
+3. **Terminal texture** (`.terminal-texture`) — CRT-like grain + vignette + lane-colored tint via `--terminal-tint` CSS variable. Box-shaped mask (edges visible, centre clear). Light: `soft-light` blend. Dark: `screen` blend (avoids warm/red cast from `soft-light` on dark backgrounds).
+
+### Blend Mode Rules
+- `soft-light` on dark backgrounds produces warm/red cast — avoid for dark mode textures
+- `overlay` is neutral but can be invisible on very dark surfaces
+- `screen` always adds light — use for dark mode when you need visible texture
+- `mix-blend-multiply` makes white backgrounds transparent (light mode logos)
+- `mix-blend-lighten` makes black backgrounds transparent (dark mode logos)
+- `filter: drop-shadow()` traces the ALPHA boundary — creates rectangular glow on images with opaque backgrounds. Incompatible with blend-mode logo transparency.
+
+### Logo Handling
+Logos have opaque backgrounds (white for light, black for dark). Two `<img>` tags per location:
+- Light: `mix-blend-multiply dark:hidden`
+- Dark: `mix-blend-lighten hidden dark:block`
+- All CSS drop-shadow/filter glow DISABLED (creates rectangular artifacts with blend modes). Logos have baked-in glow.
+- Files: `slycode_light.png` / `slycode.png` (hero), `slycode_logo_light.png` / `slycode_logo.png` (nav)
+
+### Lane-Colored Theming
+Stage colors flow through multiple layers:
+- **KanbanColumn headers** — `colorClasses` map with header gradient, text, count badge, border
+- **CardModal header/tabs** — `stageModalStyles` map with gradients, borders per stage. Uses transparency (85% → 50%) for subtle glass quality
+- **CardModal footer** — `stageTerminalColors` with colored top border
+- **Terminal tint** — `stageTerminalTint` map provides rgba color → passed as `tintColor` prop → sets `--terminal-tint` CSS variable on terminal overlay
+
+### Gradient Direction Convention
+Left-to-right, vibrant-to-soft. The left/start side is always the stronger color, fading lighter toward the right. Never center-out fades (looks artificial).
+
+### Button Aesthetic — Neon Glass
+Terminal/action buttons use semi-transparent backgrounds with colored borders and hover glow:
+```
+border border-{color}-400/40 bg-{color}-400/15 text-{color}-400
+hover:bg-{color}-400/25 hover:shadow-[0_0_12px_rgba(...,0.3)]
+```
+
+### Health Monitor
+Uses inline gradient fills + glow shadows (not flat CSS classes):
+- Normal: `linear-gradient(90deg, #00e676, #00bfff)` + blue glow
+- Warning: `linear-gradient(90deg, #ff8c00, #ffaa00)` + orange glow
+- Critical: `linear-gradient(90deg, #ff3b5c, #ff6b81)` + red glow
+
+### Terminal Background
+Theme-aware: `#222228` (light mode, slightly lighter) / `#1a1a1a` (dark mode). Detected at xterm mount via `document.documentElement.classList.contains('dark')`. Wrapper divs use `bg-[#222228] dark:bg-[#1a1a1a]`.
+
+### Dark Mode Borders
+Card modals get colored outer borders in dark mode (`dark:border dark:border-{color}/25-30`). Section dividers (header/tabs/terminal) use lane colors in both modes.
+
+## Patterns & Invariants
+
+- Cards auto-save on changes via `/api/kanban` PUT
+- Kanban data stored in `documentation/kanban.json` per project
+- Stage order: backlog → design → implementation → testing → done
+- Active glow: `active-glow-card` CSS class with pulse animation (2s activity threshold)
+- Commands use `startupCommands` (session start) and `activeCommands` (running toolbar)
+- SSE connections managed centrally via ConnectionManager for reconnection
+- Dynamic path resolution via paths.ts (no hardcoded paths)
+- Cross-tab sync via BroadcastChannel API
+- Number keys 1-9 jump to projects, Escape closes modals
+- Event log capped at 500 entries, append-only
+- Session names include provider segment: `{projectId}:{provider}:card:{cardId}`
+- Provider selector shown on no-session screen, pre-filled from stage defaults
+- CardModal detects existing session's provider from session name for pre-selection
+- ProjectKanban/ProjectPageClient use regex patterns to match both new and legacy session names
+
+## When to Expand
+
+- Editing card behavior → CardModal.tsx
+- Kanban drag/drop issues → ProjectKanban.tsx, KanbanColumn.tsx
+- Adding new card fields → types.ts, CardModal.tsx
+- Command configuration → CommandConfigModal.tsx, data/commands.json
+- Health monitoring → HealthMonitor.tsx, /api/system-stats
+- Connection issues → connection-manager.ts, ConnectionStatusIndicator.tsx
+- Terminal panel behavior → ClaudeTerminalPanel.tsx
+- Provider selection → ClaudeTerminalPanel.tsx, /api/providers, data/providers.json
+- Provider detection for existing sessions → CardModal.tsx (session name parsing)
+- Asset management → asset-scanner.ts, ToolkitTab.tsx, AssetMatrix.tsx
+- Health scoring → health-score.ts, HealthDot.tsx
+- Activity feed → event-log.ts, ActivityFeed.tsx
+- Project scaffolding → AddProjectModal.tsx, /api/projects
+- Search → SearchBar.tsx, /api/search
+- Path resolution → paths.ts, kanban-paths.ts
+- Keyboard shortcuts → useKeyboardShortcuts.ts
+- Theme/design system → globals.css (texture classes), CardModal.tsx (stageModalStyles), KanbanColumn.tsx (colorClasses), GlobalClaudePanel.tsx (terminal header), Terminal.tsx (tintColor, terminal-texture)

package/templates/tutorial-project/.claude/skills/context-priming/references/maintenance.md

@@ -0,0 +1,128 @@
+# Maintenance Doctrine
+
+Rules for maintaining context-priming references. Changes to this file require user approval.
+
+## Area File Structure
+
+Area files should be as lean as the area requires. Include sections that add value; omit those that don't.
+
+**Always include:**
+```markdown
+# [Area Name]
+
+Updated: YYYY-MM-DD
+
+## Overview
+What this area does, boundaries. 2-3 sentences.
+
+## Key Files
+- `file.py` - purpose
+[Most important files/modules]
+
+## When to Expand
+- [task] → [files to open]
+```
+
+**Include when relevant:**
+
+| Section | When to include |
+|---------|-----------------|
+| Key Functions | Area has important entry points, APIs, or non-obvious control flow |
+| Data Models | Area defines data structures used internally or externally |
+| Shared Objects | Area defines or consumes objects used across multiple areas |
+| Patterns & Invariants | Area has critical rules that must hold |
+| Interfaces | Area connects to other areas with data flow |
+
+**Section formats (when used):**
+
+```markdown
+## Key Functions
+- `process_message()` in handlers.py - entry point for incoming messages
+
+## Data Models
+- `Message` (models.py) - id, content, sender_id, timestamp | core envelope
+
+## Shared Objects
+- `Message` - DEFINED HERE, used by: frontend, api, workers
+- `Config` - defined in core, IMPORTED HERE
+
+## Patterns & Invariants
+- Auth middleware runs before handlers
+
+## Interfaces
+- → frontend: sends Message via WebSocket
+- ← api: receives Request, returns Response
+```
+
+Keep area files under 200 lines. Simple areas may be 20-30 lines; complex areas will be longer.
+
+**Shared Objects note**: When present, prevents duplicate definitions. Mark canonical location.
+
+## Defragmentation
+
+**When to defrag an area:**
+- Information is scattered/duplicated within the file
+- Sections contain outdated content mixed with current
+- File has grown beyond 200 lines
+- Reading the file doesn't quickly answer "what do I need to know?"
+
+**Defrag process:**
+1. Read the entire area file
+2. Identify: duplicates, outdated info, poor organization
+3. Consolidate related information
+4. Remove obsolete content (don't comment it out - delete)
+5. Verify remaining content is accurate against current code
+6. Update the `Updated` date
+
+**Consult user before defragging if:**
+- Multiple areas need simultaneous restructuring
+- Unsure whether information is obsolete or still relevant
+- Defrag would take significant time
+
+## Area Separation
+
+**Heuristics for deciding areas:**
+- Group by logical module/subsystem, not by file type
+- An area should be loadable and useful independently
+- If two areas are always loaded together, consider merging
+- If an area covers unrelated concerns, consider splitting
+
+**When to split an area:**
+- File exceeds 200 lines despite being concise
+- Contains distinct subsystems that don't interact
+- Load-when triggers have diverged (some tasks need part A, others need part B)
+
+**When to merge areas:**
+- Two areas are nearly always loaded together
+- Combined size would still be under 150 lines
+- Separation creates artificial boundaries
+
+**Cross-references:**
+- Areas can note "see also: [other-area]" for related context
+- Don't auto-load chains - let the index's load-when guide loading
+- If area A heavily depends on area B, note this in A's Interfaces section
+
+## Note Pruning
+
+Notes in area-index.md capture learnings. Prune when:
+- Note contradicts newer information (keep newer)
+- Code changed and note no longer applies
+- Note is vague or not actionable
+- Area exceeds 10 notes
+
+**Pruning is lightweight** - remove stale notes during routine updates, don't treat as separate task.
+
+## New Project Initialization
+
+When skill is introduced to a new codebase:
+
+1. Clear `areas/` directory
+2. Reset area-index.md to template state
+3. Keep SKILL.md and maintenance.md intact
+4. Scan project structure:
+   - Look for obvious module boundaries (directories, packages)
+   - Check build configs (package.json, pyproject.toml, etc.)
+   - Read CLAUDE.md for existing documentation pointers
+5. Propose 3-6 initial areas to user
+6. After approval, create area files with initial discovery
+7. Mark all as freshly created - validate through actual use

package/templates/tutorial-project/.claude/skills/design/SKILL.md

@@ -0,0 +1,141 @@
+---
+name: design
+version: 1.1.1
+updated: 2026-02-22
+allowed-tools: Read, Write, Edit, Bash, Glob, Grep, SlashCommand
+argument-hint: "design topic (e.g., Session management system)"
+description: "Start iterative requirements gathering for a design document"
+---
+
+# Design Discovery
+
+Start an iterative requirements-gathering session for a new design. Creates a lightweight document in `documentation/designs/` focused on exploring the problem space, not implementation details.
+
+## Mode: Requirements Gathering
+
+This command sets you into **requirements mode**:
+- Ask clarifying questions rather than making assumptions
+- Explore alternatives and trade-offs with the user
+- Focus on WHAT and WHY, not HOW
+- Keep the document evolving as understanding grows
+- No implementation details, no code, no file lists
+
+## Instructions
+
+1. **Create initial design doc** with the problem statement and open questions
+2. **Enter conversational mode** - engage the user to flesh out requirements
+3. **Update the doc iteratively** as decisions are made
+4. **Flag when design is ready** to become a feature spec
+
+## Workflow
+
+1. **Get current date** using bash
+2. **Create design document** in `documentation/designs/`
+3. **Name the file** as `{descriptive_name}.md` (snake_case, no date prefix)
+4. **Link design to card** - Run this command to attach the design doc to the kanban card:
+   ```bash
+   node scripts/kanban.js update <card-id> --design-ref "documentation/designs/{name}.md"
+   ```
+   **IMPORTANT:** This is a separate CLI command you must execute. Do NOT add the path to the card's description field. The `--design-ref` flag sets a dedicated field on the card that links to this design document.
+5. **Engage user** with initial clarifying questions
+6. **Update doc** as requirements solidify
+
+## Document Format
+
+```md
+# Design: {topic}
+
+**Status:** Discovery
+**Created:** YYYY-MM-DD
+**Last Updated:** YYYY-MM-DD
+
+## Problem Statement
+
+<What problem are we solving? Why does it matter? Who is affected?>
+
+## Goals
+
+<What must this solution achieve?>
+1. <goal>
+2. <goal>
+
+## Non-Goals
+
+<What is explicitly out of scope?>
+- <non-goal>
+
+## Context
+
+<Background info, constraints, related systems>
+
+## Approach Options
+
+### Option A: <name>
+<Description, pros, cons>
+
+### Option B: <name>
+<Description, pros, cons>
+
+## Decisions
+
+<Record decisions as they're made>
+
+| Decision | Choice | Rationale |
+|----------|--------|-----------|
+| <topic> | <choice> | <why> |
+
+## Open Questions
+
+<Questions that need answers before implementation>
+- [ ] <question>
+- [ ] <question>
+
+## Related Areas
+
+<Context-priming areas relevant to this design>
+- <area>: <why relevant>
+
+## Notes
+
+<Captured thoughts, references, examples>
+```
+
+## Conversational Guidelines
+
+When in design mode:
+
+1. **Start with questions** - Don't assume you understand the problem
+   - "What problem are you trying to solve?"
+   - "Who will use this? In what context?"
+   - "What constraints should I know about?"
+
+2. **Present options** - When there are multiple approaches
+   - "I see two main ways to approach this..."
+   - "Option A trades X for Y, Option B does the opposite..."
+
+3. **Capture decisions** - When the user makes a choice
+   - Update the Decisions table with rationale
+   - Remove resolved items from Open Questions
+
+4. **Check readiness** - When requirements feel complete
+   - "I think we've covered the requirements. Ready to create a feature spec?"
+   - If yes: "Run `/feature {design name}` to create the implementation plan"
+
+## Transition to Feature Spec
+
+When the design is ready for implementation:
+1. Update Status to "Ready"
+2. Inform user to run `/feature` referencing this design
+3. The feature spec will link back via `design_ref`
+
+## Reporting
+
+After creating the initial document:
+- File created: `documentation/designs/{name}.md`
+- Card linked: (if in card session) design_ref updated
+- Status: Discovery
+- Mode: Requirements gathering active
+- First question: Start exploring the problem space
+
+## Design Topic
+$ARGUMENTS

package/templates/tutorial-project/.claude/skills/feature/SKILL.md

@@ -0,0 +1,159 @@
+---
+name: feature
+version: 1.1.1
+updated: 2026-02-22
+allowed-tools: Read, Write, Edit, Bash, Glob, Grep, SlashCommand
+argument-hint: "feature description (e.g., Add bulk message operations)"
+description: "Create a numbered feature specification following project standards"
+---
+
+# Feature Planning
+
+Create a new feature specification in `documentation/features/` with the next available number. The plan will follow a comprehensive feature planning format.
+
+## Instructions
+
+1. **Scan for next feature number** - Check existing features to determine next number
+2. **Check project context** - If you need more context about specific areas:
+   - Review relevant project documentation (if available: `/prime <area>` or CLAUDE.md)
+   - Identify key architectural areas the feature touches
+3. **Research the codebase** to understand existing patterns and architecture
+4. **Create comprehensive plan** following the format below
+5. **Name the file** as `{number}_{feature_name}.md` (e.g., `038_bulk_message_operations.md`)
+
+## Workflow
+
+1. **Determine next feature number**:
+   - List files in `documentation/features/`
+   - Find highest numbered feature
+   - Next number = highest + 1
+2. **Analyze feature requirements** from description
+3. **Check if sufficient context** is loaded for the feature
+4. **Create the plan** in `documentation/features/` directory
+5. **Link feature to card** - Run this command to attach the feature spec to the kanban card:
+   ```bash
+   node scripts/kanban.js update <card-id> --feature-ref "documentation/features/{number}_{name}.md"
+   ```
+   **IMPORTANT:** This is a separate CLI command you must execute. Do NOT add the path to the card's description field. The `--feature-ref` flag sets a dedicated field on the card that links to this feature spec.
+
+## Context Integration
+
+Before creating the plan:
+- Identify which project areas/modules the feature touches
+- Check if sufficient context exists (project docs, CLAUDE.md, architecture files)
+- If needed, suggest: "This feature involves {areas}. Consider reviewing {relevant docs} for better context."
+
+## Plan Format
+
+```md
+# Feature {number}: {feature name}
+
+**Status**: DRAFT
+**Created**: YYYY-MM-DD
+**Last Updated**: YYYY-MM-DD
+
+## Feature Description
+<describe the feature in detail, including its purpose and value to users>
+
+## User Story
+As a <type of user>
+I want to <action/goal>
+So that <benefit/value>
+
+## Problem Statement
+<clearly define the specific problem or opportunity this feature addresses>
+
+## Solution Statement
+<describe the proposed solution approach and how it solves the problem>
+
+## Context Areas
+<note which project areas/modules are relevant to this feature>
+- Required areas: [list areas like frontend, backend, api, database, etc.]
+- Additional context: [reference relevant documentation or architecture files]
+
+## Relevant Files
+Use these files to implement the feature:
+
+<find and list the files that are relevant to the feature describe why they are relevant in bullet points. Reference patterns from CLAUDE.md and project documentation.>
+
+### New Files
+<if any new files need to be created, list them here following project conventions>
+
+## Implementation Plan
+### Phase 1: Foundation
+<describe the foundational work needed before implementing the main feature>
+
+### Phase 2: Core Implementation
+<describe the main implementation work for the feature>
+
+### Phase 3: Integration
+<describe how the feature will integrate with existing functionality>
+
+## Step by Step Tasks
+IMPORTANT: Execute every step in order, top to bottom.
+
+<list step by step tasks as h3 headers plus bullet points. Reference project patterns from CLAUDE.md and documentation.>
+
+### Task 1: <descriptive name>
+- <specific actions following project conventions>
+- <file modifications>
+
+### Task 2: <descriptive name>
+- <specific actions>
+- <file modifications>
+
+### Task N: Run Full Validation
+- Execute all validation commands
+- Verify feature works end-to-end
+- Check for regressions
+
+## Testing Strategy
+### Unit Tests
+<describe unit tests needed following project test standards>
+
+### Integration Tests
+<describe integration tests needed>
+
+### E2E Tests
+<if applicable, describe end-to-end tests>
+
+### Edge Cases
+<list edge cases that need to be tested>
+
+## Acceptance Criteria
+<list specific, measurable criteria that must be met for the feature to be considered complete>
+- [ ] Feature works as described
+- [ ] All tests pass
+- [ ] No regressions introduced
+- [ ] Documentation updated
+- [ ] <specific criteria for this feature>
+
+## Validation Commands
+Execute every command to validate the feature works correctly with zero regressions.
+
+<list project-specific validation commands - examples:>
+- Run test suite (e.g., `pytest`, `npm test`, `make test`)
+- Run linters (e.g., `npm run lint`, `flake8`, `eslint`)
+- Run type checking (e.g., `mypy`, `tsc --noEmit`)
+- Build the project (e.g., `npm run build`, `make build`)
+- Manual testing steps
+- <specific tests for this feature>
+
+## Future Considerations
+<optional: future enhancements or related features to consider>
+
+## Notes
+<optionally list any additional notes, dependencies, or context that are relevant to the feature>
+```
+
+## Reporting
+
+After creating the plan, report:
+- File created: `documentation/features/{number}_{feature_name}.md`
+- Card linked: feature_ref updated via CLI command
+- Feature number: {number}
+- Status: DRAFT
+- Next step: Run `/implement` with the plan path when ready
+
+## Feature
+$ARGUMENTS