MCPInstall

ss-page

by bitjaruMarketing & SEO

Scaffold a new product page or screen from the compiled StyleSeed output grammar, surface adapter, brand recipe, and project lock.

Installs
835
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/bitjaru/styleseed --skill ss-page
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads ss-page automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Before this workflow, follow the once-per-session update preflight.

Product Page Scaffolder

Registry-first artifact boundary

When .styleseed/project.json and .styleseed/artifacts/index.json exist, resolve the requested artifact ID first, then read only .styleseed/bundles/<artifact-id>.md and .styleseed/manifests/<artifact-id>.json. Never fall back to the global legacy bundle for a registry project. Legacy projects may use .styleseed/effective-rules.md only when no registry exists.

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

  1. Resolve and read the active design method:

    • If either registry file exists, require a complete valid registry and resolve the selected artifact with --artifact <id>. Read .styleseed/bundles/<id>.md and .styleseed/manifests/<id>.json; never restart setup or use a legacy fallback on errors.
    • Only when neither registry file exists, resolve STYLESEED.md and read .styleseed/effective-rules.md and .styleseed/manifest.json.
    • For missing/stale outputs in this authorized build, resolve from the corresponding project-owned configuration and re-check without changing approved decisions.
    • 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:

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

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

  2. Use semantic tokens for all colors — never hardcode hex values.

  3. Compose the page from existing components (ui/ and patterns/) wherever possible.

  4. Safe area: include env(safe-area-inset-*) padding for modern devices.

  5. 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
    • One identifiable primary action; additional colors have contract-defined roles
    • 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 touch surfaces; pointer-first desktop controls follow the approved adapter/component contract, which may allow 36–40px Follow the bounded build gate loops. Report actual results and remaining failures even when a gate does not pass; never replace approved decisions or claim acceptance to end the loop.

FAQ

What does the ss-page skill do?

Scaffold a new product page or screen from the compiled StyleSeed output grammar, surface adapter, brand recipe, and project lock.

How do I install ss-page?

Run npx skills add https://github.com/bitjaru/styleseed --skill ss-page in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ss-page/ (personal) or .claude/skills/ss-page/ (project).

Which AI agents can use ss-page?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is ss-page safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains ss-page?

It is published by bitjaru in bitjaru/styleseed. It has 835 recorded installs.

More from bitjaru/styleseed

View all →

ss-audit

bitjaru/styleseed

Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices

Security864 installs

ss-review

bitjaru/styleseed

Review UI code for design system compliance, accessibility, and best practices

Code Quality & Workflow864 installs

ss-setup

bitjaru/styleseed

Configure StyleSeed by selecting the output grammar, domain, page type, brand recipe, semantic palette recipe, optional aesthetic profile, and bounded brand tokens before scaffolding a first screen.

Marketing & SEO863 installs

ss-a11y

bitjaru/styleseed

Audit a component or page for accessibility issues and fix them

Frontend & Design862 installs

ss-lint

bitjaru/styleseed

Quick automated lint — detects common design system violations in seconds

Code Quality & Workflow855 installs

ss-feedback

bitjaru/styleseed

Add appropriate user feedback states (loading, success, error, empty) to a component or page

Frontend & Design852 installs

Popular marketing & seo skills

View category →

reddit-automation

flowkit-labs/skills

Find Reddit threads where people are genuinely asking for what you offer, then draft short, genuinely helpful replies — disclosing your affiliation honestly and naming your product only when it truly answers the question. Two moves: discovery — scan the right subreddits for real needs (recommendation asks, expressed pain, competitor mentions) and rank the few threads where you can actually help; drafting — write from real experience, respect each community's self-promo rules, and keep a human in the loop to review and post. This markets on Reddit the honest way: contribute value, disclose who you are, never astroturf. Distilled from the playbook behind doany.ai's Reddit agent. Triggers on "find reddit opportunities", "reddit marketing", "reddit automation", "reply on reddit for my product", "reddit community engagement", "reddit lead gen", or any ask to turn Reddit threads into genuine, disclosed marketing replies.

Marketing & SEO1.1M installs

twitter-automation

101-skills/superpowers

Automate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-tweet, x/post-create (with media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x automation, tweet scheduler, twitter integration, post tweet, twitter post, x post, send tweet

Marketing & SEO880K installs

twitter-automation

magentosh/superpowers

Automate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-tweet, x/post-create (with media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x automation, tweet scheduler, twitter integration, post tweet, twitter post, x post, send tweet

Marketing & SEO771.7K installs

twitter-automation

qu-skills/superpowers

Automate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-tweet, x/post-create (with media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x automation, tweet scheduler, twitter integration, post tweet, twitter post, x post, send tweet

Marketing & SEO564.3K installs

product-launch-video

heygen-com/hyperframes

Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Site tours / showcases of a website route here too — the brief carries the show-it-as-is intent. Unclear → /hyperframes.

Marketing & SEO538.7K installs

twitter-automation

skills-shell/superpowers

Automate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-tweet, x/post-create (with media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x automation, tweet scheduler, twitter integration, post tweet, twitter post, x post, send tweet

Marketing & SEO453.7K installs