npm - @hustle-together/api-dev-tools - Versions diffs - 3.6.5 → 3.10.0 - Mend

@hustle-together/api-dev-tools 3.6.5 → 3.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (72) hide show

package/README.md +5599 -258
package/bin/cli.js +395 -20
package/commands/README.md +459 -71
package/commands/hustle-api-continue.md +158 -0
package/commands/{api-create.md → hustle-api-create.md} +35 -15
package/commands/{api-env.md → hustle-api-env.md} +4 -4
package/commands/{api-interview.md → hustle-api-interview.md} +1 -1
package/commands/{api-research.md → hustle-api-research.md} +3 -3
package/commands/hustle-api-sessions.md +149 -0
package/commands/{api-status.md → hustle-api-status.md} +16 -16
package/commands/{api-verify.md → hustle-api-verify.md} +2 -2
package/commands/hustle-combine.md +763 -0
package/commands/hustle-ui-create-page.md +933 -0
package/commands/hustle-ui-create.md +825 -0
package/hooks/api-workflow-check.py +545 -21
package/hooks/cache-research.py +337 -0
package/hooks/check-api-routes.py +168 -0
package/hooks/check-playwright-setup.py +103 -0
package/hooks/check-storybook-setup.py +81 -0
package/hooks/detect-interruption.py +165 -0
package/hooks/enforce-a11y-audit.py +202 -0
package/hooks/enforce-brand-guide.py +241 -0
package/hooks/enforce-documentation.py +60 -8
package/hooks/enforce-freshness.py +184 -0
package/hooks/enforce-page-components.py +186 -0
package/hooks/enforce-page-data-schema.py +155 -0
package/hooks/enforce-questions-sourced.py +146 -0
package/hooks/enforce-schema-from-interview.py +248 -0
package/hooks/enforce-ui-disambiguation.py +108 -0
package/hooks/enforce-ui-interview.py +130 -0
package/hooks/generate-manifest-entry.py +1161 -0
package/hooks/session-logger.py +297 -0
package/hooks/session-startup.py +160 -15
package/hooks/track-scope-coverage.py +220 -0
package/hooks/track-tool-use.py +81 -1
package/hooks/update-api-showcase.py +149 -0
package/hooks/update-registry.py +352 -0
package/hooks/update-ui-showcase.py +212 -0
package/package.json +8 -3
package/templates/BRAND_GUIDE.md +299 -0
package/templates/CLAUDE-SECTION.md +56 -24
package/templates/SPEC.json +640 -0
package/templates/api-dev-state.json +217 -161
package/templates/api-showcase/_components/APICard.tsx +153 -0
package/templates/api-showcase/_components/APIModal.tsx +375 -0
package/templates/api-showcase/_components/APIShowcase.tsx +231 -0
package/templates/api-showcase/_components/APITester.tsx +522 -0
package/templates/api-showcase/page.tsx +41 -0
package/templates/component/Component.stories.tsx +172 -0
package/templates/component/Component.test.tsx +237 -0
package/templates/component/Component.tsx +86 -0
package/templates/component/Component.types.ts +55 -0
package/templates/component/index.ts +15 -0
package/templates/dev-tools/_components/DevToolsLanding.tsx +320 -0
package/templates/dev-tools/page.tsx +10 -0
package/templates/page/page.e2e.test.ts +218 -0
package/templates/page/page.tsx +42 -0
package/templates/performance-budgets.json +58 -0
package/templates/registry.json +13 -0
package/templates/settings.json +90 -0
package/templates/shared/HeroHeader.tsx +261 -0
package/templates/shared/index.ts +1 -0
package/templates/ui-showcase/_components/PreviewCard.tsx +315 -0
package/templates/ui-showcase/_components/PreviewModal.tsx +676 -0
package/templates/ui-showcase/_components/UIShowcase.tsx +262 -0
package/templates/ui-showcase/page.tsx +26 -0
package/demo/hustle-together/blog/gemini-vs-claude-widgets.html +0 -959
package/demo/hustle-together/blog/interview-driven-api-development.html +0 -1146
package/demo/hustle-together/blog/tdd-for-ai.html +0 -982
package/demo/hustle-together/index.html +0 -1312
package/demo/workflow-demo-v3.5-backup.html +0 -5008
package/demo/workflow-demo.html +0 -6202

package/demo/hustle-together/blog/interview-driven-api-development.html DELETED Viewed

