원클릭으로 Manus에서 모든 스킬 실행

looking-at-frontend

스타5

포크1

업데이트2026년 7월 24일 04:12

Use when reviewing, designing, debugging, or modifying any UI surface — Angular app pages, Lit elohim-elements, graphos Storybook stories (Library A default / Library B designed), the design guide — when judging visual quality, aesthetics, theming, or brand drift, or when a described feature can't be found in the rendered app. Especially when you're about to give a visual verdict from source files alone.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

ethosengine

ethosengine/elohim

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Looking at Frontend

Overview

Eyes first. Render the actual surface before reading source or giving any visual verdict. Token values can be byte-correct in source while the binding is dead at runtime — wrong property name, specificity, missing webfont. Real case: a designed story bound --elohim-reaction-count-color, but the primitive's surface is --elohim-reaction-count-fg — byte-perfect tokens, dead binding, visible only in the light-theme render (dark mode accidentally masked it via color-scheme fallbacks).

All render tooling lives in genesis/a2o. Artifacts land in genesis/a2o/reports/look/<slug>/ — shot.png (Read it directly) + capture.json (console, pageErrors, httpErrors, network). pnpm reports:serve exposes them to the operator.

The three look surfaces

Surface	Command (from `genesis/a2o`)	Notes
The app	`pnpm look <url> [--as <FixtureHuman>] [--viewport WxH] [--out slug] [--scheme light\|dark] [--scroll]`	Renders ANY url, auth-aware. `--scroll` walks the page first so reveal-on-scroll sections paint (scrollytelling surfaces screenshot blank without it). Targets: local stack (`pnpm hc:start` + app :4200), `pnpm start:alpha` in `app/elohim-app` (local UI × live alpha data, read-mostly), or deployed alpha.
Pattern libraries (Storybook)	`pnpm graphos list [filter]` (enumerate, no browser) · `pnpm graphos story <story-id>` (one story) · `pnpm graphos sheet <component>` (full cell/theme matrix, both libraries, one composite image — fastest design-language absorption)	Story ids: `default-` = Library A blank-slate, `designed-` = Library B themed, `foundations-*`, narrative `i-iv`.
Design guide	`pnpm graphos story <docs-id>` (MDX pages; viewMode auto-derived, `--docs` forces)	Absorb the established aesthetic BEFORE designing or refining.

Base matters: graphos defaults to the deployed storybook (storybook.elohim.host) = graphos as merged to dev. For in-branch work, run pnpm storybook in app/elohim-library and pass --base http://localhost:6006. Judging branch changes against the deployed base is a category error.

Reading a render

Render every claimed state: both themes minimum, plus lens/cell variants — sheet does the matrix in one shot.
Cross-check designed-story bindings against the primitive's @cssprop surface in app/elohim-elements/ — stories can bind names the primitive never declares.
Check capture.json for pageErrors/httpErrors before trusting what you see.

Can't-find ≠ never-implemented

If the view the operator describes doesn't show up, suspect present-moment reachability — broken route, failed data load, 403/404 in capture.json httpErrors, env — and investigate before concluding the feature doesn't exist.

Known blind spots of a static render

No hover/focus/motion — judge motion via code + spec, or interactive runs (pnpm test:browser).
The headless container has no color-emoji font — emoji render as boxes; don't grade iconography from that.

Common mistakes

Mistake	Reality
"`pnpm look` only targets the app, so I can't render Storybook"	`look` renders any URL; `graphos` wraps the storybook surfaces specifically.
Visual verdict from source tokens alone	The dead-binding class is invisible on paper. Render, then read.
Rendering only one theme	Dark `color-scheme` fallbacks can mask light-theme bugs (and vice versa).
"Feature isn't implemented" after one failed look	Reachability first: httpErrors, routes, git history.

Dispatching frontend work to subagents

Subagents do NOT self-discover skills (observed twice: agents reviewed designed stories code-only, claiming "pnpm look doesn't apply to Storybook" / "no browser tool" — both false). When dispatching any visual review/design/verification task, the dispatch prompt MUST carry the eyes rail explicitly, e.g.: "Render before judging: from genesis/a2o, pnpm graphos story <id> / sheet <component> → Read the shot.png. Full rails: .claude/skills/looking-at-frontend/SKILL.md." The component-architect and graphos-designer agent bodies carry this pointer; generic agents need it in the prompt.

Integration

a11y/testid legibility audit → page-model skill.
Screenshot-vs-promise delivery judgment → /deliver.
Greenfield aesthetics → frontend-design plugin skill; inside graphos the aesthetic is already chosen (genesis/graphos/elohim-protocol-design-spec.md).
Library A/B ownership + story conventions → app/elohim-library/CLAUDE.md. Tooling spec: genesis/docs/superpowers/specs/2026-06-11-graphos-look-design.md.

