---
name: Product Page Scaffolder
slug: product-page-scaffolder
category: Frontend
description: "Product Page Scaffolder creates a new product page or screen from StyleSeed's compiled grammar, adapter, brand recipe, and project lock. Use it when starting a page scaffold rather than editing an existing page."
github: "https://github.com/bitjaru/styleseed/tree/main/skills/ss-page"
language: TypeScript
stars: 906
forks: 82
install: "npx degit https://github.com/bitjaru/styleseed/tree/main/skills/ss-page ~/.claude/skills/ss-page"
installs_to: ~/.claude/skills/ss-page
source_path: skills/ss-page/SKILL.md
collection_size: 23
category_size: 567
collection_url: "https://dirskills.com/collections/bitjaru/styleseed"
added: 2026-08-22T05:21:05.965Z
last_synced: 2026-08-22T05:21:05.965Z
canonical_url: "https://dirskills.com/skills/product-page-scaffolder"
---

# Product Page Scaffolder

Product Page Scaffolder creates a new product page or screen from StyleSeed's compiled grammar, adapter, brand recipe, and project lock. Use it when starting a page scaffold rather than editing an existing page.

**Install:**

```bash
npx degit https://github.com/bitjaru/styleseed/tree/main/skills/ss-page ~/.claude/skills/ss-page
```

## README

# 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:
   - `.styleseed/effective-rules.md` and `.styleseed/manifest.json`
   - If missing or stale, invoke `/ss-resolve` or `$ss-resolve` from `STYLESEED.md`
   - `components/patterns/page-shell.tsx` for page layout
   - `components/patterns/top-bar.tsx` for header pattern
   - `components/patterns/bottom-nav.tsx` for navigation

2. Page structure template:
```tsx
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>
  )
}
```

3. 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.

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

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

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

7. **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
   - [ ] Only `--brand` color used for accents (no other accent colors)
   - [ ] 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 all interactive elements
   If any violation is found, fix it before presenting the page to the user.