Skill465 repo starsupdated 2d ago

ss-page

The ss-page skill generates a new mobile-first page component using StyleSeed's established layout patterns, including page shell, top bar, bottom navigation, and semantic styling conventions. Use this skill when creating an entirely new mobile page or screen that requires standard page structure with headers, content sections, and navigation, rather than adding individual patterns to existing pages.

View source Repository: styleseed

Install in Claude Code

Copy

git clone --depth 1 https://github.com/bitjaru/styleseed /tmp/ss-page && cp -r /tmp/ss-page/engine/.claude/skills/ss-page ~/.claude/skills/ss-page

Then start a new Claude Code session; the skill loads automatically.

Definition

SKILL.md

# 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

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

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>
      <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>
  )
}
```

3. 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)]`

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):**
   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.