Run any Skill in Manus with one click

agh-design

Stars180

Forks8

UpdatedJuly 21, 2026 at 22:36

AGH visual-design authority for production UI, static artifacts, prototypes, and reviews. Use when creating or reviewing an AGH surface or changing tokens, typography, spacing, depth, icons, or motion. Do not use for capture-only verification; use agh-ui-screenshot.

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

compozy

compozy/agh

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	agh-design
description	AGH visual-design authority for production UI, static artifacts, prototypes, and reviews. Use when creating or reviewing an AGH surface or changing tokens, typography, spacing, depth, icons, or motion. Do not use for capture-only verification; use agh-ui-screenshot.

AGH Design

Use the canonical visual authorities before making AGH design decisions.

Authority

packages/ui/src/tokens.css: canonical token source consumed by Tailwind v4.
DESIGN.md: rationale, generated token tables, anti-patterns, and semantic component contracts.
packages/ui/src/index.ts: the @agh/ui surface contract — the canonical primitive inventory.
packages/ui/src/components/**/*.tsx: canonical production recipes.
COPY.md: product voice, terms, and public claim rules.

Top-of-mind invariants

Dark mode only; warm-dark surface ramp; one --color-accent target per viewport.
Flat depth model; use --shadow-overlay for overlays and --shadow-highlight for active rims.
Pull values from --color-*, --text-*, --radius-*, --duration-*, and --shadow-* tokens; do not hardcode production hex or one-off sizes.
<Eyebrow> is the only uppercase label contract; do not inline typography tuples for labels.
See DESIGN.md section 10 for the anti-pattern list and lint/test guardrails.

Named visual contracts

When a task or spec names an OpenDesign artifact, mock, screenshot, or other trusted visual reference, activate agh-ui-screenshot before implementation and follow its Visual Contract Mode. Implement from the rendered reference, not source inspection alone; an implementation-only screenshot never proves parity. The reference is normative for visual language — layout, anatomy, typography, tokens, motion — and lossy for everything else: content, data, copy, brand marks, and which controls exist stay with runtime truth, COPY.md, and the brand inventory, recorded as authorized differences.

Static HTML artifacts

Inline or import actual values from packages/ui/src/tokens.css. Mirror the class structure and component anatomy in packages/ui/src/components where possible. Keep artifacts dark, flat, and functional. Use literal CSS only to represent exported token values; do not invent a parallel palette.

Production code

Reuse gate — before authoring any component, map every generic UI need against packages/ui/src/index.ts and import the primitive from @agh/ui instead of re-implementing it. Redefining an exported name in web/ or packages/site/ fails lint (compozy-ui-reuse/no-shadow-ui-primitive); genuinely domain-specific variants take a domain-prefixed name. New generic primitives land in packages/ui with story + test; domain composites in web/src/systems/<domain>/.

Edit the owning surface: web/, packages/ui/, or packages/site/. Consume CSS variables and bare Tailwind v4 token utilities. If tokens.css or packages/site/app/global.css changes, run make codegen and then make codegen-check so DESIGN.md stays synchronized.

Completion Criterion

The change is complete when it uses the canonical tokens and primitive owner, introduces no parallel palette or shadow primitive, respects the owning surface's instructions, regenerated design artifacts have no drift when a token source changed, and every named visual contract has a passing evidence bundle with zero unresolved blocking divergence.

Error Handling

DESIGN.md and runtime tokens disagree: treat packages/ui/src/tokens.css as source, run codegen, and inspect the regenerated spec rather than editing generated regions.
No exported primitive fits: decide whether the need is generic or domain-specific; add generic primitives to packages/ui and domain composites to the owning Web system.
A plausible mock implies unsupported runtime behavior: remove the unsupported control or metric; daemon truth wins.
Runtime truth conflicts with a normative visual reference: follow runtime truth, record the contract conflict, and reconcile or explicitly authorize the reference delta before claiming parity.
The reference shows placeholder art, demo data, or omits product content: a prototype is lossy — keep the canonical owner (brand inventory, runtime truth, existing views), record the authorized difference, and never grow an @agh/ui brand primitive or delete product content to match a mock.

More from this repository

same repository

transitions-dev

