Requirements for new items

This page serves as an index for all the technical & design guidelines around the creation of a new item.

1. .zip maximum size: What's the maximum size allowed for the archives? 
2. Browser support: What browsers do I need to support?
3. Use of prettier with the same baseline as the open-source repository: https://github.com/mui/material-ui/blob/master/prettier.config.mjs 
4. If going for a dependency that is already covered in the MUI open-source components, have a good justification for it. Can I use external libraries? If you are using recharts over MUI X charts, it's fair game, but we would love to know why, so we know what to fix for the next template author.
5. A correct use of links. The best way to test this: Does cmd + click open the link in a new tab? If not, it's not done correctly.
6. Use of a sane set of ESLint rules and no errors. You can refer to https://github.com/mui/material-ui/blob/master/eslint.config.mjs as a healthy set of default rules.
7. No Accessibility, Best Practices, and SEO errors reported by https://pagespeed.web.dev/. 
8. No low-resolution images. Build everything for >200 PPI screens.
9. Optimisation of the images. For example, SVG should be optimised; it wouldn't make sense to have an SVG x10 bigger than it needs to be, because it has a lot more resolution data than needed.
10. Do not use '<Box>' without using its props. A better alternative is to use a raw div.
11. Use 'shouldForwardProp' for reusable components.
12. Do not use 'React.FC'. It's not needed https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/.
13. Unless using Next.js or an automation plugin, do not import from the root npm package directly, especially not from the root of the icon package. Import one level deep instead, as in the demos of the docs, to improve the performance in dev mode.