docs: update + centralize project docs (#2598)

In an effort to create a single source of truth
for our documentation and make it easier for
users to get started working with Spectrum CSS, this work:

- Includes a Quick start guide in the readme, inspired
by the tutorial that used to live in the docs site
- Removes said tutorial from the docs site and links
to the quick start guide in the readme instead
- Removes contributing guidelines from the readme, which
are replaced with a link to the contributing doc in github
- Storybook contributing docs link to the more general
contributing docs in github
- General updates to readme language

Author: Melissa Thompson

.github/CONTRIBUTING.md

@@ -47,6 +47,14 @@ git push -u origin feat-my-awesome-new-feature
 git remote add upstream [email protected]:adobe/spectrum-css.git
 ```
 
+To ensure your Node environment is always aligned with the project, we strongly recommend using [nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating). Once you have nvm installed, you can run:
+
+```shell
+nvm use
+```
+
+This will ensure the correct version of node is installed and used for the project. You always want to run nvm use when you first clone the project and whenever you switch branches.
+
 Install [yarn](https://yarnpkg.com/en/docs/install):
 
 ```shell
@@ -59,6 +67,8 @@ Install dependencies:
 yarn install
 ```
 
+**Important:** Requires >= Node 18.8.1 and Yarn 1.22.0.
+
 To generate a new component, run the generator:
 
 ```shell
@@ -71,13 +81,9 @@ To kick-off the project's storybook locally, run:
 yarn start
 ```
 
-This is our development environment, where you can see all the components in action, and develop new components. All components must have a storybook entry.
-
-Working on the documentation site? Run:
+This is our development environment, where you can see all the components in action, and develop new components. All components must have a storybook entry. Edits to any of the `*.css`, `*.stories.js`, or `template.js` files in `components/*` will live reload in your browser. For more details about how to work within our Storybook setup, take a look at our [getting started Storybook guide](https://opensource.adobe.com/spectrum-css/preview/?path=/docs/guides-contributing--docs).
 
-```shell
-yarn dev
-```
+This project is leveraging caching from [Nx](https://nx.dev/) to speed up the build process. If you are seeing unexpected results, you can clear the cache by running `yarn nx reset`.
 
 Commit all changes with a [conventional commit message](https://www.conventionalcommits.org), making sure to correctly use `feat:`, `fix:`, and `BREAKING CHANGE` accordingly, and referencing the relevant issue number (if any):
 
@@ -110,7 +116,7 @@ At this point you're waiting on us. We do our best to keep on top of all the pul
 
 Some things that will increase the chance that your pull request is accepted:
 
--   Write a thorough pull request description, include screenshots, and test your changes across all evergreen browsers.
+-   Write a thorough pull request description, include screenshots, and test your changes across all [evergreen browsers](https://github.com/adobe/spectrum-css?tab=readme-ov-file#browser-support).
 -   Write out your test cases for any new features or bug fixes in as much detail as possible and include them in the pull request description.
 -   Make sure the PR merges cleanly with the latest main.
 -   Describe your feature/bugfix and why it's needed/important in the pull request description.

.github/QUICK-START.md

@@ -0,0 +1,56 @@
+# Quick start guide
+
+This guide will show you how to quickly install Spectrum CSS and use it to display the Button component.
+
+## Install using Node/yarn
+Install the components you want along with their dependencies. Here's an example:
+
+```shell
+yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @spectrum-css/icon @spectrum-css/button
+```
+
+Spectrum CSS components utilize custom properties in order to change themes and scales. For these to apply, a couple of classes need to be added to the document’s `<html>` tag based on the [visual language](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [scale](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), and [theme](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops) you wish to use. For example, the following code snippet will display styling for the default Spectrum visual language using medium scale and light color theme:
+
+```html
+<html class="spectrum spectrum--medium spectrum--light">
+```
+
+Use the `index.css` files in your project to include component and global styles ([Spectrum and Express contexts](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `<head>` tag:
+
+```html
+<head>
+  <!-- Include global tokens depedency first -->
+  <link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css"/>
+
+  <!-- Include index.css for the components you're using -->
+  <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index.css"/>
+</head>
+```
+
+Inside the `<body>` tag, add the markup for your component (Spectrum button in our example). The example also includes the CSS class names `spectrum-Button--fill` and `spectrum-Button--accent`, to use the accent variant:
+
+```html
+<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
+  <span class="spectrum-Button-label">Button</span>
+</button>
+```
+
+To put it all together, your final html file will look like this:
+
+```html
+<html class="spectrum spectrum--light spectrum--medium">
+  <head>
+    <link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css"/>
+    <link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
+    <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
+  </head>
+  <body>
+    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
+      <span class="spectrum-Button-label">Button</span>
+    </button>
+  </body>
+</html>
+```
+
+## Include files from a CDN
+Another way to include Spectrum CSS components in your project is to use a CDN to link to the components you want, plus their dependencies, in the `<head>` tag of your HTML. If you choose to use a CDN, please note that Spectrum CSS doesn't manage a CDN, cannot confirm the availability or up-time of external CDNs, and doesn't recommend using a CDN for Spectrum CSS in a production environment.

.storybook/guides/develop.mdx

@@ -12,14 +12,16 @@ Welcome to the development and exploration environment for Spectrum CSS, driven
 
 ## Table of contents
 
-This guide is intended to help you get started contributing to the Spectrum CSS project. It will cover the following topics:
+This guide is intended to get you up to speed on how we work within Storybook in the Spectrum CSS project. It will cover the following topics:
 
     - [Architecture](#architecture)
     - [Writing stories](#writing-stories)
     - [Templates](#templates)
     - [Testing stories](#testing-stories)
     - [Changelog](#changelog)
 
+For more general information about how to contribute to the Spectrum CSS project, take a look at our [contribution guidelines on GitHub](https://github.com/adobe/spectrum-css/blob/main/.github/CONTRIBUTING.md).
+
 ## Prerequisites
 
 - [Node.js](https://nodejs.org/en/) (v18 or later)