ss-page
Scaffold a new product page or screen from the compiled StyleSeed output grammar, surface adapter, brand recipe, and project lock.
By bitjaru · 718 installs
npx skills add bitjaru/styleseed --skill ss-page
Source repository · Upstream listing
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:
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.