ss-page

Product Page Scaffolder

Registry-first artifact boundary

When .styleseed/project.json and .styleseed/artifacts/index.json exist, resolve the requested artifact ID first, then read only .styleseed/bundles/<artifact-id>.md and .styleseed/manifests/<artifact-id>.json. Never fall back to the global legacy bundle for a registry project. Legacy projects may use .styleseed/effective-rules.md only when no registry exists.

When NOT to use

• For a single composed pattern within an existing page → use /ss-pattern
• For multi-page navigation structure → use /ss-flow first
• For tweaking an existing page — edit the file directly

Create a new page: $0 Description: $ARGUMENTS

Instructions

1. Resolve and read the active design method:

• If either registry file exists, require a complete valid registry and resolve the selected

artifact with --artifact <id>. Read .styleseed/bundles/<id>.md and .styleseed/manifests/<id>.json; never restart setup or use a legacy fallback on errors.

• Only when neither registry file exists, resolve STYLESEED.md and read

.styleseed/effective-rules.md and .styleseed/manifest.json.

• For missing/stale outputs in this authorized build, resolve from the corresponding

project-owned configuration and re-check without changing approved decisions.

• components/patterns/page-shell.tsx for page layout
• components/patterns/top-bar.tsx for header pattern
• components/patterns/bottom-nav.tsx for navigation

1. Page structure template:

import { PageShell, PageContent } from "@/components/patterns/page-shell"
import { TopBar, TopBarAction } from "@/components/patterns/top-bar"
import { BottomNav } from "@/components/patterns/bottom-nav"

export default function PageName() {
  return (
    <PageShell recipe="enterprise-workbench">
      <TopBar
        logo={/* logo or page title */}
        subtitle={/* optional subtitle */}
        actions={/* optional action buttons */}
      />
      <PageContent>
        {/* Compose the grammar's focal point and recipe-fit sections */}
      </PageContent>
      <BottomNav items={[/* nav items */]} activeIndex={0} />
    </PageShell>
  )
}

1. Apply the selected adapter and recipe:

• Set recipe="<manifest selection.recipe>" on PageShell, or

data-styleseed-recipe="<id>" on a custom artifact root.

• Use the lock's viewports and the adapter's responsive contract. Do not assume 430px mobile.
• Use ss-page-padding, ss-page-gutter, ss-pattern-stack, ss-pattern-surface,

ss-pattern-inset, ss-pattern-control, and ss-pattern-icon where bundled patterns fit.

• Select components by recipe: aligned panels/rows for workbenches, flat steps for public

service, reading flow for editorial, focused canvas/tool groups for creative tools, and soft grouping only when the recipe calls for it.

• A page may contain cards, panels, rules, whitespace, rows, tables, or a canvas. Never force

every content block into a card.

1. Use semantic tokens for all colors — never hardcode hex values.

1. Compose the page from existing components (ui/ and patterns/) wherever possible.

1. Safe area: include env(safe-area-inset-*) padding for modern devices.

1. Post-generation verification (MANDATORY):

Run /ss-score then /ss-verify. Confirm:

• [ ] The first viewport exposes the grammar's user job and one focal point
• [ ] Containment, geometry, controls, collections, density, and navigation fit the recipe
• [ ] One identifiable primary action; additional colors have contract-defined roles
• [ ] No hardcoded hex values (all semantic tokens)
• [ ] Section types alternate (no two identical types in a row)
• [ ] Spacing uses one repeatable recipe-fit rhythm
• [ ] Touch targets ≥ 44px on touch surfaces; pointer-first desktop controls follow the

approved adapter/component contract, which may allow 36–40px Follow the bounded build gate loops. Report actual results and remaining failures even when a gate does not pass; never replace approved decisions or claim acceptance to end the loop.