@@ -1,1146 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Why We Built Interview-Driven API Development - Hustle Together Blog</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Fredoka:wght@600;700&display=swap" rel="stylesheet">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.14.1/gsap.min.js"></script>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    :root {
-      --bg: #0a0a0a;
-      --bg-secondary: #121212;
-      --bg-tertiary: #1a1a1a;
-      --bg-card: #1a1a1a;
-      --text: #e8e8e8;
-      --text-muted: #999;
-      --text-dim: #555;
-      --accent: #fff;
-      --accent-red: #BA0C2F;
-      --accent-red-glow: rgba(186, 12, 47, 0.4);
-      --border: #333;
-      --border-strong: #444;
-      --glow: rgba(255, 255, 255, 0.3);
-      --success: #4ade80;
-      --warning: #fbbf24;
-    }
-    [data-theme="light"] {
-      --bg: #f0f0f0;
-      --bg-secondary: #fff;
-      --bg-tertiary: #f5f5f5;
-      --bg-card: #fafafa;
-      --text: #1a1a1a;
-      --text-muted: #666;
-      --text-dim: #aaa;
-      --accent: #000;
-      --accent-red: #BA0C2F;
-      --accent-red-glow: rgba(186, 12, 47, 0.3);
-      --border: #ddd;
-      --border-strong: #ccc;
-      --glow: rgba(0, 0, 0, 0.15);
-    }
-    body {
-      background: var(--bg);
-      color: var(--text);
-      font-family: 'JetBrains Mono', 'Courier New', monospace;
-      line-height: 1.8;
-      overflow-x: hidden;
-    }
-    /* Navigation - boxy style */
-    nav {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      z-index: 1000;
-      padding: 15px 40px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background: var(--bg);
-      border-bottom: 2px solid var(--border);
-    }
-    .logo {
-      font-size: 1.1rem;
-      font-family: 'Fredoka', sans-serif;
-      font-weight: 700;
-      letter-spacing: 2px;
-      text-decoration: none;
-      color: var(--text);
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    .logo-icon {
-      width: 30px;
-      height: 30px;
-      border: 2px solid var(--accent-red);
-      background: var(--accent-red);
-      color: #fff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 0.75rem;
-      font-weight: bold;
-    }
-    .nav-links {
-      display: flex;
-      gap: 25px;
-      align-items: center;
-    }
-    .nav-links a {
-      color: var(--text-muted);
-      text-decoration: none;
-      font-size: 0.75rem;
-      letter-spacing: 1px;
-      text-transform: uppercase;
-      padding: 8px 12px;
-      border: 2px solid transparent;
-      transition: all 0.2s;
-    }
-    .nav-links a:hover {
-      color: var(--accent-red);
-      border-color: var(--accent-red);
-    }
-    .theme-toggle {
-      background: var(--bg-card);
-      border: 2px solid var(--border);
-      color: var(--text);
-      padding: 8px 14px;
-      cursor: pointer;
-      font-family: inherit;
-      font-size: 0.7rem;
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      transition: all 0.2s;
-    }
-    .theme-toggle:hover {
-      background: var(--accent-red);
-      color: #fff;
-      border-color: var(--accent-red);
-    }
-    /* Main Content */
-    main {
-      max-width: 900px;
-      margin: 0 auto;
-      padding: 120px 40px 80px;
-    }
-    /* Article Header */
-    .article-header {
-      margin-bottom: 50px;
-      opacity: 0;
-    }
-    .article-meta {
-      display: flex;
-      gap: 20px;
-      margin-bottom: 20px;
-      flex-wrap: wrap;
-    }
-    .article-tag {
-      font-size: 0.7rem;
-      letter-spacing: 2px;
-      color: var(--accent-red);
-      border: 1px dashed var(--accent-red);
-      padding: 5px 12px;
-      text-transform: uppercase;
-    }
-    .article-date {
-      font-size: 0.8rem;
-      color: var(--text-dim);
-    }
-    .article-title {
-      font-size: 2.8rem;
-      font-family: 'Fredoka', sans-serif;
-      font-weight: 700;
-      line-height: 1.2;
-      margin-bottom: 25px;
-    }
-    .article-excerpt {
-      font-size: 1.1rem;
-      color: var(--text-muted);
-      line-height: 1.8;
-      border-left: 3px solid var(--border);
-      padding-left: 20px;
-    }
-    /* Audio Player */
-    .audio-player {
-      background: var(--bg-secondary);
-      border: 1px dashed var(--border);
-      padding: 25px;
-      margin: 40px 0;
-      opacity: 0;
-    }
-    .audio-header {
-      display: flex;
-      align-items: center;
-      gap: 15px;
-      margin-bottom: 20px;
-    }
-    .audio-icon {
-      width: 50px;
-      height: 50px;
-      border: 2px solid var(--text);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.2rem;
-    }
-    .audio-info h4 {
-      font-size: 0.9rem;
-      font-weight: 600;
-      margin-bottom: 5px;
-    }
-    .audio-info p {
-      font-size: 0.75rem;
-      color: var(--text-muted);
-    }
-    .audio-controls {
-      display: flex;
-      align-items: center;
-      gap: 20px;
-    }
-    .play-btn {
-      width: 50px;
-      height: 50px;
-      border: 2px solid var(--text);
-      background: transparent;
-      color: var(--text);
-      cursor: pointer;
-      font-size: 1.2rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.3s;
-    }
-    .play-btn:hover {
-      background: var(--accent-red);
-      color: #fff;
-      border-color: var(--accent-red);
-    }
-    .progress-bar {
-      flex: 1;
-      height: 4px;
-      background: var(--border);
-      position: relative;
-      cursor: pointer;
-    }
-    .progress-fill {
-      height: 100%;
-      background: var(--accent-red);
-      width: 0%;
-      transition: width 0.1s;
-    }
-    .audio-time {
-      font-size: 0.8rem;
-      color: var(--text-muted);
-      min-width: 90px;
-      text-align: right;
-    }
-    /* Featured Video/Image */
-    .featured-media {
-      margin: 40px 0;
-      border: 1px dashed var(--border);
-      opacity: 0;
-    }
-    .media-container {
-      aspect-ratio: 16/9;
-      background: var(--bg-tertiary);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      overflow: hidden;
-    }
-    .media-placeholder {
-      text-align: center;
-      color: var(--text-dim);
-    }
-    .media-placeholder .icon {
-      font-size: 4rem;
-      margin-bottom: 15px;
-      display: block;
-    }
-    .media-caption {
-      padding: 15px;
-      font-size: 0.8rem;
-      color: var(--text-muted);
-      border-top: 1px dashed var(--border);
-    }
-    /* Article Content */
-    .article-content {
-      opacity: 0;
-    }
-    .article-content h2 {
-      font-size: 1.6rem;
-      font-family: 'Fredoka', sans-serif;
-      margin: 50px 0 20px;
-    }
-    .article-content h3 {
-      font-size: 1.2rem;
-      margin: 35px 0 15px;
-      color: var(--text);
-    }
-    .article-content p {
-      margin-bottom: 20px;
-      font-size: 1rem;
-    }
-    .article-content ul, .article-content ol {
-      margin: 20px 0 20px 30px;
-    }
-    .article-content li {
-      margin-bottom: 10px;
-    }
-    .article-content code {
-      background: var(--bg-secondary);
-      padding: 2px 8px;
-      border: 1px dashed var(--border);
-      font-size: 0.9em;
-    }
-    .article-content pre {
-      background: var(--bg-secondary);
-      border: 1px dashed var(--border);
-      padding: 20px;
-      margin: 25px 0;
-      overflow-x: auto;
-      font-size: 0.85rem;
-      line-height: 1.6;
-    }
-    .article-content blockquote {
-      border-left: 3px solid var(--text);
-      padding-left: 20px;
-      margin: 30px 0;
-      font-style: italic;
-      color: var(--text-muted);
-    }
-    /* Callout Box */
-    .callout {
-      background: var(--bg-secondary);
-      border: 1px dashed var(--border);
-      border-left: 3px solid var(--text);
-      padding: 25px;
-      margin: 30px 0;
-    }
-    .callout-title {
-      font-size: 0.8rem;
-      letter-spacing: 2px;
-      text-transform: uppercase;
-      margin-bottom: 10px;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    .callout-title::before {
-      content: '!';
-      width: 20px;
-      height: 20px;
-      border: 1px dashed var(--text);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 0.75rem;
-    }
-    /* AI Chat Widget */
-    .ai-chat {
-      background: var(--bg-secondary);
-      border: 1px dashed var(--border);
-      margin: 50px 0;
-      opacity: 0;
-    }
-    .ai-chat-header {
-      padding: 20px;
-      border-bottom: 1px dashed var(--border);
-      display: flex;
-      align-items: center;
-      gap: 15px;
-    }
-    .ai-chat-icon {
-      width: 40px;
-      height: 40px;
-      border: 2px solid var(--text);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1rem;
-    }
-    .ai-chat-title h4 {
-      font-size: 0.9rem;
-      font-weight: 600;
-    }
-    .ai-chat-title p {
-      font-size: 0.75rem;
-      color: var(--text-muted);
-    }
-    .ai-chat-body {
-      padding: 20px;
-      max-height: 400px;
-      overflow-y: auto;
-    }
-    .chat-message {
-      margin-bottom: 20px;
-      display: flex;
-      gap: 12px;
-    }
-    .chat-message.user {
-      flex-direction: row-reverse;
-    }
-    .chat-avatar {
-      width: 30px;
-      height: 30px;
-      border: 1px dashed var(--border);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 0.7rem;
-      flex-shrink: 0;
-    }
-    .chat-bubble {
-      background: var(--bg-tertiary);
-      border: 1px dashed var(--border);
-      padding: 12px 16px;
-      max-width: 80%;
-      font-size: 0.9rem;
-      line-height: 1.6;
-    }
-    .chat-message.user .chat-bubble {
-      background: var(--bg);
-    }
-    .quick-questions {
-      padding: 0 20px 20px;
-    }
-    .quick-questions-label {
-      font-size: 0.7rem;
-      letter-spacing: 2px;
-      color: var(--text-muted);
-      margin-bottom: 12px;
-      text-transform: uppercase;
-    }
-    .quick-btns {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-    }
-    .quick-btn {
-      background: transparent;
-      border: 1px dashed var(--border);
-      color: var(--text);
-      padding: 8px 16px;
-      font-family: inherit;
-      font-size: 0.8rem;
-      cursor: pointer;
-      transition: all 0.3s;
-    }
-    .quick-btn:hover {
-      background: var(--accent-red);
-      color: #fff;
-      border-color: var(--accent-red);
-    }
-    .ai-chat-input {
-      display: flex;
-      gap: 10px;
-      padding: 15px 20px;
-      border-top: 1px dashed var(--border);
-    }
-    .ai-chat-input input {
-      flex: 1;
-      background: transparent;
-      border: 1px dashed var(--border);
-      color: var(--text);
-      padding: 12px 15px;
-      font-family: inherit;
-      font-size: 0.9rem;
-    }
-    .ai-chat-input input::placeholder {
-      color: var(--text-dim);
-    }
-    .ai-chat-input input:focus {
-      outline: none;
-      border-color: var(--text);
-    }
-    .ai-chat-input button {
-      background: var(--accent-red);
-      color: #fff;
-      border: none;
-      padding: 12px 20px;
-      font-family: inherit;
-      font-size: 0.8rem;
-      cursor: pointer;
-      letter-spacing: 1px;
-      transition: all 0.3s;
-    }
-    .ai-chat-input button:hover {
-      opacity: 0.8;
-    }
-    /* Feedback Section */
-    .feedback-section {
-      background: var(--bg-secondary);
-      border: 1px dashed var(--border);
-      padding: 30px;
-      margin: 50px 0;
-      text-align: center;
-      opacity: 0;
-    }
-    .feedback-title {
-      font-size: 1.1rem;
-      margin-bottom: 8px;
-    }
-    .feedback-subtitle {
-      font-size: 0.85rem;
-      color: var(--text-muted);
-      margin-bottom: 25px;
-    }
-    .feedback-buttons {
-      display: flex;
-      gap: 15px;
-      justify-content: center;
-      flex-wrap: wrap;
-    }
-    .feedback-btn {
-      background: transparent;
-      border: 2px solid var(--border);
-      color: var(--text);
-      padding: 15px 30px;
-      font-family: inherit;
-      font-size: 0.9rem;
-      cursor: pointer;
-      transition: all 0.3s;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    .feedback-btn:hover {
-      border-color: var(--accent-red);
-      box-shadow: 0 0 20px var(--accent-red-glow);
-    }
-    .feedback-btn.active {
-      background: var(--accent-red);
-      color: #fff;
-      border-color: var(--accent-red);
-    }
-    .feedback-btn .icon {
-      font-size: 1.2rem;
-    }
-    .feedback-count {
-      font-size: 0.75rem;
-      color: var(--text-muted);
-      margin-top: 20px;
-    }
-    /* Author Section */
-    .author-section {
-      display: flex;
-      gap: 25px;
-      align-items: center;
-      padding: 30px;
-      background: var(--bg-secondary);
-      border: 1px dashed var(--border);
-      margin: 50px 0;
-      opacity: 0;
-    }
-    .author-avatar {
-      width: 80px;
-      height: 80px;
-      border: 2px solid var(--text);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.5rem;
-      flex-shrink: 0;
-    }
-    .author-info h4 {
-      font-size: 1.1rem;
-      margin-bottom: 8px;
-    }
-    .author-info p {
-      font-size: 0.9rem;
-      color: var(--text-muted);
-      line-height: 1.6;
-    }
-    /* Related Posts */
-    .related-posts {
-      margin: 60px 0;
-    }
-    .related-posts h3 {
-      font-size: 1.2rem;
-      font-family: 'Fredoka', sans-serif;
-      margin-bottom: 25px;
-      letter-spacing: 2px;
-    }
-    .related-grid {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 25px;
-    }
-    .related-card {
-      border: 1px dashed var(--border);
-      padding: 25px;
-      text-decoration: none;
-      color: var(--text);
-      transition: all 0.3s;
-      opacity: 0;
-    }
-    .related-card:hover {
-      border-color: var(--accent-red);
-      box-shadow: 0 0 30px var(--accent-red-glow);
-    }
-    .related-card-tag {
-      font-size: 0.65rem;
-      letter-spacing: 2px;
-      color: var(--accent-red);
-      text-transform: uppercase;
-      margin-bottom: 12px;
-    }
-    .related-card-title {
-      font-size: 1rem;
-      font-family: 'Fredoka', sans-serif;
-      font-weight: 600;
-      line-height: 1.4;
-    }
-    /* Footer */
-    footer {
-      border-top: 1px dashed var(--border);
-      padding: 40px;
-      text-align: center;
-      margin-top: 60px;
-    }
-    .footer-logo {
-      font-size: 1.2rem;
-      font-family: 'Fredoka', sans-serif;
-      font-weight: 700;
-      letter-spacing: 2px;
-      margin-bottom: 20px;
-    }
-    .footer-links {
-      display: flex;
-      gap: 25px;
-      justify-content: center;
-      margin-bottom: 20px;
-    }
-    .footer-links a {
-      color: var(--text-muted);
-      text-decoration: none;
-      font-size: 0.8rem;
-      transition: color 0.3s;
-    }
-    .footer-links a:hover {
-      color: var(--accent-red);
-    }
-    .footer-copy {
-      color: var(--text-dim);
-      font-size: 0.75rem;
-    }
-    /* Responsive */
-    @media (max-width: 768px) {
-      main {
-        padding: 100px 20px 60px;
-      }
-      .article-title {
-        font-size: 2rem;
-      }
-      .audio-controls {
-        flex-wrap: wrap;
-      }
-      .related-grid {
-        grid-template-columns: 1fr;
-      }
-      .author-section {
-        flex-direction: column;
-        text-align: center;
-      }
-      nav {
-        padding: 15px 20px;
-      }
-      .nav-links {
-        display: none;
-      }
-    }
-  </style>
-</head>
-<body>
-  <!-- Navigation -->
-  <nav>
-    <a href="../index.html" class="logo">
-      <div class="logo-icon">HT</div>
-      HUSTLE TOGETHER
-    </a>
-    <div class="nav-links">
-      <a href="../index.html">HOME</a>
-      <a href="../index.html#tools">TOOLS</a>
-      <a href="../index.html#blog">BLOG</a>
-      <button class="theme-toggle" id="themeToggle">[ LIGHT ]</button>
-    </div>
-  </nav>
-  <main>
-    <!-- Article Header -->
-    <header class="article-header">
-      <div class="article-meta">
-        <span class="article-tag">DEV TOOLS</span>
-        <span class="article-date">December 7, 2025</span>
-      </div>
-      <h1 class="article-title">Why We Built Interview-Driven API Development</h1>
-      <p class="article-excerpt">
-        Claude Code is incredible, but it has a problem: it skips steps. It hallucinates APIs.
-        It marks things "done" without checking. We fixed that with Python hooks that enforce
-        a 10-phase workflow. Here's why research-first beats code-first every time.
-      </p>
-    </header>
-    <!-- Audio Player -->
-    <div class="audio-player">
-      <div class="audio-header">
-        <div class="audio-icon">[>]</div>
-        <div class="audio-info">
-          <h4>Listen to this article</h4>
-          <p>AI-generated audio narration - 8 min read</p>
-        </div>
-      </div>
-      <div class="audio-controls">
-        <button class="play-btn" id="playBtn">[>]</button>
-        <div class="progress-bar">
-          <div class="progress-fill" id="progressFill"></div>
-        </div>
-        <span class="audio-time">0:00 / 8:24</span>
-      </div>
-    </div>
-    <!-- Featured Media -->
-    <div class="featured-media">
-      <div class="media-container">
-        <div class="media-placeholder">
-          <span class="icon">[*]</span>
-          <p>WORKFLOW VISUALIZATION</p>
-        </div>
-      </div>
-      <p class="media-caption">The 10-phase interview-driven workflow enforced by Python hooks</p>
-    </div>
-    <!-- Article Content -->
-    <article class="article-content">
-      <h2>The Problem With AI Code Assistants</h2>
-      <p>We love Claude Code. It's genuinely incredible at understanding context, writing clean code, and solving complex problems. But there's a pattern we kept seeing over and over:</p>
-      <ol>
-        <li><strong>Ask Claude to implement an API endpoint</strong></li>
-        <li><strong>Claude writes the code immediately</strong> (without researching the actual API)</li>
-        <li><strong>The code looks perfect</strong> but uses hallucinated parameters</li>
-        <li><strong>Tests fail</strong> (or worse, Claude skips them)</li>
-        <li><strong>"Done!"</strong> says Claude, marking the task complete</li>
-      </ol>
-      <p>This isn't Claude's fault - it's how most AI assistants work. They're trained to be helpful, which means they want to give you answers fast. But with API development, fast answers are often wrong answers.</p>
-      <div class="callout">
-        <div class="callout-title">The Core Insight</div>
-        <p>The best developers don't start coding - they start researching. They read the docs. They look at examples. They understand the problem before writing a single line of code. We needed to teach Claude this workflow.</p>
-      </div>
-      <h2>Five Gaps We Had to Close</h2>
-      <h3>Gap 1: AI Paraphrasing Instead of Quoting</h3>
-      <p>When Claude researches something, it tends to paraphrase what it found rather than using exact terms. This matters because API parameters are case-sensitive, specific strings that must match exactly.</p>
-      <pre>// What Claude might say:
-"The endpoint supports standard authentication"
-// What the docs actually say:
-"Use X-Api-Key header with Bearer token"</pre>
-      <h3>Gap 2: Claiming Updates Without Verification</h3>
-      <p>Claude would say "I've updated the file" without showing a git diff or verifying the change actually happened. Our hooks now require proof.</p>
-      <h3>Gap 3: Skipped Tests Accepted As-Is</h3>
-      <p>When tests fail, Claude often marks them as "skipped" and moves on. But skipped tests aren't passing tests - they're potential bugs hiding in your codebase.</p>
-      <h3>Gap 4: Tasks Marked Complete Without Verification</h3>
-      <p>The workflow wasn't actually done just because Claude said it was. We needed checkpoints that verify each phase is truly complete.</p>
-      <h3>Gap 5: Environment Variable Mismatches</h3>
-      <p>Test environments and production environments often use different API keys and configurations. Claude would test with one and deploy with another.</p>
-      <h2>The Solution: Python Hooks</h2>
-      <p>Claude Code has a hook system that lets you intercept tool calls. We built three Python hooks that enforce our workflow:</p>
-      <pre>hooks/
-  enforce-interview.py   # Blocks writing until interview is complete
-  track-tool-use.py      # Logs all research activity
-  api-workflow-check.py  # Prevents "Stop" until phases are done</pre>
-      <p>These hooks create a 10-phase workflow that Claude must follow:</p>
-      <ol>
-        <li><strong>Scope</strong> - Define what we're building</li>
-        <li><strong>Research Initial</strong> - Find official documentation</li>
-        <li><strong>Interview</strong> - Ask the user questions</li>
-        <li><strong>Research Deep</strong> - Dive into edge cases</li>
-        <li><strong>Schema Creation</strong> - Define TypeScript interfaces</li>
-        <li><strong>Environment Check</strong> - Verify API keys exist</li>
-        <li><strong>TDD Red</strong> - Write failing tests first</li>
-        <li><strong>TDD Green</strong> - Make tests pass</li>
-        <li><strong>TDD Refactor</strong> - Clean up the code</li>
-        <li><strong>Documentation</strong> - Update all the docs</li>
-      </ol>
-      <h2>Why Interview-Driven?</h2>
-      <p>The interview phase is the key innovation. Instead of Claude making assumptions, it's forced to ask you questions with multiple-choice options:</p>
-      <pre>"Which AI provider should this endpoint support?"
-1. OpenAI (GPT-4o)
-2. Anthropic (Claude)
-3. Google (Gemini)
-4. All of the above
-5. Type something else...</pre>
-      <p>The options come from the research phase, so they're real choices - not hallucinated possibilities. And your answers are tracked in a state file, so Claude can reference them during implementation.</p>
-      <div class="callout">
-        <div class="callout-title">Key Benefit</div>
-        <p>When you answer "Anthropic", Claude won't accidentally implement OpenAI instead. The decision is recorded and enforced throughout the workflow.</p>
-      </div>
-      <h2>Getting Started</h2>
-      <pre>npx @hustle-together/api-dev-tools</pre>
-      <p>That's it. The installer sets up everything: commands, hooks, state file, and MCP server recommendations. Start your next API endpoint with <code>/api-create endpoint-name</code> and experience the difference.</p>
-    </article>
-    <!-- AI Chat Widget -->
-    <div class="ai-chat">
-      <div class="ai-chat-header">
-        <div class="ai-chat-icon">[?]</div>
-        <div class="ai-chat-title">
-          <h4>Quick Answers</h4>
-          <p>Ask questions about this article</p>
-        </div>
-      </div>
-      <div class="ai-chat-body">
-        <div class="chat-message">
-          <div class="chat-avatar">AI</div>
-          <div class="chat-bubble">
-            Hi! I can answer questions about interview-driven API development, the hook system, or how to get started. What would you like to know?
-          </div>
-        </div>
-      </div>
-      <div class="quick-questions">
-        <div class="quick-questions-label">Quick Questions</div>
-        <div class="quick-btns">
-          <button class="quick-btn" data-question="How do the Python hooks work?">How do hooks work?</button>
-          <button class="quick-btn" data-question="What's the difference between research phases?">Research phases?</button>
-          <button class="quick-btn" data-question="Can I customize the workflow?">Customize workflow?</button>
-        </div>
-      </div>
-      <div class="ai-chat-input">
-        <input type="text" placeholder="Ask a question about the article..." id="chatInput">
-        <button id="chatSend">SEND</button>
-      </div>
-    </div>
-    <!-- Feedback Section -->
-    <div class="feedback-section">
-      <h3 class="feedback-title">Did you find this article helpful?</h3>
-      <p class="feedback-subtitle">Your feedback helps us create better content</p>
-      <div class="feedback-buttons">
-        <button class="feedback-btn" data-reaction="very-nice">
-          <span class="icon">[+]</span>
-          Very Nice
-        </button>
-        <button class="feedback-btn" data-reaction="helpful">
-          <span class="icon">[*]</span>
-          Helpful
-        </button>
-        <button class="feedback-btn" data-reaction="needs-more">
-          <span class="icon">[?]</span>
-          Needs More
-        </button>
-      </div>
-      <p class="feedback-count">42 people found this helpful</p>
-    </div>
-    <!-- Author Section -->
-    <div class="author-section">
-      <div class="author-avatar">[HT]</div>
-      <div class="author-info">
-        <h4>Hustle Together Team</h4>
-        <p>We're a small team obsessed with building tools that actually work. We experiment, we iterate, and we share what we learn. No corporate BS - just useful stuff for developers.</p>
-      </div>
-    </div>
-    <!-- Related Posts -->
-    <div class="related-posts">
-      <h3>RELATED POSTS</h3>
-      <div class="related-grid">
-        <a href="gemini-vs-claude-widgets.html" class="related-card">
-          <div class="related-card-tag">AI</div>
-          <h4 class="related-card-title">Gemini Pro 2.5 vs Claude for Widget Generation</h4>
-        </a>
-        <a href="tdd-for-ai.html" class="related-card">
-          <div class="related-card-tag">WORKFLOW</div>
-          <h4 class="related-card-title">TDD is Dead, Long Live TDD</h4>
-        </a>
-      </div>
-    </div>
-  </main>
-  <!-- Footer -->
-  <footer>
-    <div class="footer-logo">HUSTLE TOGETHER</div>
-    <div class="footer-links">
-      <a href="https://github.com/hustle-together" target="_blank">GITHUB</a>
-      <a href="https://www.npmjs.com/org/hustle-together" target="_blank">NPM</a>
-      <a href="mailto:hello@hustletogether.dev">CONTACT</a>
-    </div>
-    <div class="footer-copy">
-      2025 Hustle Together. Experiment. Build. Share.
-    </div>
-  </footer>
-  <script>
-    // Theme Toggle
-    const themeToggle = document.getElementById('themeToggle');
-    let isDark = true;
-    themeToggle.addEventListener('click', () => {
-      isDark = !isDark;
-      document.documentElement.setAttribute('data-theme', isDark ? '' : 'light');
-      themeToggle.textContent = isDark ? '[ LIGHT ]' : '[ DARK ]';
-    });
-    // GSAP Animations
-    gsap.to('.article-header', { opacity: 1, duration: 0.8, delay: 0.3 });
-    gsap.to('.audio-player', { opacity: 1, duration: 0.6, delay: 0.5 });
-    gsap.to('.featured-media', { opacity: 1, duration: 0.6, delay: 0.7 });
-    gsap.to('.article-content', { opacity: 1, duration: 0.8, delay: 0.9 });
-    gsap.to('.ai-chat', { opacity: 1, duration: 0.6, delay: 1.1 });
-    gsap.to('.feedback-section', { opacity: 1, duration: 0.6, delay: 1.3 });
-    gsap.to('.author-section', { opacity: 1, duration: 0.6, delay: 1.5 });
-    gsap.to('.related-card', { opacity: 1, duration: 0.5, stagger: 0.15, delay: 1.7 });
-    // Audio Player Simulation
-    const playBtn = document.getElementById('playBtn');
-    const progressFill = document.getElementById('progressFill');
-    let isPlaying = false;
-    let progress = 0;
-    let playInterval;
-    playBtn.addEventListener('click', () => {
-      isPlaying = !isPlaying;
-      playBtn.textContent = isPlaying ? '[||]' : '[>]';
-      if (isPlaying) {
-        playInterval = setInterval(() => {
-          progress += 0.2;
-          if (progress >= 100) {
-            progress = 0;
-            isPlaying = false;
-            playBtn.textContent = '[>]';
-            clearInterval(playInterval);
-          }
-          progressFill.style.width = progress + '%';
-        }, 100);
-      } else {
-        clearInterval(playInterval);
-      }
-    });
-    // Quick Questions
-    const quickBtns = document.querySelectorAll('.quick-btn');
-    const chatBody = document.querySelector('.ai-chat-body');
-    const answers = {
-      "How do the Python hooks work?": "The Python hooks intercept Claude's tool calls. When Claude tries to write a file, enforce-interview.py checks if the interview is complete. When Claude uses research tools, track-tool-use.py logs the activity. When Claude tries to stop, api-workflow-check.py verifies all phases are done.",
-      "What's the difference between research phases?": "Research Initial happens BEFORE the interview - it discovers what's possible. Research Deep happens AFTER the interview - it dives into the specific choices the user made. Both use Context7 and WebSearch to get real documentation.",
-      "Can I customize the workflow?": "Yes! The hooks read from api-dev-state.json which you can modify. You can also edit the hook files directly to change requirements, add phases, or adjust the minimum question count."
-    };
-    quickBtns.forEach(btn => {
-      btn.addEventListener('click', () => {
-        const question = btn.dataset.question;
-        // Add user message
-        chatBody.innerHTML += `
-          <div class="chat-message user">
-            <div class="chat-avatar">U</div>
-            <div class="chat-bubble">${question}</div>
-          </div>
-        `;
-        // Add AI response after delay
-        setTimeout(() => {
-          chatBody.innerHTML += `
-            <div class="chat-message">
-              <div class="chat-avatar">AI</div>
-              <div class="chat-bubble">${answers[question] || "I don't have a specific answer for that, but feel free to ask something else!"}</div>
-            </div>
-          `;
-          chatBody.scrollTop = chatBody.scrollHeight;
-        }, 500);
-        chatBody.scrollTop = chatBody.scrollHeight;
-      });
-    });
-    // Chat Input
-    const chatInput = document.getElementById('chatInput');
-    const chatSend = document.getElementById('chatSend');
-    chatSend.addEventListener('click', sendMessage);
-    chatInput.addEventListener('keypress', (e) => {
-      if (e.key === 'Enter') sendMessage();
-    });
-    function sendMessage() {
-      const message = chatInput.value.trim();
-      if (!message) return;
-      chatBody.innerHTML += `
-        <div class="chat-message user">
-          <div class="chat-avatar">U</div>
-          <div class="chat-bubble">${message}</div>
-        </div>
-      `;
-      chatInput.value = '';
-      setTimeout(() => {
-        chatBody.innerHTML += `
-          <div class="chat-message">
-            <div class="chat-avatar">AI</div>
-            <div class="chat-bubble">Great question! This is a demo chat - in the full version, this would connect to an AI model to answer your questions about the article in detail.</div>
-          </div>
-        `;
-        chatBody.scrollTop = chatBody.scrollHeight;
-      }, 500);
-      chatBody.scrollTop = chatBody.scrollHeight;
-    }
-    // Feedback Buttons
-    const feedbackBtns = document.querySelectorAll('.feedback-btn');
-    const feedbackCount = document.querySelector('.feedback-count');
-    let currentCount = 42;
-    feedbackBtns.forEach(btn => {
-      btn.addEventListener('click', () => {
-        feedbackBtns.forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        currentCount++;
-        feedbackCount.textContent = `${currentCount} people found this helpful`;
-        // Animation
-        gsap.to(btn, { scale: 1.1, duration: 0.1, yoyo: true, repeat: 1 });
-      });
-    });
-  </script>
-</body>
-</html>