fix: add more information

Author: shleewhite

website/docs/getting-started/for-engineers.md

@@ -78,25 +78,45 @@ Our component library assumes that a box-sizing reset is applied globally in you
 
 ### Single file components
 
-If you are are using single file components (i.e., `.gts` or `.gjs` files), the components need to be individually imported into the file for them to render. All components can be imported from the `@hashicorp/design-system-components/components` path.
+If you are are using single file components (ie., `.gts` or `.gjs` files), the components need to be individually imported into the file for them to render. All components can be imported from the `@hashicorp/design-system-components/components` path. To use a component's signature, you must import it from the definition file.
 
 ```typescript
-import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import type { TOC } from '@ember/component/template-only';
 import { 
   HdsButton, 
   HdsFormTextInputField
 } from '@hashicorp/design-system-components/components';
 
-const MyComponent: TemplateOnlyComponent = <template>
-  <HdsFormTextInputField as |F|>
+import type {
+  HdsFormTextInputFieldSignature
+} from '@hashicorp/design-system-components/components/hds/form/text-input/field';
+
+interface MyComponentSignature {
+  Args: {};
+  Element: HdsFormTextInputFieldSignature;
+}
+
+const MyComponent: TOC<MyComponentSignature> = <template>
+  <HdsFormTextInputField ...attributes as |F|>
     <F.Label>Name</F.Label>
   </HdsFormTextInputField>
-  <HdsButton @text="Save">
+  <HdsButton type="submit" @text="Save">
 </template>;
 
 export default MyComponent;
 ```
 
+In the rare cases where you need to use an HDS modifier, they are only exported from their definition file
+
+```typescript
+import hdsTooltip from '@hashicorp/design-system-components/modifiers/hds-tooltip';
+import hdsCodeEditor from '@hashicorp/design-system-components/modifiers/hds-code-editor';
+```
+
+For more information on single file components, see the Ember docs:
+* [Intro to components](https://guides.emberjs.com/release/components/introducing-components/)
+* [Glimmer components](https://guides.emberjs.com/release/typescript/core-concepts/invokables/#toc_glimmer-components)
+
 ## Icons
 
 There are two ways to use icons in your codebase. We provide icons: