Ss page

Skill bitjaru/styleseed/engine/.claude/skills/ss-page

Open-source design-method engine for Claude Code, Codex & Cursor. Gives coding agents fixed design judgment—not one fixed aesthetic—then selects or derives the right grammar from references, locks project decisions, and verifies UI, carousels, decks & docs. 20 skills · MIT.

Install

npx -y skills add bitjaru/styleseed --skill ss-page

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Scaffold a new mobile page/screen using the StyleSeed layout patterns

SKILL.md

2.6 KB, as published. Nobody here has run it

Mobile Page Scaffolder

When NOT to use

For a single composed pattern within an existing page → use /ss-pattern
For desktop-only screens — this skill is mobile-first
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

Read the design system reference:
- CLAUDE.md for file structure and conventions
- components/patterns/page-shell.tsx for page layout
- components/patterns/top-bar.tsx for header pattern
- components/patterns/bottom-nav.tsx for navigation
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>
      <TopBar
        logo={/* logo or page title */}
        subtitle={/* optional subtitle */}
        actions={/* optional action buttons */}
      />
      <PageContent>
        {/* Page sections with space-y-6 */}
      </PageContent>
      <BottomNav items={[/* nav items */]} activeIndex={0} />
    </PageShell>
  )
}

Layout rules:
- Container: max-w-[430px] (mobile viewport)
- Page background: bg-background
- Section horizontal padding: px-6
- Section vertical spacing: space-y-6
- Bottom padding for nav: pb-24
- Cards: bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]
Use semantic tokens for all colors — never hardcode hex values.
Compose the page from existing components (ui/ and patterns/) wherever possible.
Safe area: include env(safe-area-inset-*) padding for modern devices.
Post-generation verification (MANDATORY): After creating the page, verify against the Golden Rules:
- All content is inside cards (no bare background content)
- 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)
- Numbers have 2:1 ratio with units
- Spacing uses 6px multiples (p-1.5, p-3, p-6)
- mx-6 for single cards, px-6 for grids/carousels
- Touch targets ≥ 44px on all interactive elements If any violation is found, fix it before presenting the page to the user.