본문으로 건너뛰기
cccskills
무료GitHub에 공개

frontend-fidelity-rebuild

Use when an authorized reference surface needs a clean-room frontend reconstruction across static, motion, and responsive fidelity. Not for styling or component work without a reference surface.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(2)

  • SKILL.md5.0 KB
  • agents/openai.yaml210 B

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Frontend fidelity rebuild

Contract

FieldBound contract
TriggerAn authorized reference surface needs a clean-room frontend reconstruction across static, motion, and responsive fidelity.
AuthorityHuman-gated: asks for IP authorization approval via one harness ask/question call before the run starts; otherwise reversible local: writes only named local reconstruction artifacts; rollback is version control. No remote mutation. Prose consent, invocation consent, prior-run consent, and post-start discovery do not approve an effect.
Side effectAuthorized frontend reconstruction across static, motion, and responsive fidelity.
DoneThe clean-room reconstruction passes all three fidelity gates with comparison evidence.
StopAuthorization absent; capture blocked; stagnation. Bound: approved reference, viewports, timelines, tolerances, round cap.

Inputs

  • IP authorization (required): start approval confirming the reconstruction is authorized.
  • Reference surface (required): the URL, file, or design artifact to reconstruct from.
  • Viewport set (required): the screen sizes at which fidelity is measured (for example, 375px mobile, 768px tablet, 1440px desktop). Named before any reconstruction.
  • Timeline set (required): the animation or interaction sequences to measure for motion fidelity (for example, page load, hover transitions, scroll effects). Named before any reconstruction.
  • Comparison tolerances (required): the per-gate thresholds that define a pass. Static: pixel difference percentage or visual regression threshold. Motion: timing deviation in ms and property delta. Responsive: layout shift at each viewport breakpoint.
  • Round cap (required): the maximum number of reconstruction and measurement cycles allowed before the run ends at its bound. Declared before any reconstruction.

Procedure

  1. Collect start approval with one harness ask/question call. State the reference surface and the authorized scope. End the run on scope drift. Done when: approval is collected or the run ends on absent authorization.
  2. Bind the viewports, timelines, tolerances, and round cap. Freeze all before any reconstruction. Done when: the viewport set, timeline set, per-gate tolerances, and round cap are named and frozen.
  3. Capture the reference surface. For each viewport in the set, capture a full-page screenshot and the rendered DOM. For each timeline in the set, capture a video or frame sequence of the animation or interaction. Record the capture tool, browser, and version. Done when: reference captures exist for every viewport and timeline.
  4. Reconstruct the surface in a clean-room implementation. Build from the captures, not from the reference source code. Match the static layout, the motion timing, and the responsive behavior. Done when: the reconstruction renders at every viewport and plays every timeline.
  5. Measure fidelity against the reference. For each viewport, compare the reconstruction screenshot to the reference screenshot using a visual regression tool. Record the pixel difference percentage. For each timeline, compare the reconstruction motion to the reference motion. Record timing deviation and property delta. For each viewport transition, compare the layout shift. Record whether each gate passes its tolerance. Done when: all three fidelity gates have comparison results.
  6. Stop at success (all three gates pass their tolerances), any non-success terminal, or the bound (round cap reached). Done when: a terminal class is reached and recorded.
  7. Persist per profiles.persistence.P1 (durable_location .outline/loops/frontend-fidelity-rebuild/<run_id>/ when durable). Emit receipt.json before return. Done when: the receipt is written with per-gate comparison evidence, tolerances, and the terminal class.

Failure and recovery

  • Authorization absent: stop before any effect; emit a blocked receipt naming the missing approval.
  • Capture blocked: the reference surface cannot be captured at a declared viewport or timeline. Terminal blocked; report which capture failed and why.
  • Stagnation: repeated reconstruction attempts do not improve fidelity scores. Terminal stalled; report the score plateau and the attempts.
  • Scope drift after binding: end the run; emit a stalled or blocked receipt.
  • Budget exhausted: the round cap is reached before all three gates pass their tolerances. Terminal capped; report the best per-gate results obtained. Budget exhaustion is never success unless it is the predeclared success predicate.

Output

An immutable K11 receipt with every K11 field, recording the terminal class (success, capped, stalled, or blocked) and the per-gate fidelity comparison evidence: static pixel difference, motion timing deviation, responsive layout shift, and whether each gate passed its tolerance.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Use when explaining System V AMD64, ARM AAPCS, RISC-V psABI, stack frames, variadic calls, or FFI register rules. Not for the Rust FFI binding layer: use rust-ffi.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

OutlineDriven/odin-claude-plugin382026년 9월 29일 업데이트

Use when configuring ADC sampling time, DMA-driven ADC, calibration, or DAC channel setup on bare-metal MCUs. Not for the DMA stream itself: use dma-baremetal.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

OutlineDriven/odin-claude-plugin382026년 9월 29일 업데이트

af-xdp

무료

Use when creating AF_XDP sockets, configuring UMEM and XSK rings, writing an XDP redirect program, or choosing copy versus zero-copy mode. Not for full kernel bypass: use dpdk.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

OutlineDriven/odin-claude-plugin382026년 9월 29일 업데이트

Use when a completed session needs an agent-environment retrospective. Not for an engineering retrospective from telemetry: use engineering-retrospective.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

OutlineDriven/odin-claude-plugin382026년 9월 29일 업데이트

Use when a redacted, trimmed agent transcript must be appended to a GitHub PR or issue body, with human approval and preview. Not for automated or model-initiated insertion.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

OutlineDriven/odin-claude-plugin382026년 9월 29일 업데이트

agents-md

무료

Use when a repo needs agent setup, AGENTS.md added or made lean, CLAUDE.md audited, or agent instructions scored or pruned. Not for remote, credential, publish, deploy, or irreversible changes.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

OutlineDriven/odin-claude-plugin382026년 9월 29일 업데이트

OutlineDriven의 스킬 모두 보기

이 스킬의 문제 신고