skills.rest
linzb93
linzb93COMMUNITY
Explore all skills by this author →
WebsiteGitHub

api-extractor

Extracts inline API calls from Vue components into centralized api.js and TypeScript type files.

1|Updated Jan 21, 2026
Search Tags:#typescript#refactoring#frontend#code generation#vue#pagination#api extraction
One-click install
npx skills add https://github.com/linzb93/ai-coding-docs --skill api-extractor-linzb93
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: api-extractor
Source: https://github.com/linzb93/ai-coding-docs/tree/main/vue3/skills/api-extractor
Command: npx skills add https://github.com/linzb93/ai-coding-docs --skill api-extractor-linzb93

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Inline API calls scattered across Vue components make codebases hard to maintain and types hard to reuse. This Skill refactors those calls into a centralized shared/api.js module with matching TypeScript interfaces in types/index.ts. ## Core Features & Use Cases - Single-file or batch extraction: Process one .vue file or recursively scan an entire directory of components. - Automatic type generation: Creates Request/Response interfaces, including pagination-aware types extending PaginationParms and PaginationResponse. - Module-aware placement: Enforces strict file locations (src/views/<Module>/shared/api.js and src/views/<Module>/types/index.ts) and computes correct relative import paths. - Use Case: Tell the assistant to extract the API calls from src/views/order, and it will generate typed API functions, update the type definitions, and rewrite each component to import the new functions. ## Quick Start Extract all API calls from the src/views/demo directory into shared api functions with TypeScript types.

Frequently Asked Questions about api-extractor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract API calls from Vue components into a shared module?▼

Point the Skill at a single .vue file or a directory, and it scans for inline calls like post('/url', params), generates typed functions in shared/api.js, adds interfaces to types/index.ts, and rewrites the component to import the new functions.

How to refactor inline axios or fetch calls in Vue 3 projects?▼

This Skill detects inline post/get calls in .vue files and centralizes them into src/views/<Module>/shared/api.js with JSDoc comments. It also creates matching TypeScript Request and Response interfaces so the refactored calls stay type-safe.

Does it support batch extraction for an entire directory?▼

Yes, specifying a directory such as src/views/order triggers recursive scanning of all .vue files within it. Each file is mapped to its module root so API and type files are created in the correct shared and types locations.

How are paginated API types handled in TypeScript?▼

When parameters contain pageIndex/pageSize or responses contain list/totalCount, the generated Request interface extends PaginationParms and the Response extends PaginationResponse<ItemType>, both imported from @/types/index.

Where are the generated API and type files placed?▼

API functions go strictly in src/views/<Module>/shared/api.js and interfaces in src/views/<Module>/types/index.ts. Creating type.ts or types.ts inside the shared directory is explicitly forbidden, and missing types directories are created automatically.

Related Skills

Explore More Software Engineering Skills→
symbiosikasymbiosika

frontend-app

Scaffold and edit Vue 3 components and views with Vite and Tailwind CSS v4.

Official
Advanced
joshua3403joshua3403

phase-6-ui-integration

Automate UI page implementation and API wiring for frontend projects with centralized client architecture.

Community
Advanced
QredenceQredence
51

frontend-refactor-worker

Coordinate frontend file moves, import updates, and symbol renames with validation.

Official
Advanced
eleva-labseleva-labs

api-generate

Generate backend API scaffolding from OpenAPI, Swagger, or GraphQL specifications.

Official
Basic