docs: lead the Quickstart with a paste-to-agent block, cut the Examples link wall

Two things a non-technical reader hits that the pages did not help with.

**Quickstart made you do it by hand before you could ask.** Install through an
interactive picker, choose the right group, restart the agent, then type a
prompt — four manual terminal steps before anything happens. The copy-to-agent
affordance existed but sat at the bottom of the page, after the step it would
have replaced, and it copied only the prompt.

It leads now, with the whole thing in one visible block: install, make, open the
preview. It uses `hyperframes skills update` rather than the interactive
`skills add`, which is the command the README already says agents should run —
non-interactive, exactly the core set. The manual steps stay below for anyone
who wants to see them.

Plain code fence rather than the AgentAction component, deliberately: that
component renders a Copy button and never shows the request, so a reader copies
something they cannot read. Mintlify fences already carry a copy button and show
the text.

**Examples had four GitHub cards where one belongs.** Brief, Source, Revision,
Checks — two of them pointing into a gate-output report. That is showing
homework, not helping someone who came to see finished work. The render stays,
with one link into the folder.

Author: ukimsanov

docs/examples.mdx

@@ -59,27 +59,8 @@ Each preview links to the complete source project.
 
 ## One project, open end to end
 
-This is the same small project used in the Quickstart. Its request, brief,
-source, revision notes, checks, and final render are all public.
-
-```text
-Using /hyperframes, make a 10-second product intro for https://example.com.
-```
-
-<CardGroup cols={2}>
-  <Card title="Brief" icon="clipboard-list" href="https://github.com/heygen-com/hyperframes/blob/main/examples/docs-reference-project/BRIEF.md">
-    What the agent decided before building anything.
-  </Card>
-  <Card title="Source" icon="folder-open" href="https://github.com/heygen-com/hyperframes/tree/main/examples/docs-reference-project">
-    Every editable project file, exactly as it renders.
-  </Card>
-  <Card title="Revision" icon="pen-to-square" href="https://github.com/heygen-com/hyperframes/blob/main/examples/docs-reference-project/VERIFICATION.md#2-v1--v2">
-    What changed between the first and second cut, and why.
-  </Card>
-  <Card title="Checks" icon="circle-check" href="https://github.com/heygen-com/hyperframes/blob/main/examples/docs-reference-project/VERIFICATION.md">
-    The real gate output: lint, check, contrast, and the final render.
-  </Card>
-</CardGroup>
+The same ten-second project the Quickstart builds. This is its actual render,
+and the folder behind it is public — not a sealed demo.
 
 <div style={{ maxWidth: "36rem", margin: "1.5rem auto" }}>
   <DocsVideo
@@ -89,8 +70,10 @@ Using /hyperframes, make a 10-second product intro for https://example.com.
   />
 </div>
 
-The result is not a sealed demo. Open any stage above and use the same shape for
-your own project: request → brief → source → revision → render.
+<Card title="Open the project on GitHub" icon="folder-open" href="https://github.com/heygen-com/hyperframes/tree/main/examples/docs-reference-project" horizontal arrow>
+  Every file exactly as it renders — the composition, the caption overlay, the
+  measured word timings, and the brief the agent worked from.
+</Card>
 
 ## Start from a template
 

docs/quickstart.mdx

@@ -5,7 +5,6 @@ description: "Install the HyperFrames skills, make one short request, and contin
 
 import { QuickstartContinuationGrid } from "/snippets/quickstart-continuation-grid.jsx";
 import { DocsVideo } from "/snippets/docs-video.jsx";
-import { AgentAction } from "/snippets/agent-action.jsx";
 
 <div className="hf-docs-video-frame">
   <DocsVideo
@@ -21,6 +20,23 @@ import { AgentAction } from "/snippets/agent-action.jsx";
   costs.
 </Note>
 
+## The short way: hand it to your agent
+
+If you already have a coding agent open in a folder, paste this and skip the
+rest of the page. It installs the skills, makes the video, and opens the
+preview — you only change the URL.
+
+```text
+Set this folder up for HyperFrames and make me a video.
+
+1. Run: npx hyperframes skills update
+2. Then, using /hyperframes, make a 10-second product intro for https://example.com
+3. Open the local preview when it is done and tell me the project folder.
+```
+
+Swap `https://example.com` for the page you want the video to show. Everything
+below is the same thing done by hand, if you would rather see each step.
+
 ## 1. Install the skills
 
 Run this in your project folder:
@@ -51,8 +67,6 @@ the same project.
 
 <QuickstartContinuationGrid />
 
-<AgentAction request="Using /hyperframes, make a 10-second product intro for https://example.com." />
-
 ## Related topics
 
 <CardGroup cols={2}>