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/index.html DELETED Viewed

@@ -1,1312 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Hustle Together - Tools for Builders</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=Righteous&family=Bungee&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>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.14.1/ScrollTrigger.min.js"></script>
-  <style>
-    /* ============================================
-       HUSTLE TOGETHER - 90s BOXY AESTHETIC
-       Light/Dark Mode Support
-       ============================================ */
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    :root {
-      /* Dark Mode (default) - Bulls/Nike colorway: Red, White, Black */
-      --bg: #0a0a0a;
-      --bg-secondary: #121212;
-      --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);
-      --pattern-opacity: 0.03;
-    }
-    [data-theme="light"] {
-      --bg: #f0f0f0;
-      --bg-secondary: #fff;
-      --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);
-      --pattern-opacity: 0.05;
-    }
-    body {
-      background: var(--bg);
-      color: var(--text);
-      font-family: 'JetBrains Mono', 'Courier New', monospace;
-      line-height: 1.7;
-      overflow-x: hidden;
-      transition: background 0.3s, color 0.3s;
-    }
-    /* Animated Background Pattern */
-    .bg-pattern {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 0;
-      opacity: var(--pattern-opacity);
-    }
-    .bg-pattern svg {
-      width: 100%;
-      height: 100%;
-    }
-    .grid-line {
-      stroke: var(--text);
-      stroke-width: 0.5;
-      fill: none;
-    }
-    /* Navigation - clean 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', 'Bungee', sans-serif;
-      font-weight: 700;
-      letter-spacing: 2px;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    .logo-icon {
-      width: 32px;
-      height: 32px;
-      border: 2px solid var(--accent-red);
-      background: var(--accent-red);
-      color: var(--bg);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 0.85rem;
-      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.8rem;
-      letter-spacing: 1px;
-      text-transform: uppercase;
-      transition: all 0.2s;
-      padding: 8px 12px;
-      border: 2px solid transparent;
-    }
-    .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.75rem;
-      transition: all 0.2s;
-      text-transform: uppercase;
-      letter-spacing: 1px;
-    }
-    .theme-toggle:hover {
-      background: var(--accent-red);
-      color: #fff;
-      border-color: var(--accent-red);
-    }
-    /* Main Content */
-    main {
-      position: relative;
-      z-index: 1;
-    }
-    section {
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      padding: 120px 40px 80px;
-      position: relative;
-    }
-    /* Hero Section */
-    #hero {
-      text-align: center;
-    }
-    .hero-content {
-      max-width: 800px;
-    }
-    .hero-badge {
-      display: inline-block;
-      border: 2px solid var(--border);
-      background: var(--bg-card);
-      padding: 10px 25px;
-      font-size: 0.7rem;
-      letter-spacing: 3px;
-      color: var(--text-muted);
-      margin-bottom: 40px;
-      opacity: 0;
-      text-transform: uppercase;
-    }
-    h1 {
-      font-size: 6.5rem;
-      font-family: 'Fredoka', 'Bungee', sans-serif;
-      font-weight: 700;
-      letter-spacing: 4px;
-      margin-bottom: 10px;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      gap: 0 20px;
-      line-height: 1;
-    }
-    h1 .word {
-      display: flex;
-    }
-    h1 .letter {
-      display: inline-block;
-      opacity: 0;
-      transform: translateY(50px) rotateX(-90deg);
-    }
-    h1 .highlight {
-      font-weight: 700;
-      color: var(--accent);
-    }
-    .hero-tagline {
-      font-size: 1.3rem;
-      color: var(--text-muted);
-      margin-top: 30px;
-      letter-spacing: 2px;
-      opacity: 0;
-    }
-    .hero-desc {
-      margin-top: 40px;
-      font-size: 1rem;
-      color: var(--text-muted);
-      line-height: 2;
-      max-width: 600px;
-      margin-left: auto;
-      margin-right: auto;
-      opacity: 0;
-    }
-    .hero-cta {
-      margin-top: 50px;
-      display: flex;
-      gap: 20px;
-      justify-content: center;
-      opacity: 0;
-    }
-    .btn {
-      display: inline-block;
-      padding: 15px 40px;
-      border: 2px solid var(--text);
-      color: var(--text);
-      text-decoration: none;
-      font-size: 0.85rem;
-      letter-spacing: 2px;
-      text-transform: uppercase;
-      transition: all 0.2s;
-      background: transparent;
-      cursor: pointer;
-      font-family: inherit;
-    }
-    .btn:hover {
-      background: var(--text);
-      color: var(--bg);
-    }
-    .btn-primary {
-      background: var(--accent-red);
-      color: #fff;
-      border-color: var(--accent-red);
-    }
-    .btn-primary:hover {
-      background: #fff;
-      color: var(--accent-red);
-      border-color: var(--accent-red);
-    }
-    /* Section Headers */
-    .section-header {
-      text-align: center;
-      margin-bottom: 60px;
-    }
-    .section-label {
-      font-size: 0.75rem;
-      letter-spacing: 4px;
-      color: var(--text-muted);
-      margin-bottom: 15px;
-    }
-    h2 {
-      font-size: 2.5rem;
-      font-family: 'Fredoka', 'Bungee', sans-serif;
-      font-weight: 600;
-      letter-spacing: 3px;
-    }
-    h2 .highlight {
-      font-weight: 700;
-      color: var(--accent);
-    }
-    /* Philosophy Section - boxy cards */
-    #philosophy {
-      background: var(--bg-secondary);
-    }
-    .philosophy-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 25px;
-      max-width: 1000px;
-    }
-    .philosophy-card {
-      border: 2px solid var(--border);
-      background: var(--bg-card);
-      padding: 40px 30px;
-      text-align: center;
-      transition: all 0.2s;
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    .philosophy-card:hover {
-      border-color: var(--accent-red);
-      transform: translateY(-3px);
-    }
-    .philosophy-icon {
-      width: 55px;
-      height: 55px;
-      border: 2px solid var(--accent-red);
-      background: var(--accent-red);
-      color: #fff;
-      margin: 0 auto 25px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.3rem;
-    }
-    .philosophy-title {
-      font-size: 1rem;
-      letter-spacing: 2px;
-      margin-bottom: 15px;
-      text-transform: uppercase;
-    }
-    .philosophy-desc {
-      font-size: 0.85rem;
-      color: var(--text-muted);
-      line-height: 1.8;
-    }
-    /* Tools Section - boxy cards */
-    .tools-grid {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 30px;
-      max-width: 1000px;
-      width: 100%;
-    }
-    .tool-card {
-      border: 2px solid var(--border);
-      background: var(--bg-card);
-      padding: 40px;
-      transition: all 0.2s;
-      opacity: 0;
-      transform: translateY(20px);
-      position: relative;
-      overflow: hidden;
-    }
-    .tool-card::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 4px;
-      height: 100%;
-      background: var(--accent-red);
-      transition: width 0.2s;
-    }
-    .tool-card:hover {
-      border-color: var(--accent-red);
-    }
-    .tool-card:hover::before {
-      width: 100%;
-      opacity: 0.1;
-    }
-    .tool-badge {
-      display: inline-block;
-      font-size: 0.65rem;
-      letter-spacing: 2px;
-      color: var(--accent-red);
-      border: 2px solid var(--accent-red);
-      padding: 6px 14px;
-      margin-bottom: 20px;
-      text-transform: uppercase;
-      font-weight: bold;
-    }
-    .tool-name {
-      font-size: 1.4rem;
-      letter-spacing: 2px;
-      margin-bottom: 15px;
-      display: flex;
-      align-items: center;
-      gap: 15px;
-    }
-    .tool-name .icon {
-      width: 40px;
-      height: 40px;
-      border: 2px solid var(--accent-red);
-      background: var(--accent-red);
-      color: #fff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1rem;
-    }
-    .tool-desc {
-      color: var(--text-muted);
-      font-size: 0.9rem;
-      line-height: 1.8;
-      margin-bottom: 25px;
-    }
-    .tool-features {
-      list-style: none;
-      margin-bottom: 30px;
-    }
-    .tool-features li {
-      font-size: 0.8rem;
-      color: var(--text-muted);
-      padding: 10px 0;
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    .tool-features li::before {
-      content: '+';
-      color: var(--accent-red);
-      font-weight: bold;
-    }
-    .tool-links {
-      display: flex;
-      gap: 12px;
-    }
-    .tool-link {
-      font-size: 0.75rem;
-      color: var(--text);
-      text-decoration: none;
-      border: 2px solid var(--border);
-      padding: 10px 20px;
-      transition: all 0.2s;
-      text-transform: uppercase;
-      letter-spacing: 1px;
-    }
-    .tool-link:hover {
-      background: var(--accent-red);
-      color: #fff;
-      border-color: var(--accent-red);
-    }
-    /* Shop Section - boxy style */
-    #shop {
-      background: var(--bg-secondary);
-    }
-    .shop-preview {
-      max-width: 800px;
-      text-align: center;
-    }
-    .coming-soon-box {
-      border: 2px solid var(--border);
-      background: var(--bg-card);
-      padding: 80px 60px;
-      margin-top: 40px;
-      position: relative;
-      opacity: 0;
-    }
-    .coming-soon-box::before {
-      content: 'COMING SOON';
-      position: absolute;
-      top: -12px;
-      left: 50%;
-      transform: translateX(-50%);
-      background: var(--accent-red);
-      color: #fff;
-      padding: 5px 20px;
-      font-size: 0.7rem;
-      letter-spacing: 3px;
-    }
-    .merch-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 25px;
-      margin-top: 40px;
-    }
-    .merch-placeholder {
-      aspect-ratio: 1;
-      border: 2px solid var(--border);
-      background: var(--bg);
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      color: var(--text-dim);
-      font-size: 0.75rem;
-      transition: all 0.2s;
-    }
-    .merch-placeholder:hover {
-      border-color: var(--accent-red);
-    }
-    .merch-placeholder .icon {
-      font-size: 2rem;
-      margin-bottom: 15px;
-    }
-    .shop-notify {
-      margin-top: 50px;
-    }
-    .email-form {
-      display: flex;
-      gap: 10px;
-      justify-content: center;
-      max-width: 400px;
-      margin: 20px auto 0;
-    }
-    .email-input {
-      flex: 1;
-      padding: 12px 20px;
-      border: 2px solid var(--border);
-      background: var(--bg);
-      color: var(--text);
-      font-family: inherit;
-      font-size: 0.85rem;
-    }
-    .email-input::placeholder {
-      color: var(--text-dim);
-    }
-    .email-input:focus {
-      outline: none;
-      border-color: var(--accent-red);
-    }
-    /* Blog Section - boxy cards */
-    .blog-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 25px;
-      max-width: 1100px;
-      width: 100%;
-    }
-    .blog-card {
-      border: 2px solid var(--border);
-      background: var(--bg-card);
-      transition: all 0.2s;
-      opacity: 0;
-      transform: translateY(20px);
-      overflow: hidden;
-    }
-    .blog-card:hover {
-      border-color: var(--accent-red);
-    }
-    .blog-card-image {
-      width: 100%;
-      aspect-ratio: 16/9;
-      background: var(--bg);
-      border-bottom: 2px solid var(--border);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 3rem;
-      color: var(--text-dim);
-      text-decoration: none;
-      transition: all 0.2s;
-    }
-    .blog-card-image:hover {
-      background: var(--accent-red);
-      color: #fff;
-    }
-    .blog-card-content {
-      padding: 25px;
-    }
-    .blog-card-meta {
-      display: flex;
-      gap: 15px;
-      margin-bottom: 15px;
-    }
-    .blog-tag {
-      font-size: 0.6rem;
-      letter-spacing: 2px;
-      color: #fff;
-      background: var(--accent-red);
-      border: 2px solid var(--accent-red);
-      padding: 4px 12px;
-      text-transform: uppercase;
-      font-weight: bold;
-    }
-    .blog-date {
-      font-size: 0.75rem;
-      color: var(--text-dim);
-    }
-    .blog-card-title {
-      font-size: 1.1rem;
-      font-family: 'Fredoka', sans-serif;
-      font-weight: 600;
-      margin-bottom: 12px;
-      line-height: 1.4;
-    }
-    .blog-card-excerpt {
-      font-size: 0.85rem;
-      color: var(--text-muted);
-      line-height: 1.7;
-      margin-bottom: 20px;
-    }
-    .blog-card-link {
-      font-size: 0.8rem;
-      color: var(--accent-red);
-      text-decoration: none;
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      transition: all 0.3s;
-    }
-    .blog-card-link:hover {
-      gap: 15px;
-    }
-    .blog-card-link::after {
-      content: '→';
-      color: var(--accent-red);
-    }
-    .blog-featured {
-      grid-column: span 2;
-    }
-    .blog-featured .blog-card-image {
-      aspect-ratio: 21/9;
-    }
-    .blog-featured .blog-card-title {
-      font-size: 1.4rem;
-    }
-    .blog-cta {
-      margin-top: 50px;
-      text-align: center;
-    }
-    @media (max-width: 900px) {
-      .blog-grid {
-        grid-template-columns: 1fr;
-      }
-      .blog-featured {
-        grid-column: span 1;
-      }
-      .blog-featured .blog-card-image {
-        aspect-ratio: 16/9;
-      }
-    }
-    /* Footer - boxy style */
-    footer {
-      border-top: 2px solid var(--border);
-      padding: 60px 40px;
-      text-align: center;
-      background: var(--bg-secondary);
-    }
-    .footer-logo {
-      font-size: 1.4rem;
-      font-family: 'Fredoka', 'Bungee', sans-serif;
-      font-weight: 700;
-      letter-spacing: 3px;
-      margin-bottom: 30px;
-    }
-    .footer-links {
-      display: flex;
-      gap: 25px;
-      justify-content: center;
-      margin-bottom: 30px;
-    }
-    .footer-links a {
-      color: var(--text-muted);
-      text-decoration: none;
-      font-size: 0.8rem;
-      letter-spacing: 1px;
-      text-transform: uppercase;
-      padding: 8px 12px;
-      border: 2px solid transparent;
-      transition: all 0.2s;
-    }
-    .footer-links a:hover {
-      color: var(--accent-red);
-      border-color: var(--accent-red);
-    }
-    .footer-copy {
-      color: var(--text-dim);
-      font-size: 0.75rem;
-    }
-    /* Animated Elements */
-    .float-element {
-      position: absolute;
-      border: 2px solid var(--border);
-      opacity: 0.3;
-      pointer-events: none;
-    }
-    /* ASCII Art Decorations */
-    .ascii-corner {
-      position: absolute;
-      color: var(--text-dim);
-      font-size: 0.7rem;
-      pointer-events: none;
-    }
-    .ascii-corner.top-left {
-      top: 20px;
-      left: 20px;
-    }
-    .ascii-corner.bottom-right {
-      bottom: 20px;
-      right: 20px;
-    }
-    /* Responsive */
-    @media (max-width: 900px) {
-      h1 {
-        font-size: 4rem;
-        letter-spacing: 2px;
-        gap: 0 12px;
-      }
-      .philosophy-grid {
-        grid-template-columns: 1fr;
-      }
-      .tools-grid {
-        grid-template-columns: 1fr;
-      }
-      .merch-grid {
-        grid-template-columns: repeat(2, 1fr);
-      }
-      nav {
-        padding: 15px 20px;
-      }
-      .nav-links {
-        gap: 15px;
-      }
-      .nav-links a {
-        font-size: 0.75rem;
-      }
-    }
-    @media (max-width: 600px) {
-      .nav-links {
-        display: none;
-      }
-      .hero-cta {
-        flex-direction: column;
-        align-items: center;
-      }
-      .merch-grid {
-        grid-template-columns: 1fr;
-      }
-      .email-form {
-        flex-direction: column;
-      }
-    }
-    /* Cursor effect */
-    .cursor-glow {
-      position: fixed;
-      width: 200px;
-      height: 200px;
-      border-radius: 50%;
-      background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
-      pointer-events: none;
-      z-index: 9999;
-      opacity: 0.5;
-      transform: translate(-50%, -50%);
-      transition: opacity 0.3s;
-    }
-    /* Scroll indicator */
-    .scroll-indicator {
-      position: absolute;
-      bottom: 40px;
-      left: 50%;
-      transform: translateX(-50%);
-      color: var(--text-muted);
-      font-size: 0.75rem;
-      letter-spacing: 2px;
-      animation: bounce 2s infinite;
-      opacity: 0;
-    }
-    @keyframes bounce {
-      0%, 100% { transform: translateX(-50%) translateY(0); }
-      50% { transform: translateX(-50%) translateY(10px); }
-    }
-  </style>
-</head>
-<body>
-  <!-- Animated Background Pattern -->
-  <div class="bg-pattern">
-    <svg id="gridPattern" xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse">
-          <path d="M 50 0 L 0 0 0 50" fill="none" class="grid-line"/>
-        </pattern>
-      </defs>
-      <rect width="100%" height="100%" fill="url(#grid)"/>
-    </svg>
-  </div>
-  <!-- Cursor Glow Effect -->
-  <div class="cursor-glow" id="cursorGlow"></div>
-  <!-- Navigation -->
-  <nav>
-    <div class="logo">
-      <div class="logo-icon">HT</div>
-      HUSTLE TOGETHER
-    </div>
-    <div class="nav-links">
-      <a href="#hero">HOME</a>
-      <a href="#philosophy">PHILOSOPHY</a>
-      <a href="#tools">TOOLS</a>
-      <a href="#blog">BLOG</a>
-      <a href="#shop">SHOP</a>
-      <button class="theme-toggle" id="themeToggle">[ LIGHT ]</button>
-    </div>
-  </nav>
-  <main>
-    <!-- Hero Section -->
-    <section id="hero">
-      <div class="ascii-corner top-left">+--[HUSTLE]--+</div>
-      <div class="ascii-corner bottom-right">+--[2025]--+</div>
-      <div class="hero-content">
-        <div class="hero-badge">EXPERIMENT . BUILD . SHARE</div>
-        <h1 id="heroTitle">
-          <span class="word" data-text="HUSTLE"></span>
-          <span class="word highlight" data-text="TOGETHER"></span>
-        </h1>
-        <p class="hero-tagline">Build together. Share resources. Grow stronger.</p>
-        <p class="hero-desc">
-          We hustle hard to create tools worth sharing. When we build together
-          and share what we learn, everyone gets stronger. No gatekeeping - just
-          useful stuff for developers who believe in community over competition.
-        </p>
-        <div class="hero-cta">
-          <a href="#tools" class="btn btn-primary">VIEW TOOLS</a>
-          <a href="#philosophy" class="btn">OUR PHILOSOPHY</a>
-        </div>
-      </div>
-      <div class="scroll-indicator">[ SCROLL ]</div>
-    </section>
-    <!-- Philosophy Section -->
-    <section id="philosophy">
-      <div class="section-header">
-        <div class="section-label">HOW WE WORK</div>
-        <h2>HUSTLE <span class="highlight">PHILOSOPHY</span></h2>
-      </div>
-      <div class="philosophy-grid">
-        <div class="philosophy-card">
-          <div class="philosophy-icon">[?]</div>
-          <div class="philosophy-title">EXPERIMENT</div>
-          <div class="philosophy-desc">
-            Try things before they're ready. Break stuff. Learn fast.
-            The best tools come from real problems, not perfect plans.
-          </div>
-        </div>
-        <div class="philosophy-card">
-          <div class="philosophy-icon">[*]</div>
-          <div class="philosophy-title">BUILD</div>
-          <div class="philosophy-desc">
-            Ship early, ship often. A working prototype beats a
-            perfect spec every time. Code is the best documentation.
-          </div>
-        </div>
-        <div class="philosophy-card">
-          <div class="philosophy-icon">[>]</div>
-          <div class="philosophy-title">SHARE</div>
-          <div class="philosophy-desc">
-            Open source everything. If it helped us, it might help you.
-            The community makes tools better than we ever could alone.
-          </div>
-        </div>
-      </div>
-    </section>
-    <!-- Tools Section -->
-    <section id="tools">
-      <div class="section-header">
-        <div class="section-label">WHAT WE MAKE</div>
-        <h2>HUSTLE <span class="highlight">TOOLS</span></h2>
-      </div>
-      <div class="tools-grid">
-        <div class="tool-card">
-          <div class="tool-badge">CLAUDE CODE EXTENSION</div>
-          <div class="tool-name">
-            <span class="icon">[A]</span>
-            API DEV TOOLS
-          </div>
-          <p class="tool-desc">
-            Interview-driven API development workflow for Claude Code.
-            Enforces research, testing, and documentation through Python hooks.
-            No more hallucinated APIs or skipped tests.
-          </p>
-          <ul class="tool-features">
-            <li>Structured interviews with multiple-choice options</li>
-            <li>Research enforcement via Context7 + WebSearch</li>
-            <li>TDD workflow (/red, /green, /refactor)</li>
-            <li>Decision tracking injected during implementation</li>
-            <li>10-phase workflow with state tracking</li>
-          </ul>
-          <div class="tool-links">
-            <a href="https://www.npmjs.com/package/@hustle-together/api-dev-tools" class="tool-link" target="_blank">NPM</a>
-            <a href="https://github.com/hustle-together/api-dev-tools" class="tool-link" target="_blank">GITHUB</a>
-            <a href="../workflow-demo.html" class="tool-link">DEMO</a>
-          </div>
-        </div>
-        <div class="tool-card">
-          <div class="tool-badge">WORDPRESS PLUGIN</div>
-          <div class="tool-name">
-            <span class="icon">[E]</span>
-            HUSTLE ELEMENTOR
-          </div>
-          <p class="tool-desc">
-            AI-powered widget generation for WordPress. Uses Gemini Pro 2.5
-            and Morph to create fully editable Elementor widgets from
-            natural language descriptions.
-          </p>
-          <ul class="tool-features">
-            <li>Gemini Pro 2.5 for intelligent generation</li>
-            <li>Morph integration for quick edits</li>
-            <li>Fully editable in WordPress admin</li>
-            <li>One-click widget creation</li>
-            <li>Style-aware generation</li>
-          </ul>
-          <div class="tool-links">
-            <a href="#" class="tool-link">COMING SOON</a>
-          </div>
-        </div>
-      </div>
-    </section>
-    <!-- Blog Section -->
-    <section id="blog">
-      <div class="section-header">
-        <div class="section-label">THOUGHTS & EXPERIMENTS</div>
-        <h2>HUSTLE <span class="highlight">BLOG</span></h2>
-      </div>
-      <div class="blog-grid">
-        <!-- Featured Post -->
-        <article class="blog-card blog-featured">
-          <a href="blog/interview-driven-api-development.html" class="blog-card-image">[*]</a>
-          <div class="blog-card-content">
-            <div class="blog-card-meta">
-              <span class="blog-tag">DEV TOOLS</span>
-              <span class="blog-date">Dec 7, 2025</span>
-            </div>
-            <h3 class="blog-card-title">Why We Built Interview-Driven API Development</h3>
-            <p class="blog-card-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>
-            <a href="blog/interview-driven-api-development.html" class="blog-card-link">Read More</a>
-          </div>
-        </article>
-        <!-- Regular Post -->
-        <article class="blog-card">
-          <a href="blog/gemini-vs-claude-widgets.html" class="blog-card-image">[?]</a>
-          <div class="blog-card-content">
-            <div class="blog-card-meta">
-              <span class="blog-tag">AI</span>
-              <span class="blog-date">Dec 5, 2025</span>
-            </div>
-            <h3 class="blog-card-title">Gemini Pro 2.5 vs Claude for Widget Generation</h3>
-            <p class="blog-card-excerpt">
-              We tested both models for generating Elementor widgets. The results surprised us.
-            </p>
-            <a href="blog/gemini-vs-claude-widgets.html" class="blog-card-link">Read More</a>
-          </div>
-        </article>
-        <!-- Regular Post -->
-        <article class="blog-card">
-          <a href="blog/tdd-for-ai.html" class="blog-card-image">[+]</a>
-          <div class="blog-card-content">
-            <div class="blog-card-meta">
-              <span class="blog-tag">WORKFLOW</span>
-              <span class="blog-date">Dec 1, 2025</span>
-            </div>
-            <h3 class="blog-card-title">TDD is Dead, Long Live TDD</h3>
-            <p class="blog-card-excerpt">
-              The /red /green /refactor cycle isn't just for humans anymore. Here's how to enforce it.
-            </p>
-            <a href="blog/tdd-for-ai.html" class="blog-card-link">Read More</a>
-          </div>
-        </article>
-        <!-- Regular Post -->
-        <article class="blog-card">
-          <a href="blog/interview-driven-api-development.html" class="blog-card-image">[/]</a>
-          <div class="blog-card-content">
-            <div class="blog-card-meta">
-              <span class="blog-tag">OPEN SOURCE</span>
-              <span class="blog-date">Nov 28, 2025</span>
-            </div>
-            <h3 class="blog-card-title">Context7: The Best MCP Server You're Not Using</h3>
-            <p class="blog-card-excerpt">
-              Live documentation beats training data. Every time. Here's how to set it up.
-            </p>
-            <a href="blog/interview-driven-api-development.html" class="blog-card-link">Read More</a>
-          </div>
-        </article>
-      </div>
-      <div class="blog-cta">
-        <a href="blog/interview-driven-api-development.html" class="btn">VIEW ALL POSTS</a>
-      </div>
-    </section>
-    <!-- Shop Section -->
-    <section id="shop">
-      <div class="section-header">
-        <div class="section-label">WEAR THE HUSTLE</div>
-        <h2>HUSTLE <span class="highlight">MERCH</span></h2>
-      </div>
-      <div class="shop-preview">
-        <div class="coming-soon-box">
-          <div class="merch-grid">
-            <div class="merch-placeholder">
-              <span class="icon">[T]</span>
-              TEE
-            </div>
-            <div class="merch-placeholder">
-              <span class="icon">[H]</span>
-              HOODIE
-            </div>
-            <div class="merch-placeholder">
-              <span class="icon">[C]</span>
-              CAP
-            </div>
-          </div>
-          <div class="shop-notify">
-            <p style="color: var(--text-muted); font-size: 0.9rem;">
-              Get notified when the shop launches
-            </p>
-            <form class="email-form" onsubmit="return false;">
-              <input type="email" class="email-input" placeholder="your@email.com">
-              <button type="submit" class="btn">NOTIFY ME</button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </section>
-  </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>
-    // Register GSAP plugins
-    gsap.registerPlugin(ScrollTrigger);
-    // 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 ]';
-    });
-    // Cursor Glow Effect
-    const cursorGlow = document.getElementById('cursorGlow');
-    document.addEventListener('mousemove', (e) => {
-      cursorGlow.style.left = e.clientX + 'px';
-      cursorGlow.style.top = e.clientY + 'px';
-    });
-    // Split title into letters
-    document.querySelectorAll('#heroTitle .word').forEach(word => {
-      const text = word.getAttribute('data-text');
-      word.innerHTML = text.split('').map(letter =>
-        `<span class="letter">${letter}</span>`
-      ).join('');
-    });
-    // Hero Animations with letter-by-letter reveal (slower, more dramatic)
-    const heroTL = gsap.timeline({ delay: 0.5 });
-    heroTL
-      .to('.hero-badge', { opacity: 1, duration: 0.6 })
-      .to('#heroTitle .letter', {
-        opacity: 1,
-        y: 0,
-        rotateX: 0,
-        duration: 0.15,
-        stagger: 0.08,
-        ease: 'back.out(1.7)'
-      }, '-=0.2')
-      .to('.hero-tagline', { opacity: 1, duration: 0.6 }, '-=0.4')
-      .to('.hero-desc', { opacity: 1, duration: 0.6 }, '-=0.3')
-      .to('.hero-cta', { opacity: 1, duration: 0.5 }, '-=0.2')
-      .to('.scroll-indicator', { opacity: 1, duration: 0.4 });
-    // Philosophy Cards
-    gsap.utils.toArray('.philosophy-card').forEach((card, i) => {
-      gsap.to(card, {
-        opacity: 1,
-        y: 0,
-        duration: 0.6,
-        delay: i * 0.15,
-        scrollTrigger: {
-          trigger: card,
-          start: 'top 80%',
-          toggleActions: 'play none none reverse'
-        }
-      });
-    });
-    // Tool Cards
-    gsap.utils.toArray('.tool-card').forEach((card, i) => {
-      gsap.to(card, {
-        opacity: 1,
-        y: 0,
-        duration: 0.6,
-        delay: i * 0.2,
-        scrollTrigger: {
-          trigger: card,
-          start: 'top 80%',
-          toggleActions: 'play none none reverse'
-        }
-      });
-    });
-    // Blog Cards
-    gsap.utils.toArray('.blog-card').forEach((card, i) => {
-      gsap.to(card, {
-        opacity: 1,
-        y: 0,
-        duration: 0.6,
-        delay: i * 0.15,
-        scrollTrigger: {
-          trigger: card,
-          start: 'top 85%',
-          toggleActions: 'play none none reverse'
-        }
-      });
-    });
-    // Coming Soon Box
-    gsap.to('.coming-soon-box', {
-      opacity: 1,
-      duration: 0.8,
-      scrollTrigger: {
-        trigger: '.coming-soon-box',
-        start: 'top 80%',
-        toggleActions: 'play none none reverse'
-      }
-    });
-    // Animated Background Pattern
-    const pattern = document.querySelector('.bg-pattern');
-    let offsetX = 0;
-    let offsetY = 0;
-    function animatePattern() {
-      offsetX += 0.1;
-      offsetY += 0.05;
-      pattern.style.transform = `translate(${Math.sin(offsetX) * 5}px, ${Math.cos(offsetY) * 5}px)`;
-      requestAnimationFrame(animatePattern);
-    }
-    animatePattern();
-    // Smooth scroll for nav links
-    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-      anchor.addEventListener('click', function (e) {
-        e.preventDefault();
-        const target = document.querySelector(this.getAttribute('href'));
-        if (target) {
-          target.scrollIntoView({ behavior: 'smooth' });
-        }
-      });
-    });
-    // Add floating decorative elements
-    function createFloatingElements() {
-      const container = document.body;
-      const symbols = ['+', '*', '/', '-', '=', '>', '<', '|'];
-      for (let i = 0; i < 15; i++) {
-        const el = document.createElement('div');
-        el.className = 'float-element';
-        el.textContent = symbols[Math.floor(Math.random() * symbols.length)];
-        el.style.left = Math.random() * 100 + 'vw';
-        el.style.top = Math.random() * 100 + 'vh';
-        el.style.fontSize = (Math.random() * 1.5 + 0.5) + 'rem';
-        el.style.padding = '10px';
-        container.appendChild(el);
-        // Animate floating
-        gsap.to(el, {
-          y: Math.random() * 100 - 50,
-          x: Math.random() * 100 - 50,
-          rotation: Math.random() * 360,
-          duration: Math.random() * 10 + 10,
-          repeat: -1,
-          yoyo: true,
-          ease: 'sine.inOut'
-        });
-      }
-    }
-    createFloatingElements();
-  </script>
-</body>
-</html>