Agent Skills › bitjaru/styleseed › ss-page

ss-page

GitHub

基于 StyleSeed 语法和配方，自动生成符合设计规范的产品页面脚手架。包含布局模板、组件组合及语义化样式应用，并强制执行生成后验证以确保设计一致性。

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

触发场景

需要创建新的产品页面或屏幕根据 StyleSeed 输出生成前端页面结构

安装

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

更多选项

非标准路径

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

不安装直接使用

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 product page or screen from the compiled StyleSeed output grammar, surface adapter, brand recipe, and project lock.",
    "allowed-tools": "Read, Write, Edit, Grep, Glob, Bash",
    "argument-hint": "[page-name] [description]"
}

Product Page Scaffolder

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

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
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 recipe="enterprise-workbench">
      <TopBar
        logo={/* logo or page title */}
        subtitle={/* optional subtitle */}
        actions={/* optional action buttons */}
      />
      <PageContent>
        {/* Compose the grammar's focal point and recipe-fit sections */}
      </PageContent>
      <BottomNav items={[/* nav items */]} activeIndex={0} />
    </PageShell>
  )
}

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