@harnspec/cli 0.0.1

package/templates/examples/dashboard-widgets/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "dashboard-widgets-demo",
+  "version": "1.0.0",
+  "description": "React Dashboard for HarnSpec Tutorial 2",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "keywords": ["harnspec", "tutorial", "demo"],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.0.0"
+  }
+}

package/templates/examples/dashboard-widgets/src/App.css

@@ -0,0 +1,20 @@
+.app {
+  padding: 20px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+header {
+  margin-bottom: 30px;
+}
+
+header h1 {
+  margin: 0 0 5px 0;
+  color: #333;
+}
+
+header p {
+  margin: 0;
+  color: #666;
+  font-size: 14px;
+}

package/templates/examples/dashboard-widgets/src/App.jsx

@@ -0,0 +1,16 @@
+import Dashboard from './components/Dashboard';
+import './App.css';
+
+function App() {
+  return (
+    <div className="app">
+      <header>
+        <h1>Analytics Dashboard</h1>
+        <p>Demo for harnspec Tutorial 2</p>
+      </header>
+      <Dashboard />
+    </div>
+  );
+}
+
+export default App;

package/templates/examples/dashboard-widgets/src/components/Dashboard.css

@@ -0,0 +1,17 @@
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+@media (min-width: 768px) {
+  .dashboard-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1200px) {
+  .dashboard-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}

package/templates/examples/dashboard-widgets/src/components/Dashboard.jsx

@@ -0,0 +1,15 @@
+import StatsWidget from './widgets/StatsWidget';
+import ChartWidget from './widgets/ChartWidget';
+import './Dashboard.css';
+
+function Dashboard() {
+  return (
+    <div className="dashboard-grid">
+      <StatsWidget />
+      <ChartWidget />
+      {/* TODO: Add new widgets here */}
+    </div>
+  );
+}
+
+export default Dashboard;

package/templates/examples/dashboard-widgets/src/components/WidgetWrapper.css

@@ -0,0 +1,23 @@
+.widget {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  overflow: hidden;
+}
+
+.widget-header {
+  padding: 15px 20px;
+  border-bottom: 1px solid #eee;
+  background: #fafafa;
+}
+
+.widget-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.widget-body {
+  padding: 20px;
+}

package/templates/examples/dashboard-widgets/src/components/WidgetWrapper.jsx

@@ -0,0 +1,16 @@
+import './WidgetWrapper.css';
+
+function WidgetWrapper({ title, children }) {
+  return (
+    <div className="widget">
+      <div className="widget-header">
+        <h3>{title}</h3>
+      </div>
+      <div className="widget-body">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default WidgetWrapper;

package/templates/examples/dashboard-widgets/src/components/widgets/ChartWidget.css

@@ -0,0 +1,33 @@
+.chart {
+  height: 200px;
+}
+
+.chart-bars {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-around;
+  height: 100%;
+  gap: 8px;
+}
+
+.chart-bar-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+}
+
+.chart-bar {
+  width: 100%;
+  background: linear-gradient(to top, #2563eb, #60a5fa);
+  border-radius: 4px 4px 0 0;
+  transition: height 0.3s ease;
+  min-height: 4px;
+}
+
+.chart-label {
+  margin-top: 8px;
+  font-size: 11px;
+  color: #666;
+}

package/templates/examples/dashboard-widgets/src/components/widgets/ChartWidget.jsx

@@ -0,0 +1,28 @@
+import WidgetWrapper from '../WidgetWrapper';
+import { getChartData } from '../../utils/mockData';
+import './ChartWidget.css';
+
+function ChartWidget() {
+  const data = getChartData();
+  const maxValue = Math.max(...data.map(d => d.value));
+  
+  return (
+    <WidgetWrapper title="Activity Trend">
+      <div className="chart">
+        <div className="chart-bars">
+          {data.map((item, index) => (
+            <div key={index} className="chart-bar-container">
+              <div 
+                className="chart-bar"
+                style={{ height: `${(item.value / maxValue) * 100}%` }}
+              />
+              <div className="chart-label">{item.label}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </WidgetWrapper>
+  );
+}
+
+export default ChartWidget;

package/templates/examples/dashboard-widgets/src/components/widgets/StatsWidget.css

@@ -0,0 +1,24 @@
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 10px;
+}
+
+.stat-value {
+  font-size: 28px;
+  font-weight: bold;
+  color: #2563eb;
+  margin-bottom: 5px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}

package/templates/examples/dashboard-widgets/src/components/widgets/StatsWidget.jsx

@@ -0,0 +1,22 @@
+import WidgetWrapper from '../WidgetWrapper';
+import { getStats } from '../../utils/mockData';
+import './StatsWidget.css';
+
+function StatsWidget() {
+  const stats = getStats();
+  
+  return (
+    <WidgetWrapper title="Quick Stats">
+      <div className="stats-grid">
+        {stats.map((stat, index) => (
+          <div key={index} className="stat-item">
+            <div className="stat-value">{stat.value}</div>
+            <div className="stat-label">{stat.label}</div>
+          </div>
+        ))}
+      </div>
+    </WidgetWrapper>
+  );
+}
+
+export default StatsWidget;

package/templates/examples/dashboard-widgets/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: #f5f5f5;
+}
+
+* {
+  box-sizing: border-box;
+}

package/templates/examples/dashboard-widgets/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/templates/examples/dashboard-widgets/src/utils/mockData.js

@@ -0,0 +1,30 @@
+/**
+ * Mock data generators for dashboard widgets
+ */
+
+export function getStats() {
+  return [
+    { label: 'Users', value: '2,453' },
+    { label: 'Revenue', value: '$12.5K' },
+    { label: 'Orders', value: '186' },
+    { label: 'Growth', value: '+23%' },
+  ];
+}
+
+export function getChartData() {
+  return [
+    { label: 'Mon', value: 45 },
+    { label: 'Tue', value: 62 },
+    { label: 'Wed', value: 38 },
+    { label: 'Thu', value: 71 },
+    { label: 'Fri', value: 55 },
+    { label: 'Sat', value: 28 },
+    { label: 'Sun', value: 34 },
+  ];
+}
+
+// TODO: Add more mock data generators for new widgets
+// Example:
+// export function getActivityFeed() { ... }
+// export function getPerformanceMetrics() { ... }
+// export function getQuickActions() { ... }

package/templates/examples/dashboard-widgets/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});

package/templates/standard/AGENTS-minimal.md

@@ -0,0 +1,10 @@
+
+# {project_name}
+
+## Project-Specific Rules
+
+Add your project-specific conventions here. For example:
+- Code style preferences
+- Naming conventions  
+- Team workflows
+- Custom tooling

package/templates/standard/AGENTS.md

@@ -0,0 +1,118 @@
+# AI Agent Instructions
+
+## Project: {project_name}
+
+## 🚨 CRITICAL: Before ANY Task
+
+**STOP and check these first:**
+
+1. **Discover context** → Use `board` tool to see project state
+2. **Search for related work** → Use `search` tool before creating new specs
+3. **Never create files manually** → Always use `create` tool for new specs
+
+> **Why?** Skipping discovery creates duplicate work. Manual file creation breaks HarnSpec tooling.
+
+## 🔧 Managing Specs
+
+### CLI Commands with Agent Skills
+
+| Action | Command |
+|--------|---------|
+| Project status | `harnspec board` |
+| List specs | `harnspec list` |
+| Search specs | `harnspec search "query"` |
+| View spec | `harnspec view <spec>` |
+| Create spec | `harnspec create <name>` |
+| Update spec | `harnspec update <spec> --status <status>` |
+| Link specs | `harnspec rel add <spec> --depends-on <other>` |
+| Unlink specs | `harnspec rel rm <spec> --depends-on <other>` |
+| Dependencies | `harnspec deps <spec>` |
+| Token count | `harnspec tokens <spec>` |
+| Validate specs | `harnspec validate` |
+
+## ⚠️ Core Rules
+
+| Rule | Details |
+|------|---------|
+| **NEVER edit frontmatter manually** | Use `update`, `link`, `unlink` for: `status`, `priority`, `tags`, `assignee`, `transitions`, timestamps, `depends_on` |
+| **ALWAYS link spec references** | Content mentions another spec → `harnspec link <spec> --depends-on <other>` |
+| **Track status transitions** | `draft` → `planned` → `in-progress` (before coding) → `complete` (after done) |
+| **Keep specs current** | Document progress, decisions, and learnings as work happens. Obsolete specs mislead both humans and AI |
+| **No nested code blocks** | Use indentation instead |
+
+### 🚫 Common Mistakes
+
+| ❌ Don't | ✅ Do Instead |
+|----------|---------------|
+| Create spec files manually | Use `create` tool |
+| Skip discovery | Run `board` and `search` first |
+| Leave status as "draft" or "planned" | Update to `in-progress` before coding |
+| Edit frontmatter manually | Use `update` tool |
+| Complete spec without documentation | Document progress, prompts, learnings first |
+
+## 📋 SDD Workflow
+
+```
+BEFORE: board → search → check existing specs
+DURING: update status to in-progress → code → document decisions → link dependencies
+AFTER:  document completion → update status to complete
+```
+
+**Status tracks implementation, NOT spec writing.**
+
+## Spec Dependencies
+
+Use `depends_on` to express blocking relationships between specs:
+
+- **`depends_on`** = True blocker, work order matters, directional (A depends on B)
+
+Link dependencies when one spec builds on another:
+
+```bash
+harnspec link <spec> --depends-on <other-spec>
+```
+
+## When to Use Specs
+
+| ✅ Write spec | ❌ Skip spec |
+|---------------|--------------|
+| Multi-part features | Bug fixes |
+| Breaking changes | Trivial changes |
+| Design decisions | Self-explanatory refactors |
+
+## Token Thresholds
+
+| Tokens | Status |
+|--------|--------|
+| <2,000 | ✅ Optimal |
+| 2,000-3,500 | ✅ Good |
+| 3,500-5,000 | ⚠️ Consider splitting |
+| >5,000 | 🔴 Must split |
+
+## Quality Validation
+
+Before completing work, validate spec quality:
+
+```bash
+harnspec validate              # Check structure and quality
+harnspec validate --check-deps # Verify dependency alignment
+```
+
+Validation checks:
+
+- Missing required sections
+- Excessive length (>400 lines)
+- Content/frontmatter dependency misalignment
+- Invalid frontmatter fields
+
+## First Principles (Priority Order)
+
+1. **Context Economy** - <2,000 tokens optimal, >3,500 needs splitting
+2. **Signal-to-Noise** - Every word must inform a decision
+3. **Intent Over Implementation** - Capture why, let how emerge
+4. **Bridge the Gap** - Both human and AI must understand
+5. **Progressive Disclosure** - Add complexity only when pain is felt
+
+---
+
+**Remember:** HarnSpec tracks what you're building. Keep specs in sync with your work!

package/templates/standard/README.md

@@ -0,0 +1,25 @@
+# Standard Template
+
+Recommended for most projects. Single-file specs with AI agent instructions.
+
+## What's Included
+
+- **AGENTS.md** - Instructions for AI coding assistants
+- **Single-file spec template** - All sections in one README.md
+- Opinionated defaults for fast iteration
+
+## When to Use
+
+- Solo developers or small teams
+- Simple to moderate complexity specs
+- Want AI agent integration
+- Need clear but not heavy-weight process
+
+## Philosophy
+
+Keep it lean. Write specs for features that need clarity. Skip them for obvious changes.
+
+## Next Steps
+
+You're ready to go! Ask your AI to create a spec for your next feature.
+

package/templates/standard/config.json

@@ -0,0 +1,18 @@
+{
+  "name": "Standard",
+  "description": "Recommended for most projects - solo devs and small teams",
+  "config": {
+    "template": "standard",
+    "specsDir": "specs",
+    "structure": {
+      "pattern": "flat",
+      "prefix": "",
+      "dateFormat": "YYYYMMDD",
+      "sequenceDigits": 3,
+      "defaultFile": "README.md"
+    },
+    "features": {
+      "aiAgents": true
+    }
+  }
+}

package/templates/standard/files/README.md

@@ -0,0 +1,42 @@
+---
+status: planned
+created: '{date}'
+tags: []
+priority: medium
+---
+
+# {name}
+
+> **Status**: {status} · **Priority**: {priority} · **Created**: {date}
+
+## Overview
+
+<!-- What are we solving? Why now? -->
+
+## Design
+
+<!-- Technical approach, architecture decisions -->
+
+## Plan
+
+<!-- Break down implementation into steps -->
+
+<!-- 💡 TIP: If your plan has >6 phases or this spec approaches 
+     400 lines, consider using sub-spec files:
+     - IMPLEMENTATION.md for detailed implementation
+     - See spec 012-sub-spec-files for guidance on splitting -->
+
+- [ ] Task 1
+- [ ] Task 2
+- [ ] Task 3
+
+## Test
+
+<!-- How will we verify this works? -->
+
+- [ ] Test criteria 1
+- [ ] Test criteria 2
+
+## Notes
+
+<!-- Optional: Research findings, alternatives considered, open questions -->