doc: clarify which packages are dev dependencies. add collapsed instr…

…uctions for yarn.

I've proposed splitting the runtime vs dev dependencies into separate lines as aligned with best practices. Additionally, I've added a default-collapsed section for yarn users.

README.md

@@ -72,9 +72,25 @@ and then deserialized at its destination using the defined schema.
 
 1. Install the code generator, the runtime library, and the [Buf CLI](https://buf.build/docs/ecosystem/cli-overview):
 
+   <details open>
+   <summary>npm</summary>
+     
    ```shellsession
-   npm install @bufbuild/protobuf @bufbuild/protoc-gen-es @bufbuild/buf
+   npm install @bufbuild/protobuf
+   npm install --save-dev @bufbuild/protoc-gen-es @bufbuild/buf
    ```
+     
+   </details>
+
+   <details>
+   <summary>yarn</summary>
+     
+   ```shellsession
+   yarn add @bufbuild/protobuf
+   yarn add -D @bufbuild/protoc-gen-es @bufbuild/buf
+   ```
+
+   </details>
 
 2. Create a `buf.gen.yaml` file that looks like this:
 
@@ -98,9 +114,23 @@ and then deserialized at its destination using the defined schema.
 
 4. Generate your code with `buf` or [`protoc`]:
 
+   <details open>
+   <summary>npm</summary>
+
    ```shellsession
    npx buf generate
    ```
+
+   </details>
+
+   <details>
+   <summary>yarn</summary>
+
+   ```shellsession
+   yarn buf generate
+   ```
+
+   </details>
 
 You should now see a generated file at `src/gen/example_pb.ts` that contains a type `User`, and a schema `UserSchema`.
 From here, you can begin to work with your schema.