pftom
a98096a042
- Created .gitignore to exclude build artifacts and dependencies. - Added index.html as the main entry point for the application. - Included LICENSE file with Apache 2.0 terms. - Initialized package.json and package-lock.json for project dependencies. - Added pnpm-lock.yaml for package management. - Created QUICKSTART.md for setup instructions. - Added README.md and README.zh-CN.md for project documentation in English and Chinese.
2.7 KiB
Shared device frames
Reusable, pixel-accurate device chrome that any skill can compose into a multi-device or multi-screen layout. Each frame is a self-contained HTML snippet that renders a device shell and embeds its inner screen via an ` \`\`\`
In an OCD-managed project, the recommended pattern is:
``` my-project/ ├── index.html ← gallery view: composes 3+ frames in a row ├── screens/ │ ├── home.html ← inner content rendered inside iphone-15-pro.html │ ├── search.html │ └── detail.html └── (no copy of frames — point at the shared assets folder) ```
Design tokens
Each frame reads its inner screen's tokens via `postMessage` if you want the bezel to tint with the active palette. The default state is "phone in hand" — neutral metallic — which works against any background.
Authoring rules
When extending this library:
- No external assets. Inline all SVG. No font imports. No image URLs.
- One frame per file. Don't bundle iPhone + Android in one HTML.
- `?screen=` query is the only contract. Don't introduce other query params; the harness has to be predictable for skills to use.
- The frame is decorative chrome only. All content lives in the inner
screen file. The frame must work with
?screen=about:blank(showing just the device shell). - Match real device dimensions. iPhone 15 Pro is 390×844 logical pixels. iPad Pro 11" is 834×1194. Don't ship a "looks like" frame — the seed has to match.