Agent skill · forcedotcom
experience-lwc-typescript-migrate
Use when converting an existing JavaScript Lightning Web Component (.js, .html, .css) to TypeScript with full type annotations and a matching `.d.ts` file that exposes only the component's `@api` surface. TRIGGER when the user says \"convert LWC to TypeScript\", \"migrate LWC to TS\", \"rename .js to .ts for this component\", \"add types to my LWC\", \"generate .d.ts for this LWC\", \"type-annotate @api properties\", or \"produce declare module 'c/componentName' definitions\". DO NOT TRIGGER when the user is authoring a brand-new LWC from scratch (use experience-lwc-generate), generating Jest tests for an existing LWC (use experience-lwc-generate), or migrating an Aura component to LWC.
What it needs
About 5k tokens when loaded.
What this skill does
<!-- adk-managed-skill --> Converting LWC to TypeScript Convert a Lightning Web Component bundle from JavaScript to TypeScript. The deliverable is a fully-typed .ts implementation plus a .d.ts file that only exposes @api members (the public surface other LWCs consume). When to Use This Skill User wants to migrate a single component or a folder of components from .js to .ts. User needs a .d.ts for an existing LWC so other components (or an external TypeScript host) can import it safely. User is adding type annotations to an already-renamed .ts LWC that hasn't been properly typed yet. User wants JSDoc-style type hints upgraded to real TypeScript types. Prerequisites The component builds and runs correctly in JavaScript today. git is available (the rename must preserve history via git mv). A TypeScript compiler is wired into the build (either the SFDX TS pipeline or a standalone tsc step). --- Workflow Step 1 — Read the component Open every file in the bundle: Understand: What extends LightningElement? What is the class name? Which fields and methods carry the @api decorator? Which properties/methods have existing JSDoc (use as a type hint starting point, but validate against actual usage — JSDoc lies). Which parameters / return types can you infer from how the code is called internally? Step 2 — Rename .js → .ts using git mv Repeat for any helper .js files in the bundle (unless they're already .ts). Never plain mv — that loses the history link TypeScript reviewers rely on. Step 3 — Add type annotations in the .ts Apply types in this priority order so you stop as soon as the public contract is solid: 1. @api properties and methods first. Generate JSDoc if it's missing, then translate JSDoc types to TS syntax (string, number, boolean, Promise<T>). Validate each JSDoc claim against the code before trusting it. 2. Complex shapes become interface or type aliases — not inline shapes repeated everywhere. 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills forcedotcom/experience-lwc-typescript-migrate--ecd304