blog: vibe-engineering post + ScopeBlock, DecisionLog, MilestoneCard + Senior promotion

README.md

@@ -107,13 +107,13 @@ I build developer tools that make AI agents smarter.
 > I write about AI-driven development, MCP integrations, and developer tooling at **[codestz.dev](https://codestz.dev)**
 
 <!-- BLOG-POST-LIST:START -->
+- [Stop Loading 100K Tokens Just to Call a Tool: Why I Built MCPX](https://codestz.dev/experiments/mcpx-mcp-gateway)
 - [The AI Convergence: Why Every Coding Tool Lands on the Same Two Defaults](https://codestz.dev/experiments/why-ai-defaults-to-typescript)
 - [MCP Is a Crutch: Why CLI Tools Are the Future of AI Agent Tooling](https://codestz.dev/experiments/mcpx-cli-over-mcp)
 - [SPARC: The Methodology That Turns Vibe Coding Into Actual Engineering](https://codestz.dev/experiments/sparc-methodology-ai-development)
 - [Spec-Driven Development: Why Writing Specs Before Code Is the Next Paradigm Shift](https://codestz.dev/experiments/spec-driven-development-tessl)
 - [RTK: The Rust Binary That Slashed My Claude Code Token Usage by 70%](https://codestz.dev/experiments/rtk-rust-token-killer)
 - [From Vibe Coding to Symbolic Reasoning: How Serena MCP Gives AI Agents X-Ray Vision](https://codestz.dev/experiments/serena-mcp-architectural-mastery)
-- [Surgical Code Editing: The 10x Token Efficiency Pattern](https://codestz.dev/experiments/surgical-code-editing)
 <!-- BLOG-POST-LIST:END -->
 
 ---

mdx-components.tsx

@@ -10,6 +10,9 @@ import {
   Callout,
   ProcessFlow,
   StatBlock,
+  ScopeBlock,
+  DecisionLog,
+  MilestoneCard,
 } from '@/components/mdx';
 import { Mermaid } from '@/components/mdx/Mermaid';
 
@@ -32,6 +35,9 @@ export const mdxComponents: MDXComponents = {
   Callout,
   ProcessFlow,
   StatBlock,
+  ScopeBlock,
+  DecisionLog,
+  MilestoneCard,
   // Headings
   h1: ({ children }) => (
     <h1 className="mb-4 sm:mb-6 mt-6 sm:mt-8 font-heading text-3xl sm:text-4xl font-bold uppercase text-foreground">

package.json

@@ -59,5 +59,11 @@
     "shiki": "^3.22.0",
     "tailwindcss": "^4",
     "typescript": "^5"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "sharp",
+      "unrs-resolver"
+    ]
   }
 }

pnpm-workspace.yaml

@@ -1,6 +1,6 @@
 packages:
   - '.'
 
-ignoredBuiltDependencies:
-  - sharp
-  - unrs-resolver
+allowBuilds:
+  sharp: true
+  unrs-resolver: true

src/components/mdx/DecisionLog/DecisionLog.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { Check, X, Clock, Sparkles } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { DecisionLogProps, DecisionVerdict } from './DecisionLog.types';
+
+const verdictConfig: Record<
+  DecisionVerdict,
+  { label: string; Icon: typeof Check; chipClass: string; barClass: string }
+> = {
+  rejected: {
+    label: 'Rejected',
+    Icon: X,
+    chipClass: 'bg-red-500 text-white border-red-700',
+    barClass: 'border-l-red-500',
+  },
+  accepted: {
+    label: 'Accepted',
+    Icon: Check,
+    chipClass: 'bg-green-500 text-white border-green-700',
+    barClass: 'border-l-green-500',
+  },
+  deferred: {
+    label: 'Deferred',
+    Icon: Clock,
+    chipClass: 'bg-amber-500 text-black border-amber-700',
+    barClass: 'border-l-amber-500',
+  },
+};
+
+/**
+ * DecisionLog Component - AI Proposal / Verdict / Reasoning Log
+ * Neo-Brutalist visual for capturing the "moments I said no/yes/later" pattern.
+ * Reusable on any AI-workflow post.
+ */
+export function DecisionLog({ title = 'Decision Log', decisions, className }: DecisionLogProps) {
+  return (
+    <div
+      className={cn(
+        'my-8 overflow-hidden rounded-none border-[4px] border-foreground bg-bg-elevated shadow-[8px_8px_0px_0px] shadow-black',
+        className
+      )}
+    >
+      <div className="border-b-[4px] border-foreground bg-secondary px-4 py-2">
+        <span className="font-mono text-[10px] font-bold text-secondary-text uppercase tracking-widest">
+          {title}
+        </span>
+      </div>
+
+      <div className="divide-y-[3px] divide-foreground">
+        {decisions.map((d, idx) => {
+          const v = verdictConfig[d.verdict];
+          const Icon = v.Icon;
+          return (
+            <div
+              key={idx}
+              className={cn(
+                'flex flex-col gap-2 border-l-[6px] bg-bg-elevated px-4 py-3 sm:px-5 sm:py-4',
+                v.barClass
+              )}
+            >
+              <div className="flex items-start gap-3">
+                <Sparkles size={14} className="mt-1 flex-shrink-0 text-muted" strokeWidth={3} />
+                <span className="flex-1 font-mono text-xs sm:text-sm text-muted leading-relaxed">
+                  <span className="font-bold uppercase tracking-wider text-foreground mr-2">
+                    Model:
+                  </span>
+                  {d.proposal}
+                </span>
+                <span
+                  className={cn(
+                    'inline-flex items-center gap-1 border-[2px] px-2 py-0.5 font-mono text-[10px] font-black uppercase tracking-widest',
+                    v.chipClass
+                  )}
+                >
+                  <Icon size={11} strokeWidth={3} />
+                  {v.label}
+                </span>
+              </div>
+
+              <div className="ml-7 font-mono text-xs sm:text-sm leading-relaxed text-foreground">
+                <span className="font-bold uppercase tracking-wider text-foreground mr-2">
+                  Why:
+                </span>
+                {d.reasoning}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/mdx/DecisionLog/DecisionLog.types.ts

@@ -0,0 +1,13 @@
+export type DecisionVerdict = 'rejected' | 'accepted' | 'deferred';
+
+export interface Decision {
+  proposal: string;
+  verdict: DecisionVerdict;
+  reasoning: string;
+}
+
+export interface DecisionLogProps {
+  title?: string;
+  decisions: Decision[];
+  className?: string;
+}

src/components/mdx/DecisionLog/index.ts

@@ -0,0 +1,2 @@
+export { DecisionLog } from './DecisionLog';
+export type { DecisionLogProps, Decision, DecisionVerdict } from './DecisionLog.types';

src/components/mdx/MilestoneCard/MilestoneCard.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { ArrowRight, Award, Calendar, Mic, Rocket, Sparkles, TrendingUp } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { MilestoneCardProps, MilestoneKind } from './MilestoneCard.types';
+
+const kindConfig: Record<MilestoneKind, { label: string; Icon: typeof TrendingUp }> = {
+  promotion: { label: 'Promotion', Icon: TrendingUp },
+  award: { label: 'Award', Icon: Award },
+  launch: { label: 'Launch', Icon: Rocket },
+  talk: { label: 'Talk', Icon: Mic },
+  milestone: { label: 'Milestone', Icon: Sparkles },
+};
+
+/**
+ * MilestoneCard Component - Career milestone callout
+ * Neo-Brutalist visual for a single career event: promotion, award, launch, talk.
+ * Optional FROM → TO transition row makes it especially fit for promotions.
+ * Slim layout: header strip + title row + optional transition + optional highlights.
+ */
+export function MilestoneCard({
+  title,
+  subtitle,
+  kind = 'milestone',
+  date,
+  from,
+  to,
+  highlights,
+  className,
+}: MilestoneCardProps) {
+  const { label, Icon } = kindConfig[kind];
+
+  return (
+    <div
+      className={cn(
+        'my-8 overflow-hidden rounded-none border-[4px] border-foreground bg-bg-elevated shadow-[8px_8px_0px_0px] shadow-black',
+        className
+      )}
+    >
+      <div className="flex items-center gap-2 border-b-[4px] border-foreground bg-secondary px-4 py-2">
+        <Icon size={14} className="text-secondary-text" strokeWidth={3} />
+        <span className="font-mono text-[10px] font-bold uppercase tracking-widest text-secondary-text">
+          {label}
+        </span>
+        {date && (
+          <span className="ml-auto inline-flex items-center gap-1 font-mono text-[10px] font-bold uppercase tracking-widest text-secondary-text">
+            <Calendar size={11} strokeWidth={3} />
+            {date}
+          </span>
+        )}
+      </div>
+
+      <div className="p-4 sm:p-5">
+        <h3 className="font-heading text-lg sm:text-xl font-bold uppercase tracking-tight text-foreground leading-tight">
+          {title}
+        </h3>
+        {subtitle && (
+          <p className="mt-1 font-mono text-xs uppercase tracking-wider text-muted">{subtitle}</p>
+        )}
+
+        {(from || to) && (
+          <div className="mt-4 flex flex-wrap items-center gap-2 font-mono text-xs sm:text-sm">
+            <span className="text-foreground/60 line-through decoration-[2px] decoration-red-500">
+              {from ?? '—'}
+            </span>
+            <ArrowRight size={14} className="text-foreground" strokeWidth={3} />
+            <span className="font-bold text-foreground">{to ?? '—'}</span>
+          </div>
+        )}
+
+        {highlights && highlights.length > 0 && (
+          <ul className="mt-4 space-y-1 font-mono text-xs sm:text-sm">
+            {highlights.map((item, idx) => (
+              <li key={idx} className="flex items-start gap-2 text-foreground/90">
+                <span className="mt-1 inline-block h-1.5 w-1.5 flex-shrink-0 bg-secondary" />
+                <span className="leading-relaxed">{item}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/mdx/MilestoneCard/MilestoneCard.types.ts

@@ -0,0 +1,12 @@
+export type MilestoneKind = 'promotion' | 'award' | 'launch' | 'talk' | 'milestone';
+
+export interface MilestoneCardProps {
+  title: string;
+  subtitle?: string;
+  kind?: MilestoneKind;
+  date?: string;
+  from?: string;
+  to?: string;
+  highlights?: string[];
+  className?: string;
+}

src/components/mdx/MilestoneCard/index.ts

@@ -0,0 +1,2 @@
+export { MilestoneCard } from './MilestoneCard';
+export type { MilestoneCardProps, MilestoneKind } from './MilestoneCard.types';

src/components/mdx/ScopeBlock/ScopeBlock.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { Check, X, Lock } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { ScopeBlockProps } from './ScopeBlock.types';
+
+const columns = [
+  {
+    key: 'building',
+    label: 'Building',
+    Icon: Check,
+    tone: 'text-green-700 dark:text-green-400',
+    barTone: 'border-l-green-500 bg-green-50/40 dark:bg-green-950/20',
+  },
+  {
+    key: 'notBuilding',
+    label: 'Not Building',
+    Icon: X,
+    tone: 'text-red-700 dark:text-red-400',
+    barTone: 'border-l-red-500 bg-red-50/40 dark:bg-red-950/20',
+  },
+  {
+    key: 'constraints',
+    label: 'Constraints',
+    Icon: Lock,
+    tone: 'text-amber-700 dark:text-amber-400',
+    barTone: 'border-l-amber-500 bg-amber-50/40 dark:bg-amber-950/20',
+  },
+] as const;
+
+/**
+ * ScopeBlock Component - Three-Column Scope Discipline Panel
+ * Neo-Brutalist visual for declaring what's in, what's out, and the constraints.
+ * Reusable on any planning/scoping post.
+ */
+export function ScopeBlock({
+  title = 'Scope',
+  building,
+  notBuilding,
+  constraints,
+  className,
+}: ScopeBlockProps) {
+  const data = { building, notBuilding, constraints };
+
+  return (
+    <div
+      className={cn(
+        'my-8 overflow-hidden rounded-none border-[4px] border-foreground bg-bg-elevated shadow-[8px_8px_0px_0px] shadow-black',
+        className
+      )}
+    >
+      <div className="border-b-[4px] border-foreground bg-secondary px-4 py-2">
+        <span className="font-mono text-[10px] font-bold text-secondary-text uppercase tracking-widest">
+          {title}
+        </span>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 divide-y-[3px] md:divide-y-0 md:divide-x-[3px] divide-foreground">
+        {columns.map((col) => {
+          const items = data[col.key];
+          const Icon = col.Icon;
+          return (
+            <div key={col.key} className="flex flex-col">
+              <div className="flex items-center gap-2 border-b-[3px] border-foreground bg-bg-elevated px-3 py-2">
+                <Icon size={14} className={col.tone} strokeWidth={3} />
+                <span className="font-mono text-[10px] font-bold uppercase tracking-widest text-foreground">
+                  {col.label}
+                </span>
+                <span className="ml-auto font-mono text-[10px] text-muted">{items.length}</span>
+              </div>
+
+              <ul className="flex-1 divide-y-[2px] divide-foreground/30 font-mono text-xs sm:text-sm">
+                {items.map((item, idx) => (
+                  <li
+                    key={idx}
+                    className={cn('flex items-start gap-2 border-l-[4px] px-3 py-2', col.barTone)}
+                  >
+                    <Icon
+                      size={12}
+                      className={cn('mt-0.5 flex-shrink-0', col.tone)}
+                      strokeWidth={3}
+                    />
+                    <span className="text-foreground leading-relaxed">{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/mdx/ScopeBlock/ScopeBlock.types.ts

@@ -0,0 +1,7 @@
+export interface ScopeBlockProps {
+  title?: string;
+  building: string[];
+  notBuilding: string[];
+  constraints: string[];
+  className?: string;
+}

src/components/mdx/ScopeBlock/index.ts

@@ -0,0 +1,2 @@
+export { ScopeBlock } from './ScopeBlock';
+export type { ScopeBlockProps } from './ScopeBlock.types';

src/components/mdx/index.ts

@@ -20,3 +20,9 @@ export { ProcessFlow } from './ProcessFlow';
 export type { ProcessFlowProps, ProcessStep } from './ProcessFlow';
 export { StatBlock } from './StatBlock';
 export type { StatBlockProps, Stat } from './StatBlock';
+export { ScopeBlock } from './ScopeBlock';
+export type { ScopeBlockProps } from './ScopeBlock';
+export { DecisionLog } from './DecisionLog';
+export type { DecisionLogProps, Decision, DecisionVerdict } from './DecisionLog';
+export { MilestoneCard } from './MilestoneCard';
+export type { MilestoneCardProps, MilestoneKind } from './MilestoneCard';