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.
This commit is contained in:
ukimsanov
2026-08-04 02:16:22 -07:00
parent b36f69a3c0
commit f720eb75be
2 changed files with 23 additions and 26 deletions
+6 -23
View File
@@ -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
+17 -3
View File
@@ -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}>