# Alexop

> Documentation for Alexop

## Pages

- [Alexop Documentation](alexop-documentation.md)
- [alexop.dev - Full Content](alexopdev-full-content.md): A Personal Blog from a simple web developer
- [BLOG POSTS](blog-posts.md): ================================================================================
- [Spec-Driven Development with Claude Code in Action](spec-driven-development-with-claude-code-in-action.md): I'm building a [simplified sync engine from scratch](https://github.com/alexanderop/nuxt-sync-engine) using Nuxt 4.
- [IndexedDB Migration Specification](indexeddb-migration-specification.md): - Database schema (coValues, sessions, transactions stores)
- [.husky/pre-commit](huskypre-commit.md): pnpm typecheck && pnpm lint && pnpm test-run
- [My Opinionated ESLint Setup for Vue Projects](my-opinionated-eslint-setup-for-vue-projects.md): Over the last 7+ years as a Vue developer, I've developed a highly opinionated style for writing Vue components. Some...
- [In package.json](in-packagejson.md): "lint:oxlint": "oxlint . --fix --ignore-path .gitignore",
- [Next Level GitHub Copilot: Agents, Instructions & Automation in VS Code](next-level-github-copilot-agents-instructions-automation-in-vs-code.md)
- [Next Level GitHub Copilot](next-level-github-copilot.md): Agents.md Subagents & Skills
- [What is an Agent?](what-is-an-agent.md): nanocode | claude-opus-4-5 | /Users/alexanderopalic/Projects/typescript/nanocode
- [Context Engineering](context-engineering.md): "Context engineering is the art and science of filling the context window with just the right information at each ste...
- [Back Pressure](back-pressure.md): | Source | What It Validates |
- [AGENTS.md](agentsmd.md)
- [AGENTS.md](agentsmd-2.md): - How to set up and navigate
- [AGENTS.md](agentsmd-3.md): [200 lines of docs...]
- [AGENTS.md](agentsmd-4.md): pnpm install && pnpm dev
- [Learn from Conversation](learn-from-conversation.md): - What patterns or approaches were discovered?
- [Subagents](subagents.md): - Specialized searches (explore codebase, web, docs)
- [Skills](skills.md): **User:** "Why is my bounce rate so high on the Vue posts?"
- [Live Demo](live-demo.md): 1. **Enable Skills** in VS Code settings
- [Hello SKill](hello-skill.md): if the user writes "alex", respond with "Hello, Alexander Opalic! How can I assist you today?"
- [Vue & AI Assistant](vue-ai-assistant.md): Answer questions about Vue.js ecosystem and AI topics by fetching knowledge from and dele...
- [Key Takeaways](key-takeaways.md): 1. **Agents = LLM + Tools + Loop** (nanocode shows this simply)
- [Resources](resources.md): --- title: What's New in VS Code Copilot: January 2026 Update description: Major updates to VS Code Copilot including...
- [What's New in VS Code Copilot: January 2026 Update](whats-new-in-vs-code-copilot-january-2026-update.md): The past week has brought a wave of updates to VS Code's Copilot experience, with major improvements to how agents wo...
- [Web Application Testing with Playwright](web-application-testing-with-playwright.md): When creating tests for this project, follow these patterns:
- [Project Context](project-context.md): This is a microservices architecture with:
- [Presentation Mode: Turn Your Blog Posts into Slides](presentation-mode-turn-your-blog-posts-into-slides.md): Press **P** on your keyboard or click the floating button in the bottom-right corner to enter presentation mode. Use ...
- [Presentation Mode](presentation-mode.md): Turn your blog posts into beautiful slides with incremental reveals
- [Drawing Annotations](drawing-annotations.md): Draw directly on slides with Excalidraw!
- [V-Click Animations](v-click-animations.md): Reveal content step-by-step with Slidev-style click animations
- [Custom Components](custom-components.md): Interactive React components work in slides!
- [Slide Layouts](slide-layouts.md): Embed live demos, CodePen, StackBlitz, or videos directly in slides:
- [My Title](my-title.md): {/* .md format */}
- [My Title](my-title-2.md): Both file formats support layouts and v-clicks! For`.md`files use HTML comments, for`.mdx`files use the`Slide`, ...
- [Technical Details](technical-details.md): 1. **Keep slides focused** - One idea per slide
- [Thank You!](thank-you.md): Press **Escape** to exit or continue with arrow keys
- [Stop Bloating Your CLAUDE.md: Progressive Disclosure for AI Coding Tools](stop-bloating-your-claudemd-progressive-disclosure-for-ai-coding-tools.md): Yesterday I spent an hour debugging a Nuxt Content gotcha with Claude. We figured it out together—you need to use`st...
- [CLAUDE.md](claudemd.md): ...50 lines...
- [CLAUDE.md](claudemd-2.md): Second Brain is a personal knowledge base using
- [Create a symlink so all tools read the same file](create-a-symlink-so-all-tools-read-the-same-file.md): ln -s CLAUDE.md agents.md
- [How I Built a Skill That Lets Me Talk to Claude's Conversation Memory](how-i-built-a-skill-that-lets-me-talk-to-claudes-conversation-memory.md): When I work with Claude Code on complex projects, I often remember discussing a problem or solution but can't find it...
- [Today's sessions only](todays-sessions-only.md): python3 search_history.py --today "newsletter"
- [Yesterday](yesterday.md): python3 search_history.py --yesterday "bug fix"
- [Last 7 days](last-7-days.md): python3 search_history.py --days 7 "refactor"
- [Since a specific date](since-a-specific-date.md): python3 search_history.py --since 2026-01-01 "feature"
- [In Five Years, Developers Won't Write Code By Hand](in-five-years-developers-wont-write-code-by-hand.md): I haven't written code by hand in months.
- [Mutation Testing with AI Agents When Stryker Doesn't Work](mutation-testing-with-ai-agents-when-stryker-doesnt-work.md): Code coverage lies. A test that exercises a line doesn't mean it verifies that line does the right thing:
- [or: stryker run](or-stryker-run.md): INFO ProjectReader Found 7 of 2947 file(s) to be mutated.
- [Mutation Testing](mutation-testing.md): Mutation testing answers: **"Would my tests catch this bug?"** by actually introducing bugs and running tests.
- [Why You Don't Need the Nuxt MCP When You Use Claude Code](why-you-dont-need-the-nuxt-mcp-when-you-use-claude-code.md): I think we all love Nuxt. One problem with using Nuxt for AI is that training data is not up to date. This is especia...
- [Nuxt Content Specialist Agent](nuxt-content-specialist-agent.md): This document defines the Nuxt Content specialist agent's role and responsibilities for helping users with @nuxt/cont...
- [Claude Code customization guide: CLAUDE.md, skills, subagents explained](claude-code-customization-guide-claudemd-skills-subagents-explained.md): This post covers:
- [CLAUDE.md](claudemd-3.md): We use Dexie.js for IndexedDB. Before implementing any database code:
- [Research: $ARGUMENTS](research-arguments.md): Research the following problem or question:
- [Research: <Topic>](research-topic.md): **Date:**
- [Dexie.js Expert](dexiejs-expert.md): When the user needs help with Dexie.js or IndexedDB:
- [Subagent Smoke Test](subagent-smoke-test.md): This skill exists purely to verify that subagents work end-to-end.
- [How to Customize Your Claude Code Status Line](how-to-customize-your-claude-code-status-line.md): Ever glanced at Claude Code and wondered which model you're actually using? Or how much of the context window you've ...
- [Vue 3 Testing Pyramid: A Practical Guide with Vitest Browser Mode](vue-3-testing-pyramid-a-practical-guide-with-vitest-browser-mode.md): This post covers a practical testing approach for Vue 3 applications:
- [.github/workflows/ci.yml](githubworkflowsciyml.md): performance-budget:
- [Building an AI QA Engineer with Claude Code and Playwright MCP](building-an-ai-qa-engineer-with-claude-code-and-playwright-mcp.md): - Build an AI-powered QA engineer that tests your app through the browser like a real user
- [QA Engineer Identity](qa-engineer-identity.md): You are **Quinn**, a veteran QA engineer with 12 years
- [PR Verification Testing](pr-verification-testing.md): **PR #32**: Improve set editing and fix playlist overflow
- [QA Verification Report](qa-verification-report.md): **PR**: #32 - Improve set editing
- [Vue Composables Style Guide: Lessons from VueUse's Codebase](vue-composables-style-guide-lessons-from-vueuses-codebase.md): I was studying VueUse's codebase to understand how they structure their composables. VueUse has become the de facto s...
- [Forcing Claude Code to TDD: An Agentic Red-Green-Refactor Loop](forcing-claude-code-to-tdd-an-agentic-red-green-refactor-loop.md): I rely on Claude Code, but it has a structural limitation: it defaults to implementation-first. It writes the "Happy ...
- [TDD Integration Testing](tdd-integration-testing.md): Enforce strict Test-Driven Development using the Red-Green-Refactor cycle with dedicated subagents.
- [TDD Test Writer (RED Phase)](tdd-test-writer-red-phase.md): Write a failing integration test that verifies the requested feature behavior.
- [TDD Implementer (GREEN Phase)](tdd-implementer-green-phase.md): Implement the minimal code needed to make the failing test pass.
- [TDD Refactorer (REFACTOR Phase)](tdd-refactorer-refactor-phase.md): Evaluate the implementation for refactoring opportunities and apply improvements while keeping tests green.
- [Get Notified When Claude Code Finishes With Hooks](get-notified-when-claude-code-finishes-with-hooks.md): You're deep in your work. Claude Code is running, doing its thing. You check back five minutes later. Still waiting. ...
- [How to Speed Up Your Claude Code Experience with Slash Commands](how-to-speed-up-your-claude-code-experience-with-slash-commands.md): I was wasting time. Every commit message, every branch name, every PR description. I typed the same things over and o...
- [Commit Changes](commit-changes.md): !`git diff --cached`
- [Understanding Claude Code's Full Stack: MCP, Skills, Subagents, and Hooks Explained](understanding-claude-codes-full-stack-mcp-skills-subagents-and-hooks-explained.md): I've been using Claude Code for months. Mostly for quick edits and generating boilerplate. The vibe coding tool every...
- [Install a server](install-a-server.md): claude mcp add playwright npx @playwright/mcp@latest
- [Use it](use-it.md): /mcp__playwright__create-test [args]
- [CLAUDE.md](claudemd-4.md): Alexander Opalic's personal blog built on AstroPaper - Astro-based blog theme with TypeScript, React, TailwindCSS.
- [/create-command](create-command.md): Generate slash command files with proper structure.
- [Building My First Claude Code Plugin](building-my-first-claude-code-plugin.md): If you're unfamiliar with Claude Code or want to understand the full ecosystem (MCP, Skills, Subagents, Hooks, and Pl...
- [/create-skill](create-skill.md): Generate a new Claude Skill with proper structure and YAML frontmatter using official documentation as reference
- [Building a Modular Monolith with Nuxt Layers: A Practical Guide](building-a-modular-monolith-with-nuxt-layers-a-practical-guide.md): I once worked on a project that wanted to build an e-commerce website with Nuxt that could be used by multiple countr...
- [📥 Clone the repository](clone-the-repository.md): git clone
- [🚀 Start development server](start-development-server.md): pnpm dev
- [📁 Create layer folders](create-layer-folders.md): mkdir -p layers/shared layers/products layers/cart
- [🔧 Add a nuxt.config.ts to each layer](add-a-nuxtconfigts-to-each-layer.md): echo "export default defineNuxtConfig({
- [📦 Install ESLint plugin](install-eslint-plugin.md): pnpm add -D eslint-plugin-nuxt-layers
- [How to Handle API Calls in Pinia with The Elm Pattern](how-to-handle-api-calls-in-pinia-with-the-elm-pattern.md): If your goal is to cache backend results or manage server state, Pinia is not the right tool.
- [How to Write Better Pinia Stores with the Elm Pattern](how-to-write-better-pinia-stores-with-the-elm-pattern.md): Pinia is a fantastic state management library for Vue, but it doesn't enforce any architectural patterns. It gives yo...
- [How to build Microfrontends with Module Federation and Vue](how-to-build-microfrontends-with-module-federation-and-vue.md): Monorepo with`pnpm`. Vue 3 SPA. Client side composition with Module
- [Why You Need Something Hard in Your Life](why-you-need-something-hard-in-your-life.md): The biggest paradox in life is simple: the hardest things are usually the ones that help you grow. They force you out...
- [What Is the Model Context Protocol (MCP)? How It Works](what-is-the-model-context-protocol-mcp-how-it-works.md): I did not see how powerful MCP was until I used Claude Code with the Playwright MCP.
- [How VueUse Solves SSR Window Errors in Vue Applications](how-vueuse-solves-ssr-window-errors-in-vue-applications.md): I am a big fan of [VueUse](https://vueuse.org). Every time I browse the docs I discover a new utility that saves me h...
- [Mastering GraphQL Fragments in Vue 3: Component-Driven Data Fetching](mastering-graphql-fragments-in-vue-3-component-driven-data-fetching.md): graph TD
- [GraphQL fragments](graphql-fragments.md): fragment CountryBasicInfo on Country {
- [Basic fragment](basic-fragment.md): fragment LanguageItem_LanguageFragment on Language {
- [Fragment that uses other fragments](fragment-that-uses-other-fragments.md): fragment CountryWithLanguages_CountryFragment on Country {
- [How I Use Claude Code for Doing SEO Audits](how-i-use-claude-code-for-doing-seo-audits.md): I'm building a Nuxt blog starter called [NuxtPapier](https://github.com/alexanderop/NuxtPapier). Like any developer w...
- [The Age of the Generalist](the-age-of-the-generalist.md): AI this, AI that. Like many of you, I'm constantly switching between _"Wow, you can do that with AI?"_ and _"Ugh, not...
- [How I Use LLMs](how-i-use-llms.md): Motivated by the awesome YouTube video from Andrew Karpathy [How I use LLMs](https://www.youtube.com/watch?v=EWvNQjAa...
- [No Server, No Database: Smarter Related Posts in Astro with `transformers.js`](no-server-no-database-smarter-related-posts-in-astro-with-transformersjs.md): I recently read a interesting blog post about Embeddings at [Embeddings in Technical Writing](https://technicalwritin...
- [Type-Safe GraphQL Queries in Vue 3 with GraphQL Code Generator](type-safe-graphql-queries-in-vue-3-with-graphql-code-generator.md): src={Workflow}
- [LLM-Powered Search: o4-mini-high vs o3 vs Deep Research](llm-powered-search-o4-mini-high-vs-o3-vs-deep-research.md): **Prompt:** "How does Vercel use Speakeasy for API testing?"
- [Watching OpenAI's o3 Model Sweat Over a Paul Morphy Mate-in-2](watching-openais-o3-model-sweat-over-a-paul-morphy-mate-in-2.md): When I gave OpenAI's o3 model a tough chess puzzle, it behaved almost like a human: thinking, doubting, retrying, and...
- [Timeline Summary](timeline-summary.md): %%{ init: { 'theme': 'base', 'themeVariables': {
- [Why This is Fascinating](why-this-is-fascinating.md): o3 does not just spit out an answer. It reasons. It struggles. It switches tools. It self-corrects. Sometimes it even...
- [Getting Started with GraphQL in Vue 3 — Complete Setup with Apollo](getting-started-with-graphql-in-vue-3-complete-setup-with-apollo.md): src={graphqlComic}
- [How ChatGPT Works (for Dummies)](how-chatgpt-works-for-dummies.md): Two and a half years ago, humanity witnessed the beginning of its biggest achievement.
- [Stop White Box Testing Vue Components Use Testing Library Instead](stop-white-box-testing-vue-components-use-testing-library-instead.md): White box testing peeks into Vue internals, making your tests brittle. Black box testing simulates real user behavior...
- [The Computed Inlining Refactoring Pattern in Vue](the-computed-inlining-refactoring-pattern-in-vue.md): Improve your Vue component performance and readability by applying the Computed Inlining pattern - a technique inspir...
- [Are LLMs Creative?](are-llms-creative.md): After OpenAI released its impressive new image model, I started thinking more deeply about what creativity means. We ...
- [The Inline Vue Composables Refactoring pattern](the-inline-vue-composables-refactoring-pattern.md): Improve your Vue component organization by using inline composables - a technique inspired by Martin Fowler's Extract...
- [Math Notation from 0 to 1: A Beginner's Guide](math-notation-from-0-to-1-a-beginners-guide.md): Mathematical notation is a universal language that allows precise communication of complex ideas. This guide covers t...
- [How to Implement a Cosine Similarity Function in TypeScript for Vector Comparison](how-to-implement-a-cosine-similarity-function-in-typescript-for-vector-compariso.md): To understand how an AI can understand that the word "cat" is similar to "kitten," you must realize cosine similarity...
- [How I Added llms.txt to My Astro Blog](how-i-added-llmstxt-to-my-astro-blog.md): I created an endpoint in my Astro blog that outputs all posts in plain text format. This lets me copy my entire blog ...
- [How to Do Visual Regression Testing in Vue with Vitest?](how-to-do-visual-regression-testing-in-vue-with-vitest.md): TL;DR:
- [How to Test Vue Router Components with Testing Library and Vitest](how-to-test-vue-router-components-with-testing-library-and-vitest.md): This guide shows you how to test Vue Router components using real router integration and isolated component testing w...
- [How to Use AI for Effective Diagram Creation: A Guide to ChatGPT and Mermaid](how-to-use-ai-for-effective-diagram-creation-a-guide-to-chatgpt-and-mermaid.md): Learn how to combine ChatGPT and Mermaid to quickly create professional diagrams for technical documentation. This ap...
- [Building a Pinia Plugin for Cross-Tab State Syncing](building-a-pinia-plugin-for-cross-tab-state-syncing.md): Create a Pinia plugin that enables state synchronization across browser tabs using the BroadcastChannel API. The plug...
- [The Browser That Speaks 200 Languages: Building an AI Translator Without APIs](the-browser-that-speaks-200-languages-building-an-ai-translator-without-apis.md): Most AI translation tools rely on external APIs.
- [Solving Prop Drilling in Vue: Modern State Management Strategies](solving-prop-drilling-in-vue-modern-state-management-strategies.md): - **Global state**: Pinia (Vue's official state management)
- [Building Local-First Apps with Vue and Dexie.js](building-local-first-apps-with-vue-and-dexiejs.md): Ever been frustrated when your web app stops working because the internet connection dropped? That's where local-firs...
- [Adding Obsidian-Style Wiki Links to My Astro Blog](adding-obsidian-style-wiki-links-to-my-astro-blog.md): I built a remark plugin that transforms`[[slug]]`syntax into internal links with hover preview cards. It supports m...
- [Unlocking Reading Insights: A Guide to Data Analysis with Claude and Readwise](unlocking-reading-insights-a-guide-to-data-analysis-with-claude-and-readwise.md): Recently, I've been exploring Claude.ai's new CSV analysis feature, which allows you to upload spreadsheet data for a...
- [The What Why and How of Goal Settings](the-what-why-and-how-of-goal-settings.md): There is beauty in having goals and in aiming to achieve them. This idea is perfectly captured by Jim Rohn's quote:
- [XML-Style Tagged Prompts: A Framework for Reliable AI Responses](xml-style-tagged-prompts-a-framework-for-reliable-ai-responses.md): Getting consistent, well-structured responses can be challenging when working with LLMs. Traditional prompting often ...
- [How to Use the Variant Props Pattern in Vue](how-to-use-the-variant-props-pattern-in-vue.md): Building Vue components that handle multiple variations while maintaining type safety can be tricky. Let's dive into ...
- [SQLite in Vue: Complete Guide to Building Offline-First Web Apps](sqlite-in-vue-complete-guide-to-building-offline-first-web-apps.md): - Set up SQLite WASM in a Vue 3 application for offline data storage
- [Create Dark Mode-Compatible Technical Diagrams in Astro with Excalidraw: A Complete Guide](create-dark-mode-compatible-technical-diagrams-in-astro-with-excalidraw-a-comple.md): Technical bloggers often face a common challenge: creating diagrams seamlessly integrating with their site’s design s...
- [My Technical Blog Post](my-technical-blog-post.md): src={myDiagram}
- [Frontend Testing Guide: 10 Essential Rules for Naming Tests](frontend-testing-guide-10-essential-rules-for-naming-tests.md): The path to better testing starts with something surprisingly simple: how you name your tests. Good test names:
- [Create a Native-Like App in 4 Steps: PWA Magic with Vue 3 and Vite](create-a-native-like-app-in-4-steps-pwa-magic-with-vue-3-and-vite.md): Progressive Web Apps (PWAs) have revolutionized our thoughts on web applications. PWAs offer a fast, reliable, and en...
- [Atomic Architecture: Revolutionizing Vue and Nuxt Project Structure](atomic-architecture-revolutionizing-vue-and-nuxt-project-structure.md): Clear writing requires clear thinking. The same is valid for coding.
- [Bolt Your Presentations: AI-Powered Slides](bolt-your-presentations-ai-powered-slides.md): Presentations plague the middle-class professional. Most bore audiences with wordy slides. But AI tools promise sharp...
- [10 Rules for Better Writing from the Book Economical Writing](10-rules-for-better-writing-from-the-book-economical-writing.md): src={bookCoverImage}
- [TypeScript Tutorial: Extracting All Keys from Nested Object](typescript-tutorial-extracting-all-keys-from-nested-object.md): Let's say you have a big TypeScript object. It has objects inside objects. You want to get all the keys, even the nes...
- [TypeScript Snippets in Astro: Show, Don't Tell](typescript-snippets-in-astro-show-dont-tell.md): Want to take your Astro code highlights to the next level? This guide will show you how to add TypeScript snippets wi...
- [Vue 3.5's onWatcherCleanup: Mastering Side Effect Management in Vue Applications](vue-35s-onwatchercleanup-mastering-side-effect-management-in-vue-applications.md): My team and I discussed Vue 3.5's new features, focusing on the`onWatcherCleanup`function. The insights proved valu...
- [How to Build Your Own Vue-like Reactivity System from Scratch](how-to-build-your-own-vue-like-reactivity-system-from-scratch.md): Understanding the core of modern Frontend frameworks is crucial for every web developer. Vue, known for its reactivit...
- [What is Local-first Web Development?](what-is-local-first-web-development.md): Imagine having complete control over your data in every web app, from social media platforms to productivity tools. P...
- [Vue Accessibility Blueprint: 8 Steps](vue-accessibility-blueprint-8-steps.md): Creating accessible Vue components is crucial for building inclusive web applications that work for everyone, includi...
- [How to Structure Vue Projects](how-to-structure-vue-projects.md): This post covers specific Vue project structures suited for different project sizes:
- [How to Persist User Data with LocalStorage in Vue](how-to-persist-user-data-with-localstorage-in-vue.md): When developing apps, there's often a need to store data. Consider a simple scenario where your application features ...
- [How to Write Clean Vue Components](how-to-write-clean-vue-components.md): Writing code that's both easy to test and easy to read can be a challenge, with Vue components. In this blog post, I'...
- [The Problem with as in TypeScript: Why It's a Shortcut We Should Avoid](the-problem-with-as-in-typescript-why-its-a-shortcut-we-should-avoid.md): TypeScript enhances JavaScript by adding stricter typing rules. While JavaScript's flexibility enables rapid developm...
- [Exploring the Power of Square Brackets in TypeScript](exploring-the-power-of-square-brackets-in-typescript.md): TypeScript, the popular statically-typed superset of JavaScript, offers advanced type manipulation features that enha...
- [How to Test Vue Composables: A Comprehensive Guide with Vitest](how-to-test-vue-composables-a-comprehensive-guide-with-vitest.md): Hello, everyone; in this blog post, I want to help you better understand how to test a composable in Vue. Nowadays, m...
- [Robust Error Handling in TypeScript: A Journey from Naive to Rust-Inspired Solutions](robust-error-handling-in-typescript-a-journey-from-naive-to-rust-inspired-soluti.md): In software development, robust error handling forms the foundation of reliable software. Even the best-written code ...
- [Mastering Vue 3 Composables: A Comprehensive Style Guide](mastering-vue-3-composables-a-comprehensive-style-guide.md): The release of Vue 3 brought a transformational change, moving from the Options API to the Composition API. At the he...
- [Best Practices for Error Handling in Vue Composables](best-practices-for-error-handling-in-vue-composables.md): Navigating the complex world of composables presented a significant challenge. Understanding this powerful paradigm r...
- [How to Improve Accessibility with Testing Library and jest-axe for Your Vue Application](how-to-improve-accessibility-with-testing-library-and-jest-axe-for-your-vue-appl.md): Accessibility is a critical aspect of web development that ensures your application serves everyone, including people...
- [Mastering TypeScript: Looping with Types](mastering-typescript-looping-with-types.md): Loops play a pivotal role in programming, enabling code execution without redundancy. JavaScript developers might be ...
- [TODAY I LEARNED (TIL)](today-i-learned-til.md): ================================================================================
- [TIL - Blending Fuzzy and Semantic Search with Reciprocal Rank Fusion](til-blending-fuzzy-and-semantic-search-with-reciprocal-rank-fusion.md): I learned today how to blend fuzzy search and semantic search results using a method called Reciprocal Rank Fusion (R...
- [Indexed v-model in Vue 3](indexed-v-model-in-vue-3.md): **Today I learned** that you can handle **any number of inputs** with **one reactive array** by binding each field to...
- [TIL - Detecting fresh deployments in a Vue 3 SPA with vite + version.json](til-detecting-fresh-deployments-in-a-vue-3-spa-with-vite-versionjson.md): Today I discovered a very simple way for my Vue 3 single-page app to tell users when I've released a new update.
- [TIL: TypeScript Function Overloads](til-typescript-function-overloads.md): Function overloads let me define multiple ways to call the same function:
- [TIL: Powerful Vue.js Patterns for Complex JSON Rendering](til-powerful-vuejs-patterns-for-complex-json-rendering.md): Today I discovered how powerful the combination of Vue's provide/inject pattern and recursive components can be when ...
- [TypeScript Type Extraction Patterns](typescript-type-extraction-patterns.md): interface GetTodoQuery {
- [Better Type Inference with TypeScript Array Filters](better-type-inference-with-typescript-array-filters.md): Today I learned about the difference between using Boolean as a filter function versus using a proper type guard for ...
- [Deploy your Vue App to GitHub Pages with Caching](deploy-your-vue-app-to-github-pages-with-caching.md): Need a free and efficient way to deploy a Vue app? GitHub Pages is an excellent solution. Here's how to set it up wit...
- [Dynamic Pinia Stores in Vue 3](dynamic-pinia-stores-in-vue-3.md): Today I learned how to create dynamic Pinia stores in Vue 3 by generating unique store IDs. This is super useful when...
- [NOTES](notes.md): ================================================================================
- [Software Testing with Generative AI](software-testing-with-generative-ai.md): I read this book to enhance my use of AI in my development workflow. Testing is a crucial part of being a developer. ...
- [PROMPTS](prompts.md): ================================================================================
- [Add Prompt: Quick Prompt Collection Entry](add-prompt-quick-prompt-collection-entry.md): description: Add a new prompt to the blog's prompts collection with auto-generated frontmatter
- [Add Prompt to Collection](add-prompt-to-collection.md): Add a new prompt to`src/content/prompts/`with properly generated frontmatter.
- [Conventional Commit](conventional-commit.md): description: Create a conventional commit message and commit staged changes
- [Conventional Commit](conventional-commit-2.md): I have gathered information about your changes. Here are the results:
- [Create Command](create-command-2.md): description: Create new slash commands with standardized structure
- [/{{COMMAND_NAME}}](command-name.md): {{PURPOSE}}
- [Example: git worktree add path/to/worktree branch-name](example-git-worktree-add-pathtoworktree-branch-name.md): \`\`\`
- [Output: STATUS=WROTE PATH=.claude/commands/analyze-deps.md](output-statuswrote-pathclaudecommandsanalyze-depsmd.md): --- title: Create CLAUDE.md Documentation description: Slash command to analyze project structure and generate CLAUDE...
- [Create CLAUDE.md Documentation](create-claudemd-documentation.md): description: Generate CLAUDE.md files for project and key subdirectories
- [CLAUDE.md — Project rules](claudemd-project-rules.md): One-liner + architecture map.
- [Frontend — Local rules](frontend-local-rules.md): Next.js 14, TypeScript, TailwindCSS
- [Quick exploration and basic CLAUDE.md files](quick-exploration-and-basic-claudemd-files.md): /create-md quick
- [Very thorough analysis with comprehensive CLAUDE.md files](very-thorough-analysis-with-comprehensive-claudemd-files.md): /create-md very-thorough
- [Create Agent Command](create-agent-command.md): description: Create a new custom subagent for specialized tasks
- [Output: STATUS=CREATED PATH=.claude/agents/code-reviewer.md AGENT=code-reviewer](output-statuscreated-pathclaudeagentscode-reviewermd-agentcode-reviewer.md): /create-skill debugger "Debugging specialist for errors and test failures" --user --tools "Read,Edit,Bash,Grep,Glob"
- [Output: STATUS=CREATED PATH=~/.claude/agents/debugger.md AGENT=debugger](output-statuscreated-pathclaudeagentsdebuggermd-agentdebugger.md): /create-skill data-scientist "Data analysis expert for SQL queries and insights" --tools "Bash,Read,Write" --model "s...
- [Output: STATUS=CREATED PATH=.claude/agents/data-scientist.md AGENT=data-scientist](output-statuscreated-pathclaudeagentsdata-scientistmd-agentdata-scientist.md): - Idempotent: Won't overwrite existing agents
- [Create Hook](create-hook.md): description: Create a new custom subagent for specialized tasks
- [Output: STATUS=CREATED PATH=.claude/agents/code-reviewer.md AGENT=code-reviewer](output-statuscreated-pathclaudeagentscode-reviewermd-agentcode-reviewer-2.md): /create-skill debugger "Debugging specialist for errors and test failures" --user --tools "Read,Edit,Bash,Grep,Glob"
- [Output: STATUS=CREATED PATH=~/.claude/agents/debugger.md AGENT=debugger](output-statuscreated-pathclaudeagentsdebuggermd-agentdebugger-2.md): /create-skill data-scientist "Data analysis expert for SQL queries and insights" --tools "Bash,Read,Write" --model "s...
- [Output: STATUS=CREATED PATH=.claude/agents/data-scientist.md AGENT=data-scientist](output-statuscreated-pathclaudeagentsdata-scientistmd-agentdata-scientist-2.md): - Idempotent: Won't overwrite existing agents
- [Create Output Style](create-output-style.md): description: Generate custom output styles that modify Claude Code's system prompt for different agent behaviors
- [{{STYLE_NAME}} Instructions](style-name-instructions.md): You are an interactive CLI tool that helps users with software engineering tasks.
- [Claude will ask for style name and description interactively](claude-will-ask-for-style-name-and-description-interactively.md): **Example 2: Full specification**
- [STATUS=OK PATH=.claude/output-styles/teaching-assistant.md SCOPE=project](statusok-pathclaudeoutput-stylesteaching-assistantmd-scopeproject.md): **Example 3: User-level style**
- [STATUS=OK PATH=~/.claude/output-styles/code-reviewer.md SCOPE=user](statusok-pathclaudeoutput-stylescode-reviewermd-scopeuser.md): - Output styles modify Claude Code's system prompt completely
- [Create Plugin](create-plugin.md): description: Convert a project into a Claude Code plugin
- [Create Skill](create-skill-2.md): description: Generate a new Claude Skill with proper structure and YAML frontmatter using official documentation as r...
- [Artifacts Builder](artifacts-builder.md): To build powerful frontend claude.ai artifacts, follow these steps:
- [Nuxt Content Documentation Reference Skill](nuxt-content-documentation-reference-skill.md): name: nuxt-content
- [Commit: Create Conventional Commit Message](commit-create-conventional-commit-message.md): description: Create a conventional commit message and commit staged changes
- [Conventional Commit](conventional-commit-3.md): I have gathered information about your changes. Here are the results:
- [Branch: Create Feature Branch from Main](branch-create-feature-branch-from-main.md): description: Create a new branch from main with conventional commit-style naming
- [Create Feature Branch](create-feature-branch.md): !`git status`
- [Create Command: Scaffold New Slash Commands](create-command-scaffold-new-slash-commands.md): An interactive agent that guides you through creating well-structured slash commands for Claude Code. It asks the rig...
- [Fix Pipeline: Systematic CI/CD Debugging](fix-pipeline-systematic-cicd-debugging.md): description: Check CI pipeline status for current branch and fix failures using systematic debugging
- [Fix Pipeline](fix-pipeline.md): !`git branch --show-current`
- [Stage and commit the fix](stage-and-commit-the-fix.md): git add -A
- [Watch the new run](watch-the-new-run.md): gh run watch
- [Lint: Auto-fix and Resolve Linting Issues](lint-auto-fix-and-resolve-linting-issues.md): description: Auto-fix linting issues and resolve remaining errors
- [Lint and Fix](lint-and-fix.md): I have already run the linter with the fix flag. Here are the results:
- [Merge to Main: Complete PR Workflow](merge-to-main-complete-pr-workflow.md): description: Merge current branch to main via GitHub PR
- [Merge to Main](merge-to-main.md): I have gathered information about your branch. Here are the results:
- [PR: Create Well-Formatted Pull Request](pr-create-well-formatted-pull-request.md): description: Create a new GitHub PR with a well-formatted description
- [Create Pull Request](create-pull-request.md): I have gathered information about your branch. Here are the results:
- [Push: Commit and Push to Remote](push-commit-and-push-to-remote.md): description: Commit staged changes and push to remote
- [Commit and Push](commit-and-push.md): I have gathered information about your changes. Here are the results:
- [Refactor Page Object: Test Pattern Refactoring](refactor-page-object-test-pattern-refactoring.md): description: Refactor a Vue component test to use the Page Object Pattern
- [Page Object Pattern Refactoring](page-object-pattern-refactoring.md): Refactor the test file located at @$1 to use the **Page Object Pattern**.
- [Review CodeRabbit: Process AI Code Reviews](review-coderabbit-process-ai-code-reviews.md): description: Fetch CodeRabbit review comments and process them with technical rigor - verify before implementing, pus...
- [Review CodeRabbit Feedback](review-coderabbit-feedback.md): !`git branch --show-current`
- [Get all review threads with resolution status (GraphQL required)](get-all-review-threads-with-resolution-status-graphql-required.md): gh api graphql -f query='
- [Resolve a review thread by its GraphQL node ID](resolve-a-review-thread-by-its-graphql-node-id.md): gh api graphql -f query='
- [Reply to a review thread (requires thread's GraphQL node ID)](reply-to-a-review-thread-requires-threads-graphql-node-id.md): gh api graphql -f query='
- [Then resolve the thread](then-resolve-the-thread.md): gh api graphql -f query='
- [Extract owner/repo from current git remote](extract-ownerrepo-from-current-git-remote.md): gh repo view --json owner,name -q '"\(.owner.login)/\(.name)"'
- [Vitest: Run Tests and Fix Failures](vitest-run-tests-and-fix-failures.md): description: Run Vitest tests and fix any failing tests
- [Vitest Test Runner](vitest-test-runner.md): I have run the Vitest test suite. Here are the results:
- [Learn: Analyze Conversation for Documentation](learn-analyze-conversation-for-documentation.md): description: Analyze conversation for learnings and save to docs folder
- [Learn from Conversation](learn-from-conversation-2.md): Analyze this conversation for insights worth preserving in the project's documentation.
- [Genereate new Prompt for Copilot](genereate-new-prompt-for-copilot.md): agent: agent