A Problem-Driven Practice of Writing Agent Skills: Getting vue-tsc Catch Unknown Vue Components

Post on January 21, 2026
What I Got WrongCase Study: Making vue-tsc Catch Unknown ComponentsDraftingTestingRefiningThe Final
I recently found the time (and curiosity) to figure out what “agent skills” really are and what they’re useful for. Instead of reading documentation, I tried a different learning method: I told Claude Code that I wanted to learn what a skill is and asked it to act like a strict instructor. Here’s what I learned from that experiment.

What I Got Wrong

My first instinct when trying to write a skill was: “This domain should have a skill, so I’ll create one.” The AI immediately pushed back and told me that the starting point must be a real problem, not an abstract desire for coverage.
From that process, I distilled two main reasons to write a skill:
  • Fill a knowledge gap: for situations where the AI doesn’t know something or misunderstands it.
  • Improve efficiency: for tasks the AI can do but that waste tokens or context if done repeatedly.
Together, they form a simple heuristic:
If a skill doesn’t cover a knowledge gap or make something more efficient, it probably shouldn’t exist.
In other words, starting with “I want a skill for X” is the wrong approach.
The right workflow is:
  1. Identify a real problem: give the AI a task and observe where it fails.
  1. Verify the failure is real: not just something you assume the AI can’t do.
  1. Write a skill to fix that failure: only include the minimum necessary content.
  1. Test, iterate, refine: evaluate how the AI behaves once the skill is available.

Case Study: Making vue-tsc Catch Unknown Components

While working on a Vue 3 + TypeScript project, I noticed that using a nonexistent component inside <template> didn’t cause vue-tsc to error. I asked AI to configure the project, and after a chaotic round of edits, nothing worked.
At first, I assumed vue-tsc simply didn’t support that check, but after manually digging through docs, I found vueCompilerOptions with flags like strictTemplates and checkUnknownComponents — all defaulting to false.
This was a classic “knowledge blind spot” moment: the AI knew about vue-tsc, but not enough about its compiler options.

Drafting

---
name: vue-tsc-compiler-options
description: Configures Vue 3 template type checking via vueCompilerOptions in tsconfig.json. Covers strictTemplates, checkUnknownComponents, checkUnknownProps, checkUnknownEvents, and checkUnknownDirectives. Use when setting up vue-tsc, diagnosing unknown component errors, or enabling strict template validation.
---

# Vue Compiler Options for Type Checking

## Quick Reference

Enable strict template checking in`tsconfig.json`:

json
{
  "vueCompilerOptions": {
    "strictTemplates": true
  }
}


## Options

| Option| Default| Effect||--------|---------|--------||`strictTemplates`|`false`| Enables all checkUnknown* options below||`checkUnknownComponents`|`false`| Error on undefined/unregistered components||`checkUnknownProps`|`false`| Error on props not declared in component definition||`checkUnknownEvents`|`false`| Error on events not declared via`defineEmits`||`checkUnknownDirectives`|`false`| Error on unregistered custom directives|
## Reference

Full documentation: https://github.com/vuejs/language-tools/wiki/Vue-Compiler-Options
The first version of the skill mostly did its job: clarify what vue-tsc can do and describe when those options matter. It also included trigger phrases (“vue-tsc”, “unknown component”, “strict template”) so the AI would know when to use it.

Testing

With the skill loaded, the AI did eventually enable strict template checking, but the configuration journey was bumpy.
A bit of context: a typical Vue 3 + TS repo often includes several tsconfig files:
  • tsconfig.json for the root
  • tsconfig.app.json for actual application code (and Vue files)
  • tsconfig.node.json for dev tooling like Vite config
The AI first modified tsconfig.json, noticed it didn’t work, then bounced between configs until it finally updated tsconfig.app.json, which was the correct target.
This iteration was useful feedback: the skill needed to be more practical and clarify where tsconfig settings actually go in real projects.

Refining

I briefly considered hard-coding “use tsconfig.app.json,” but not every project uses that split. Instead, I added directional guidance without enforcing a rule:
Add vueCompilerOptions to the tsconfig that actually includes Vue source files. In multi-tsconfig setups, that’s usually tsconfig.app.json, not the root or node config.
That level of detail gives the AI context without locking it into one project structure.

The Final

---
name: vue-tsc-compiler-options
description: Configures Vue 3 template type checking via vueCompilerOptions in tsconfig.app.json. Covers strictTemplates, checkUnknownComponents, checkUnknownProps, checkUnknownEvents, and checkUnknownDirectives. Use when setting up vue-tsc, diagnosing unknown component errors, or enabling strict template validation.
---

# Vue Compiler Options for Type Checking

## Which tsconfig?

Add`vueCompilerOptions` to the tsconfig that includes Vue source files. In projects with multiple tsconfigs, this is typically`tsconfig.app.json`, not the root`tsconfig.json` or`tsconfig.node.json`.

## Quick Reference

Enable strict template checking in`tsconfig.app.json`:

json
{
  "compilerOptions": { ... },
  "vueCompilerOptions": {
    "strictTemplates": true
  }
}


This enables all`checkUnknown*` options automatically.

## Options

| Option| Default| Effect||--------|---------|--------||`strictTemplates`|`false`| Enables all checkUnknown* options below||`checkUnknownComponents`|`false`| Error on undefined/unregistered components||`checkUnknownProps`|`false`| Error on props not declared in component definition||`checkUnknownEvents`|`false`| Error on events not declared via`defineEmits`||`checkUnknownDirectives`|`false`| Error on unregistered custom directives|
## Granular Control

If`strictTemplates` is too strict, enable individual checks:

json
{
  "vueCompilerOptions": {
    "checkUnknownComponents": true,
    "checkUnknownProps": false
  }
}


## Common Issue

**Problem:** vue-tsc passes but undefined components exist in templates.

**Cause:**`checkUnknownComponents` defaults to`false`.

**Fix:** Enable`strictTemplates` or`checkUnknownComponents` explicitly.

## Reference

Full documentation: https://github.com/vuejs/language-tools/wiki/Vue-Compiler-Options
The final version made the relationships between flags clearer, highlighted the defaults (which matter a lot here), and explained why strictTemplates implicitly enables all checkUnknown* checks. It also demonstrated how to enable checks individually if strict mode is overwhelming.