Docs: Minor documentation improvements

Development.md

@@ -1,24 +1,24 @@
 ## Running against development/staging
 
-You can simply start the storybook with the `CHROMATIC_BASE_URL` set, as you would with the chromatic CLI:
+You can start the addon's Storybook with the `CHROMATIC_BASE_URL` set, as you would with the Chromatic CLI:
 
 ```bash
 CHROMATIC_BASE_URL=https://www.staging-chromatic.com yarn storybook
 ```
 
-If running with the index URL set in against the addon's storybook, we'll also update the configured
-project id appropriately. If you are running in dev, you can either tweak your database to have
-the correct project id/token, or you can run with the extra env vars set:
+If running with the index URL set in against the addon's Storybook, we'll also update the configured
+project identifier appropriately. If you are running in dev, you can either tweak your database to have
+the correct project identifier/token, or you can run with the extra environment variables set:
 
 ```bash
 CHROMATIC_PROJECT_ID=xyz CHROMATIC_PROJECT_TOKEN=abc CHROMATIC_BASE_URL=https://www.dev-chromatic.com yarn storybook
 ```
 
-## Running against an outside storybook
+## Running against an outside Storybook
 
-If you want to test the addon with a real project, you can install from npm as usual -- we publish canaries for each PR. You can also link the addon in the usual ways.
+If you want to test the addon with an actual project, you can install it from npm as usual -- we publish canaries for each PR. You can also link the addon in the usual ways.
 
-When running you can also connect the adon to staging/dev in the same way, although you'll need to manually configure the project id/token.
+When running, you can connect the addon to staging/dev similarly, although you'll need to configure the project identifier/token manually.
 
 ```bash
 CHROMATIC_BASE_URL=https://www.staging-chromatic.com yarn storybook

README.md

@@ -1,42 +1,93 @@
-# Storybook Addon Visual Tests
+# Storybook Visual Testing addon
 
-Visual Testing addon with Chromatic
+The Visual Testing addon enables you to run visual tests on your stories and compare changes with the latest baselines across multiple viewports and browsers to catch UI regressions early in development without leaving Storybook.
 
-## Installation
 
-Add the `@chromaui/visual-tests` addon, and add it to `main.js`:
+## Prerequisites
 
-```
-yarn add --dev @chromaui/visual-tests
-```
+- Chromatic [account configured](https://www.chromatic.com/docs/setup#sign-up) with access to a project
+- Storybook 7.2 or later
+
+## Getting Started
 
+Run the following command to install the addon and automatically configure it for your project via Storybook's CLI:
+
+```shell
+npx storybook@latest add @chromaui/addon-visual-tests
 ```
-// main.js:
-"addons": ["@chromaui/visual-tests"]
+
+Start Storybook and navigate to the Visual Tests panel to run your first visual test with Chromatic!
+
+## Configuration
+
+By default, the addon offers zero-config support to run visual tests with Storybook and Chromatic. However, you can extend your Storybook configuration file (i.e., `.storybook/main.js|ts`) and provide additional options to control how tests are run. Listed below are the available options and examples of how to use them.
+
+
+| Option            | Description                                                                                                                          |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `buildScriptName` | Optional. Defines the custom Storybook build script <br/> `options: { buildScriptName: 'deploy-storybook' }`                         |
+| `projectId`       | Automatically configured. Sets the value for the project identifier <br/> `options: { projectId: Project:64cbcde96f99841e8b007d75 }` |
+| `projectToken`    | Automatically configured. Sets the value for the project token <br/> `options: { projectToken: 'chpt_b2ae83517a0a706' }`             |
+
+
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Other Storybook addons
+    '@chromaui/addon-visual-tests',
+     {
+      name: '@chromaui/addon-visual-tests',
+      options: {
+        projectId: 'Project:64cbcde96f99841e8b007d75',
+        projectToken: 'chpt_b2ae83517a0a706',
+        buildScriptName: 'deploy-storybook',
+      },
+     }
+  ],
+};
+
+export default config;
 ```
 
-### Updating GraphQL schema
+### Updating the GraphQL schema
 
 The addon uses the Chromatic public GraphQL API. We rely on its schema to generate type definitions. The schema needs to be manually updated whenever it changes.
 To update, take https://github.com/chromaui/chromatic/blob/main/lib/schema/public-schema.graphql and save it under `src/gql/public-schema.graphql`.
 
-### Troubleshooting
+## Troubleshooting
 
-If you see:
+### Running Storybook with the addon enabled throws an error
 
-```
-var stringWidth = require('string-width')
-                  ^
+When installed, running Storybook may lead to the following error:
+
+```shell
+const stringWidth = require('string-width');
 
-Error [ERR_REQUIRE_ESM]: require() of ES Module /Users
+Error [ERR_REQUIRE_ESM]: require() of ES Module /my-project/node_modules/string-width/index.js is not supported.
 ```
 
-In Yarn 1 starting up your Storybook after installation, you can [workaround with](https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092):
+This is a [known issue](https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092) when using an older version of the Yarn package manager (e.g., version 1.x). To solve this issue, you can [upgrade](https://yarnpkg.com/migration/guide) to the latest stable version. However, if you cannot upgrade, adjust your `package.json` file and provide a resolution field to enable the Yarn package manager to install the correct dependencies. In doing so, you may be required to delete your `node_modules` directory and `yarn.lock` file before installing the dependencies again.
 
-```
+```json
  "resolutions": {
     "jackspeak": "2.1.1"
   }
 ```
 
-Alternatively, you could use a different package manager (yarn 3, npm, pnpm).
+Alternatively, you could use a different package manager ([npm](https://www.npmjs.com/), [pnpm](https://pnpm.io/installation)).
+
+
+## Contributing
+
+We welcome contributions to the Storybook Addon Visual Tests! If you're a maintainer, refer to the following [instructions](./Development.md) to set up your development environment with Chromatic.
+
+### License
+
+[MIT](https://github.com/storybookjs/addon-coverage/blob/main/LICENSE)