CHALLENGE 01 / frozen-local-reference
Add platform labels and Copy public link to an extension card
A visitor can tell which platforms a synthetic extension supports and copy its public source link without opening the extension or triggering installation.
Executed independently against the frozen local reference. 6 of 6 stages Independent; pass.
Stage evidence and implementation choices
| Stage | Result | Observed work |
|---|---|---|
| find | Independent | Located the exact local catalog, CSS, runtime, fixture and schema sources without author help. Missing raw source paths were recovered through the frozen published guide; no consequential local rule was missing. |
| choose | Independent | article.extension-card keeps its 24px inset, 16px gap, 12px radius and title link. Platform badges and a sibling ghost button add no card-level geometry override. copyText is the only clipboard writer. |
| specify | Independent | Recorded anatomy, content, states, data, keyboard, responsive and safe-link rules before implementation at the timestamp in the specification. Used exact brief rules; no unobserved product behavior was invented. |
| implement | Independent | Created working pages/modules in the copied frozen local site. Shared original site files remain byte-identical. New files and their complete diffs are retained. |
| verify | Independent | Executed 6/6 exact brief browser assertions in Chromium 152.0.7977.42, plus asset/base-path checks and the data suite. Retained failed attempts and self-authored repairs. |
| explain | Independent | Recorded source choices, original additions, boundary/deviations, elapsed time, every retained failure and repair, assistance log, and zero unanswered consequential local decisions. |
What to build
- Create one document with the reference navbar/footer, one h1 and one main; include assets/reference.css and load a module that imports copyText from ./reference.js.
- Fetch data/fixtures.json once from the same site. Select the named valid records. Render records with createElement/textContent or build-time escaping. Use Extension.id for element IDs; never use array index or title.
- Build article.extension-card with its 48px icon, h3 containing one native link, summary, publisher/platform group and sibling Copy public link button. Add platform badges in the fixture array order: macOS and Windows. Keep the supported platform text visible on narrow screens.
- Copy only validated Extension.publicUrl after a user click. Reuse copyText(url, button), which already handles success, clipboard denial and manual copy. Keep the original link selectable. Do not put the button inside the title link.
- Missing icon uses the store glyph; missing summary and publisher use fixture displayRules. Unavailable extension keeps readable metadata and source link; no active Install control. A sign-in-required local example shows the boundary text and an explicit official sign-in link.
- Render the Arabic record with lang=ar and dir=auto on text. Keep the copied URL LTR in bdi. Literal <img...> title must appear as text, with zero extra images or event handlers.
- Add a provenance line identifying the action as an original local addition, then write and execute the browser verifier.
Acceptance
- EC-1 Each named fixture renders exactly once and has platform labels matching the array; missing values use explicit fallbacks.
- EC-2 Click Copy and Space/Enter on its button both call the clipboard helper with exactly that record publicUrl; no navigation occurs.
- EC-3 Stub clipboard rejection and confirm visible manual-copy text, preserved card content and retained focus on the trigger.
- EC-4 At390x844,768x1024,1440x1000 and1920x1080, no horizontal page overflow; card padding is24px ±0.5px; title wraps and action is not clipped.
- EC-5 Reduced-motion emulation removes hover translation; focus outline remains visible; literal-markup adds no img with src=x.
- EC-6 Network log contains only same-site GETs. No clipboard write occurs before explicit user activation.
Exact brief, files and evidence requirements
{
"id": "existing-component-extension",
"title": "Add platform labels and Copy public link to an extension card",
"executionBoundary": "frozen-local-reference",
"status": "not-run",
"coaching": "Give the implementer the frozen package, this brief and normal repository access. Record every clarification or intervention. The builder must not coach decisions during execution.",
"workingCopy": "Work in a copied evaluation checkout of the frozen package. Keep the frozen input unchanged. New output artifacts are committed or copied into evidence/junior/<task-id>/ before final package freeze.",
"sharedSources": [
"IMPLEMENTATION.md",
"reference-data/implementation-contract.json",
"reference-data/independent-component-inventory.json",
"reference-data/catalog.mjs",
"site/assets/reference.css",
"site/assets/reference.js",
"site/data/fixtures.json"
],
"commands": [
"node designs/raycast/evidence/verification/data-contract-tests.mjs",
"python3 -m http.server 4178 --bind 127.0.0.1 --directory designs/raycast/site",
".agents/skills/design-research/scripts/run-playwright.sh designs/raycast/evidence/junior/existing-component-extension/verify.cjs http://127.0.0.1:4178/"
],
"requiredEvidence": {
"find": "A source map naming the exact ledger IDs, tokens, assets, schema definitions, classes and runtime helpers used.",
"choose": "A short explanation for each reused component and the task-specific addition.",
"specify": "Record the planned states, data, keyboard flow, breakpoints, safe URL rules and copy before coding.",
"implement": "Working HTML/JS/CSS changes against the frozen local reference, with a diff and no real account or message mutation.",
"verify": "Actual command output, browser/version, viewport screenshots, keyboard/focus results, network interception and test assertions.",
"explain": "Sources, deviations, time spent, failed checks, assistance received and unanswered consequential questions. A written plan alone does not pass."
},
"ratings": "Only the independent evaluator rates each of Find, Choose, Specify, Implement, Verify and Explain as Independent, Assisted or Blocked. A task passes only when all six are Independent and code execution was verified. No stage has been passed by writing this brief.",
"goal": "A visitor can tell which platforms a synthetic extension supports and copy its public source link without opening the extension or triggering installation.",
"independentSelection": {
"inventory": "reference-data/independent-component-inventory.json",
"ids": [
"C-extension-card",
"C-store-detail",
"C-action-button"
],
"publicUrls": [
"https://www.raycast.com/store",
"https://www.raycast.com/linear/linear"
],
"evidence": [
"evidence/capture/pages/store-1440.json",
"evidence/capture/pages/store-390.json"
],
"why": "Extension cards recur in the independently observed public collection and detail routes. This adds a new local utility to that high-use component."
},
"files": {
"create": [
"site/junior-extension-card.html",
"site/assets/junior-extension-card.js",
"evidence/junior/existing-component-extension/verify.cjs",
"evidence/junior/existing-component-extension/report.json"
],
"read": [
"site/components.html#extension-card",
"site/components.html#badge",
"site/components.html#copy",
"site/icons.html",
"site/data/fixtures.json"
],
"changeRule": "Use the existing CSS classes unchanged. Add namespaced CSS only if wrapping the platform/action group needs it; do not edit shared button or card geometry for one task."
},
"components": [
"extension-card",
"badge",
"copy",
"ghost-button",
"toast",
"media-frame"
],
"tokens": [
"--grey-900",
"--grey-200",
"--border",
"--rounding-md",
"--spacing-3",
"--spacing-2",
"--focus",
"--duration-control"
],
"assets": [
"assets/icons/copy-clipboard.svg",
"assets/icons/store.svg"
],
"fixtures": [
"types.Extension: draft-notes, missing-metadata, long-title, rtl-notes, private-collection, unavailable-tool, literal-markup",
"types.Asset: asset-store-icon",
"invalidRecords: extension-unsafe-link, extension-credential-link"
],
"implementationSequence": [
"Create one document with the reference navbar/footer, one h1 and one main; include assets/reference.css and load a module that imports copyText from ./reference.js.",
"Fetch data/fixtures.json once from the same site. Select the named valid records. Render records with createElement/textContent or build-time escaping. Use Extension.id for element IDs; never use array index or title.",
"Build article.extension-card with its 48px icon, h3 containing one native link, summary, publisher/platform group and sibling Copy public link button. Add platform badges in the fixture array order: macOS and Windows. Keep the supported platform text visible on narrow screens.",
"Copy only validated Extension.publicUrl after a user click. Reuse copyText(url, button), which already handles success, clipboard denial and manual copy. Keep the original link selectable. Do not put the button inside the title link.",
"Missing icon uses the store glyph; missing summary and publisher use fixture displayRules. Unavailable extension keeps readable metadata and source link; no active Install control. A sign-in-required local example shows the boundary text and an explicit official sign-in link.",
"Render the Arabic record with lang=ar and dir=auto on text. Keep the copied URL LTR in bdi. Literal <img...> title must appear as text, with zero extra images or event handlers.",
"Add a provenance line identifying the action as an original local addition, then write and execute the browser verifier."
],
"exactRules": {
"geometry": "Preserve card padding24, gap16, radius12, 1px border, title16/24px; extension grid3 columns at >=880px,2 at720..879px,1 below720px. Copy utility uses existing .button.ghost (36px minimum) or .copy-button (44px on coarse pointer). Put platform/action row in flex-wrap with8px item gap.",
"copy": "Default Copy public link; pending promise leaves the card available; successful helper announces Copied to clipboard and temporarily labels Copied; failure announces manual-copy instructions. Copying never navigates.",
"safety": "Only https://raycast.com or https://www.raycast.com with no credentials/control bytes/backslashes. Reject malformed fixture links before setting href or enabling copy; keep an explicit Link unavailable message.",
"count": "Each extension appears once. Do not infer plan access from platform labels.",
"locale": "Platform brand names remain macOS/Windows; do not mirror glyphs or URLs."
},
"acceptance": [
{
"id": "EC-1",
"assertion": "Each named fixture renders exactly once and has platform labels matching the array; missing values use explicit fallbacks."
},
{
"id": "EC-2",
"assertion": "Click Copy and Space/Enter on its button both call the clipboard helper with exactly that record publicUrl; no navigation occurs."
},
{
"id": "EC-3",
"assertion": "Stub clipboard rejection and confirm visible manual-copy text, preserved card content and retained focus on the trigger."
},
{
"id": "EC-4",
"assertion": "At390x844,768x1024,1440x1000 and1920x1080, no horizontal page overflow; card padding is24px ±0.5px; title wraps and action is not clipped."
},
{
"id": "EC-5",
"assertion": "Reduced-motion emulation removes hover translation; focus outline remains visible; literal-markup adds no img with src=x."
},
{
"id": "EC-6",
"assertion": "Network log contains only same-site GETs. No clipboard write occurs before explicit user activation."
}
],
"expectedOutput": "One working card extension page, a narrow and wide screenshot, clipboard success/denial evidence, preserved schema checks, and six independently rated stages.",
"evidenceOutput": "evidence/junior/existing-component-extension/",
"result": {
"status": "not-run",
"implementationArtifacts": [],
"commandsAndResults": [],
"verifierId": null,
"startedAt": null,
"completedAt": null
}
}Stages: Find → Choose → Specify → Implement → Verify → Explain. Ratings are assigned by the independent executor from observed work, not prefilled by the builder.