Skill

/ss-page

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

One skill from styleseed.

shell

$ npx -y skills add bitjaru/styleseed --skill ss-page --agent claude-code

Installs just this skill. Get the whole plugin for auto-invocation.

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/ss-page

Context preview

The summary Claude sees to decide when to auto-load this skill.

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

Stats

Stars819

Forks73

LanguageTypeScript

LicenseMIT

Ships with styleseed

SKILL.md

ss-page.SKILL.md

---
name: ss-page
description: Scaffold a new mobile page/screen using the StyleSeed layout patterns
argument-hint: "[page-name] [description]"
allowed-tools: Read, Write, Edit, Grep, Glob, Bash
---

# 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() {