Custom Instructions

​

Overview

You can provide custom instructions for each synced repo in the GitHub settings page by clicking the pencil icon next to the repo’s name.

Think of custom instructions as a system prompt that contains high-level details about your repo’s stack and development best practices.

​

Example Instructions

This is a monorepo for ACME Inc. It is a web app that helps consumer software companies create widgets faster using large language models.

# Frontend

The frontend is a React Single Page Application built with TypeScript, using Create React App. It is located in `frontend/src`. The frontend communicates with the backend using GraphQL.

## Component library

It uses Base UI components from MUI. The common components are located in the `frontend/src/components` folder.

Use existing components for new features where possible. We use Storybook for component documentation and testing. Update the Storybook file for a component if you are significantly modifying the said component or updating its props.

## Styling

Styling is done with Tailwind CSS, a utility-first CSS framework. There are some global themes but you will rarely have to modify them.

# Backend

The backend is TypeScript and Node.js, located in `backend/src`. We use Apollo Server for our GraphQL implementation.

# Testing

We have backend unit tests and end-to-end (e2e) tests.

For the frontend, we primarily rely on Storybook for component testing and e2e tests for integration. While we don't currently write traditional frontend unit tests, we encourage thorough testing through these other methods.

​

Instructions to Provide

Consider including repo instructions based on the following topics. Be concise and prescriptive when writing instructions.

​

Product description

Two sentence description of what the web app does. No need for excessive detail—write enough to provide context on terminology used in the repo.

Question to answer:

• Could you describe what this repo (or the product) does in a few sentences?

​

Repo structure

Goal is to understand whether this is a monorepo or polyrepo, and if there are any important directories that Tusk should make a note of (e.g., shared utils, shared types, etc.).

Questions to answer:

• Is this a monorepo?
  • If monorepo, specify the path for where the frontend lives and note down directories that may be interesting. For example, there may be shared types between FE and BE.
  • Are there any directories that Tusk does not need to touch?
• If polyrepo, what does this specific repo do?

​

Frontend framework

Questions to answer:

• What language is your frontend written in?
• What is your frontend framework (React, Angular, Vue, etc.)?
• If React, are you using Server Side Rendering (e.g., Next.js) or is this a Single Page Application (SPA)?
  • If Server Side Rendering, are you using Next.js?
  • If Next.js, are you using pages or app router?

​

Component library

Questions to answer:

• Do you use any third-party component libraries (e.g., Chakra UI, MUI, etc.)? Do you have a design system?
• Where do common components live in this repo?
  • Are there common components in a specific directory, in a separate repo (i.e., your design system), or just imported directly from third-party library?
• Do you use Storybook when creating components?

​

Styling info

Goal is to understand how you style components and whether Tusk should do in-line styling or look for separate styling files.

Questions to answer:

• What do you use to style your frontend (e.g., Tailwind, in-line styling, CSS files, etc.)
• Can you provide code examples of components and how you style them?
• Are there any theme styling files?

​

API

Goal is to understand how the frontend fetches data from the backend.

Questions to answer:

• How does the frontend consume data from the backend? REST API or GraphQL?
• If REST: Do you use any packages for this or just axios or fetch to consume REST endpoints?
• Does all the logic to fetch data live in a separate directory (e.g., a utils directory) or do you call the APIs directly inside the components?

​

State management

Goal is to understand if you mainly use the standard state management provided by the frontend framework or if you’re using a separate library.

Questions to answer:

• Do you use any libraries for state management? (e.g., Redux, Recoil, etc.)
  • If it’s an uncommon library, it’s worth adding examples.
• Do forms use a special type of state management library?

​

Internationalization

Questions to answer:

• Do you use internationalization (i18n) for copy in the product?
• What package do you use for it? How is the internationalized copy generated?
  • Could be worth providing examples to Tusk of how you use i18n in your specific repo—what hooks are used, etc.

​

Testing

Questions to answer:

• How do you write frontend tests (if any)?
• What are your general testing expectations for developers in the frontend?
• What is the current test coverage?

​

Misc questions

Questions to answer:

• Is there anything else that you’d mention to a new software engineer onboarding to your codebase? Perhaps something unique or non-standard that you’re doing right now?