anycallhome-site/src/guidelines/Guidelines.md

Add your own guidelines here <!--

System Guidelines

Use this file to provide the AI with rules and guidelines you want it to follow. This template outlines a few examples of things you can add. You can add your own sections and format it to suit your needs

TIP: More context isn't always better. It can confuse the LLM. Try and add the most important rules you need

General guidelines

Any general rules you want the AI to follow. For example:

• Only use absolute positioning when necessary. Opt for responsive and well structured layouts that use flexbox and grid by default
• Refactor code as you go to keep code clean
• Keep file sizes small and put helper functions and components in their own files.

---

Design system guidelines

Rules for how the AI should make generations look like your company's design system

Additionally, if you select a design system to use in the prompt box, you can reference your design system's components, tokens, variables and components. For example:

• Use a base font-size of 14px
• Date formats should always be in the format “Jun 10”
• The bottom toolbar should only ever have a maximum of 4 items
• Never use the floating action button with the bottom toolbar
• Chips should always come in sets of 3 or more
• Don't use a dropdown if there are 2 or fewer options

You can also create sub sections and add more specific details For example:

Button

The Button component is a fundamental interactive element in our design system, designed to trigger actions or navigate users through the application. It provides visual feedback and clear affordances to enhance user experience.

Usage

Buttons should be used for important actions that users need to take, such as form submissions, confirming choices, or initiating processes. They communicate interactivity and should have clear, action-oriented labels.

Variants

• Primary Button
  • Purpose : Used for the main action in a section or page
  • Visual Style : Bold, filled with the primary brand color
  • Usage : One primary button per section to guide users toward the most important action
• Secondary Button
  • Purpose : Used for alternative or supporting actions
  • Visual Style : Outlined with the primary color, transparent background
  • Usage : Can appear alongside a primary button for less important actions
• Tertiary Button
  • Purpose : Used for the least important actions
  • Visual Style : Text-only with no border, using primary color
  • Usage : For actions that should be available but not emphasized -->