Merge pull request #14961 from storybookjs/chore_docs_write_addon_polish

Chore: (Docs) Minor polish to the write an addon documentation

docs/addons/writing-addons.md

@@ -6,7 +6,7 @@ One of Storybook's main features is its robust addon ecosystem. Use addons to en
 
 ## What we're building
 
-For this example we're going to build a bare-bones addon which:
+For this example, we're going to build a bare-bones addon which:
 
 - Adds a new panel in Storybook.
 - Retrieves a custom parameter from the stories.
@@ -27,9 +27,9 @@ We recommend a common addon file and directory structure for consistency.
 
 ### Get started
 
-Open a new terminal and create a new directory called `my-addon`. Inside it run `npm init` to initialize a new node project. For your project's name choose `my-addon` and for entry point `dist/preset.js`.
+Open a new terminal and create a new directory called `my-addon`. Inside it, run `npm init` to initialize a new node project. For your project's name, choose `my-addon` and for entry point `dist/preset.js`.
 
-Once you've gone through the prompts your `package.json` should look like:
+Once you've gone through the prompts, your `package.json` should look like:
 
 ```json
 {
@@ -57,7 +57,7 @@ npx sb init
 ```
 
 <div class="aside">
-Initializing Storybook adds the building blocks for our addon. If you're building a standalone Storybook addon, set the React and Storybook packages as peer dependencies. This prevents the addon from breaking Storybook when there are different versions available.
+💡 Initializing Storybook adds the building blocks for our addon. If you're building a standalone Storybook addon, set the React and Storybook packages as peer dependencies. It prevents the addon from breaking Storybook when there are different versions available.
 </div>
 
 Next, create a `.babelrc.js` file in the root directory with the following:
@@ -87,7 +87,7 @@ Change your `package.json` and add the following script to build the addon:
 ```
 
 <div class="aside">
-Running <code>yarn build</code> at this stage will output the code into the <code>dist</code> directory, transpiled into a ES5 module ready to be installed into any Storybook.
+💡 Running <code>yarn build</code> at this stage will output the code into the <code>dist</code> directory, transpiled into a ES5 module ready to be installed into any Storybook.
 </div>
 
 Finally, create a new directory called `src` and inside a new file called `preset.js` with the following:
@@ -108,7 +108,7 @@ Presets are the way addons hook into Storybook. Among other tasks they allow you
 - Add to the [preview iframe](./writing-presets.md#preview-entries)
 - Modify [babel](./writing-presets.md#babel) and [webpack settings](./writing-presets.md#webpack)
 
-For this example, we'll just modify Storybook's UI.
+For this example, we'll modify Storybook's UI.
 
 ### Add a panel
 
@@ -125,7 +125,7 @@ Now let’s add a panel to Storybook. Inside the `src` directory, create a new f
 <!-- prettier-ignore-end -->
 
 <div class="aside">
-Make sure to include the <code>key</code> when you register the addon. This will prevent any issues when the addon renders.
+💡 Make sure to include the <code>key</code> when you register the addon. It will prevent any issues when the addon renders.
 </div>
 
 Going over the code snippet in more detail. When Storybook starts up:
@@ -149,7 +149,7 @@ Finally, let’s hook it all up. Change `.storybook/main.js` to the following:
 <!-- prettier-ignore-end -->
 
 <div class="aside">
-When you register a Storybook addon, it will look for either <code>register.js</code> or <code>preset.js</code> as the entry points.
+💡 When you register a Storybook addon, it will look for either <code>register.js</code> or <code>preset.js</code> as the entry points.
 </div>
 
 Run `yarn storybook` and you should see something similar to:
@@ -172,11 +172,11 @@ Next, let’s replace the `MyPanel` component from above to show the parameter.
 
 The new version is made smarter by [`useParameter`](./addons-api.md#useparameter), which is a [React hook](https://reactjs.org/docs/hooks-intro.html) that updates the parameter value and re-renders the panel every time the story changes.
 
-The [addon API](./addons-api.md) provides hooks like this so all of that communication can happen behind the scenes. That means you can focus on your addon's functionality.
+The [addon API](./addons-api.md) provides hooks like this, so all of that communication can happen behind the scenes. That means you can focus on your addon's functionality.
 
 ### Using the addon with a story
 
-When Storybook was initialized it provided a small set of examples stories. Change your `Button.stories.js` to the following:
+When Storybook was initialized, it provided a small set of example stories. Change your `Button.stories.js` to the following:
 
 <!-- prettier-ignore-start -->
 
@@ -203,7 +203,7 @@ After applying the changes to the story, the Storybook UI will show the followin
 
 ### Root level preset.js
 
-Before publishing the addon, we'll need to make one final change. In the root directory of the addon create a new file called `preset.js` and add the following:
+Before publishing the addon, we'll need to make one last change. In the root directory of the addon, create a new file called `preset.js` and add the following:
 
 <!-- prettier-ignore-start -->
 
@@ -219,7 +219,7 @@ This auto-registers the addon without any additional configuration from the user
 
 ### Packaging and publishing
 
-Now that you've seen how to create a bare-bones addon, let's see how to share it with the community. Before we begin, make sure your addon meets the following requirements:
+Now that you've seen how to create a bare-bones addon let's see how to share it with the community. Before we begin, make sure your addon meets the following requirements:
 
 - `package.json` file with metadata about the addon
 - Peer dependencies of `react` and `@storybook/addons`
@@ -235,12 +235,10 @@ Learn how to [add to the addon catalog](./addon-catalog.md).
 
 ### More guides and tutorials
 
-In the previous example, we introduced the structure of an addon, but barely scratched the surface of what addons can do.
+In the previous example, we introduced the structure of an addon but barely scratched the surface of what addons can do.
 
-To dive deeper we recommend Storybook's [creating an addon](https://storybook.js.org/tutorials/create-an-addon/) tutorial. It’s an excellent walkthrough that covers the same ground as the above introduction, but goes further and leads you through the full process of creating a realistic addon.
-
-[How to build a Storybook addon](https://www.chromatic.com/blog/how-to-build-a-storybook-addon/) shows you how to create a standalone addon in great detail.
+To dive deeper, we recommend Storybook's [creating an addon](https://storybook.js.org/tutorials/create-an-addon/) tutorial. It’s an excellent walkthrough covering the same ground as the above introduction but goes further and leads you through the entire process of creating a realistic addon.
 
 ### Addon kit
 
-To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon.
+To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon.