alexop.dev

A Personal Blog from a simple web developer

Full Documentation

Full Blog Content: Complete blog posts with full content for deep context.

Blog

How I Became an International Speaker: I was too scared to publish my first blog post and ended up on stage at Vue Amsterdam. Here's the honest path from zero to international speaker, visibility first.
Claude Code Workflows: Deterministic Multi-Agent Orchestration: Workflows let you script how Claude Code fans out across dozens of subagents, then synthesizes the results. Here's how they work, the primitives, and the small example I built to understand them.
How to do AFK Coding: A pipeline for shipping a 5-point ticket while you're away from the keyboard: spec with the human in the loop, slice into vertical tickets, run a Ralph loop with TDD per slice, refactor, then let an agent-browser do QA.
How to Write UI Components That Stay Flexible: Most components break under their second or third variant — props pile up, shells get copy-pasted. Here's how compound components (the pattern behind Reka UI and shadcn-vue) keep a Dialog flexible without flag soup.
A Modern Quality Pipeline and Testing Strategy for Frontend Projects: A short, framework-agnostic concept of what a modern quality pipeline and testing strategy look like for any JavaScript or TypeScript frontend project.
Exploratory QA with AI Agents: Building a Site-Agnostic Harness: A thin Bun runner that hands a coding agent one charter and lets it drive a real browser through an exploratory QA session. Works with Claude, Codex, or Copilot, and any browser CLI.
How to Use Claude Code as an AI QA Tester with Agent Browser: Claude Code and Agent Browser let you test your web app in a real browser without hardcoded selectors. Manual browser control, AI-driven exploration, and structured JSON output.
How to Catch Hydration Errors in Playwright Tests (Astro, Nuxt, React SSR): A Playwright fixture that listens to the browser console for hydration mismatch warnings and fails your E2E tests when server and client HTML disagree.
App Screenshots: An AI Coding Agent Skill for Visual Documentation: Automate annotated screenshot documentation for any web app or live website using an AI coding agent skill. Works with Claude Code, Cursor, Windsurf, or any agent that supports custom skills.
The Software Factory: Why Your Team Will Never Work the Same Again: We already have everything we need to build software factories. Teams will change. The only variable is speed.
Building a Real-Time Todo App with Jazz and Vue 3: Build a real-time, offline-capable todo app with Jazz and Vue 3. Learn CoValues, drag-and-drop with fractional indexing, and shareable URLs. No backend needed.
How I Turned Claude Code's Thinking Indicator into a One Piece Adventure: Replace Claude Code's default spinner verbs with custom One Piece references using the spinnerVerbs config in settings.json.
How I Added Sound Effects to Claude Code with Hooks: Claude Code hooks let you run shell commands on lifecycle events. I wired up Age of Empires sound effects to session start, prompt submission, task completion, and context compaction.
Building a Walkthrough Skill for AI Coding Agents: How I built a skill that generates interactive codebase walkthroughs with clickable Mermaid diagrams—works with Claude Code, Amp, and any agent that supports the skills standard.
Claude Code Agent Teams: How Multiple Sessions Coordinate (2026): Agent teams let multiple Claude Code sessions coordinate, communicate, and self-organize. Here's how they work, when to use them, and what they cost.
VMark: Hand-Drawn Annotations for Presentations: Learn how to add animated hand-drawn annotations to your presentations using VMark. A complete tutorial covering all annotation types, colors, and timing controls.
Spec-Driven Development with Claude Code in Action: A practical workflow for tackling large refactors with Claude Code using parallel research subagents, written specs, and the new task system for context-efficient implementation.
My Opinionated ESLint + Oxlint Setup for Vue Projects: A battle-tested linting configuration that catches real bugs, enforces clean architecture, and runs fast using Oxlint and ESLint together.
Next Level GitHub Copilot: Agents, Instructions & Automation in VS Code: Workshop covering the transformation from LLM to Agent, context engineering, AGENTS.md, subagents, and skills in VS Code Copilot.
What's New in VS Code Copilot: January 2026 Update: Major updates to VS Code Copilot including parallel subagent execution, a new skills system, deeper Claude integration with extended thinking, terminal improvements with kitty keyboard protocol, and instruction files that now work everywhere.
Presentation Mode: Turn Your Blog Posts into Slides: A complete demo of presentation mode with v-click animations and drawing annotations. Press P to see keyboard navigation, incremental reveals, and press D to draw on slides!
Stop Bloating Your CLAUDE.md: Progressive Disclosure for AI Coding Tools: AI coding tools are stateless—every session starts fresh. The solution isn't cramming everything into CLAUDE.md, but building a layered context system where learnings accumulate in docs and specialized agents load on-demand.
How I Built a Skill That Lets Me Talk to Claude's Conversation Memory: How I built a skill that lets Claude search its own conversation history, turning it into a persistent coding partner that remembers past solutions.
In Five Years, Developers Won't Write Code By Hand: Software development as translation work is dying. Software engineering—the strategic, architectural discipline—is more valuable than ever. The shift is already here.
Mutation Testing with AI Agents When Stryker Doesn't Work: When Stryker doesn't support your test stack, AI agents can execute mutation testing manually. A practical approach for Vitest browser mode and Playwright.
Why You Don't Need the Nuxt MCP When You Use Claude Code: Why I use custom research agents instead of MCP servers for AI-assisted development. Learn how llms.txt enables context-efficient documentation fetching with a practical Nuxt Content agent example.
Claude Code Customization Guide (2026): CLAUDE.md vs Skills vs Subagents: When should you use CLAUDE.md, a slash command, a skill, or a subagent in Claude Code? A decision guide with real examples for each, so you stop guessing which one fits the job.
How to Customize Your Claude Code Status Line: Learn how to display model name, context usage, and cost directly in your terminal while using Claude Code. A step-by-step guide to creating custom status line scripts.
Vue 3 Testing Pyramid: A Practical Guide with Vitest Browser Mode: Learn a practical testing strategy for Vue 3 applications using composable unit tests, Vitest browser mode integration tests, and visual regression testing.
Building an AI QA Engineer with Claude Code and Playwright MCP: Learn how to build an automated QA engineer using Claude Code and Playwright MCP that tests your web app like a real user, runs on every pull request, and writes detailed bug reports.
Vue Composables Style Guide: Lessons from VueUse's Codebase: A practical guide for writing production-quality Vue 3 composables, distilled from studying VueUse's patterns for SSR safety, cleanup, and TypeScript.
A Claude Code TDD Skill: Forcing Red-Green-Refactor Discipline: Build a custom TDD workflow with Claude Code using skills and subagents that enforce Red-Green-Refactor discipline for your Vue projects.
Claude Code Notifications: Get Alerts When Tasks Finish (Hooks Setup): How to set up Claude Code notifications using hooks. Get desktop alerts when Claude finishes a task, needs your input, or requests permission, instead of watching the terminal.
Claude Code Slash Commands: A Complete Guide (2026): Learn how to transform Claude Code from a chatbot into a deterministic engine using Slash Commands. This guide covers the technical setup and a complete 'Full Circle' workflow that automates your entire feature lifecycle.
Claude Code Explained (2026): MCP, Skills, Subagents, Hooks & Plugins: A practical guide to Claude Code's features: MCP, CLAUDE.md, slash commands, subagents, hooks, plugins, skills, and scheduled tasks. Updated April 2026 with deferred tool loading, worktree isolation, agent teams, and more.
How to Build a Claude Code Plugin: Skills, Agents & Commands: How I built a Claude Code plugin to generate skills, agents, commands, and more—and stopped copy-pasting boilerplate.
Building a Modular Monolith with Nuxt Layers: A Practical Guide: Learn how to build scalable applications using Nuxt Layers to enforce clean architecture boundaries without the complexity of microservices.
How to Handle API Calls in Pinia with The Elm Pattern: Learn how to handle API calls in Pinia using the Elm pattern for predictable, testable side effects. Includes complete examples with the Pokemon API.
How to Write Better Pinia Stores with the Elm Pattern: Learn how to combine The Elm Architecture (TEA) principles with Pinia's private store pattern for testable, framework-agnostic state management in Vue applications.
How to build Microfrontends with Module Federation and Vue: Build a Vue 3 microfrontend app with Module Federation. Clear decisions, working code, and a small reference project.
Why You Need Something Hard in Your Life: The biggest paradox in life: the hardest things are usually the ones that help you grow. Exploring why challenge and difficulty are essential for meaning and personal development.
What Is the Model Context Protocol (MCP)? How It Works: Learn how MCP (Model Context Protocol) standardizes AI tool integration, enabling LLMs to interact with external services, databases, and APIs through a universal protocol similar to USB-C for AI applications.
How VueUse Solves SSR Window Errors in Vue Applications: Discover how VueUse solves SSR issues with browser APIs and keeps your Vue composables safe from 'window is not defined' errors.
Mastering GraphQL Fragments in Vue 3: Component-Driven Data Fetching: Part 3 of the Vue 3 + GraphQL series: Learn how to use GraphQL fragments with fragment masking to create truly component-driven data fetching in Vue 3.
How I Use Claude Code for Doing SEO Audits: Learn how to leverage Claude Code with Puppeteer MCP to perform comprehensive SEO audits in minutes, complete with automated analysis and actionable reports.
The Age of the Generalist: How AI is transforming software development and why high-agency generalists will thrive in this new era of technology.
How I Use LLMs: Learn how I use LLMs to improve my productivity and efficiency.
No Server, No Database: Smarter Related Posts in Astro with transformers.js: How I used Hugging Face embeddings to create smart “Related Posts” for my Astro blog—no backend, no database, just TypeScript.
Type-Safe GraphQL Queries in Vue 3 with GraphQL Code Generator: Part 2 of the Vue 3 + GraphQL series: generate fully-typed useQuery composables in Vue 3 with GraphQL Code Generator
LLM-Powered Search: o4-mini-high vs o3 vs Deep Research: A practical benchmark of three OpenAI models—o4-mini-high, o3, and Deep Research—for LLM-powered search. Compare their speed, depth, accuracy, citations, and cost when tackling real research questions like 'How does Vercel use Speakeasy for API testing?Ideal for developers exploring AI-assisted technical research
Watching OpenAI's o3 Model Sweat Over a Paul Morphy Mate-in-2: A breakdown of how an AI model attempts to solve a complex chess puzzle, showcasing its human-like reasoning, problem-solving attempts, and eventual reliance on external information.
Getting Started with GraphQL in Vue 3 — Complete Setup with Apollo: Part 1 of the Vue 3 + GraphQL series: a zero-to-hero guide for wiring up a Vue 3 app to a GraphQL API using the Composition API, Apollo Client, and Vite.
How ChatGPT Works (for Dummies): A plain English guide to how ChatGPT works—from token prediction to hallucinations. Perfect for developers who want to understand the AI they're building with.
Stop White Box Testing Vue Components Use Testing Library Instead: White Box testing makes your Vue tests fragile and misleading. In this post, I’ll show you how Testing Library helps you write Black Box tests that are resilient, realistic, and focused on actual user behavior
The Computed Inlining Refactoring Pattern in Vue: Learn how to improve Vue component performance and readability by applying the Computed Inlining pattern - a technique inspired by Martin Fowler's Inline Function pattern.
Are LLMs Creative?: Exploring the fundamental nature of creativity in Large Language Models compared to human creativity, sparked by reflections on OpenAI's latest image model.
The Inline Vue Composables Refactoring pattern: Apply Martin Fowler's Extract Function pattern to Vue components with inline composables to organize logic without creating new files.
Math Notation from 0 to 1: A Beginner's Guide: Learn the fundamental mathematical notations that form the building blocks of mathematical communication, from basic symbols to calculus notation.
How to Implement a Cosine Similarity Function in TypeScript for Vector Comparison: Learn how to build an efficient cosine similarity function in TypeScript for comparing vector embeddings. This step-by-step guide includes code examples, performance optimizations, and practical applications for semantic search and AI recommendation systems
How I Added llms.txt to My Astro Blog: I built a simple way to load my blog content into any LLM with one click. This post shows how you can do it too.
How to Do Visual Regression Testing in Vue with Vitest?: Learn how to implement visual regression testing in Vue.js using Vitest's browser mode. This comprehensive guide covers setting up screenshot-based testing, creating component stories, and integrating with CI/CD pipelines for automated visual testing.
How to Test Vue Router Components with Testing Library and Vitest: Learn how to test Vue Router components using Testing Library and Vitest. This guide covers real router integration, mocked router setups, and best practices for testing navigation, route guards, and dynamic components in Vue applications.
Building a Pinia Plugin for Cross-Tab State Syncing: Learn how to create a Pinia plugin that synchronizes state across browser tabs using the BroadcastChannel API and Vue 3's Script Setup syntax.
How to Use AI for Effective Diagram Creation: A Guide to ChatGPT and Mermaid: Learn how to leverage ChatGPT and Mermaid to create effective diagrams for technical documentation and communication.
The Browser That Speaks 200 Languages: Building an AI Translator Without APIs: Learn how to build a browser-based translator that works offline and handles 200 languages using Vue and Transformers.js
Solving Prop Drilling in Vue: Modern State Management Strategies: Eliminate prop drilling in Vue apps using Composition API, Provide/Inject, and Pinia. Learn when to use each approach with practical examples.
Building Local-First Apps with Vue and Dexie.js: Learn how to create offline-capable, local-first applications using Vue 3 and Dexie.js. Discover patterns for data persistence, synchronization, and optimal user experience.
Adding Obsidian-Style Wiki Links to My Astro Blog: I added [[wiki link]] syntax to my Astro blog with hover preview cards. Here's how it works and how you can build it too.
Unlocking Reading Insights: A Guide to Data Analysis with Claude and Readwise: Discover how to transform your reading data into actionable insights by combining Readwise exports with Claude AI's powerful analysis capabilities
The What Why and How of Goal Settings: A deep dive into the philosophy of goal-setting and personal development, exploring the balance between happiness and meaning while providing practical steps for achieving your goals in 2025.
XML-Style Tagged Prompts: A Framework for Reliable AI Responses: Learn how top AI engineers use XML-style prompts to consistently get structured, accurate responses from ChatGPT, Claude, and other LLMs. Step-by-step guide with real examples
How to Use the Variant Props Pattern in Vue: Learn how to create type-safe Vue components where prop types depend on other props using TypeScript discriminated unions. A practical guide with real-world examples.
SQLite in Vue: Complete Guide to Building Offline-First Web Apps: Learn how to build offline-capable Vue 3 apps using SQLite and WebAssembly in 2024. Step-by-step tutorial includes code examples for database operations, query playground implementation, and best practices for offline-first applications.
Create Dark Mode-Compatible Technical Diagrams in Astro with Excalidraw: A Complete Guide: Learn how to create and integrate theme-aware Excalidraw diagrams into your Astro blog. This step-by-step guide shows you how to build custom components that automatically adapt to light and dark modes, perfect for technical documentation and blogs
Frontend Testing Guide: 10 Essential Rules for Naming Tests: Learn how to write clear and maintainable frontend tests with 10 practical naming rules. Includes real-world examples showing good and bad practices for component testing across any framework.
Create a Native-Like App in 4 Steps: PWA Magic with Vue 3 and Vite: Transform your Vue 3 project into a powerful Progressive Web App in just 4 steps. Learn how to create offline-capable, installable web apps using Vite and modern PWA techniques.
Atomic Architecture: Structuring Vue and Nuxt Projects: Learn how to implement Atomic Design principles in Vue or Nuxt projects. Improve your code structure and maintainability with this guide
Bolt Your Presentations: AI-Powered Slides: Elevate your dev presentations with AI-powered tools. Learn to leverage Bolt, Slidev, and WebContainers for rapid, code-friendly slide creation. This guide walks developers through 7 steps to build impressive tech presentations using Markdown and browser-based Node.js. Master efficient presentation development with instant prototyping and one-click deployment to Netlify
10 Rules for Better Writing from the Book Economical Writing: Master 10 key writing techniques from Deirdre McCloskey's 'Economical Writing.' Learn to use active verbs, write clearly, and avoid common mistakes. Ideal for students, researchers, and writers aiming to communicate more effectively.
TypeScript Tutorial: Extracting All Keys from Nested Object: Learn how to extract all keys, including nested ones, from TypeScript objects using advanced type manipulation techniques. Improve your TypeScript skills and write safer code.
TypeScript Snippets in Astro: Show, Don't Tell: Learn how to add interactive type information and syntax highlighting to TypeScript snippets in your Astro site, enhancing code readability and user experience.
Vue 3.5's onWatcherCleanup: Mastering Side Effect Management in Vue Applications: Discover how Vue 3.5's new onWatcherCleanup function revolutionizes side effect management in Vue applications
How to Build Your Own Vue-like Reactivity System from Scratch: Learn to build a Vue-like reactivity system from scratch, implementing your own ref() and watchEffect().
What is Local-first Web Development?: What is local-first software and why does it matter? This guide covers local-first architecture, offline-capable apps with automatic sync, data ownership, and how to build a local-first web app with Vue step by step.
Vue Accessibility Blueprint: 8 Steps: Master Vue accessibility with our comprehensive guide. Learn 8 crucial steps to create inclusive, WCAG-compliant web applications that work for all users.
How to Structure Vue Projects: Discover best practices for structuring Vue projects of any size, from simple apps to complex enterprise solutions.
How to Persist User Data with LocalStorage in Vue: Learn how to efficiently store and manage user preferences like dark mode in Vue applications using LocalStorage. This guide covers basic operations, addresses common challenges, and provides type-safe solutions for robust development.
How to Write Clean Vue Components: There are many ways to write better Vue components. One of my favorite ways is to separate business logic into pure functions.
The Problem with as in TypeScript: Why It's a Shortcut We Should Avoid: Learn why as can be a Problem in Typescript
Exploring the Power of Square Brackets in TypeScript: TypeScript, a statically-typed superset of JavaScript, implements square brackets [] for specific purposes. This post details the essential applications of square brackets in TypeScript, from array types to complex type manipulations, to help you write type-safe code.
How to Test Vue Composables: A Comprehensive Guide with Vitest: Learn how to effectively test Vue composables using Vitest. Covers independent and dependent composables, with practical examples and best practices.
Robust Error Handling in TypeScript: A Journey from Naive to Rust-Inspired Solutions: Learn to write robust, predictable TypeScript code using Rust's Result pattern. This post demonstrates practical examples and introduces the ts-results library, implementing Rust's powerful error management approach in TypeScript.
Mastering Vue 3 Composables: A Comprehensive Style Guide: Did you ever struggle how to write better composables in Vue? In this Blog post I try to give some tips how to do that
Best Practices for Error Handling in Vue Composables: Error handling can be complex, but it's crucial for composables to manage errors consistently. This post explores an effective method for implementing error handling in composables.
How to Improve Accessibility with Testing Library and jest-axe for Your Vue Application: Use Jest axe to have automatic tests for your vue application
Mastering TypeScript: Looping with Types: Did you know that TypeScript is Turing complete? In this post, I will show you how you can loop with TypeScript.

