메뉴
Look at any web UI you build or change — render it headless with `botference see` and read the screenshots — because layout and design failures produce NO errors or warnings. Use after every UI change, before declaring done, and whenever a human says something "looks wrong".
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | see-ui |
| description | Look at any web UI you build or change — render it headless with `botference see` and read the screenshots — because layout and design failures produce NO errors or warnings. Use after every UI change, before declaring done, and whenever a human says something "looks wrong". |
Layout and design failures are invisible to your normal loop: the DOM is valid, the CSS applied, the console silent — and the page is still broken to a human eye (a chart squashed into 5% of its width renders "successfully"). Code and logs cannot catch "technically correct but looks wrong". Pixels can, and you can read pixels.
botference see <target> [label] [--viewport WxH]... [--basic-auth U:P] [--out DIR]
<target>: a URL, a bare :port (localhost), or the NAME of a
running botference service — its listening port is discovered from
the live process, you never need to know it.390x844 (phone — real mobile layout, since
responsive CSS answers to viewport width) and 1440x900 (desktop).wrote: <path>.png lines. Read those images. That is
the entire point — do not run the command and skip looking..botference/shots/ (gitignored by convention).390x844),
and compare with what they see. Do not reason about CSS from source
alone.--basic-auth helps only for HTTP
basic auth, not form gates.--virtual-time-budget is applied so client-drawn charts finish
rendering before the shot.botference see detects
that and hands the job to the see-broker service automatically,
printing the same wrote: paths. Do not retry Chrome by hand and do
not ask a human for pixels. If it reports "no see-broker service is
alive", relay exactly this to the machine owner:
botference service start see-broker -- botference see --servebotference service list shows what is running if you are unsure of
a service name.Set up and run the botference document-review interface (Google-Docs-style comments on rendered LaTeX/Markdown, bots replying in threads, apply/commit of accepted changes) in any repo — and follow the round protocol when the user asks for a review round or tags you from the review page.
Render any document the user needs to review (design docs, plans, story bibles, proposals, reports) as a self-contained HTML page with Google-Docs-style commenting — highlight text, attach notes, export feedback. Use whenever producing or updating a document whose primary purpose is for the user to READ AND REACT TO, whenever the user asks for "a review doc", or when they hand back a *.feedback.md file. The user has standing instructions that all review documents get this treatment.
Ideate and critique data visualizations using Edward Tufte's principles from "The Visual Display of Quantitative Information." Use this skill when: (1) Designing new data visualizations or charts (2) Critiquing or improving existing visualizations (3) Reviewing dashboards or reports for graphical integrity (4) Deciding between visualization approaches (5) Reducing chartjunk or improving data-ink ratio (6) Planning small multiples or high-density displays Applies principles: data-ink ratio, chartjunk elimination, graphical integrity, lie factor, small multiples, and data density.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me" or "grill-me".