@useworkapp/construct-skill 1.0.0

package/README.md

@@ -0,0 +1,181 @@
+# @useworkapp/construct-skill
+
+AI coding assistant skill for building [Work](https://usework.app) platform Constructs. Compatible with **Claude Code** and **OpenCode**.
+
+## What is a Construct?
+
+A Construct is a self-contained React micro-app that runs on the Work streaming platform. Think of it like a song on Spotify - users stream Constructs to solve business problems, and Runners (developers) earn from every stream.
+
+## Installation
+
+```bash
+npm install -g @useworkapp/construct-skill
+```
+
+The skill will auto-detect your AI coding tools and install automatically.
+
+### Manual Installation
+
+```bash
+# Install for Claude Code
+construct-skill install claude-code
+
+# Install for OpenCode
+construct-skill install opencode
+
+# Install for both
+construct-skill install all
+
+# Install to current project instead of global
+construct-skill install claude-code --project
+```
+
+## Usage
+
+### With Claude Code
+
+The skill is automatically invoked when you ask Claude to:
+- "Build me an expense tracker Construct"
+- "Review this component for Work standards"
+- "Help me create a Construct for inventory management"
+
+### With OpenCode
+
+Use the `/construct` command:
+
+```
+/construct Build a todo list app
+/construct Review this code for Work standards
+```
+
+### Validate Your Code
+
+Check if your Construct follows Work standards:
+
+```bash
+npx @useworkapp/construct-skill validate ./App.tsx
+```
+
+Output:
+```
+╔══════════════════════════════════════════════════════════════╗
+║           WORK CONSTRUCT VALIDATOR                           ║
+╚══════════════════════════════════════════════════════════════╝
+
+File: ./App.tsx
+
+WARNINGS:
+  ⚠ Consider adding responsive breakpoints
+
+✓ Construct passes required validations (with warnings)
+
+────────────────────────────────────────────────────────────
+Status: PASS
+Errors: 0 | Warnings: 1
+────────────────────────────────────────────────────────────
+```
+
+## Construct Requirements
+
+All Constructs must follow these standards:
+
+| Requirement | Description |
+|------------|-------------|
+| **Single File** | One `App.tsx` with default export |
+| **shadcn/ui** | Only use approved components |
+| **localStorage** | Persist data with `work-construct-` prefix |
+| **Tailwind CSS** | No inline styles or CSS modules |
+| **Responsive** | Use `sm:`, `md:`, `lg:` breakpoints |
+| **Dark Mode** | Support via CSS variables |
+| **Accessible** | aria-labels, semantic HTML, labels |
+| **No API Calls** | No fetch, axios, or external requests |
+
+## Available Components
+
+```tsx
+// Layout
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+// Forms
+import { Button, Input, Textarea, Label } from "@/components/ui/...";
+import { Select, Checkbox, Switch } from "@/components/ui/...";
+
+// Feedback
+import { Badge, Alert, Progress } from "@/components/ui/...";
+
+// Data Display
+import { Table, Tabs } from "@/components/ui/...";
+
+// Overlay
+import { Dialog, DropdownMenu } from "@/components/ui/...";
+
+// Icons (Lucide only)
+import { Plus, Trash2, Edit } from "lucide-react";
+```
+
+## Example Construct
+
+```tsx
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Plus } from "lucide-react";
+
+const STORAGE_KEY = "work-construct-my-app";
+
+export default function App() {
+  const [items, setItems] = useState<string[]>(() => {
+    if (typeof window === "undefined") return [];
+    const saved = localStorage.getItem(STORAGE_KEY);
+    return saved ? JSON.parse(saved) : [];
+  });
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
+  }, [items]);
+
+  return (
+    <div className="min-h-screen bg-background p-4 sm:p-6">
+      <Card className="mx-auto max-w-md">
+        <CardHeader>
+          <CardTitle>My Construct</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {/* Your app here */}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+```
+
+## Commands
+
+| Command | Description |
+|---------|-------------|
+| `construct-skill install <platform>` | Install skill for Claude Code or OpenCode |
+| `construct-skill uninstall <platform>` | Remove skill |
+| `construct-skill validate <file>` | Validate a Construct file |
+| `construct-skill detect` | Show detected AI coding tools |
+| `construct-skill help` | Show help |
+
+## Become a Runner
+
+Runners are developers who build Constructs and earn from every stream.
+
+- **60% revenue share** (70% for Founders Protocol members)
+- Build once, earn forever
+- Join at [usework.app/runner](https://usework.app/runner)
+
+## Links
+
+- [Work Platform](https://usework.app)
+- [Runner Documentation](https://usework.app/docs/runners)
+- [Construct Guidelines](https://usework.app/docs/runners/constructs)
+
+## License
+
+MIT

package/bin/install.js

@@ -0,0 +1,226 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+const os = require("os");
+
+const PACKAGE_ROOT = path.join(__dirname, "..");
+
+const TARGETS = {
+  "claude-code": {
+    name: "Claude Code",
+    globalDir: path.join(os.homedir(), ".claude", "skills"),
+    projectDir: ".claude/skills",
+    sourceDir: path.join(PACKAGE_ROOT, "claude-code"),
+  },
+  opencode: {
+    name: "OpenCode",
+    globalDir: path.join(os.homedir(), ".config", "opencode", "commands"),
+    projectDir: ".opencode/commands",
+    sourceDir: path.join(PACKAGE_ROOT, "opencode"),
+  },
+};
+
+function copyRecursive(src, dest) {
+  if (!fs.existsSync(src)) {
+    return false;
+  }
+
+  const stats = fs.statSync(src);
+
+  if (stats.isDirectory()) {
+    fs.mkdirSync(dest, { recursive: true });
+    const files = fs.readdirSync(src);
+    for (const file of files) {
+      copyRecursive(path.join(src, file), path.join(dest, file));
+    }
+  } else {
+    fs.mkdirSync(path.dirname(dest), { recursive: true });
+    fs.copyFileSync(src, dest);
+  }
+
+  return true;
+}
+
+function detectPlatforms() {
+  const detected = [];
+
+  // Check for Claude Code
+  const claudeConfig = path.join(os.homedir(), ".claude");
+  if (fs.existsSync(claudeConfig)) {
+    detected.push("claude-code");
+  }
+
+  // Check for OpenCode
+  const opencodeConfig = path.join(os.homedir(), ".config", "opencode");
+  if (fs.existsSync(opencodeConfig)) {
+    detected.push("opencode");
+  }
+
+  return detected;
+}
+
+function install(platform, scope = "global") {
+  const target = TARGETS[platform];
+  if (!target) {
+    console.error(`Unknown platform: ${platform}`);
+    console.error(`Available platforms: ${Object.keys(TARGETS).join(", ")}`);
+    process.exit(1);
+  }
+
+  const destDir = scope === "project" ? target.projectDir : target.globalDir;
+
+  console.log(`Installing ${target.name} skill...`);
+  console.log(`  Source: ${target.sourceDir}`);
+  console.log(`  Destination: ${destDir}`);
+
+  if (copyRecursive(target.sourceDir, destDir)) {
+    console.log(`  ✓ Installed successfully!\n`);
+    return true;
+  } else {
+    console.error(`  ✗ Source directory not found\n`);
+    return false;
+  }
+}
+
+function uninstall(platform, scope = "global") {
+  const target = TARGETS[platform];
+  if (!target) {
+    console.error(`Unknown platform: ${platform}`);
+    process.exit(1);
+  }
+
+  const destDir = scope === "project" ? target.projectDir : target.globalDir;
+
+  // For Claude Code, remove the specific skill directory
+  const skillDir =
+    platform === "claude-code"
+      ? path.join(destDir, "construct-builder")
+      : path.join(destDir, "construct.md");
+
+  if (fs.existsSync(skillDir)) {
+    if (fs.statSync(skillDir).isDirectory()) {
+      fs.rmSync(skillDir, { recursive: true });
+    } else {
+      fs.unlinkSync(skillDir);
+    }
+    console.log(`✓ Uninstalled ${target.name} skill from ${destDir}`);
+    return true;
+  } else {
+    console.log(`Skill not found at ${skillDir}`);
+    return false;
+  }
+}
+
+function printUsage() {
+  console.log(`
+@usework/construct-skill - AI skill for building Work Constructs
+
+USAGE:
+  construct-skill [command] [options]
+
+COMMANDS:
+  install [platform]    Install skill for specified platform
+  uninstall [platform]  Remove skill for specified platform
+  validate <file>       Validate a Construct file
+  detect                Show detected AI coding tools
+  help                  Show this help message
+
+PLATFORMS:
+  claude-code           Install for Claude Code (~/.claude/skills/)
+  opencode              Install for OpenCode (~/.config/opencode/commands/)
+  all                   Install for all detected platforms
+
+OPTIONS:
+  --global              Install to user home directory (default)
+  --project             Install to current project directory
+  --auto                Auto-detect and install (used by postinstall)
+
+EXAMPLES:
+  construct-skill install claude-code
+  construct-skill install opencode --project
+  construct-skill install all
+  construct-skill uninstall claude-code
+`);
+}
+
+function main() {
+  const args = process.argv.slice(2);
+
+  if (args.length === 0 || args.includes("help") || args.includes("--help")) {
+    printUsage();
+    process.exit(0);
+  }
+
+  const command = args[0];
+
+  // Route to validate command
+  if (command === "validate") {
+    require("./validate.js");
+    return;
+  }
+  const platform = args[1];
+  const scope = args.includes("--project") ? "project" : "global";
+  const auto = args.includes("--auto");
+
+  switch (command) {
+    case "detect":
+      const detected = detectPlatforms();
+      console.log("\nDetected AI coding tools:");
+      if (detected.length === 0) {
+        console.log("  None found. Install Claude Code or OpenCode first.\n");
+      } else {
+        detected.forEach((p) => console.log(`  ✓ ${TARGETS[p].name}`));
+        console.log();
+      }
+      break;
+
+    case "install":
+      if (auto) {
+        // Auto-install mode (postinstall script)
+        const platforms = detectPlatforms();
+        if (platforms.length === 0) {
+          console.log(
+            "\n@usework/construct-skill installed but no AI coding tools detected."
+          );
+          console.log("Run 'construct-skill install <platform>' after installing Claude Code or OpenCode.\n");
+        } else {
+          console.log("\n@usework/construct-skill - Auto-installing...\n");
+          platforms.forEach((p) => install(p, scope));
+        }
+        break;
+      }
+
+      if (!platform) {
+        console.error("Please specify a platform: claude-code, opencode, or all");
+        process.exit(1);
+      }
+
+      if (platform === "all") {
+        Object.keys(TARGETS).forEach((p) => install(p, scope));
+      } else {
+        install(platform, scope);
+      }
+      break;
+
+    case "uninstall":
+      if (!platform) {
+        console.error("Please specify a platform: claude-code, opencode, or all");
+        process.exit(1);
+      }
+
+      if (platform === "all") {
+        Object.keys(TARGETS).forEach((p) => uninstall(p, scope));
+      } else {
+        uninstall(platform, scope);
+      }
+      break;
+
+    default:
+      console.error(`Unknown command: ${command}`);
+      printUsage();
+      process.exit(1);
+  }
+}
+
+main();

package/bin/validate.js

@@ -0,0 +1,207 @@
+#!/usr/bin/env node
+
+/**
+ * Construct Validator
+ * Validates that a React component follows Work platform Construct standards
+ *
+ * Usage: npx @useworkapp/construct-skill validate <path-to-file>
+ */
+
+const fs = require("fs");
+const path = require("path");
+
+const ALLOWED_SHADCN_COMPONENTS = [
+  // Layout
+  "Card", "CardContent", "CardHeader", "CardTitle", "CardDescription", "CardFooter",
+  // Forms
+  "Button", "Input", "Textarea", "Label",
+  "Select", "SelectContent", "SelectItem", "SelectTrigger", "SelectValue",
+  "Checkbox", "RadioGroup", "RadioGroupItem", "Switch",
+  // Feedback
+  "Badge", "Alert", "AlertDescription", "AlertTitle", "Progress",
+  // Data Display
+  "Table", "TableBody", "TableCell", "TableHead", "TableHeader", "TableRow",
+  "Tabs", "TabsContent", "TabsList", "TabsTrigger",
+  // Overlay
+  "Dialog", "DialogContent", "DialogDescription", "DialogFooter",
+  "DialogHeader", "DialogTitle", "DialogTrigger",
+  "DropdownMenu", "DropdownMenuContent", "DropdownMenuItem", "DropdownMenuTrigger",
+  // Other
+  "Separator", "ScrollArea", "Tooltip", "TooltipContent", "TooltipProvider", "TooltipTrigger",
+];
+
+const FORBIDDEN_PATTERNS = [
+  { pattern: /fetch\s*\(/, message: "External API calls (fetch) are not allowed", error: true },
+  { pattern: /axios/, message: "External API calls (axios) are not allowed", error: true },
+  { pattern: /XMLHttpRequest/, message: "External API calls (XMLHttpRequest) are not allowed", error: true },
+  { pattern: /style\s*=\s*\{/, message: "Inline styles detected - use Tailwind classes instead", error: false },
+  { pattern: /\.module\.css/, message: "CSS modules are not supported", error: true },
+  { pattern: /import.*['"].*\.css['"]/, message: "External CSS imports are not supported", error: true },
+];
+
+const REQUIRED_PATTERNS = [
+  { pattern: /export\s+default/, message: "Must have a default export", error: true },
+];
+
+const RECOMMENDED_PATTERNS = [
+  { pattern: /localStorage/, message: "Consider using localStorage for data persistence" },
+  { pattern: /(sm:|md:|lg:)/, message: "Consider adding responsive breakpoints" },
+  { pattern: /(dark:|bg-background|text-foreground)/, message: "Consider adding dark mode support" },
+];
+
+function validateConstruct(filePath) {
+  const errors = [];
+  const warnings = [];
+
+  // Check file exists
+  if (!fs.existsSync(filePath)) {
+    return { valid: false, errors: [`File not found: ${filePath}`], warnings: [] };
+  }
+
+  // Check file extension
+  const ext = path.extname(filePath);
+  if (ext !== ".tsx" && ext !== ".ts" && ext !== ".jsx" && ext !== ".js") {
+    errors.push(`File must be .tsx, .ts, .jsx, or .js - got ${ext}`);
+  }
+
+  const content = fs.readFileSync(filePath, "utf-8");
+
+  // Check for forbidden patterns
+  for (const { pattern, message, error } of FORBIDDEN_PATTERNS) {
+    if (pattern.test(content)) {
+      if (error) {
+        errors.push(message);
+      } else {
+        warnings.push(message);
+      }
+    }
+  }
+
+  // Check for required patterns
+  for (const { pattern, message } of REQUIRED_PATTERNS) {
+    if (!pattern.test(content)) {
+      errors.push(message);
+    }
+  }
+
+  // Check for recommended patterns
+  for (const { pattern, message } of RECOMMENDED_PATTERNS) {
+    if (!pattern.test(content)) {
+      warnings.push(message);
+    }
+  }
+
+  // Check for non-standard component usage
+  const jsxComponentRegex = /<([A-Z][a-zA-Z]*)/g;
+  const usedComponents = new Set();
+  let match;
+
+  while ((match = jsxComponentRegex.exec(content)) !== null) {
+    usedComponents.add(match[1]);
+  }
+
+  // Find locally defined components
+  const localComponents = new Set();
+  const functionComponentRegex = /(?:function|const)\s+([A-Z][a-zA-Z]*)/g;
+  while ((match = functionComponentRegex.exec(content)) !== null) {
+    localComponents.add(match[1]);
+  }
+
+  // Validate components are from allowed list or defined locally
+  for (const comp of usedComponents) {
+    if (
+      !ALLOWED_SHADCN_COMPONENTS.includes(comp) &&
+      !localComponents.has(comp) &&
+      comp !== "App"
+    ) {
+      warnings.push(`Unknown component: <${comp}> - ensure it's defined locally or is a valid shadcn/ui component`);
+    }
+  }
+
+  // Check for accessibility - icon buttons without aria-label
+  const iconButtonMatches = content.match(/<Button[^>]*size\s*=\s*["']icon["'][^>]*>/g) || [];
+  for (const buttonMatch of iconButtonMatches) {
+    if (!buttonMatch.includes("aria-label")) {
+      warnings.push("Icon button found without aria-label - add aria-label for accessibility");
+      break;
+    }
+  }
+
+  // Check for form inputs without labels
+  const inputMatches = content.match(/<Input[^>]*>/g) || [];
+  const labelMatches = content.match(/<Label[^>]*>/g) || [];
+  if (inputMatches.length > labelMatches.length) {
+    warnings.push("Some Input components may be missing associated Label components");
+  }
+
+  // Check localStorage key format
+  const storageKeyRegex = /const\s+STORAGE_KEY\s*=\s*["']([^"']+)["']/;
+  const keyMatch = content.match(storageKeyRegex);
+  if (keyMatch && !keyMatch[1].startsWith("work-construct-")) {
+    warnings.push(`localStorage key should start with "work-construct-" (found "${keyMatch[1]}")`);
+  }
+
+  return {
+    valid: errors.length === 0,
+    errors,
+    warnings,
+  };
+}
+
+function printResult(result, filePath) {
+  console.log("\n╔══════════════════════════════════════════════════════════════╗");
+  console.log("║           WORK CONSTRUCT VALIDATOR                           ║");
+  console.log("╚══════════════════════════════════════════════════════════════╝\n");
+  console.log(`File: ${filePath}\n`);
+
+  if (result.errors.length > 0) {
+    console.log("ERRORS:");
+    result.errors.forEach((e) => console.log(`  ✗ ${e}`));
+    console.log();
+  }
+
+  if (result.warnings.length > 0) {
+    console.log("WARNINGS:");
+    result.warnings.forEach((w) => console.log(`  ⚠ ${w}`));
+    console.log();
+  }
+
+  if (result.valid && result.warnings.length === 0) {
+    console.log("✓ Construct passes all validations!\n");
+  } else if (result.valid) {
+    console.log("✓ Construct passes required validations (with warnings)\n");
+  } else {
+    console.log("✗ Construct has validation errors that must be fixed.\n");
+  }
+
+  console.log("─".repeat(60));
+  console.log(`Status: ${result.valid ? "PASS" : "FAIL"}`);
+  console.log(`Errors: ${result.errors.length} | Warnings: ${result.warnings.length}`);
+  console.log("─".repeat(60) + "\n");
+}
+
+// CLI execution
+if (require.main === module) {
+  const args = process.argv.slice(2);
+
+  // Handle validate subcommand from install.js routing
+  if (args[0] === "validate") {
+    args.shift();
+  }
+
+  if (args.length === 0) {
+    console.log("Usage: npx @useworkapp/construct-skill validate <path-to-file>");
+    console.log("\nExample:");
+    console.log("  npx @useworkapp/construct-skill validate ./App.tsx");
+    process.exit(1);
+  }
+
+  const filePath = path.resolve(args[0]);
+  const result = validateConstruct(filePath);
+
+  printResult(result, filePath);
+
+  process.exit(result.valid ? 0 : 1);
+}
+
+module.exports = { validateConstruct };

package/claude-code/construct-builder/SKILL.md

@@ -0,0 +1,209 @@
+---
+name: construct-builder
+description: Build and validate Constructs for the Work streaming platform. Use when creating React micro-apps, reviewing component code for Work standards, or helping Runners build Constructs. Enforces shadcn/ui patterns, Tailwind CSS, localStorage persistence, and accessibility requirements.
+allowed-tools:
+  - Read
+  - Grep
+  - Glob
+  - Write
+  - Edit
+  - Bash(npm:*)
+---
+
+# Work Construct Builder
+
+Build production-ready Constructs for the Work app streaming platform.
+
+## What is a Construct?
+
+A Construct is a self-contained React micro-app that:
+- Solves a specific business need (tracker, calculator, dashboard, form, etc.)
+- Runs in Work's sandboxed iframe environment
+- Uses localStorage for data persistence
+- Follows strict UI/UX standards
+
+## Construct Requirements
+
+### 1. Single-File Architecture
+
+Constructs must be a single `App.tsx` file with:
+- Default export of main component
+- All sub-components defined in the same file
+- No external API calls (localStorage only)
+
+```tsx
+// Correct structure
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function App() {
+  // Component logic
+  return <div>...</div>;
+}
+```
+
+### 2. Required UI Components
+
+Use ONLY these shadcn/ui components (available in Work runtime):
+
+**Layout:**
+- `Card`, `CardContent`, `CardHeader`, `CardTitle`, `CardDescription`, `CardFooter`
+
+**Forms:**
+- `Button`, `Input`, `Textarea`, `Label`
+- `Select`, `SelectContent`, `SelectItem`, `SelectTrigger`, `SelectValue`
+- `Checkbox`, `RadioGroup`, `RadioGroupItem`
+- `Switch`
+
+**Feedback:**
+- `Badge`, `Alert`, `AlertDescription`, `AlertTitle`
+- `Progress`
+
+**Data Display:**
+- `Table`, `TableBody`, `TableCell`, `TableHead`, `TableHeader`, `TableRow`
+- `Tabs`, `TabsContent`, `TabsList`, `TabsTrigger`
+
+**Overlay:**
+- `Dialog`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogTitle`, `DialogTrigger`
+- `DropdownMenu`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuTrigger`
+
+### 3. Data Persistence Pattern
+
+Always use localStorage with a unique key prefix:
+
+```tsx
+const STORAGE_KEY = "work-construct-{construct-name}";
+
+// Load data
+const [data, setData] = useState(() => {
+  if (typeof window === "undefined") return initialState;
+  const saved = localStorage.getItem(STORAGE_KEY);
+  return saved ? JSON.parse(saved) : initialState;
+});
+
+// Save data (in useEffect)
+useEffect(() => {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+}, [data]);
+```
+
+### 4. Styling Requirements
+
+**DO:**
+- Use Tailwind CSS utility classes
+- Use responsive classes (`sm:`, `md:`, `lg:`)
+- Use CSS variables for theming (`text-foreground`, `bg-background`, `border-border`)
+- Add `dark:` variants for dark mode support
+
+**DON'T:**
+- Use inline styles
+- Use CSS modules or external stylesheets
+- Use fixed pixel widths (use responsive units)
+- Override shadcn component styles
+
+```tsx
+// Correct
+<div className="flex flex-col gap-4 p-4 sm:p-6">
+  <Card className="w-full">
+    <CardHeader>
+      <CardTitle className="text-lg sm:text-xl">Title</CardTitle>
+    </CardHeader>
+  </Card>
+</div>
+
+// Incorrect
+<div style={{ padding: "20px" }}>
+  <Card style={{ width: "500px" }}>
+```
+
+### 5. Accessibility Requirements
+
+**Mandatory:**
+- All interactive elements must be keyboard accessible
+- Use semantic HTML (`button`, `nav`, `main`, `section`, `article`)
+- Add `aria-label` to icon-only buttons
+- Ensure color contrast meets WCAG AA (4.5:1 for text)
+- Form inputs must have associated labels
+
+```tsx
+// Correct
+<Button variant="ghost" size="icon" aria-label="Delete item">
+  <Trash2 className="h-4 w-4" />
+</Button>
+
+<div className="space-y-2">
+  <Label htmlFor="email">Email</Label>
+  <Input id="email" type="email" />
+</div>
+
+// Incorrect
+<Button variant="ghost" size="icon">
+  <Trash2 className="h-4 w-4" />
+</Button>
+```
+
+### 6. Icon Usage
+
+Use Lucide React icons only:
+
+```tsx
+import { Plus, Trash2, Edit, Check, X, Search, Filter } from "lucide-react";
+
+<Plus className="h-4 w-4" />
+```
+
+### 7. State Management
+
+For complex state, use `useReducer`:
+
+```tsx
+type State = { items: Item[]; filter: string };
+type Action =
+  | { type: "ADD_ITEM"; payload: Item }
+  | { type: "DELETE_ITEM"; payload: string }
+  | { type: "SET_FILTER"; payload: string };
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case "ADD_ITEM":
+      return { ...state, items: [...state.items, action.payload] };
+    // ...
+  }
+}
+```
+
+## Validation Checklist
+
+Before submitting a Construct, verify:
+
+- [ ] Single `App.tsx` file with default export
+- [ ] Uses only approved shadcn/ui components
+- [ ] localStorage persistence with unique key
+- [ ] Responsive design (works on mobile)
+- [ ] Dark mode support
+- [ ] All buttons/inputs have proper labels
+- [ ] No external API calls
+- [ ] No TypeScript errors
+- [ ] Meaningful title and description
+
+## Example Construct
+
+See [example.tsx](example.tsx) for a complete working example.
+
+## Validation
+
+Run the validator to check your Construct:
+
+```bash
+npx @useworkapp/construct-skill validate path/to/App.tsx
+```
+
+## Commands
+
+When asked to build or review a Construct:
+
+1. **Build**: Generate complete `App.tsx` following all requirements
+2. **Review**: Check existing code against the validation checklist
+3. **Fix**: Identify and correct any violations
+4. **Optimize**: Suggest performance and UX improvements

package/claude-code/construct-builder/example.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+/**
+ * Example Construct: Todo List
+ * A complete, production-ready example following all Work platform standards.
+ */
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Plus, Trash2 } from "lucide-react";
+
+// Types
+interface Todo {
+  id: string;
+  text: string;
+  completed: boolean;
+  createdAt: number;
+}
+
+// Storage key with work-construct- prefix
+const STORAGE_KEY = "work-construct-todo-list";
+
+export default function App() {
+  // Initialize state from localStorage
+  const [todos, setTodos] = useState<Todo[]>(() => {
+    if (typeof window === "undefined") return [];
+    const saved = localStorage.getItem(STORAGE_KEY);
+    return saved ? JSON.parse(saved) : [];
+  });
+  const [newTodo, setNewTodo] = useState("");
+
+  // Persist to localStorage on change
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
+  }, [todos]);
+
+  // Handlers
+  const addTodo = () => {
+    if (!newTodo.trim()) return;
+    setTodos([
+      ...todos,
+      {
+        id: crypto.randomUUID(),
+        text: newTodo.trim(),
+        completed: false,
+        createdAt: Date.now(),
+      },
+    ]);
+    setNewTodo("");
+  };
+
+  const toggleTodo = (id: string) => {
+    setTodos(
+      todos.map((t) => (t.id === id ? { ...t, completed: !t.completed } : t))
+    );
+  };
+
+  const deleteTodo = (id: string) => {
+    setTodos(todos.filter((t) => t.id !== id));
+  };
+
+  // Computed values
+  const completedCount = todos.filter((t) => t.completed).length;
+  const totalCount = todos.length;
+
+  return (
+    <div className="min-h-screen bg-background p-4 sm:p-6">
+      <Card className="mx-auto max-w-md">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle>Todo List</CardTitle>
+            {totalCount > 0 && (
+              <Badge variant="secondary">
+                {completedCount}/{totalCount}
+              </Badge>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Add Todo Form */}
+          <div className="flex gap-2">
+            <Input
+              placeholder="Add a task..."
+              value={newTodo}
+              onChange={(e) => setNewTodo(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && addTodo()}
+              aria-label="New task input"
+            />
+            <Button onClick={addTodo} aria-label="Add task">
+              <Plus className="h-4 w-4" />
+            </Button>
+          </div>
+
+          {/* Todo List */}
+          <div className="space-y-2">
+            {todos.map((todo) => (
+              <div
+                key={todo.id}
+                className="flex items-center gap-3 rounded-lg border bg-card p-3 transition-colors hover:bg-accent/50"
+              >
+                <Checkbox
+                  id={todo.id}
+                  checked={todo.completed}
+                  onCheckedChange={() => toggleTodo(todo.id)}
+                  aria-label={`Mark "${todo.text}" as ${todo.completed ? "incomplete" : "complete"}`}
+                />
+                <Label
+                  htmlFor={todo.id}
+                  className={`flex-1 cursor-pointer ${
+                    todo.completed
+                      ? "text-muted-foreground line-through"
+                      : "text-foreground"
+                  }`}
+                >
+                  {todo.text}
+                </Label>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => deleteTodo(todo.id)}
+                  aria-label={`Delete "${todo.text}"`}
+                  className="h-8 w-8 text-muted-foreground hover:text-destructive"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+
+          {/* Empty State */}
+          {todos.length === 0 && (
+            <p className="py-8 text-center text-sm text-muted-foreground">
+              No tasks yet. Add one above!
+            </p>
+          )}
+
+          {/* Clear Completed */}
+          {completedCount > 0 && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="w-full"
+              onClick={() => setTodos(todos.filter((t) => !t.completed))}
+            >
+              Clear {completedCount} completed
+            </Button>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/opencode/construct.md

@@ -0,0 +1,319 @@
+---
+description: Build and validate Constructs for the Work streaming platform. Creates React micro-apps following Work standards with shadcn/ui, Tailwind CSS, and localStorage persistence.
+agent: build
+---
+
+# Work Construct Builder
+
+Build production-ready Constructs for the Work app streaming platform.
+
+$ARGUMENTS
+
+## What is a Construct?
+
+A Construct is a self-contained React micro-app that:
+- Solves a specific business need (tracker, calculator, dashboard, form, etc.)
+- Runs in Work's sandboxed iframe environment
+- Uses localStorage for data persistence
+- Follows strict UI/UX standards
+
+## Construct Requirements
+
+### 1. Single-File Architecture
+
+Constructs must be a single `App.tsx` file with:
+- Default export of main component
+- All sub-components defined in the same file
+- No external API calls (localStorage only)
+
+```tsx
+// Correct structure
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function App() {
+  // Component logic
+  return <div>...</div>;
+}
+```
+
+### 2. Required UI Components
+
+Use ONLY these shadcn/ui components (available in Work runtime):
+
+**Layout:**
+- `Card`, `CardContent`, `CardHeader`, `CardTitle`, `CardDescription`, `CardFooter`
+
+**Forms:**
+- `Button`, `Input`, `Textarea`, `Label`
+- `Select`, `SelectContent`, `SelectItem`, `SelectTrigger`, `SelectValue`
+- `Checkbox`, `RadioGroup`, `RadioGroupItem`
+- `Switch`
+
+**Feedback:**
+- `Badge`, `Alert`, `AlertDescription`, `AlertTitle`
+- `Progress`
+
+**Data Display:**
+- `Table`, `TableBody`, `TableCell`, `TableHead`, `TableHeader`, `TableRow`
+- `Tabs`, `TabsContent`, `TabsList`, `TabsTrigger`
+
+**Overlay:**
+- `Dialog`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogTitle`, `DialogTrigger`
+- `DropdownMenu`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuTrigger`
+
+### 3. Data Persistence Pattern
+
+Always use localStorage with a unique key prefix:
+
+```tsx
+const STORAGE_KEY = "work-construct-{construct-name}";
+
+// Load data
+const [data, setData] = useState(() => {
+  if (typeof window === "undefined") return initialState;
+  const saved = localStorage.getItem(STORAGE_KEY);
+  return saved ? JSON.parse(saved) : initialState;
+});
+
+// Save data (in useEffect)
+useEffect(() => {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+}, [data]);
+```
+
+### 4. Styling Requirements
+
+**DO:**
+- Use Tailwind CSS utility classes
+- Use responsive classes (`sm:`, `md:`, `lg:`)
+- Use CSS variables for theming (`text-foreground`, `bg-background`, `border-border`)
+- Add `dark:` variants for dark mode support
+
+**DON'T:**
+- Use inline styles
+- Use CSS modules or external stylesheets
+- Use fixed pixel widths (use responsive units)
+- Override shadcn component styles
+
+```tsx
+// Correct
+<div className="flex flex-col gap-4 p-4 sm:p-6">
+  <Card className="w-full">
+    <CardHeader>
+      <CardTitle className="text-lg sm:text-xl">Title</CardTitle>
+    </CardHeader>
+  </Card>
+</div>
+
+// Incorrect
+<div style={{ padding: "20px" }}>
+  <Card style={{ width: "500px" }}>
+```
+
+### 5. Accessibility Requirements
+
+**Mandatory:**
+- All interactive elements must be keyboard accessible
+- Use semantic HTML (`button`, `nav`, `main`, `section`, `article`)
+- Add `aria-label` to icon-only buttons
+- Ensure color contrast meets WCAG AA (4.5:1 for text)
+- Form inputs must have associated labels
+
+```tsx
+// Correct
+<Button variant="ghost" size="icon" aria-label="Delete item">
+  <Trash2 className="h-4 w-4" />
+</Button>
+
+<div className="space-y-2">
+  <Label htmlFor="email">Email</Label>
+  <Input id="email" type="email" />
+</div>
+```
+
+### 6. Icon Usage
+
+Use Lucide React icons only:
+
+```tsx
+import { Plus, Trash2, Edit, Check, X, Search, Filter } from "lucide-react";
+
+<Plus className="h-4 w-4" />
+```
+
+### 7. State Management
+
+For complex state, use `useReducer`:
+
+```tsx
+type State = { items: Item[]; filter: string };
+type Action =
+  | { type: "ADD_ITEM"; payload: Item }
+  | { type: "DELETE_ITEM"; payload: string }
+  | { type: "SET_FILTER"; payload: string };
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case "ADD_ITEM":
+      return { ...state, items: [...state.items, action.payload] };
+    // ...
+  }
+}
+```
+
+## Validation Checklist
+
+Before submitting a Construct, verify:
+
+- [ ] Single `App.tsx` file with default export
+- [ ] Uses only approved shadcn/ui components
+- [ ] localStorage persistence with unique key
+- [ ] Responsive design (works on mobile)
+- [ ] Dark mode support
+- [ ] All buttons/inputs have proper labels
+- [ ] No external API calls
+- [ ] No TypeScript errors
+- [ ] Meaningful title and description
+
+## Example Construct
+
+```tsx
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Plus, Trash2 } from "lucide-react";
+
+interface Todo {
+  id: string;
+  text: string;
+  completed: boolean;
+}
+
+const STORAGE_KEY = "work-construct-todo-list";
+
+export default function App() {
+  const [todos, setTodos] = useState<Todo[]>(() => {
+    if (typeof window === "undefined") return [];
+    const saved = localStorage.getItem(STORAGE_KEY);
+    return saved ? JSON.parse(saved) : [];
+  });
+  const [newTodo, setNewTodo] = useState("");
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
+  }, [todos]);
+
+  const addTodo = () => {
+    if (!newTodo.trim()) return;
+    setTodos([
+      ...todos,
+      { id: crypto.randomUUID(), text: newTodo.trim(), completed: false },
+    ]);
+    setNewTodo("");
+  };
+
+  const toggleTodo = (id: string) => {
+    setTodos(todos.map((t) =>
+      t.id === id ? { ...t, completed: !t.completed } : t
+    ));
+  };
+
+  const deleteTodo = (id: string) => {
+    setTodos(todos.filter((t) => t.id !== id));
+  };
+
+  const completedCount = todos.filter((t) => t.completed).length;
+
+  return (
+    <div className="min-h-screen bg-background p-4 sm:p-6">
+      <Card className="mx-auto max-w-md">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle>Todo List</CardTitle>
+            {todos.length > 0 && (
+              <Badge variant="secondary">
+                {completedCount}/{todos.length}
+              </Badge>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex gap-2">
+            <Input
+              placeholder="Add a task..."
+              value={newTodo}
+              onChange={(e) => setNewTodo(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && addTodo()}
+            />
+            <Button onClick={addTodo} aria-label="Add task">
+              <Plus className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <div className="space-y-2">
+            {todos.map((todo) => (
+              <div
+                key={todo.id}
+                className="flex items-center gap-3 rounded-lg border p-3"
+              >
+                <Checkbox
+                  id={todo.id}
+                  checked={todo.completed}
+                  onCheckedChange={() => toggleTodo(todo.id)}
+                />
+                <Label
+                  htmlFor={todo.id}
+                  className={`flex-1 ${
+                    todo.completed ? "line-through text-muted-foreground" : ""
+                  }`}
+                >
+                  {todo.text}
+                </Label>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => deleteTodo(todo.id)}
+                  aria-label="Delete task"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+
+          {todos.length === 0 && (
+            <p className="text-center text-sm text-muted-foreground">
+              No tasks yet. Add one above!
+            </p>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+```
+
+## Validation
+
+Run the validator to check your Construct:
+
+```bash
+npx @useworkapp/construct-skill validate path/to/App.tsx
+```
+
+## Commands
+
+When asked to build or review a Construct:
+
+1. **Build**: Generate complete `App.tsx` following all requirements
+2. **Review**: Check existing code against the validation checklist
+3. **Fix**: Identify and correct any violations
+4. **Optimize**: Suggest performance and UX improvements

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@useworkapp/construct-skill",
+  "version": "1.0.0",
+  "description": "AI coding assistant skill for building Work platform Constructs. Compatible with Claude Code and OpenCode.",
+  "keywords": [
+    "claude-code",
+    "opencode",
+    "ai-coding",
+    "skill",
+    "react",
+    "constructs",
+    "work-platform",
+    "shadcn-ui",
+    "tailwind"
+  ],
+  "author": "Work <hello@usework.app>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/usework/construct-skill"
+  },
+  "homepage": "https://usework.app/docs/runners/constructs",
+  "bin": {
+    "construct-skill": "./bin/install.js"
+  },
+  "files": [
+    "bin",
+    "claude-code",
+    "opencode",
+    "README.md"
+  ],
+  "scripts": {
+    "postinstall": "node bin/install.js --auto",
+    "validate": "node bin/validate.js"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}