<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" />

→ The following is a reference of best practices on how to structure and write instructions for **component-container-template.**

→ We will cover 2 main .md file structures, as well as give templates and examples from our own design system’s guidelines, these files are:

1. 📁 supernova / components.md
2. 📁 supernova / components / specific-component-info.md

→ You can adapt this to your own design system component container and follow this setup as a reference of a structure we know works well.

→ Any questions / feedback please ping us in your dedicated Supernova slack channel!

</aside>

How to write components.md instructions

What goes into the components.md doc?

1. The file contains general rules for components (where to import from, any universal rules applicable to all components)
2. The file mentions how to get to specific component documentation knowing a component name
3. A comprehensive list of component names available in the package
4. Make sure that each component has an individual markdown file with doc
   1. For example, if I have an Accordion component, I should have supernova/components/Accordion.md file
   2. We cover how to structure and where to locate these specific component information files later

compnents.md content template

Example of compnents.md content

How to write specific-component-info.md instructions

What goes into the specific-component-info.md doc?

1. Outlines specific documentation per component
2. Mentions a usage example, props table, any specific guidelines
3. In the root supernova folder create a components folder with instructions for each of your components to instruct the LLM on how to best use them
4. The LLM references components.md file first and uses it to be directed to read the individual component’s documentation

<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" />

Note: we are exploring a more automated and maintainable way to do this process in the future, but for now these need to be added by your team. We advise to use an AI agent to help with this process :)

</aside>

specific-component-info.md content template

Example of DMCollapsible.md content