TIL (Today I Learned)

Claude Code's /goal Keeps the Agent Working Until It's Actually Done: Using Claude Code's /goal command to set a measurable target the agent can't stop short of — and how I used it to cut my Astro build time in half.
TIL - Blending Fuzzy and Semantic Search with Reciprocal Rank Fusion: Learn how to merge fuzzy and semantic search results using Reciprocal Rank Fusion (RRF) with TypeScript implementation and interactive Vue demo
Indexed v-model in Vue 3: TIL about handling any number of inputs with one reactive array by binding each field to array[index] in Vue 3.
TIL - Detecting fresh deployments in a Vue 3 SPA with vite + version.json: Learn how to detect fresh deployments in a Vue 3 SPA with vite + version.json
TIL: TypeScript Function Overloads: Today I learned about function overloads in TypeScript. They solve a common problem - making your code understand exactly what type comes out based on what type goes in.
TIL: Powerful Vue.js Patterns for Complex JSON Rendering: Key insights on using provide/inject and recursive components to build a JSON viewer in Vue.js
TypeScript Type Extraction Patterns: Learn powerful TypeScript patterns for extracting and transforming nested types from complex interfaces.
Better Type Inference with TypeScript Array Filters: How to improve TypeScript type inference when filtering arrays using type guards
Deploy your Vue App to GitHub Pages with Caching: Learn how to speed up your GitHub Actions workflows by caching node_modules and properly deploy Vue apps to GitHub Pages
Dynamic Pinia Stores in Vue 3: Create dynamic Pinia stores with unique IDs for separate component instances

