Menú
Scaffold a new mobile page/screen using the StyleSeed layout patterns
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
The VISUAL gate — render the UI, screenshot it, and score what you actually SEE, not what the code says. Catches the tells that only show up in pixels (dead whitespace, cramping, a hero that doesn't dominate, fonts that didn't load, real rendered color, the squint "does this look AI-made" test) — the things /ss-score can't read from source. Renders empty/loading/error states too, then fixes and re-renders until it passes. Use as the final gate on any screen you can render.
Turn ONE design axis up or down as a coordinated, deterministic transform — "denser", "sharper corners", "more muted", "bolder", "flatter", "livelier". Not a vibe the model reinterprets each time; a defined ramp that moves many tokens together, respects the guardrails (8px grid, a11y floors, single accent, nested-radius), updates the lock, and re-runs the gate. Use this when a human saying "more X" would otherwise get an inconsistent one-off.
Apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …). Translates vibe words into framer-motion code from one source of truth.
Score a UI file's design quality 0-100 against StyleSeed's design language — per-category breakdown, the worst offenders, and a prioritized fix list. A quantified version of /ss-review.
Re-style a project to a named aesthetic — swiss, editorial, technical, warm-dtc, minimal-mono, brutalist-lite. A preset is a *coordinate* across the dial axes (radius + density + color + weight + motion) plus a font, accent family, and one signature move — applied coherently as a single identity, written to the lock, and re-gated. This is for mood words ("more editorial") that aren't one axis; for a single axis use /ss-dial.
Build a screen the way the StyleSeed reference demo was built — one command that ENFORCES the full loop (lock the look → build → score → fix to ≥80 → only then show). Use this instead of building UI free-hand; it closes the gap between "knows the rules" and "actually followed them."
| 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 |
/ss-pattern/ss-flow firstCreate a new page: $0 Description: $ARGUMENTS
Read the design system reference:
CLAUDE.md for file structure and conventionscomponents/patterns/page-shell.tsx for page layoutcomponents/patterns/top-bar.tsx for header patterncomponents/patterns/bottom-nav.tsx for navigationPage 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:
max-w-[430px] (mobile viewport)bg-backgroundpx-6space-y-6pb-24bg-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:
--brand color used for accents (no other accent colors)mx-6 for single cards, px-6 for grids/carousels