Encore provides tools to integrate your frontend applications seamlessly with backend APIs. It generates a fully typed TypeScript client based on your API definitions for easy usage.
$ npx skills add https://github.com/encoredev/skills --skill encore-frontendThe encore-frontend skill helps developers connect React and Next.js applications to Encore backend APIs. It generates fully-typed TypeScript clients automatically based on your API definitions, eliminating manual client code and type mismatches. This skill is essential for frontend developers building against Encore backends, ensuring type safety across the entire API boundary and reducing integration errors. By leveraging Encore's declarative infrastructure and type-safe APIs, frontends can trust that their API calls are validated at compile time.
Install using npm and use the provided commands to generate a client.
Generate a TypeScript client for local development.
Generate a TypeScript client for a deployed environment.
Connect frontend applications to backend services.
$ npx skills add https://github.com/encoredev/skills --skill encore-frontendgit clone https://github.com/encoredev/skillsCopy the install command above and run it in your terminal.
Launch Claude Code, Cursor, or your preferred AI coding agent.
Use the prompt template or examples below to test the skill.
Adapt the skill to your specific use case and workflow.
Generate a fully typed TypeScript client for the Encore backend API of [COMPANY] in the [INDUSTRY] industry. Use the API definitions provided by Encore to create the client, ensuring it includes all endpoints, types, and proper error handling. The client should be ready for immediate use in a frontend application.
```typescript
// Generated TypeScript client for Acme Corp's E-commerce API (Industry: Retail)
// Based on Encore API definitions - v1.2.0
import { ApiError, ApiResponse } from './api-common';
/**
* Client for interacting with Acme Corp's E-commerce API
*/
export class EcommerceClient {
private baseUrl: string;
private headers: Record<string, string>;
constructor(baseUrl: string = 'https://api.acme-corp.com', apiKey?: string) {
this.baseUrl = baseUrl;
this.headers = {
'Content-Type': 'application/json',
...(apiKey ? { 'X-API-Key': apiKey } : {}),
};
}
/**
* Fetch all products with optional pagination
* @param limit Maximum number of products to return (default: 20)
* @param offset Number of products to skip (default: 0)
*/
async getProducts(limit: number = 20, offset: number = 0): Promise<ApiResponse<Product[]>> {
const url = new URL(`${this.baseUrl}/products`);
url.searchParams.append('limit', limit.toString());
url.searchParams.append('offset', offset.toString());
const response = await fetch(url.toString(), {
method: 'GET',
headers: this.headers,
});
if (!response.ok) {
throw new ApiError(await response.json());
}
return response.json();
}
/**
* Create a new order
* @param orderData Order creation payload
*/
async createOrder(orderData: OrderCreate): Promise<ApiResponse<Order>> {
const response = await fetch(`${this.baseUrl}/orders`, {
method: 'POST',
headers: this.headers,
body: JSON.stringify(orderData),
});
if (!response.ok) {
throw new ApiError(await response.json());
}
return response.json();
}
// ... additional methods for other endpoints
}
// Type definitions
interface Product {
id: string;
name: string;
price: number;
stock: number;
category: string;
}
interface OrderCreate {
productIds: string[];
customerId: string;
shippingAddress: string;
}
interface Order {
id: string;
status: 'pending' | 'shipped' | 'delivered';
total: number;
items: { productId: string; quantity: number }[];
}
class ApiError extends Error {
constructor(public details: { message: string; code: string }) {
super(details.message);
this.name = 'ApiError';
}
}
interface ApiResponse<T> {
data: T;
meta?: { total: number; page: number; limit: number };
}
```Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan