Embedded prototype layout

Source and version

Repository path

.agents/skills/embedded-prototype-layout/SKILL.md

Source revision

cfaa53f5b7500e3901d8470e1e471cd0230ff2a5

Source SHA-256

9f0131fb35b55f717ba4c5af4b1a958bf28a22d90e53a34ac0edfe9e5942ec2a

Publication standing

Public ready

Included source files

The linked SKILL.md is the complete public source package for this skill.

Complete skill source

The Markdown below matches the exact source text. The format link above opens the file on its own.

---
name: embedded-prototype-layout
description: Resolves prototype layout pressure at the actual parent and iframe boundary. Applies when a self-contained instrument works standalone but its embedded controls, tables, focus, shadows or onward route become difficult to use.
---

# Embedded prototype layout

## Contract

- **What:** A measured parent/child layout contract that keeps a compact preview useful for deciding whether to continue in a full view, while preserving the instrument's meaningful interactions and comparisons.
- **When:** An iframe behaves differently from its standalone child document, or parent composition changes the space available to that embedded document.
- **Boundaries:** The parent owns placement, reserved dimensions, title, embedding policy and full-view route. The child owns its internal document and controls. Packaging owns declared projection changes. Local canonical-child evidence, live hosted delivery, accessibility conformance and permission changes retain separate observations and authority.
- **Result:** One source-owned repair or decision-ready disposition naming the parent viewport, content box, frame/client width, child viewport, affected behavior, smallest fitting layout change and evidence boundary. The result records each measurement or names the unobserved dimension and asks its owner for the missing measurement.

## Fit and attention

- **Useful when:** Controls fragment inside an iframe, a comparison loses readable columns, focused content moves outside the preview, or a parent gutter changes the child breakpoint in use.
- **Poor fit when:** The same defect exists at the same width in a standalone child and the parent contributes no relevant constraint, or the task concerns only schema meaning, hosting availability or prose. The child owner, semantic table contract, delivery owner or direct reasoning can carry those results.
- **Smallest useful dose:** One parent/child pair, one visitor operation, the measured constraint and one observation that distinguishes the responsible owner.
- **Foregrounds:** Actual available space, ownership of scrolling and focus, progressive disclosure, and the visitor's route from preview to full view.
- **May under-attend:** A clear preview can contain incorrect data or difficult table semantics. A local substitute can behave correctly while the deployed artifact, permissions or network route differs. Those claims retain their own receiving evidence.
- **Interactions:** For an embedded-layout task, this skill owns the measured parent/child constraint and its layout disposition. Semantic table design supplies the table representation and comparison requirements, including native relationships and literal/unit continuity; this skill applies those requirements at the embedded boundary. For a table-design task, the table skill owns the final result and receives this skill's measurement contribution. Source-authority mapping can resolve a disputed canonical child; visual verification supplies fitting observations; packaging retains source/projection agreement. The task names one primary result owner.
- **Rest or release when:** The intended preview operation and onward route work at the affected boundary, or an exact owner question preserves a viable continuation. A changed container, child, policy or visitor operation can reactivate the contract.

## Inputs, defaults and output

- **Minimum inputs:** The child source or declared route, the visitor operation, current inspection or editing authority, and a parent/iframe identity or an explicit parent-access gap. The access gap permits a bounded observation request rather than an inferred parent measurement.
- **Optional context:** A screenshot, viewport and browser details, maintained package declarations, an observed interaction sequence, existing CSS primitives, and prior source-bound evidence.
- **Defaults:** Preserve the existing visual language, embedding permissions and full-view route. Measure the child constraint before selecting a breakpoint. When parent or runtime access is unavailable, return the source-supported hypothesis and the missing measurement; a supplied screenshot alone leaves exact CSS dimensions unmeasured.
- **Output:** One bounded repair or Issue-ready finding with ownership, measured dimensions or explicitly unobserved dimensions and their measurement request, affected states, fitting observations, preserved behavior and an exact continuation when needed. Raw browser state and environment-specific coordinates stay with the local evidence owner.

## Rules

### Rule: The route identifies an owner before a viewport identifies a fix

Resolve the current parent, canonical child, maintained projection and public alias
through their actual declarations. Display names can differ from route identities.
Source-owner edits and packaging changes follow those declared paths, preserving
unrelated artifacts. A local success changes no live deployment by itself.

### Rule: Available width belongs to the child

Measure the outer viewport, parent content width, frame border/client width and
child viewport separately. Padding, gutters, borders, zoom and scrollbar space can
change the available measure. A nominal mobile width supplies a comparison case;
the measured embedded width identifies the constrained receiving surface.

### Rule: Preview usefulness leads completeness pressure

A compact preview supports orientation, a meaningful first interaction or
comparison, and a discoverable full view. Visitors can scroll. Preserve useful
column measure inside a local horizontal scroll owner while prose and controls
reflow. Progressive disclosure can shorten a preview when its summary and opening
control remain discoverable; forcing every column into the visible boundary would
replace the comparison task with a containment target.

### Rule: The smallest responsible layout owner changes

Begin with existing child viewport rules and layout primitives. A content-driven
breakpoint responds to observed pressure. A container query fits an independently
constrained internal container; child viewport rules may already own the problem.
Parent composition changes belong to the parent when the child has adequate rules
at its actual width. Preserve standalone narrow and wide behavior as controls.

### Rule: Paint, focus and scroll have separate reach

Headings and controls wrap at word boundaries; target size, focus indication and
shadow clearance retain room. Document containment leaves clipping inside a local
region open. Trace both edges of the relevant content across the scroll journey,
including the final column; a column wider than the viewport can remain valid.
A control moved through a reorder or disclosure stays visibly focused, with its
accepted state, selection and record identity preserved. A fitting keyboard path
includes entry, travel and exit, with named overflow regions where needed.

### Rule: A changed seam earns a bounded comparison

Observe immediately below, at and above a changed breakpoint when the seam is
consequential, plus the actual parent-derived width. Select open/closed disclosures,
keyboard paths, pointer reach, focus and retained state according to the changed
behavior. Screen observations establish screen behavior; print and forced-color
claims need their own relevant observations. A wider campaign follows a new
cross-family dependency or uncertainty rather than an edit count.

### Rule: Embedding policy and delivery keep their authority

Preserve the contextual iframe title, sandbox, Permissions Policy, onward links
and canonical/projection agreement through their existing owners. A permission
change needs its own behavior and authorization case. State whether evidence
covers a local canonical-child substitution or the exact hosted artifact and its
real headers. Each result can be useful while the other route remains unobserved.

### Rule: A substituted frame retains identity and evidence scope

A harness that replaces the child URL binds its locator or element handle before
the substitution. Record that controlled replacement and narrowly account for an
expected navigation abort; other console and network failures retain their checks.
Complete each case incrementally. Reuse follows the existing source, definition,
runtime and artifact identity contract. A failed setup retains completed evidence
and returns a harness finding rather than a claim about the prototype.

## Operating sequence

1. **Name the visitor operation:** State what the preview must make legible and what the full-view route supplies. Select one consequential symptom.
2. **Resolve ownership:** Trace parent, child and package identities; distinguish a layout constraint from a missing route, semantic defect or deployment question.
3. **Measure the boundary:** Capture the parent and child dimensions, current disclosure/state and affected control or table. Use fitting standalone widths to isolate the parent contribution.
4. **Choose the smallest source-owned change:** Reuse layout primitives, preserve readable measure and scroll ownership, and alter the responsible parent or child rule. Keep policy and unrelated surfaces intact.
5. **Observe the operation:** Select the changed seam and interaction cases. Use existing harness helpers and checkpoint rules where they fit, retaining independent behavioral expectations.
6. **Return and release:** Name the repair or bounded finding, measurements and any measurement gaps, covered behavior, and local or hosted scope. Include an unresolved condition and its receiver only when one remains. Stop when the receiving decision has enough evidence.

## Decisive scenarios

### Scenario: A compact parent changes the actual constraint

- **Given:** A 390px parent leaves a measured 279px child viewport, and the child renders legibly at 390px standalone.
- **When:** The embedded action labels split into fragments.
- **Then:** The layout owner diagnoses the 279px constraint and observes the affected controls there, while retaining fitting standalone comparisons. Increasing the nominal mobile breakpoint alone supplies no child measurement.

### Scenario: A wide comparison serves the preview

- **Given:** A precise comparison needs columns whose readable measure exceeds the compact preview.
- **When:** The preview layout is revised.
- **Then:** A discoverable, keyboard-reachable local scroll region preserves the comparison, both content edges remain reachable, and a clear full-view link lets the visitor continue. Surrounding controls and prose reflow independently.

### Scenario: Private parent access is unavailable

- **Given:** The public child source and a screenshot are available, while the actual parent is restricted.
- **When:** A collaborator assesses the embedded layout.
- **Then:** The collaborator can identify candidate child rules and a measurement request using the public source. The return marks actual parent width, live permissions and delivery as unobserved, preserves the source, and releases the task to the authorized parent owner.

## Strain and recovery

Repeated guesses about widths, a growing set of breakpoints, broad overflow rules,
or recurring full campaigns without a new receiving question signal strain.
Return to one measured parent/child pair and its visitor operation. Preserve
accepted state, canonical source, completed case records and the viable full-view
route. A controlled local substitution can isolate the child while its evidence
scope stays explicit. Re-entry follows the missing measurement, corrected harness,
resolved source owner or changed parent constraint.

## Conditional context and evidence standing

Use the semantic table design contract when table representation, comparison
requirements, header relationships, row completeness or extracted records change.
It supplies those requirements to an embedded-layout task; this skill retains the
parent/child layout result and applies them at the measured boundary.
Read the repository's packaging declaration only when source/projection agreement
or delivery enters the task. A fitting existing visual harness supplies execution
mechanics rather than new universal viewport requirements.

The method carries repository-local observations from constrained controls,
comparison tables, focus recovery and canonical-child substitutions. The numerical
examples illustrate possible measurements rather than prescribed device classes.
Fresh-context exercises establish their exercised decisions; transfer to other
hosts, assistive technology, browsers and teams needs fitting evidence.
Publication readiness describes the coherent public package, while evidence
maturity and execution authority remain separate. The method is usable without
private workspace access or a particular browser-testing tool.

## Completion and re-entry

The receiver can operate the affected preview control or comparison, follow its
full-view route, and locate the measured boundary and fitting evidence. A bounded
finding can complete an observation-only task when the remaining measurement or
permission has a named receiver. New source, parent composition, interaction,
projection drift or live delivery evidence reopens only the affected contract.