Landing Website Standards Skill Pack Files

Design, UI and UX Practices

The design skill of the landing playbook: it carries the design role and defines the three-step chain that takes approved requirements to the mock the approval gate reviews (workflow YAMLs live in the shared agents/ops/ catalog, where the default-pack sync registers them). Craft content (layout patterns, type/spacing/color systems, interaction states, accessibility floors) lands later through research passes and raises confidence; the structure below is what jobs run on today.

Mocks are grayscale low-fi until the brand gate approves an identity — real headlines, labelled placeholders, one primary CTA — and are judged against the acceptance bar in best-practices/references/acceptance.md plus the operational rules stated inside each workflow's prompt.

The Design Playbook

Step	Workflow	Role	Verdicts (gate)
1	agent_pm_wireframe — Gather Wireframe Requirements	pm	REQUIREMENTS_READY · NEEDS_INPUT
2	agent_se_design_check — Check Design Dependencies	se	DEPS_CLEAR · BLOCKERS_FOUND
3	agent_design_assemble — Assemble & Publish Mock	design	MOCK_READY · NEEDS_INPUT

Steps chain through ticket comments; the previous step's summary rides {{hint}}. The design step attaches the artifacts (wireframe-v1.svg/.html + copy-skeleton.md) and reports the AC1–AC5 self-check in its resolution message.

Roles

Role	Playbook	In the chain
design	_roles/design.md — the pack's new role, seeded portal-side as a cyan builtin (Product Designer)	Step 3 — implements the mock, publishes artifacts
pm	_roles/pm.md	Step 1 — wireframe requirements
se	_roles/se.md	Step 2 — dependencies & design system check
qa	_roles/qa.md	Independent re-check at design review and build

Templates & Components

The site repo carries the catalogs (src/templates/manifest.json, src/components/manifest.json); this module carries the contracts for using them. Selection is data-driven: the status: available set is pickable, and planned wants route through the SE step.

Contract	File	Consumed by
Template selection by conversion pattern, deltas named	references/templates.md	Step 1 (pm)
Component selection · availability check · brand adaptation	references/components.md	Steps 1–3

Brand values come from the account's context (sidebutton-system/landing-website structure, brand section) — with a resolved brand source the mock is branded (token values, fonts, voice); grayscale remains the fallback for a goal whose intake carries no brand source.