Update installation instructions for non-compiled projects

[theoluciano]

Task

TR #231

Why?

It would be good to give better installation instructions for cases like using Optics in CodePen, in a non-build environment, how to use from a CDN, etc.

What Changed

What changed in this PR?

• Update readme and storybook info

Sanity Check

• Have you updated any usage of changed tokens?
• Have you updated the docs with any component changes?
• Have you updated the dependency graph with any component changes?
• Have you run linters?
• Have you run prettier?
• Have you tried building the css?
• Have you tried building storybook?
• Do you need to update the package version?

Screenshots

[linear]

OP-231 Optics Installation instructions

[Copilot]

Pull Request Overview

This PR updates installation instructions to cover usage scenarios without a build step (e.g., CodePen or CDN).

• Adds a new “Importing without a compiler” section to both the README and Storybook introduction
• Provides CDN link and CSS @import examples for non-compiled environments

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
src/stories/Overview/Introduction.mdx	Added CDN import examples and CodePen usage notes
README.md	Added CDN import examples and CodePen usage notes

Comments suppressed due to low confidence (4)

src/stories/Overview/Introduction.mdx:87

• The placeholder [desired version] in the URL can be mistaken as literal brackets. Consider clarifying that users should replace it (e.g., @rolemodel/optics@1.2.3) without the square brackets.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@[desired version]/dist/css/optics.min.css">

README.md:49

• The placeholder [desired version] may be confusing if interpreted literally. Clarify that users should substitute it with the actual version number (e.g., @rolemodel/optics@1.2.3).

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@[desired version]/dist/css/optics.min.css">

src/stories/Overview/Introduction.mdx:91

• This CSS @import statement is missing a terminating semicolon, which will cause a syntax error. Please add ; at the end.

@import "https://cdn.jsdelivr.net/npm/@rolemodel/optics@[desired version]/dist/css/optics.min.css"

README.md:53

• This CSS @import rule is missing a trailing semicolon, which will break stylesheet parsing. Please append ; to the end of the line.

@import "https://cdn.jsdelivr.net/npm/@rolemodel/optics@[desired version]/dist/css/optics.min.css"

[Jeremy-Walton]

Looks like there are some linting errors that need to be resolved.

You can run yarn sanity-check to run through all the things the checklist asks about. I think it will fix the linting errors as well