
using-typescript-lsp
Use when working with TypeScript or JavaScript code and typescript-lsp plugin is enabled - for finding references, checking types, navigating definitions, or verifying type correctness
- Installs
- 50
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/mhagrelius/dotfiles --skill using-typescript-lsp- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads using-typescript-lsp automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Using TypeScript LSP
Overview
The typescript-lsp plugin provides semantic code intelligence for TypeScript and JavaScript. Use LSP tools instead of grep/read when you need semantic accuracy - LSP understands TypeScript's type system, inheritance, interfaces, and symbol relationships.
When to Use LSP vs Text Search
digraph lsp_decision {
"Need code info?" [shape=diamond];
"Semantic accuracy needed?" [shape=diamond];
"Use LSP tool" [shape=box];
"Use Grep/Read" [shape=box];
"Need code info?" -> "Semantic accuracy needed?" [label="yes"];
"Need code info?" -> "Use Grep/Read" [label="no - text patterns"];
"Semantic accuracy needed?" -> "Use LSP tool" [label="yes"];
"Semantic accuracy needed?" -> "Use Grep/Read" [label="no"];
}
Use LSP for:
- Finding all usages before refactoring
- Getting type information (inferred or explicit)
- Navigating to definitions (including node_modules)
- Checking for type errors
- Understanding interface implementations
Use Grep for:
- Text patterns (comments, strings, config files)
- Cross-language searches
- JSON, YAML, markdown content
- When LSP unavailable
LSP Operations Quick Reference
| Task | LSP Operation | Instead of |
|---|---|---|
| Find all callers of a function | findReferences | Grep for function name |
| Get function/variable type | hover | Read file + parse |
| Jump to definition | goToDefinition | Grep + Read |
| Check type errors | getDiagnostics | Run tsc CLI |
| View file structure | documentSymbol | Read entire file |
Key Patterns
Before Refactoring: Find All References
Wrong approach:
Grep for "formatDuration" -> may miss renamed imports, get false positives from comments
Right approach:
LSP findReferences on symbol -> gets ALL semantic usages, no false positives
Getting Type Information
Wrong approach:
Read file -> find function -> manually trace type inference
Right approach:
LSP hover on symbol -> instant type signature with inferred types resolved
Verifying Type Correctness
Wrong approach:
Bash: npx tsc --noEmit (slow, external process)
Right approach:
LSP getDiagnostics on changed files -> instant, no subprocess
Finding Interface Implementations
Wrong approach:
Grep for "implements InterfaceName" -> misses duck-typed objects
Right approach:
LSP findReferences on interface -> finds all implementations including structural matches
Common Mistakes
| Mistake | Why It's Wrong | Fix |
|---|---|---|
| Grep for symbol before rename | Text search misses aliased imports, re-exports | Use findReferences |
| Read entire file for one type | Wastes context, slow | Use hover |
| Run tsc after every change | Slow, external tool | Use getDiagnostics |
| Grep to find definition | May find wrong match (same name, different module) | Use goToDefinition |
| Grep for interface usages | Misses structural/duck typing | Use findReferences |
How LSP Tools Work
LSP is a built-in Claude Code tool, not a bash command. When typescript-lsp plugin is enabled, Claude Code automatically provides these operations:
goToDefinition- navigate to where symbol is definedfindReferences- find all usages of a symbolhover- get type signature and documentationgetDiagnostics- get type errors for a filedocumentSymbol- list all symbols in a file
You invoke these through Claude's tool system, not via bash. If LSP is unavailable, fall back to grep/read but document the limitation.
Supported File Types
.ts, .tsx, .js, .jsx, .mts, .cts, .mjs, .cjs
Prerequisites
- Plugin enabled:
typescript-lsp@claude-plugins-officialin~/.claude/settings.json - Language server installed:
npm install -g typescript-language-server typescript - Project configured:
tsconfig.jsonorjsconfig.jsonpresent (recommended for accuracy)
Checking LSP Availability
Always try LSP first. If the LSP tools aren't available, they'll return an error. Don't preemptively fall back to grep just because you're unsure.
1. Attempt LSP operation (e.g., findReferences)
2. If tool error → fall back to grep/read with documented limitation
3. If success → use the semantic results
Fallback Strategy
If LSP is unavailable (tool not found, server not running):
- Document the limitation - explicitly state: "LSP unavailable, using text search as fallback"
- Use Grep with caution - understand it may miss aliased imports or re-exports
- Verify manually - for refactoring, double-check results make sense semantically
- Suggest fix - remind user to ensure typescript-language-server is installed and plugin enabled
Never silently fall back. Always tell the user when you're using text search instead of LSP so they understand the limitations.
Red Flags - Stop and Use LSP
These thoughts mean you should use LSP, not grep:
| Thought | Reality |
|---|---|
| "Let me grep for this function" | If it's a symbol, use findReferences |
| "I'll read the file to find the type" | Use hover for instant type info |
| "Let me run tsc to check" | Use getDiagnostics - faster, no subprocess |
| "I'll search for where this is defined" | Use goToDefinition - semantic accuracy |
| "Grep is faster for quick searches" | LSP is faster for semantic queries |
| "I need to find all implementations" | Use findReferences - catches structural matches |
When LSP Won't Help
- No typescript-language-server binary installed
- Working with pure JavaScript without jsconfig.json (limited type inference)
- Cross-language references (e.g., TypeScript calling Rust via WASM)
- Comment/string literal searches
- Config files (JSON, YAML, etc.)
- Node modules not installed (
npm installneeded first)
FAQ
What does the using-typescript-lsp skill do?
Use when working with TypeScript or JavaScript code and typescript-lsp plugin is enabled - for finding references, checking types, navigating definitions, or verifying type correctness
How do I install using-typescript-lsp?
Run npx skills add https://github.com/mhagrelius/dotfiles --skill using-typescript-lsp in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/using-typescript-lsp/ (personal) or .claude/skills/using-typescript-lsp/ (project).
Which AI agents can use using-typescript-lsp?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is using-typescript-lsp safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains using-typescript-lsp?
It is published by mhagrelius in mhagrelius/dotfiles. It has 50 recorded installs.
More from mhagrelius/dotfiles
dotnet-10-csharp-14
mhagrelius/dotfiles
Use when building .NET 10 or C 14 applications; when using minimal APIs, modular monolith patterns, or feature folders; when implementing HTTP resilience, Options pattern, Channels, or validation; when seeing outdated patterns like old extension method syntax
developing-gtk-apps
mhagrelius/dotfiles
Use for any change to a GTK 4/libadwaita app, new or existing, whether or not the request mentions GTK. Trigger on the repo rather than the wording — if Cargo.toml depends on gtk4/libadwaita, or sources import gi/Gtk (Python) or use Gtk (Vala), this applies to every change to that app, including requests phrased purely as symptoms ("reordering doesn't work", "pressing enter should continue the list", "the window opens too small"). Covers app boilerplate and new features; behaviour bugs in drag-and-drop, context menus, keyboard and text editing, focus, selection, and window sizing; threading, signals, and lifecycle; gtk-rs calls that fail to compile; GSettings, resources, packaging, and tests. Delegates widget choice, layout, and HIG to designing-gnome-ui.
building-tui-apps
mhagrelius/dotfiles
Use when building interactive terminal dashboards or full-screen terminal applications; when implementing keyboard navigation, live data updates, or multi-panel layouts; when TUI is flickering, slow, or unresponsive; when handling terminal resize events
designing-gnome-ui
mhagrelius/dotfiles
Open the skill to read its SKILL.md instructions.
working-with-ms-agent-framework
mhagrelius/dotfiles
Use when building AI agents with Microsoft Agent Framework (Semantic Kernel + AutoGen unified); when implementing memory or context providers; when threads won't deserialize; when workflow checkpointing fails; when migrating from Semantic Kernel or AutoGen; when seeing ChatAgent or AgentThread errors
working-with-aspire
mhagrelius/dotfiles
Use when building distributed apps with Aspire; orchestrating .NET, JavaScript, Python, or polyglot services; when environment variables or service discovery aren't working; when migrating from .NET Aspire 9 to 13+ or Community Toolkit; when seeing AddNpmApp deprecated errors; when OTEL not appearing in dashboard; when ports change on restart breaking OAuth; when configuring MCP server for AI assistants; when debugging Aspire apps and need to check resource status or logs
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.