Notes

Vibe Engineering Effect Apps: Just Clone the Repo: Michael Arnaldi's workshop on building Effect apps with coding agents. The single trick: clone the library repo as a git subtree so the agent reads source code instead of fighting stale docs.
Writing Good Tests for Vue Applications: A principle-driven guide to testing Vue apps. Argues for an Application-Test-heavy strategy with Vitest, Playwright, Testing Library and MSW, glued together by a driver pattern that decouples tests from any specific framework.
Software Testing with Generative AI: A beginner friendly guide for leveraging AI in software testing practices

Prompts

Add Prompt: Quick Prompt Collection Entry: Quickly add new prompts to the blog's prompts collection with auto-generated frontmatter
Conventional Commit: Slash command to create conventional commit messages and commit staged changes following the conventional commits specification
Create Agent Command: Slash command to create custom subagents for specialized tasks with proper configuration and system prompts
Create Command: Slash command to generate properly structured slash command files for Claude Code with standardized structure
Create Hook: Slash command to create and configure Claude Code hooks with reference documentation and interactive guidance
Create CLAUDE.md Documentation: Slash command to analyze project structure and generate CLAUDE.md files for project documentation and coding guidelines
Create Output Style: Slash command to generate custom output styles that modify Claude Code's system prompt for different agent behaviors
Create Plugin: Slash command to convert a project into a properly structured Claude Code plugin with marketplace configuration
Create Skill: Slash command to generate new Claude Skills with proper structure, YAML frontmatter, and bundled resources
Nuxt Content Documentation Reference Skill: Skill that ensures Claude fetches current Nuxt Content documentation before answering questions or implementing features
Branch: Create Feature Branch from Main: Creates a new branch from main with conventional commit-style naming based on a task description
Commit: Create Conventional Commit Message: Analyzes staged and unstaged changes to create a well-formatted conventional commit message
Create Command: Scaffold New Slash Commands: Interactive agent that scaffolds new slash commands with best practices, proper frontmatter, and structured templates
Fix Pipeline: Systematic CI/CD Debugging: Agent that systematically debugs CI pipeline failures using root cause analysis before implementing fixes
Lint: Auto-fix and Resolve Linting Issues: Runs linter with auto-fix enabled and resolves any remaining errors that require manual intervention
Merge to Main: Complete PR Workflow: Merges current branch to main via GitHub PR with squash merge and branch cleanup
PR: Create Well-Formatted Pull Request: Creates a GitHub PR with conventional title and structured description including summary, changes, and test plan
Push: Commit and Push to Remote: Combines commit creation with conventional message and push to remote in one command
Refactor Page Object: Test Pattern Refactoring: Refactors Vue component tests to use the Page Object Pattern for better maintainability and readability
Review CodeRabbit: Process AI Code Reviews: Agent that processes CodeRabbit review comments with technical rigor - verifies suggestions before implementing and pushes back when wrong
Vitest: Run Tests and Fix Failures: Runs Vitest test suite and systematically fixes any failing tests
Learn: Analyze Conversation for Documentation: Analyzes conversation for insights worth preserving and saves them to the project's documentation
Genereate new Prompt for Copilot: Custom instructions for TypeScript development with strict typing