Run any Skill in Manus with one click

layout

Stars2

Forks0

UpdatedJuly 8, 2026 at 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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

transformteamsg

transformteamsg/tfx-design-standard

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

SKILL.md

readonly

name

layout

description

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.

More from this repository

same repository

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.