Refine custom directives documentation in use.mdx

Author: thomasbuilds

src/routes/reference/jsx-attributes/use.mdx

@@ -3,33 +3,35 @@ title: use:*
 order: 5
 ---
 
-These are custom directives. In a sense this is just syntax sugar over ref but allows us to easily attach multiple directives to a single element. A directive is a function with the following signature:
+Custom directives attach reusable behavior to DOM elements, acting as syntactic sugar over `ref`. They’re ideal for complex DOM interactions like scrolling, tooltips, or resizing, which are cumbersome to repeat in JSX.
+
+A directive is a function with the following signature
 
 ```ts
-function directive(element: Element, accessor: () => any): void
+function directive(element: HTMLElement, accessor: Signal<any>): void
 ```
 
 Directive functions are called at render time but before being added to the DOM. You can do whatever you'd like in them including create signals, effects, register clean-up etc.
 
 ```tsx
 const [name, setName] = createSignal("");
 
-function model(el, value) {
-	const [field, setField] = value();
-	createRenderEffect(() => (el.value = field()));
-	el.addEventListener("input", (e) => setField(e.target.value));
+function model(element: HTMLInputElement, accessor: Accessor<Signal<string>>) {
+	const [field, setField] = accessor();
+	createRenderEffect(() => (element.value = field()));
+	element.addEventListener("input", ({ target }) => setField(target.value));
 }
 
 <input type="text" use:model={[name, setName]} />
 ```
 
-To register with TypeScript extend the JSX namespace.
+To register with TypeScript extend the JSX namespace
 
 ```ts
 declare module "solid-js" {
 	namespace JSX {
-		interface Directives {
-			model: [() => any, (v: any) => any]
+		interface DirectiveFunctions {
+			model: typeof model;
 		}
 	}
 }