compozy/agh

Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, icon swaps, success checks, avatar group hovers, error state shakes, search/input clear, skeleton loaders, shimmer text, sliding tabs, tooltips, staggered text reveals, card hover tilt, plus-to-menu morph, or accordions. Triggers on "add a transition", "animate the dropdown", "make the modal open smoothly", "swap icon", "page slide", "stagger animation", "open / close transition", "make it animate", "fade between", "success animation", "form error", "shake on invalid", "hover lift", "avatar stack hover", "clear the search", "skeleton loader", "loading shimmer", "shimmer text", "sliding tabs", "segmented control", "tooltip", "reveal text", "tilt card", "3D hover tilt", "cursor glare", "plus to menu", "FAB morph", "accordion", "collapsible", "expand / collapse", "disclosure", "replace this transition", "which transition fits here"

2026-07-22180

agh-ui-screenshot

compozy/agh

Screenshot capture for deterministic PNG evidence and visual-contract bundles for AGH Storybook stories and local UI URLs. Use for visual audits, regression diffs, and design-parity checks. Do not use for interactive E2E flows, remote authenticated sites, or Storybook test execution.

2026-07-21180

cy-final-verify

compozy/agh

Enforces fresh verification evidence before any completion, fix, or passing claim, and before commits or PR creation. Use when an agent is about to report success, hand off work, or commit code. Do not use for early planning, brainstorming, or tasks that have not yet reached a concrete verification step.

2026-07-21180

deep-review

compozy/agh

Deep review of branch diffs, working trees, or GitHub PRs at any size. Use when the user asks for CodeRabbit-grade review, an incremental re-review after new pushes, publication of findings to a PR, a cross-LLM peer-review verdict round, or conformance review against spec artifacts. Don't use for applying fixes, reviewing specs or PRDs as documents, or quick single-file feedback.

2026-07-21180

agh

compozy/agh

AGH runtime and contribution guide. Use for sessions, agents, native tools, skills, memory, network, tasks, capabilities, bundles, QA, docs, and repo work. Do not use for unrelated projects.

2026-07-21180

real-scenario-qa

compozy/agh

Dogfoods AGH through an autonomous startup scenario with live providers, cross-surface observation, and strict evidence audit. Use for release or complex-integration QA. Do not use for smoke, static, mock-only, or unit-test work.

2026-07-20180

name	agh-design
description	AGH visual-design authority for production UI, static artifacts, prototypes, and reviews. Use when creating or reviewing an AGH surface or changing tokens, typography, spacing, depth, icons, or motion. Do not use for capture-only verification; use agh-ui-screenshot.

AGH Design

Use the canonical visual authorities before making AGH design decisions.

Authority

packages/ui/src/tokens.css: canonical token source consumed by Tailwind v4.
DESIGN.md: rationale, generated token tables, anti-patterns, and semantic component contracts.
packages/ui/src/index.ts: the @agh/ui surface contract — the canonical primitive inventory.
packages/ui/src/components/**/*.tsx: canonical production recipes.
COPY.md: product voice, terms, and public claim rules.

Top-of-mind invariants

Dark mode only; warm-dark surface ramp; one --color-accent target per viewport.
Flat depth model; use --shadow-overlay for overlays and --shadow-highlight for active rims.
Pull values from --color-*, --text-*, --radius-*, --duration-*, and --shadow-* tokens; do not hardcode production hex or one-off sizes.
<Eyebrow> is the only uppercase label contract; do not inline typography tuples for labels.
See DESIGN.md section 10 for the anti-pattern list and lint/test guardrails.

Named visual contracts

Static HTML artifacts

Production code

Completion Criterion

Error Handling

DESIGN.md and runtime tokens disagree: treat packages/ui/src/tokens.css as source, run codegen, and inspect the regenerated spec rather than editing generated regions.
No exported primitive fits: decide whether the need is generic or domain-specific; add generic primitives to packages/ui and domain composites to the owning Web system.
A plausible mock implies unsupported runtime behavior: remove the unsupported control or metric; daemon truth wins.
Runtime truth conflicts with a normative visual reference: follow runtime truth, record the contract conflict, and reconcile or explicitly authorize the reference delta before claiming parity.
The reference shows placeholder art, demo data, or omits product content: a prototype is lossy — keep the canonical owner (brand inventory, runtime truth, existing views), record the authorized difference, and never grow an @agh/ui brand primitive or delete product content to match a mock.