[{"data":1,"prerenderedAt":1329},["ShallowReactive",2],{"projects":3,"blog-preview":453},[4,95,167,236,300,384],{"id":5,"title":6,"body":7,"client":74,"coverImage":75,"description":68,"extension":76,"featured":77,"meta":78,"navigation":77,"order":79,"path":80,"period":81,"role":82,"seo":83,"stack":84,"stem":92,"summary":93,"__hash__":94},"projects\u002Fprojects\u002Flouis-vuitton-engineering-manager.md","Louis Vuitton — Engineering Manager",{"type":8,"value":9,"toc":67},"minimark",[10,15,19,22,26,33,39,45,49],[11,12,14],"h2",{"id":13},"role-context","Role & Context",[16,17,18],"p",{},"At Louis Vuitton via Valtech, I lead the front-end engineering function for one of the world's highest-traffic luxury e-commerce platforms. Managing a team of 18 developers across 8 squads, I hold full responsibility for technical vision, governance, architectural direction, and the human side — career growth, performance cycles, and team health.",[16,20,21],{},"The scope spans the entire front-end stack: from platform architecture decisions to squad-level delivery, from CI\u002FCD reliability to web performance and accessibility standards. Coordinating across product, UX, back-end, and infrastructure teams is a constant, requiring both technical credibility and deliberate communication.",[11,23,25],{"id":24},"key-achievements","Key Achievements",[16,27,28,32],{},[29,30,31],"strong",{},"AI-Augmented Engineering at Scale","\nDesigned and deployed an orchestration layer of 5 specialized internal LLM agents focused on unit testing automation and component scaffolding. The system integrates with existing squad workflows without disrupting delivery cadence — agents generate test suites and scaffold boilerplate from component contracts, cutting repetitive work. Squad velocity increased by 15% within the first months of adoption.",[16,34,35,38],{},[29,36,37],{},"Nuxt 2 → Nuxt 3 Migration","\nDirecting the global migration of a large-scale Nuxt 2 codebase to Nuxt 3 — a complex, phased operation across a platform that cannot afford downtime. The migration strategy prioritizes incremental modernization: eliminating legacy patterns, reducing technical debt accrued over years, and unlocking Nuxt 3's performance primitives. Initial benchmarks show a 5% improvement in web performance metrics with further gains expected as migration progresses.",[16,40,41,44],{},[29,42,43],{},"Architecture, SEO & Generative Engine Optimization","\nBeyond platform stability, driving structural improvements to architecture that affect discoverability: technical SEO hardening, accessibility (WCAG compliance), and early work on Generative Engine Optimization (GEO) — ensuring the platform's content is well-positioned for AI-driven search surfaces alongside traditional ranking signals.",[11,46,48],{"id":47},"technical-stack","Technical Stack",[16,50,51,54,55,58,59,62,63,66],{},[29,52,53],{},"Core:"," Nuxt.js (2 → 3 migration), TypeScript, Vue 3, Node.js\n",[29,56,57],{},"AI & Tooling:"," Claude Code, GitHub Copilot, custom LLM agent orchestration\n",[29,60,61],{},"Infrastructure:"," GCP, Akamai CDN, CI\u002FCD pipelines\n",[29,64,65],{},"Process:"," Scrum, SAFe, cross-squad coordination across 8 product squads",{"title":68,"searchDepth":69,"depth":69,"links":70},"",2,[71,72,73],{"id":13,"depth":69,"text":14},{"id":24,"depth":69,"text":25},{"id":47,"depth":69,"text":48},"Louis Vuitton",null,"md",true,{},1,"\u002Fprojects\u002Flouis-vuitton-engineering-manager","2024 – Present","Front-End Engineering Manager",{"title":6,"description":68},[85,86,87,88,89,90,91],"Nuxt 3","TypeScript","Node.js","GCP","GitHub Copilot","Claude Code","GenAI Agents","projects\u002Flouis-vuitton-engineering-manager","Architecting the front-end infrastructure for a 1M+ daily users platform across 42 markets. Leading an 18-month Nuxt 2 → Nuxt 3 migration (5,000+ files, 200+ components). Orchestrated 5 internal LLM agents boosting squad velocity by 15% in one quarter.","e2xnVJ229xBJFFsMCABjIfIM76sdCxC45O7MYJe7EPQ",{"id":96,"title":97,"body":98,"client":74,"coverImage":75,"description":68,"extension":76,"featured":77,"meta":154,"navigation":77,"order":69,"path":155,"period":156,"role":157,"seo":158,"stack":159,"stem":164,"summary":165,"__hash__":166},"projects\u002Fprojects\u002Flouis-vuitton-lead-developer.md","Louis Vuitton — Lead Front-End Developer",{"type":8,"value":99,"toc":149},[100,102,105,108,110,116,122,128,130],[11,101,14],{"id":13},[16,103,104],{},"Prior to stepping into the EM role, I spent three years as Front-End Lead Developer at Louis Vuitton via Valtech — the role where I moved from individual contributor to technical leader. With 7 developers under my direction, I owned front-end architecture decisions and delivery across a flagship e-commerce platform operating across 20+ countries.",[16,106,107],{},"The work combined hands-on architecture design with coordination across back-end, infrastructure, and product teams. Two major initiatives defined this period: a foundational architectural overhaul and a full e-commerce platform migration.",[11,109,25],{"id":24},[16,111,112,115],{},[29,113,114],{},"Domain-Driven Design Architecture","\nDesigned and implemented a Domain-Driven Design (DDD) architecture to handle multi-backend integration — the platform interfaces with several back-end services, and the previous approach created tight coupling that slowed teams down and made changes risky. The DDD structure decoupled core features into clear domain boundaries, reduced cross-team dependency, and made the codebase significantly more maintainable. Other squads could iterate on their domain without cascading rework.",[16,117,118,121],{},[29,119,120],{},"E-Commerce Re-Platforming","\nLed the front-end engineering effort for a major re-platforming — migrating from a legacy ATG-based commerce stack to Salesforce B2C Commerce. This is the kind of project that touches everything: routing, data contracts, state management, component architecture, and the deployment pipeline. Coordinating 7 developers through this while maintaining production stability required clear task breakdown, staged rollouts, and continuous communication with back-end and QA teams.",[16,123,124,127],{},[29,125,126],{},"Global Production Deployments","\nManaged production releases and progressive feature rollouts across 20+ countries. Luxury e-commerce has unforgiving commercial moments — fashion weeks, holiday periods, major campaign launches — where platform availability is non-negotiable. Maintained 99.9% platform availability through these peaks by establishing robust release protocols, staged deployment strategies, and incident response processes.",[11,129,48],{"id":47},[16,131,132,134,135,138,139,141,142,145,146,148],{},[29,133,53],{}," Nuxt.js (v2), TypeScript, Vue.js, JavaScript\n",[29,136,137],{},"Testing:"," Jest (unit + integration)\n",[29,140,61],{}," Azure, CI\u002FCD pipelines\n",[29,143,144],{},"Architecture:"," Domain-Driven Design, multi-backend integration patterns\n",[29,147,65],{}," Scrum, SAFe, cross-functional team coordination",{"title":68,"searchDepth":69,"depth":69,"links":150},[151,152,153],{"id":13,"depth":69,"text":14},{"id":24,"depth":69,"text":25},{"id":47,"depth":69,"text":48},{},"\u002Fprojects\u002Flouis-vuitton-lead-developer","2021 – 2024","Front-End Lead Developer",{"title":97,"description":68},[160,86,161,162,163],"Nuxt 2","Vue.js","Jest","Azure","projects\u002Flouis-vuitton-lead-developer","Architected a DDD-based front-end platform and led a full e-commerce re-platforming for a global luxury brand.","0q2-6CbT-MVa7xbJEbzLS40-nvV7EUD7FM-W3drw8uE",{"id":168,"title":169,"body":170,"client":223,"coverImage":75,"description":68,"extension":76,"featured":77,"meta":224,"navigation":77,"order":225,"path":226,"period":227,"role":157,"seo":228,"stack":229,"stem":233,"summary":234,"__hash__":235},"projects\u002Fprojects\u002Frolex-lead-developer.md","Rolex — Front-End Lead Developer",{"type":8,"value":171,"toc":218},[172,174,177,180,182,188,194,200,202],[11,173,14],{"id":13},[16,175,176],{},"At Rolex via Valtech, I led the front-end team responsible for delivering the global Rolex Newsroom — a high-traffic media platform serving press content, brand announcements, and editorial stories to a worldwide audience. The project demanded engineering precision to match the brand's exacting standards: performance, visual fidelity, and reliability under significant traffic load.",[16,178,179],{},"Beyond delivery, a major dimension of the role was organizational: the existing team was composed primarily of experienced CMS developers with deep Sitecore knowledge but limited exposure to modern component-based front-end architecture. Bridging that gap required both technical direction and patient mentoring.",[11,181,25],{"id":24},[16,183,184,187],{},[29,185,186],{},"Global Newsroom Architecture","\nDesigned and implemented the scalable front-end component architecture for the Rolex Newsroom, built to handle high-traffic media delivery without degradation. The architecture prioritized composability — components built once, reused across editorial templates, brand launches, and press sections — reducing duplication and ensuring visual consistency at scale.",[16,189,190,193],{},[29,191,192],{},"CMS-to-Vue.js Modernization","\nLed a deliberate upskilling program for the existing team, transitioning traditional Sitecore CMS developers onto modern Vue.js practices integrated within the Sitecore rendering pipeline. This wasn't a forced migration but a structured knowledge transfer: pair programming, code review culture, and incremental adoption of Vue patterns alongside existing CMS workflows. By project end, the team operated confidently in both paradigms.",[16,195,196,199],{},[29,197,198],{},"High-Traffic Media Delivery","\nEngineered front-end performance specifically for media-heavy editorial content — optimized asset loading, lazy rendering strategies, and CDN-friendly output — ensuring the Newsroom performed reliably during high-visibility brand announcements and watch launches.",[11,201,48],{"id":47},[16,203,204,206,207,210,211,214,215,217],{},[29,205,53],{}," Vue.js, Sitecore CMS integration\n",[29,208,209],{},"Analytics & Tracking:"," Google Tag Manager (GTM)\n",[29,212,213],{},"Design:"," Figma\n",[29,216,65],{}," Agile, cross-functional collaboration with Rolex brand and UX teams",{"title":68,"searchDepth":69,"depth":69,"links":219},[220,221,222],{"id":13,"depth":69,"text":14},{"id":24,"depth":69,"text":25},{"id":47,"depth":69,"text":48},"Rolex",{},3,"\u002Fprojects\u002Frolex-lead-developer","2020 – 2021",{"title":169,"description":68},[161,230,231,232],"Sitecore","GTM","Figma","projects\u002Frolex-lead-developer","Architected the global Rolex Newsroom and modernized front-end practices for a high-traffic luxury media platform.","AY0_4TTOrDbKxnKIIDpwXT77p4AqMmETQIk4g4ZsK4s",{"id":237,"title":238,"body":239,"client":289,"coverImage":75,"description":68,"extension":76,"featured":77,"meta":290,"navigation":77,"order":291,"path":292,"period":293,"role":157,"seo":294,"stack":295,"stem":297,"summary":298,"__hash__":299},"projects\u002Fprojects\u002Floreal-lead-developer.md","L'Oréal — Front-End Lead Developer",{"type":8,"value":240,"toc":284},[241,243,246,249,251,257,263,269,271],[11,242,14],{"id":13},[16,244,245],{},"At L'Oréal via Valtech, I led front-end development for a major redesign of the group's institutional web presence — a large-scale project requiring both UI engineering rigour and the discipline to deliver consistent quality across a highly distributed brand portfolio. L'Oréal's digital properties span dozens of brands with distinct identities, yet share underlying infrastructure: the architecture had to be flexible enough to accommodate brand variation while maintaining a coherent, maintainable foundation.",[16,247,248],{},"The project combined execution with standards work: beyond delivering the redesign, a significant part of the role involved establishing and enforcing front-end practices that would outlive the project and scale across the broader team.",[11,250,25],{"id":24},[16,252,253,256],{},[29,254,255],{},"Multi-Brand UI Architecture","\nDesigned the front-end architecture for the redesigned institutional platform, ensuring robust UI structure capable of serving multiple brand contexts from a shared component library. The approach balanced brand-specific customization needs against the maintenance overhead of divergent codebases — a deliberate architectural trade-off with long-term sustainability as the primary constraint.",[16,258,259,262],{},[29,260,261],{},"SEO & Accessibility Standards","\nEngineered and enforced strict front-end standards for SEO performance and full WCAG accessibility compliance across all templates. This was systematic work: defining the standards, building them into the component contracts, and validating compliance as part of the delivery process rather than as a post-hoc audit. The result was a platform that met accessibility requirements at launch rather than accumulating accessibility debt.",[16,264,265,268],{},[29,266,267],{},"Front-End Core Standards","\nEstablished shared front-end coding standards and review practices for the project team, creating the baseline of consistency needed to deliver at scale. Standardizing patterns early reduced integration friction and made cross-team code review meaningful rather than superficial.",[11,270,48],{"id":47},[16,272,273,206,275,214,277,280,281,283],{},[29,274,53],{},[29,276,213],{},[29,278,279],{},"Standards:"," SEO hardening, WCAG accessibility compliance\n",[29,282,65],{}," Scrum, multi-team coordination",{"title":68,"searchDepth":69,"depth":69,"links":285},[286,287,288],{"id":13,"depth":69,"text":14},{"id":24,"depth":69,"text":25},{"id":47,"depth":69,"text":48},"L'Oréal",{},4,"\u002Fprojects\u002Floreal-lead-developer","2019 – 2020",{"title":238,"description":68},[161,230,232,296],"Scrum","projects\u002Floreal-lead-developer","Led front-end development for a major institutional website redesign across a global multi-brand beauty group.","wIlmQ8sCrVfC0TfPKL7PhxLvLxgxCenG3uaNMI_om9g",{"id":301,"title":302,"body":303,"client":369,"coverImage":75,"description":68,"extension":76,"featured":77,"meta":370,"navigation":77,"order":371,"path":372,"period":373,"role":374,"seo":375,"stack":376,"stem":381,"summary":382,"__hash__":383},"projects\u002Fprojects\u002Frsfc-open-source.md","RSFC — React Single File Components",{"type":8,"value":304,"toc":364},[305,309,317,320,324,349,353],[11,306,308],{"id":307},"overview","Overview",[16,310,311,312,316],{},"RSFC brings Vue's Single File Component authoring experience to React — collocating component logic, JSX, and styles in a single ",[313,314,315],"code",{},".rsfc"," file with full tooling support.",[16,318,319],{},"The project is a monorepo shipping five packages: the core runtime, a Vite plugin, a Webpack loader, a VS Code extension with Volar-based language server, and an interactive playground.",[11,321,323],{"id":322},"highlights","Highlights",[325,326,327,337,343],"ul",{},[328,329,330,333,334,336],"li",{},[29,331,332],{},"Volar LSP integration"," — syntax highlighting, intellisense, and diagnostics inside ",[313,335,315],{}," files",[328,338,339,342],{},[29,340,341],{},"Build-tool agnostic"," — works with Vite and Webpack via dedicated plugins",[328,344,345,348],{},[29,346,347],{},"Zero runtime overhead"," — files are compiled at build time to standard React components",[11,350,352],{"id":351},"links","Links",[325,354,355],{},[328,356,357,358],{},"GitHub: ",[359,360,361],"a",{"href":361,"rel":362},"https:\u002F\u002Fgithub.com\u002FGeoffreyCasaubon\u002Frsfc",[363],"nofollow",{"title":68,"searchDepth":69,"depth":69,"links":365},[366,367,368],{"id":307,"depth":69,"text":308},{"id":322,"depth":69,"text":323},{"id":351,"depth":69,"text":352},"RSFC",{},5,"\u002Fprojects\u002Frsfc-open-source","2025 – Present","Creator · Open Source",{"title":302,"description":68},[86,377,378,379,380],"Vite","Webpack","VS Code Extension API","Volar LSP","projects\u002Frsfc-open-source","Vue-style Single File Components for React. Full VS Code extension with Volar-based LSP. Monorepo covering core runtime, vite-plugin, webpack-loader, vscode-ext, and playground.","oqm64i5fWBuRsccVPjgnRdAw7shIgb-13iFwcnbNxa0",{"id":385,"title":386,"body":387,"client":440,"coverImage":75,"description":68,"extension":76,"featured":77,"meta":441,"navigation":77,"order":442,"path":443,"period":444,"role":445,"seo":446,"stack":447,"stem":450,"summary":451,"__hash__":452},"projects\u002Fprojects\u002Fvaltech-developer.md","Valtech — Front-End Developer",{"type":8,"value":388,"toc":435},[389,391,394,397,399,405,411,417,419],[11,390,14],{"id":13},[16,392,393],{},"At Valtech, I worked as a front-end developer on digital projects for a portfolio of some of the world's most prestigious luxury maisons — Jaeger-LeCoultre, Hermès, and Van Cleef & Arpels. This was the formative period of my luxury digital specialization: learning to operate at the intersection of exacting brand standards, demanding visual quality, and the technical rigour required to deliver at the level these clients expect.",[16,395,396],{},"Working across multiple brands within a major digital agency meant rapid context-switching, exposure to varied project types, and the discipline to absorb brand-specific constraints quickly and translate them into implementation decisions.",[11,398,25],{"id":24},[16,400,401,404],{},[29,402,403],{},"Luxury Brand Digital Delivery","\nDelivered front-end solutions across distinct luxury maisons, each with its own identity, design language, and technical requirements. Jaeger-LeCoultre required precision in representing horological heritage digitally; Hermès demanded restraint and craft in every UI interaction; Van Cleef & Arpels brought the complexity of jewellery storytelling to the web. Each project sharpened the ability to serve a brand's vision technically without compromise.",[16,406,407,410],{},[29,408,409],{},"Adobe AEM Integration","\nBuilt front-end solutions integrated within Adobe Experience Manager (AEM), the CMS of choice for several major luxury clients. Developing within AEM's authoring model required understanding both the technical constraints of the platform and the editorial workflows of brand marketing teams — producing templates and components that were as usable for content editors as they were visually faithful to brand guidelines.",[16,412,413,416],{},[29,414,415],{},"Vue.js Adoption in Luxury Context","\nApplied Vue.js within luxury brand projects at a time when component-based front-end architecture was still being adopted in the agency space. Early, consistent use of Vue.js across projects built the foundation for the lead developer and architectural roles that followed.",[11,418,48],{"id":47},[16,420,421,423,424,427,428,430,431,434],{},[29,422,53],{}," JavaScript, Vue.js\n",[29,425,426],{},"CMS:"," Adobe AEM\n",[29,429,213],{}," Figma, Photoshop\n",[29,432,433],{},"Clients:"," Jaeger-LeCoultre, Hermès, Van Cleef & Arpels",{"title":68,"searchDepth":69,"depth":69,"links":436},[437,438,439],{"id":13,"depth":69,"text":14},{"id":24,"depth":69,"text":25},{"id":47,"depth":69,"text":48},"Valtech",{},7,"\u002Fprojects\u002Fvaltech-developer","2017 – 2019","Front-End Developer",{"title":386,"description":68},[448,161,449,232],"JavaScript","Adobe AEM","projects\u002Fvaltech-developer","Delivered front-end solutions for luxury maisons including Jaeger-LeCoultre, Hermès, and Van Cleef & Arpels.","Hc_mTrvAvyfujyaEcTRTCp5VBDxm3ER0RRBLB0rObog",[454,607,791],{"id":455,"title":456,"body":457,"coverImage":595,"date":596,"description":461,"excerpt":75,"extension":76,"meta":597,"navigation":77,"path":603,"published":77,"seo":604,"stem":605,"__hash__":606},"blog\u002Fblog\u002Fpo-agent-eve-boring-to-build.md","I Built a PO Agent That Knows My Code, My Tickets, and My Docs. eve Made It Boring to Build.",{"type":8,"value":458,"toc":586},[459,462,465,468,471,475,478,481,483,487,490,493,496,498,502,509,512,515,518,520,524,527,541,544,547,549,553,556,559,562,564,568,571,574,577,579,583],[16,460,461],{},"I run several personal projects at the same time, on top of a full-time job. The part that breaks first is never the code. It's tracking. Specs drift, tickets go stale, docs stop matching what's actually shipped, and I lose an hour every week just reconstructing where a project stands.",[16,463,464],{},"What I wanted wasn't another chatbot. I wanted something closer to a PO: an agent that can read my code, write and update specs, follow issues across the tools I actually use, and pull real data when I ask it a real question. Something that knows the project the way I do, without me re-explaining it every time.",[16,466,467],{},"That's what became my personal PO agent. This is the story of building it, and of eve, the framework I still don't see anyone actually building with yet.",[469,470],"hr",{},[11,472,474],{"id":473},"where-this-started-vercel-ship","Where This Started: Vercel Ship",[16,476,477],{},"I was in London for Vercel Ship when eve got announced, live, on stage, next to a stack of other launches under the Agent Stack banner. Most of what gets unveiled at these events blurs together by the time you're on the train home. This one didn't. The pitch was \"Next.js for agents,\" and I've spent enough years inside Nuxt and Next to know exactly what that promise means if it actually holds: an agent that's a directory of files, not a pile of glue code you rebuild every time.",[16,479,480],{},"I went home and tried to break it on a real problem before I let myself get excited about it.",[469,482],{},[11,484,486],{"id":485},"what-i-tried-before-eve","What I Tried Before eve",[16,488,489],{},"I didn't land on eve first. I tried OpenClaw, Hermes, and even LangChain, back before \"agentic\" was the word everyone reached for.",[16,491,492],{},"OpenClaw and Hermes are fully-fledged standalone runtimes, and that's precisely the problem: you inherit an entire application's worth of configuration surface just to get one agent talking to your tools. Setup took longer than it should have, and the security model never felt solid. I'm not the only one who's noticed. Academic security researchers have already published attack benchmarks against OpenClaw, documenting real vulnerabilities across prompt handling, tool use, and memory retrieval. LangChain sits at the opposite extreme: it's a library, not a working agent, so you spend your first week writing the plumbing eve gives you for free.",[16,494,495],{},"I wanted a framework, not an application, and not a pile of primitives either. Something where adding a new capability means adding a file, not learning a new subsystem or assembling one from scratch.",[469,497],{},[11,499,501],{"id":500},"why-eve","Why eve",[16,503,504,505,508],{},"eve's core idea is that an agent is a directory. Markdown for instructions and skills, TypeScript for tools, nothing to register by hand. Add a file under ",[313,506,507],{},"tools\u002F",", and the filename becomes the tool name. Add a markdown skill, and it's loaded only when it's relevant instead of bloating every prompt.",[16,510,511],{},"The detail almost nobody mentions: eve's HTTP layer runs on Nitro, the same server engine that powers Nuxt. I've spent years inside Nuxt, so this wasn't a neutral detail for me. It meant the deployment story - build output, portability across hosts, the shape of the compiled app - was already familiar before I wrote a single tool.",[16,513,514],{},"Subagents are where it clicks for personal tooling specifically. Each subagent gets its own sandbox, isolated from its parent, so I could give my agent a GitHub subagent, a Jira subagent, a Confluence subagent, and later a Notion and a PostHog one, without any of them sharing a blast radius.",[16,516,517],{},"Adding the PostHog subagent, tool and connection wired end to end including its API key auth, took about ten minutes. The GitHub CLI connector was the same, roughly ten minutes to a working tool.",[469,519],{},[11,521,523],{"id":522},"what-it-actually-does","What It Actually Does",[16,525,526],{},"It's built on eve, with a thin routing layer on top that dispatches requests to specialist subagents based on intent. Requests get routed to specialist subagents:",[325,528,529,532,535,538],{},[328,530,531],{},"A GitHub subagent that reads code, opens branches, and drafts PRs",[328,533,534],{},"A Jira and Confluence subagent for tracking and documentation",[328,536,537],{},"A Notion subagent for the project pages I actually use day to day",[328,539,540],{},"A PostHog subagent that pulls real usage data when I ask a real question",[16,542,543],{},"Every subagent that can write anything goes through an approval gate. Nothing lands in a repo, a ticket, or a doc without me confirming it first. That's not a nice-to-have. It's the only reason I trust this thing to touch real projects instead of a sandboxed demo repo.",[16,545,546],{},"The result is closer to a PO than a chatbot. I can ask it to draft a spec from a rough idea, and it pulls the current state of the code and the existing tickets before writing anything, instead of hallucinating a plan that ignores what already exists.",[469,548],{},[11,550,552],{"id":551},"security-without-overselling-it","Security, Without Overselling It",[16,554,555],{},"I want to be precise here, because it's easy to borrow eve's strongest security pitch without checking whether it applies to your actual setup.",[16,557,558],{},"eve's headline security feature is credential brokering: secrets never enter the sandbox at all, they're injected at the network firewall on a per-domain basis. That's a real feature, and it's genuinely strong, but it's specific to the Vercel Sandbox and microsandbox backends.",[16,560,561],{},"I run it locally in development and deploy it to my own VPS, which means the sandbox backend is Docker. Docker gives me real isolation, each subagent runs in its own container, and one subagent misbehaving doesn't reach into another one's filesystem. What Docker does not give me is per-domain credential brokering. It only supports allow-all or deny-all network policy, not the fine-grained firewall injection Vercel Sandbox offers.",[469,563],{},[11,565,567],{"id":566},"the-part-i-dont-say-enough","The Part I Don't Say Enough",[16,569,570],{},"This started as an experiment. A side project to see if I could stop losing an hour a week to project bookkeeping. It quietly stopped being an experiment somewhere in the last few weeks, and now I notice when it's down.",[16,572,573],{},"That's the uncomfortable part, not the beta label on the framework underneath it. I built a tool, alone, on infrastructure I self-host, and it became load-bearing for how I run every personal project I care about. There's no team backing it up if it breaks, no support contract, just me and whatever I decided to write six months ago. I'm fine with that trade. I'd rather admit I made it than pretend the tool arrived fully hardened.",[16,575,576],{},"Self-hosted is where it lives for now, not where it stays. The next move I actually want to make is putting it on Vercel directly and picking up the credential brokering I gave up by running Docker on my own VPS.",[469,578],{},[11,580,582],{"id":581},"conclusion","Conclusion",[16,584,585],{},"Most of what's been written about eve so far is about the pitch. This is about the six weeks after the pitch, spent wiring it into tools I actually use until it turned into something I depend on without thinking about it. I went in for one framework, and I'm coming out wanting to test the rest of what Vercel shipped alongside it - Connect, the Workflow SDK, Vercel Agent watching production and opening its own PRs. That's the only review of a framework that means anything to me, and it's the one nobody else has published yet.",{"title":68,"searchDepth":69,"depth":69,"links":587},[588,589,590,591,592,593,594],{"id":473,"depth":69,"text":474},{"id":485,"depth":69,"text":486},{"id":500,"depth":69,"text":501},{"id":522,"depth":69,"text":523},{"id":551,"depth":69,"text":552},{"id":566,"depth":69,"text":567},{"id":581,"depth":69,"text":582},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1604688596260-0ca6e1c2e471?auto=format&fit=crop&w=1920&h=1080&q=80","2026-07-11",{"tags":598},[599,600,601,602],"ai-agents","eve","developer-tools","side-projects","\u002Fblog\u002Fpo-agent-eve-boring-to-build",{"title":456,"description":461},"blog\u002Fpo-agent-eve-boring-to-build","OEcTqpHMPj8-yAjGKOjRe2r9D6SMGnNBv8lwJzL7eBA",{"id":608,"title":609,"body":610,"coverImage":778,"date":779,"description":621,"excerpt":75,"extension":76,"meta":780,"navigation":77,"path":787,"published":77,"seo":788,"stem":789,"__hash__":790},"blog\u002Fblog\u002Fstop-the-ai-bullshit.md","Stop the AI bullshit",{"type":8,"value":611,"toc":770},[612,616,622,625,628,631,633,637,640,643,646,649,652,654,658,661,664,667,669,673,676,679,682,685,692,694,698,701,704,707,710,713,715,719,722,728,731,737,743,749,752,754,758,761,764,767],[613,614,609],"h1",{"id":615},"stop-the-ai-bullshit",[16,617,618],{},[619,620,621],"em",{},"Not the tools. The narrative.",[16,623,624],{},"I never liked AI.",[16,626,627],{},"Not the technology itself, necessarily. But the way it arrived. The artists who woke up to find their work scraped without consent. The breathless LinkedIn threads. The \"I built a SaaS in 72 hours and it's printing $40k MRR\" posts that somehow never had a follow-up six months later. None of that made me want to get involved.",[16,629,630],{},"So I didn't. For longer than I probably should have.",[469,632],{},[11,634,636],{"id":635},"the-hype-has-a-body-count","The hype has a body count",[16,638,639],{},"Here's what the LinkedIn crowd doesn't post about.",[16,641,642],{},"Uber's CTO told The Information earlier this year that the company burned through its entire 2026 AI coding tools budget in four months. The response wasn't to celebrate velocity gains. It was to cap every employee at $1,500\u002Fmonth per tool and build an internal approval process for exceptions.",[16,644,645],{},"A UBS survey of 125 organizations found that only 11% managed to move AI projects into production within two years. Gartner predicted 30% of generative AI projects would be abandoned after proof of concept by end of 2025. Nearly 70% of executives say they'll cut AI budgets if ROI targets aren't met.",[16,647,648],{},"These aren't fringe cases. This is the enterprise reality behind the hype.",[16,650,651],{},"The SaaS that prints millions in 3 days exists. It's also not the median outcome. And building your engineering strategy around the median LinkedIn post is how you end up explaining to your CTO why you spent six months and learned nothing.",[469,653],{},[11,655,657],{"id":656},"what-actually-changed-my-mind","What actually changed my mind",[16,659,660],{},"Not a revelation. Not a conference talk. I started using it like a tool instead of waiting for it to be magic.",[16,662,663],{},"The shift happened when I stopped asking AI to produce and started asking it to assist. Specifically: to do the things I know how to do, but faster and with less friction.",[16,665,666],{},"Drafting technical tickets. Writing unit tests. Documenting code that was never going to get documented otherwise. Structuring QA impact descriptions so the people testing my work actually had context to work with. These aren't glamorous use cases. They're also the ones where AI consistently delivers without hallucinating your entire architecture.",[469,668],{},[11,670,672],{"id":671},"the-part-nobody-talks-about-context-is-everything","The part nobody talks about: context is everything",[16,674,675],{},"I work on a large-scale Nuxt.js platform. The kind of codebase where a seemingly innocent refactor can break three markets and two checkout flows simultaneously, for reasons that live in a Confluence page from 2021 that nobody has read since.",[16,677,678],{},"You cannot throw that at an LLM and expect it to understand. It won't. It can't. It doesn't know about the ticket that caused the incident. It doesn't know why that specific pattern exists. It doesn't know what \"don't touch the hydration logic\" actually means in your context.",[16,680,681],{},"So I built context instead of expectations.",[16,683,684],{},"Custom prompts that encode our architecture decisions. Copilot instructions that reflect our coding conventions. Skills that know what a good ticket looks like on this project, what QA needs to test effectively, what documentation actually needs to say.",[16,686,687,688,691],{},"The AI doesn't review code against generic best practices. It reviews code against ",[619,689,690],{},"our"," best practices, because I took the time to write those down in a format it could use. That work - the formalization of what lived in people's heads - was entirely human. The AI just became the reviewer that applies it consistently.",[469,693],{},[11,695,697],{"id":696},"sovereignty-isnt-a-buzzword","Sovereignty isn't a buzzword",[16,699,700],{},"Here's the uncomfortable part.",[16,702,703],{},"If you let AI write your code without understanding it, you will eventually stand in front of a production incident at 3am and have nothing. No intuition. No mental model. No ability to reason about what broke and why. The AI is not on call. It doesn't have a pager. It doesn't carry the weight of what it generated.",[16,705,706],{},"You do.",[16,708,709],{},"This is why \"AI replaces developers\" is not just wrong, it's dangerous framing. A developer who can't explain their own codebase is not a developer using AI. They're a liability with a Cursor subscription.",[16,711,712],{},"Staying sovereign over your code means understanding what goes in before it ships. AI can write the first draft. You have to own the final version, not just approve it because it looked right at a glance.",[469,714],{},[11,716,718],{"id":717},"what-this-actually-looks-like-in-practice","What this actually looks like in practice",[16,720,721],{},"The workflow I've settled on, using GitHub Copilot at work and Claude for personal projects:",[16,723,724,727],{},[29,725,726],{},"Architecture validation",": feed the AI your architecture rules, your patterns, your conventions. Use it to review code against those constraints, not against whatever it was trained on.",[16,729,730],{},"That said, we do use AI for architecture and feature design. But not alone, and not without constraints. Think of it as a senior developer who needs clear boundaries and a well-defined scope. You give it the context, the constraints, the non-negotiables. It proposes. You decide. Sometimes it ignores the guardrails anyway and goes off-script. That's fine. Managing that drift is part of the workflow, not a failure of the tool. You course-correct and move on. That's what working with any opinionated collaborator looks like.",[16,732,733,736],{},[29,734,735],{},"TDD",": let AI generate the test scaffolding. You write the assertions that matter. You decide what failure looks like.",[16,738,739,742],{},[29,740,741],{},"Documentation and tickets",": this is where AI earns its keep cleanly. Better tickets mean better handoffs. Better QA descriptions mean fewer back-and-forths. The output is readable by humans, reviewed by you, signed off by you.",[16,744,745,748],{},[29,746,747],{},"Simplification",": when you've written something that works but is too complex, AI is good at finding a cleaner path. You still decide if the cleaner path is actually better given your constraints.",[16,750,751],{},"Notice what's not on this list: generating features from scratch, designing systems, making architectural decisions without a human in the loop. Not because AI can't produce something that looks right, but because \"looks right\" is not the bar. \"Is right for this codebase, this team, this constraint\" is the bar. And only you have enough context to evaluate that.",[469,753],{},[11,755,757],{"id":756},"the-actual-takeaway","The actual takeaway",[16,759,760],{},"There's an old principle in software: garbage in, garbage out. It predates AI by decades. But with AI, it takes on a different weight. A human developer working with bad context produces bad output slowly, visibly, with friction that forces the problem to surface. AI working with bad context produces bad output fast, confidently, and well-formatted. It looks right. It reads well. It passes a casual review. That's not a feature. That's the risk.",[16,762,763],{},"The quality of what you get out is a direct function of the expertise and structure you put in. AI doesn't compensate for shallow thinking. It scales it.",[16,765,766],{},"Stop waiting for AI to be magic. Start building the context that makes it useful.",[16,768,769],{},"That's the whole thing.",{"title":68,"searchDepth":69,"depth":69,"links":771},[772,773,774,775,776,777],{"id":635,"depth":69,"text":636},{"id":656,"depth":69,"text":657},{"id":671,"depth":69,"text":672},{"id":696,"depth":69,"text":697},{"id":717,"depth":69,"text":718},{"id":756,"depth":69,"text":757},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1620712943543-bcc4688e7485?auto=format&fit=crop&w=1920&h=1080&q=80","2026-06-14",{"tags":781},[782,783,784,785,786],"ai","engineering","tooling","workflow","opinion","\u002Fblog\u002Fstop-the-ai-bullshit",{"title":609,"description":621},"blog\u002Fstop-the-ai-bullshit","lRJrEpVFg7mDyFvj9r9HHiYIvdlH9wueImOMcgEhhbo",{"id":792,"title":793,"body":794,"coverImage":1316,"date":1317,"description":1318,"excerpt":75,"extension":76,"meta":1319,"navigation":77,"path":1325,"published":77,"seo":1326,"stem":1327,"__hash__":1328},"blog\u002Fblog\u002Freact-sfc-why-i-built-a-vue-style-single-file-component-system-for-react.md","react-sfc: Why I Built a Vue-Style Single File Component System for React",{"type":8,"value":795,"toc":1308},[796,799,806,809,812,814,818,821,828,835,838,843,845,849,852,858,1180,1183,1189,1191,1195,1198,1201,1214,1217,1219,1223,1226,1255,1257,1261,1267,1270,1272,1276,1279,1302,1305],[613,797,793],{"id":798},"react-sfc-why-i-built-a-vue-style-single-file-component-system-for-react",[16,800,801,802,805],{},"I've been a Vue developer for years. Not the kind who picked it by accident or because it was on the job description. The kind who genuinely thinks the Vue mental model is one of the best things to happen to frontend development. Single File Components in particular. The idea that your template, your logic, and your styles live together in one clean, clearly separated file just ",[619,803,804],{},"makes sense"," to me.",[16,807,808],{},"But I'm not naive enough to think Vue is the only world worth knowing. React dominates job boards, open source, and conversations at every tech conference. So at some point, I made the decision to stop dancing around it and actually go deep.",[16,810,811],{},"That's where the trouble started.",[469,813],{},[11,815,817],{"id":816},"reacts-templating-model-from-a-vue-developers-perspective","React's templating model, from a Vue developer's perspective",[16,819,820],{},"JSX is not bad. I want to be clear about that upfront. It's a deliberate design choice with real advantages, and millions of developers work with it happily every day.",[16,822,823,824,827],{},"But for me, coming from Vue SFCs, it felt ",[619,825,826],{},"wrong"," in a way I couldn't shake.",[16,829,830,831,834],{},"The HTML mixed directly into JavaScript return statements. Ternaries for conditional rendering. The constant context-switching between \"I'm writing markup\" and \"I'm writing logic\" happening in the same breath. In Vue, the ",[313,832,833],{},"\u003Ctemplate>"," block is just HTML. Clean, readable, obvious. In React, the line between markup and code is blurry by design.",[16,836,837],{},"I know this is partly a matter of habit. But I also think it's a real friction point for developers who come from a template-first background. And instead of just grinding through it, I asked myself a different question:",[16,839,840],{},[619,841,842],{},"What if I didn't have to?",[469,844],{},[11,846,848],{"id":847},"the-experiment-building-a-parser-instead-of-adapting","The experiment: building a parser instead of adapting",[16,850,851],{},"The idea was simple: write React components the way I'd write Vue components, and let a parser handle the transformation.",[16,853,854,855,857],{},"A ",[313,856,315],{}," file would look like this:",[859,860,864],"pre",{"className":861,"code":862,"language":863,"meta":68,"style":68},"language-html shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Cdiv class=\"counter\">\n    \u003Cp>Count: {count}\u003C\u002Fp>\n    \u003Cbutton onClick={increment}>+\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n \n\u003Cscript>\n  import { useState } from 'react';\n \n  export function useLogic() {\n    const [count, setCount] = useState(0);\n    const increment = () => setCount(c => c + 1);\n    return { count, increment };\n  }\n\u003C\u002Fscript>\n \n\u003Cstyle>\n  .counter { display: flex; flex-direction: column; gap: 8px; }\n\u003C\u002Fstyle>\n","html",[313,865,866,881,902,916,938,947,957,962,972,991,996,1011,1047,1087,1096,1102,1111,1116,1126,1171],{"__ignoreMap":68},[867,868,870,874,878],"span",{"class":869,"line":79},"line",[867,871,873],{"class":872},"sVt8B","\u003C",[867,875,877],{"class":876},"s9eBZ","template",[867,879,880],{"class":872},">\n",[867,882,883,886,889,893,896,900],{"class":869,"line":69},[867,884,885],{"class":872},"  \u003C",[867,887,888],{"class":876},"div",[867,890,892],{"class":891},"sScJk"," class",[867,894,895],{"class":872},"=",[867,897,899],{"class":898},"sZZnC","\"counter\"",[867,901,880],{"class":872},[867,903,904,907,909,912,914],{"class":869,"line":225},[867,905,906],{"class":872},"    \u003C",[867,908,16],{"class":876},[867,910,911],{"class":872},">Count: {count}\u003C\u002F",[867,913,16],{"class":876},[867,915,880],{"class":872},[867,917,918,920,923,926,928,931,934,936],{"class":869,"line":291},[867,919,906],{"class":872},[867,921,922],{"class":876},"button",[867,924,925],{"class":891}," onClick",[867,927,895],{"class":872},[867,929,930],{"class":898},"{increment}",[867,932,933],{"class":872},">+\u003C\u002F",[867,935,922],{"class":876},[867,937,880],{"class":872},[867,939,940,943,945],{"class":869,"line":371},[867,941,942],{"class":872},"  \u003C\u002F",[867,944,888],{"class":876},[867,946,880],{"class":872},[867,948,950,953,955],{"class":869,"line":949},6,[867,951,952],{"class":872},"\u003C\u002F",[867,954,877],{"class":876},[867,956,880],{"class":872},[867,958,959],{"class":869,"line":442},[867,960,961],{"class":872}," \n",[867,963,965,967,970],{"class":869,"line":964},8,[867,966,873],{"class":872},[867,968,969],{"class":876},"script",[867,971,880],{"class":872},[867,973,975,979,982,985,988],{"class":869,"line":974},9,[867,976,978],{"class":977},"szBVR","  import",[867,980,981],{"class":872}," { useState } ",[867,983,984],{"class":977},"from",[867,986,987],{"class":898}," 'react'",[867,989,990],{"class":872},";\n",[867,992,994],{"class":869,"line":993},10,[867,995,961],{"class":872},[867,997,999,1002,1005,1008],{"class":869,"line":998},11,[867,1000,1001],{"class":977},"  export",[867,1003,1004],{"class":977}," function",[867,1006,1007],{"class":891}," useLogic",[867,1009,1010],{"class":872},"() {\n",[867,1012,1014,1017,1020,1024,1027,1030,1033,1035,1038,1041,1044],{"class":869,"line":1013},12,[867,1015,1016],{"class":977},"    const",[867,1018,1019],{"class":872}," [",[867,1021,1023],{"class":1022},"sj4cs","count",[867,1025,1026],{"class":872},", ",[867,1028,1029],{"class":1022},"setCount",[867,1031,1032],{"class":872},"] ",[867,1034,895],{"class":977},[867,1036,1037],{"class":891}," useState",[867,1039,1040],{"class":872},"(",[867,1042,1043],{"class":1022},"0",[867,1045,1046],{"class":872},");\n",[867,1048,1050,1052,1055,1058,1061,1064,1067,1069,1073,1076,1079,1082,1085],{"class":869,"line":1049},13,[867,1051,1016],{"class":977},[867,1053,1054],{"class":891}," increment",[867,1056,1057],{"class":977}," =",[867,1059,1060],{"class":872}," () ",[867,1062,1063],{"class":977},"=>",[867,1065,1066],{"class":891}," setCount",[867,1068,1040],{"class":872},[867,1070,1072],{"class":1071},"s4XuR","c",[867,1074,1075],{"class":977}," =>",[867,1077,1078],{"class":872}," c ",[867,1080,1081],{"class":977},"+",[867,1083,1084],{"class":1022}," 1",[867,1086,1046],{"class":872},[867,1088,1090,1093],{"class":869,"line":1089},14,[867,1091,1092],{"class":977},"    return",[867,1094,1095],{"class":872}," { count, increment };\n",[867,1097,1099],{"class":869,"line":1098},15,[867,1100,1101],{"class":872},"  }\n",[867,1103,1105,1107,1109],{"class":869,"line":1104},16,[867,1106,952],{"class":872},[867,1108,969],{"class":876},[867,1110,880],{"class":872},[867,1112,1114],{"class":869,"line":1113},17,[867,1115,961],{"class":872},[867,1117,1119,1121,1124],{"class":869,"line":1118},18,[867,1120,873],{"class":872},[867,1122,1123],{"class":876},"style",[867,1125,880],{"class":872},[867,1127,1129,1132,1135,1138,1141,1144,1147,1150,1152,1155,1157,1160,1162,1165,1168],{"class":869,"line":1128},19,[867,1130,1131],{"class":891},"  .counter",[867,1133,1134],{"class":872}," { ",[867,1136,1137],{"class":1022},"display",[867,1139,1140],{"class":872},": ",[867,1142,1143],{"class":1022},"flex",[867,1145,1146],{"class":872},"; ",[867,1148,1149],{"class":1022},"flex-direction",[867,1151,1140],{"class":872},[867,1153,1154],{"class":1022},"column",[867,1156,1146],{"class":872},[867,1158,1159],{"class":1022},"gap",[867,1161,1140],{"class":872},[867,1163,1164],{"class":1022},"8",[867,1166,1167],{"class":977},"px",[867,1169,1170],{"class":872},"; }\n",[867,1172,1174,1176,1178],{"class":869,"line":1173},20,[867,1175,952],{"class":872},[867,1177,1123],{"class":876},[867,1179,880],{"class":872},[16,1181,1182],{},"The parser would take that, extract each block, wire the logic to the template, and output valid React code. No JSX in your face. No mixed concerns. Just the separation I was used to.",[16,1184,1185,1186,1188],{},"I built the first working version over two or three weekends, with Claude helping me think through the parsing logic and edge cases. It was a genuine collaboration. I knew what I wanted the output to look like; Claude helped me reason through how to get there. The result was rough but functional: a Vite plugin that processed ",[313,1187,315],{}," files and compiled them into React components.",[469,1190],{},[11,1192,1194],{"id":1193},"the-vs-code-plugin-a-rabbit-hole-i-didnt-expect","The VS Code plugin: a rabbit hole I didn't expect",[16,1196,1197],{},"Once I had something working, I shared it. The reaction was small but real: a few people found it interesting, asked questions, opened issues. That was enough to push me toward the next step: proper editor support.",[16,1199,1200],{},"I'd never built a VS Code extension before. I assumed it would be a weekend project. It was not.",[16,1202,1203,1204,1207,1208,1213],{},"The complexity of language tooling surprised me. Syntax highlighting is straightforward enough, but getting ",[619,1205,1206],{},"real"," support (IntelliSense, type checking, hover docs inside a custom file format) requires hooking into the language server ecosystem. That's where ",[359,1209,1212],{"href":1210,"rel":1211},"https:\u002F\u002Fvolarjs.dev\u002F",[363],"Volar"," came in. Volar is the framework that powers Vue's VS Code support, and it's designed exactly for this kind of embedded language scenario. Using it as a foundation made the plugin actually viable.",[16,1215,1216],{},"It's still one of the more technically interesting things I've built, even if the use case is deliberately niche.",[469,1218],{},[11,1220,1222],{"id":1221},"what-react-sfc-can-do-today","What react-sfc can do today",[16,1224,1225],{},"The project is functional and usable. Here's what's currently supported:",[325,1227,1228,1243,1246,1249,1252],{},[328,1229,1230,1232,1233,1026,1235,1238,1239,1242],{},[313,1231,315],{}," file format with ",[313,1234,833],{},[313,1236,1237],{},"\u003Cscript>",", and ",[313,1240,1241],{},"\u003Cstyle>"," blocks",[328,1244,1245],{},"Vite plugin for compilation",[328,1247,1248],{},"VS Code extension with syntax highlighting and basic language support",[328,1250,1251],{},"Scoped styles",[328,1253,1254],{},"TypeScript support in the script block\nIs it production-ready for a large codebase? Probably not yet. Is it a working proof of concept that makes React feel more approachable for Vue developers? Yes, genuinely.",[469,1256],{},[11,1258,1260],{"id":1259},"why-this-project-exists-and-the-honest-answer","Why this project exists (and the honest answer)",[16,1262,1263,1264],{},"I'll be transparent about something: react-sfc started as a learning experiment with a slight troll energy. The Vue community has a long-running joke about JSX, and building a whole SFC system for React is a very specific way of saying ",[619,1265,1266],{},"\"I really don't like this.\"",[16,1268,1269],{},"But underneath the joke, there's a real point. Developer experience matters. The way you write code affects how you think about it. And the fact that I learned more about React internals, Vite plugins, VS Code extension development, and language servers by building this than I would have by just writing JSX for six months. That feels like the real win.",[469,1271],{},[11,1273,1275],{"id":1274},"try-it-break-it-contribute","Try it, break it, contribute",[16,1277,1278],{},"The project is open source and lives here:",[325,1280,1281,1291],{},[328,1282,1283,1140,1286],{},[29,1284,1285],{},"GitHub",[359,1287,1290],{"href":1288,"rel":1289},"https:\u002F\u002Fgithub.com\u002FGeoffreyCasaubon\u002Freact-sfc",[363],"github.com\u002FGeoffreyCasaubon\u002Freact-sfc",[328,1292,1293,1140,1296,1301],{},[29,1294,1295],{},"Demo & docs",[359,1297,1300],{"href":1298,"rel":1299},"https:\u002F\u002Fgeoffreycasaubon.github.io\u002Freact-sfc\u002F",[363],"geoffreycasaubon.github.io\u002Freact-sfc","\nIf you're a Vue developer curious about React, it might make the jump feel less jarring. If you're a React developer who thinks this is heresy, I genuinely want to hear why. And if you want to contribute (improving the parser, extending the VS Code plugin, or just opening an issue), you're very welcome.",[16,1303,1304],{},"Stars are also appreciated. I won't pretend otherwise.",[1123,1306,1307],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":68,"searchDepth":69,"depth":69,"links":1309},[1310,1311,1312,1313,1314,1315],{"id":816,"depth":69,"text":817},{"id":847,"depth":69,"text":848},{"id":1193,"depth":69,"text":1194},{"id":1221,"depth":69,"text":1222},{"id":1259,"depth":69,"text":1260},{"id":1274,"depth":69,"text":1275},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1551386215-d40c377867ab?auto=format&fit=crop&w=1920&q=80","2026-06-01","I've been a Vue developer for years. Not the kind who picked it by accident or because it was on the job description. The kind who genuinely thinks the Vue mental model is one of the best things to happen to frontend development. Single File Components in particular. The idea that your template, your logic, and your styles live together in one clean, clearly separated file just makes sense to me.",{"tags":1320},[1321,1322,1323,1324],"open-source","react","vue","dx","\u002Fblog\u002Freact-sfc-why-i-built-a-vue-style-single-file-component-system-for-react",{"title":793,"description":1318},"blog\u002Freact-sfc-why-i-built-a-vue-style-single-file-component-system-for-react","pz7YxCYQZMK8VCp_qMR_MUeF2jXhmG69DLreu75CMUQ",1783778328769]