teams-agent-accelerator-templates / rules

---
description: React development of the Teams Agent Accelerator Templates gallery
globs: app/**/*.tsx,.ts,package.json
alwaysApply: false
---
# Summary
- You are an expert AI programming assistant that primarily focuses on producing clear, readable React and TypeScript code.
- The user knows you are friendly despite you supplying terse, shorter responses. 

## Tech stack
- React 8
- Next.js 15
- FluentUI

## React rules
- Follow react conventions from https://18.react.dev/
- Prefer functional components using FC imported from 'react' like { FC }. Fix React function components that do not follow this convention.
- Keep imports from @microsoft/spark.___ as is, and do not modify or update the syntax of the import.
- Keep <></> React components when they exist.
- The `src` in an `Image` component should always be prefixed with `config.basePath`. For example:

```tsx
import config from "path/to/next.config";

<Image
  src={`${publicRuntimeConfig.basePath}/next.svg`}
/>
```

## FluentUI
- For colors, fonts, spacing, typography styles etc, use fluent ui's tokens object, found at https://github.com/microsoft/fluentui/tree/master/packages/tokens/src/global and https://react.fluentui.dev/?path=/docs/theme-colors--docs
- Use FluentUI for all components like <Button> instead of HTML <button>.
- FluentUI documentation can be found at https://react.fluentui.dev
- Use proper naming conventions for components (e.g. `StyledButton`)
- Create reusable styled components in a parallel ComponentName.styles.ts file that uses `makeStyles` from FluentUI.
- Re-use style classes in a styles file as much as possible, and combine usage via mergeClasses in the component like `className={mergeClasses(classes.root, classes.flex)}`. See [Json.styles.ts](mdc:packages/devtools/src/components/Json/Json.styles.ts) as an example.
- Use CSS-in-JS Griffel styles in the parallel ComponentName.styles.ts file instead of inline styles.
- Where there are multiple components in one folder, it is ok to use one `___.styles.ts` file for all components in that folder unless indicated otherwise. See [Json.styles.ts](mdc:packages/devtools/src/components/Json/Json.styles.ts) and [JsonObject.tsx](mdc:packages/devtools/src/components/Json/JsonObject.tsx)
- Use CSS shorthands instead of importing shorthands from FluentUI
- Export the styles object as `export default useComponentNameClasses`, and import them as `const classes = useComponentNameClasses`.
- Use default export on components and their styles unless the file has more than one export. See [DevtoolsBanner.tsx](mdc:packages/devtools/src/components/DevtoolsBanner/DevtoolsBanner.tsx)
- Organize styles in a logical way.
- Avoid deleting code unrelated to the current task unless it is conflicting with the changes we are trying to make.
- Add ComponentName.displayName = "ComponentName" to the bottom of component files if they do not already exist. 
<!-- - Add a `memo` wrapper to all components if it hasn't already been done. See [DevtoolsBanner.tsx](mdc:packages/devtools/src/components/DevtoolsBanner/DevtoolsBanner.tsx) -->
- Sort imports from the same package alphabetically.
- Minimize adding explanatory comments to the code, and instead explain them outside of the code.
- Always use the `tokens` to access the theme and use it for colors. Do not use hex codes directly in `makeStyles`. For example: 

```ts
import { tokens } from '@fluentui/react-components';

const useStyles = makeStyles({
  root: { display: 'flex' },
  rootPrimary: { color: tokens.colorNeutralForeground3 },
});
``` 


## Folder structure
`app` - Where the React Application lives