Stats
Actions
Tags
From qe-framework
Writes, debugs, and refactors JavaScript and TypeScript code using modern ES2023+ features, advanced type systems, and Node.js/Browser APIs. Use when building JS/TS applications, implementing complex generics, or ensuring end-to-end type safety.
How this skill is triggered — by the user, by Claude, or both
Slash command
/qe-framework:Qjs-ts-expertThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
- Building modern web applications (Frontend/Backend)
tsconfig.json or build systems (Vite, tRPC)package.json and tsconfig.json for module system and strictness levels.tsc --noEmit and eslint --fix. Resolve all errors before proceeding.strict: true in TS.?., Nullish coalescing ??).import/export over CommonJS.var (always use const or let).any without extreme justification.as assertions without necessity (prefer type guards).as const).type Brand<T, B extends string> = T & { readonly __brand: B };
type UserId = Brand<string, "UserId">;
type State = { status: "success"; data: any } | { status: "error"; err: Error };
function handle(s: State) {
switch (s.status) {
case "success": return s.data;
case "error": return s.err;
default: const _: never = s; throw new Error(_);
}
}
async function fetchSafe(url) {
try {
const res = await fetch(url);
if (!res.ok) throw new Error(res.status);
return await res.json();
} catch (e) {
return null;
}
}
/**
* Multiplies two numbers and returns the result.
* @param {number} a - First operand
* @param {number} b - Second operand
* @returns {number} The product of a and b
* @example multiply(3, 4) // => 12
*/
export function multiply(a: number, b: number): number {
return a * b;
}
/**
* Custom error for API failures with status code and retry flag.
*/
export class ApiError extends Error {
constructor(
public status: number,
public readonly retryable: boolean,
message?: string
) {
super(message || `API Error: ${status}`);
this.name = "ApiError";
}
}
/**
* Type guard to check if error is ApiError.
* @param {unknown} err - Error to check
* @returns {boolean} True if err is ApiError
*/
export function isApiError(err: unknown): err is ApiError {
return err instanceof ApiError;
}
/**
* Result type for operations that may fail.
* @template T - Success type
* @template E - Error type
*/
export type Result<T, E = Error> =
| { ok: true; value: T }
| { ok: false; error: E };
/**
* Creates a branded string type for validated identifiers.
* @template B - Brand literal
*/
export type UserId = string & { readonly __brand: "UserId" };
export const userId = (raw: string): UserId => raw as UserId;
/**
* Brief description of what the function does.
* @param {Type} paramName - Description of parameter
* @param {number} [optional=default] - Optional parameter with default
* @returns {ReturnType} Description of return value
* @throws {ErrorType} Description of when this error occurs
* @example
* myFunc("test", 42);
* // => "result"
*/
/**
* @class MyClass
* @description Detailed description of class purpose
* @extends ParentClass
* @example
* const instance = new MyClass();
* instance.method();
*/
/**
* @module utils
* @description Provides utility functions for data transformation
*/
npx eslint {file} or npx eslint --fix {file} to auto-fixnpx tsc --noEmit (no emit, error reporting only)npx prettier --write {file}.eslintrc.json or .eslintrc.cjs — ESLint rulestsconfig.json — TypeScript compiler options (must have strict: true).prettierrc or .prettierrc.json — Prettier formattingany types unless documented with @ts-expect-errorstrict: true, no implicit typesinnerHTML with user input; use textContent, innerText, or DOM APIsObject.freeze() on shared objects; never Object.assign() from untrusted user dataeval() or Function() constructor on user inputpackage-lock.json; run npm audit regularly; review package.json before bumping dependencies| Wrong | Correct |
|---|---|
let x: any = value | let x: string | number = value with proper type guards |
| Nested callbacks (callback hell) | Use async/await or .then() chains |
if (a == b) | Always use === for equality checks |
| Shared mutable state across modules | Use immutable patterns: const by default, pass copies or use Object.freeze() |
await promise without try/catch at module top-level | Always handle Promise rejection with .catch() or try/catch block |
npx claudepluginhub inho-team/qe-framework --plugin qe-frameworkCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.