Encore Frontend

What it does

This skill, Encore Frontend, automates frontend development tasks by generating fully typed clients from your API definitions. It connects your frontend applications to backend APIs using customizable templates provided by EncoreDev. The generated client simplifies API interactions within your frontend code, providing type safety and reducing boilerplate. This allows developers to focus on building user interfaces rather than managing raw HTTP requests.

When to use it

• When you need to quickly generate a typed client for interacting with a backend API during local development.
• To streamline the process of connecting a frontend application to a deployed (staging) environment's API.
• For projects using React, where you want to easily integrate generated API clients into components.
• When leveraging TanStack Query for data fetching and caching in your React applications.

Key capabilities

• Generates TypeScript clients from API definitions.
• Supports generating clients for local development and deployed environments (e.g., staging).
• Provides fully typed API calls within the generated client.
• Integrates with popular frontend frameworks like React.
• Example usage shown with TanStack Query for data fetching.

Example prompts

• "Generate a client for my local backend API."
• "Create a typed client for the staging environment."
• "Encore gen client --output ./frontend/src/client.ts --env local"

Tips & gotchas

• The generated Client needs to be instantiated with an API URL (e.g., "http://localhost:4000" or import.meta.env.VITE_API_URL).
• Ensure your API definitions are accurate for the client generation to succeed.
• The skill provides a starting point; you may need to adapt the generated code to fit your specific project's needs.