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

layout

스타2

포크0

업데이트2026년 7월 8일 03:32

Tighten the layout of an existing Teacher & School product page — structure, visual hierarchy (what draws the eye — emphasis, size, position, grouping), density, alignment, and grouping. Use for a scoped ask that names this dimension — "tighten the layout", "fix the hierarchy", "the visual hierarchy is weak", "the density is off", "these cards should be a list". Bare "hierarchy" and "visual hierarchy" are layout's. NOT for a whole-page review with no dimension named (that is critique); NOT for a named structural change or a brand-new page (that is design). Visual styling — spacing tokens, type, colour — goes to polish (including type/weight hierarchy), wording to copy, motion to motion.

설치

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

Manus에서 실행

출처

transformteamsg

transformteamsg/tfx-design-standard

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

다운로드

Manus에서 실행

Tighten the layout of an existing surface

A focused pass on the layout dimension: how the page is composed — regions, hierarchy, density, alignment, and how grouping is encoded. You judge structure and space only; token/type/colour craft is a polish matter and gets NOTED and routed.

Dimension controls (cite these; the catalog holds the rules — load them from ../../../standards/catalog.yaml, read each detail file):

LAY-1 — the declared column grid and gutter scale (N/A where no grid is declared). LAY-2 — reflow to one column at 320px, no loss. LAY-3 — fits a known page template. LAY-4 — body measure ≤ 80ch (~66ch target). LAY-5 — density suits the task. LAY-6 — shared edges align (optical where geometry misleads). LAY-7 — one primary focal region; reading order matches task priority (squint test).
Structural anti-slop — SLP-4 (no nested cards; flatten with space/type/dividers), SLP-5 (no identical-card grids as default), SLP-11 (a card is only for an interactive unit; group static content with space and dividers).

Reference: ../critique/layout-patterns.md (the regions → squint-test → alignment → density → grouping read). When the product ships one, .tfx/design.json layout_system declares its column grid — where declared, LAY-1 makes the grid checkable; treat it as layout context otherwise.

Procedure: follow ../critique/pass.md with the subset above.

이 저장소의 다른 Skills

같은 저장소

copy

transformteamsg/tfx-design-standard

Improve, write, or review the copy on a Teacher & School product surface — TFX voice & tone, naming, error-message anatomy, and anti-AI-writing rules (SLP-9), applied at generation time. Use for any copy-only edit — writing or reviewing user-facing text (page, form, notification, empty state, error state), tightening the wording on a page ("improve/polish the copy on the marks page"), or any longer prose (site content, marketing copy, documentation, decision records). Sufficient on its own for copy-only work; the design loop pulls it in at its implement phase. NOT for a whole-page review with no dimension named — that is critique; NOT for a named structural or visual change — that is design.

2026-07-102

design

transformteamsg/tfx-design-standard

Design or change a Teacher & School product UI — a new page, screen, form, flow, OR a modification to an existing one (adding a field, editing copy, restyling a component). Use whenever the user asks to design, create, build, add to, change, fix, or restyle any page, screen, form, component, or user flow — and whenever they ask to re-audit, re-check, or re-verify an existing page against the standards catalog (e.g. after the catalog gains new controls). Orchestrates the full loop — intent, diverge, plan (human gate), implement, verify — with the TFX-DS standards catalog enforced throughout. For copy-only edits the copy skill is sufficient; for questions about the catalog itself use standards; and to review, improve, or polish an existing page with no specific change named — or when the user just says they don't like it — use critique.

2026-07-082

flow

transformteamsg/tfx-design-standard

Improve the flow of an existing Teacher & School multi-step task or interaction — step traversal, async states, escapability, and draft safety. Use for a scoped ask that names this dimension — "improve this flow", "this multi-step form loses my draft", "smooth the journey between steps on <page>", "there's no way out of this wizard" — with no structural rebuild named. NOT for a whole-page review with no dimension named (that is critique); NOT for a named structural change or a brand-new flow (that is design). Layout goes to layout, wording to copy.

2026-07-082

critique

transformteamsg/tfx-design-standard

Critique an existing Teacher & School product page — capture it, grade it against the standards catalog and layout patterns, and return scored, ranked improvement suggestions without changing anything; then, on the user's approval, execute the accepted suggestions through the design loop's implement and verify phases. Use when the user asks to review, critique, audit, improve, polish, or judge an existing page, asks what's wrong with it, what's off, or what they should improve, or says they don't like it — WITHOUT naming a specific change. NOT for a named change ('add a field', 'change the button') or a new page; those go to design. NOT for grading the loop's own output; that is the evaluator agent. NOT for copy-only improvements — wording, microcopy, tone, or naming with no structural or visual change; those go to copy.

2026-07-082

polish

transformteamsg/tfx-design-standard

Polish a NAMED visual dimension of an existing Teacher & School product page — spacing, type, radius, colour, shadow, or type/weight hierarchy (SLP-6). Use only when the ask names such a dimension — "polish the spacing", "tighten the type", "the colours look off", "the headings don't stand out from the body". NOT for a bare "polish / tidy / clean up the page (or screen)" with no visual dimension named — that general, dimensionless polish is critique's whole-page job, so route it to critique. NOT for a named structural or component change — that is design. Visual or page hierarchy — what draws the eye (emphasis, size, position, grouping) — is layout's; polish only touches type/weight hierarchy. Layout structure goes to layout, wording to copy, animation to motion.

2026-07-042

start

transformteamsg/tfx-design-standard

Start here — orientation, a quick context check, and routing to the right TFX skill.

2026-07-042

name

layout

description

Tighten the layout of an existing surface

Dimension controls (cite these; the catalog holds the rules — load them from ../../../standards/catalog.yaml, read each detail file):

LAY-1 — the declared column grid and gutter scale (N/A where no grid is declared). LAY-2 — reflow to one column at 320px, no loss. LAY-3 — fits a known page template. LAY-4 — body measure ≤ 80ch (~66ch target). LAY-5 — density suits the task. LAY-6 — shared edges align (optical where geometry misleads). LAY-7 — one primary focal region; reading order matches task priority (squint test).
Structural anti-slop — SLP-4 (no nested cards; flatten with space/type/dividers), SLP-5 (no identical-card grids as default), SLP-11 (a card is only for an interactive unit; group static content with space and dividers).

Procedure: follow ../critique/pass.md with the subset above.