Agent Skills › bitjaru/styleseed › ss-page

ss-page

GitHub

基于StyleSeed规范快速搭建移动端页面骨架。提供标准布局模板、样式规则及组件组合指南，强制要求使用语义化颜色、安全区域适配，并包含严格的生成后黄金规则校验流程，确保页面符合设计规范。

engine/.claude/skills/ss-page/SKILL.md bitjaru/styleseed

Trigger Scenarios

需要创建新的移动端页面或屏幕初始化符合StyleSeed规范的移动应用界面

Install

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

More Options

Non-standard path

npx skills add https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-page -g -y

Use without installing

npx skills use bitjaru/styleseed@ss-page

指定 Agent (Claude Code)

npx skills add bitjaru/styleseed --skill ss-page -a claude-code -g -y

安装 repo 全部 skill

npx skills add bitjaru/styleseed --all -g -y

预览 repo 内 skill

npx skills add bitjaru/styleseed --list

SKILL.md

Frontmatter

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

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.