이 저장소의 다른 Skills

같은 저장소

story-harvest

ethosengine/elohim

Use when finishing a development branch, after resolving a debugging session, or whenever a failure-then-fix cycle reveals engineering constraints worth preserving as a2o scenarios. Also invocable manually with /story-harvest.

Use when starting a planning or brainstorm pass on a feature or subsystem (or grounding external prior-art) and you need current ground-truth across the architecture's relevant seams before designing — "we're exploring X, ground my understanding", "map the seams for X", or as the grounding step before /brainstorm, /shift, or app-port.

2026-07-245

p2p-design-gate

ethosengine/elohim

Mandatory gate for any feature design involving data entities (tables, models, routes, sync messages) OR identity/agency/role/capability framing. Forces P2P-native thinking — DHT entry types, content addressing, source-of-truth classification, and identity-ontology framing (imago-dei, not crypto self-sovereignty) — before proposing design approaches. Use when brainstorming any feature that creates, stores, references, or syncs data entities, or that names an identity/agency tier.

2026-07-245

memory-ceremony

ethosengine/elohim

Orchestrate the four-agent memory team (librarian, historian, cartographer, storyteller) through a four-phase substrate-currency ceremony — population-wide drift triage, four-lens deep-read on 1-2 picked surfaces, storyteller-pen synthesis, apply + downstream coherence verification. The deliverable is substrate-grounded gospel-tier rewrites. Invoke when the substrate-currency audit accumulates drift signal, when a major substrate landing happens that the gospel-tier hasn't absorbed, or on operator request.

name	looking-at-frontend
description	Use when reviewing, designing, debugging, or modifying any UI surface — Angular app pages, Lit elohim-elements, graphos Storybook stories (Library A default / Library B designed), the design guide — when judging visual quality, aesthetics, theming, or brand drift, or when a described feature can't be found in the rendered app. Especially when you're about to give a visual verdict from source files alone.
metadata	{"runtime":"codex","sourceRuntime":"claude","master":"package","sourcePath":".epr-meta/elohim/packages/skills/looking-at-frontend.json","packageKind":"SkillPackage"}
governance	epr:elohim-agent/skills/looking-at-frontend

Looking at Frontend

Overview

The three look surfaces

Surface	Command (from `genesis/a2o`)	Notes
The app	`pnpm look <url> [--as <FixtureHuman>] [--viewport WxH] [--out slug] [--scheme light\|dark] [--scroll]`	Renders ANY url, auth-aware. `--scroll` walks the page first so reveal-on-scroll sections paint (scrollytelling surfaces screenshot blank without it). Targets: local stack (`pnpm hc:start` + app :4200), `pnpm start:alpha` in `app/elohim-app` (local UI × live alpha data, read-mostly), or deployed alpha.
Pattern libraries (Storybook)	`pnpm graphos list [filter]` (enumerate, no browser) · `pnpm graphos story <story-id>` (one story) · `pnpm graphos sheet <component>` (full cell/theme matrix, both libraries, one composite image — fastest design-language absorption)	Story ids: `default-` = Library A blank-slate, `designed-` = Library B themed, `foundations-*`, narrative `i-iv`.
Design guide	`pnpm graphos story <docs-id>` (MDX pages; viewMode auto-derived, `--docs` forces)	Absorb the established aesthetic BEFORE designing or refining.

Reading a render

Render every claimed state: both themes minimum, plus lens/cell variants — sheet does the matrix in one shot.
Cross-check designed-story bindings against the primitive's @cssprop surface in app/elohim-elements/ — stories can bind names the primitive never declares.
Check capture.json for pageErrors/httpErrors before trusting what you see.

Can't-find ≠ never-implemented

Known blind spots of a static render

No hover/focus/motion — judge motion via code + spec, or interactive runs (pnpm test:browser).
The headless container has no color-emoji font — emoji render as boxes; don't grade iconography from that.

Common mistakes

Mistake	Reality
"`pnpm look` only targets the app, so I can't render Storybook"	`look` renders any URL; `graphos` wraps the storybook surfaces specifically.
Visual verdict from source tokens alone	The dead-binding class is invisible on paper. Render, then read.
Rendering only one theme	Dark `color-scheme` fallbacks can mask light-theme bugs (and vice versa).
"Feature isn't implemented" after one failed look	Reachability first: httpErrors, routes, git history.

Dispatching frontend work to subagents

Integration

a11y/testid legibility audit → page-model skill.
Screenshot-vs-promise delivery judgment → /deliver.
Greenfield aesthetics → frontend-design plugin skill; inside graphos the aesthetic is already chosen (genesis/graphos/elohim-protocol-design-spec.md).
Library A/B ownership + story conventions → app/elohim-library/CLAUDE.md. Tooling spec: genesis/docs/superpowers/specs/2026-06-11-graphos-look-design.md.