Catalogskills.sh · bitjaru

ss-build

Build a screen with StyleSeed's composed method, then run the code and pixel gates before presenting. Use when building or rebuilding a screen; sets up the project first if needed.

Pending analysisVerified hub783 installs

Savant verdict: Pending analysis

Imported from the source hub; Savant's analysis is still running.

Live evaluation

Not evaluated yet. Workspaces can request a live evaluation.

Security assessment

Scan pending.

Structure

  • 2 referenced files aren't in the packagescripts/resolve-context.mjs, references/functional-checks.md. They may be binary, too large to catalog, or missing upstream.
  • No license declaredConfirm you may reuse this skill before importing it into your repository.

SKILL.md

---
name: ss-build
description: Build a screen with StyleSeed's composed method, then run the code and pixel gates before presenting. Use when building or rebuilding a screen; sets up the project first if needed.
argument-hint: "[what to build]"
allowed-tools: Read, Write, Edit, Grep, Glob, Bash, WebFetch
---

Before this workflow, follow the once-per-session [update preflight](../ss-update/references/update-preflight.md).


# Build with the composed StyleSeed method
## 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.

The build method is the product. Score and screenshots are auxiliary evidence, not the source
of design judgment.

## Step 1 — Establish the rule set before code

If either `.styleseed/project.json` or `.styleseed/artifacts/index.json` exists, require a
complete, valid registry and resolve the requested artifact with the installed resolver's
`scripts/resolve-context.mjs --project-root . --artifact <artifact-id> --agent <agent>`.
Read `.styleseed/bundles/<artifact-id>.md` and preserve `.styleseed/manifests/<artifact-id>.json`
as provenance. Do not create `STYLESEED.md`, restart setup, or use a legacy bundle because a
registry is incomplete, invalid, or lacks a compiled output. Resolve missing scope with the user.
For changes spanning multiple artifacts, resolve and check each affected artifact separately.

Only when neither registry file exists, use the legacy path: if `STYLESEED.md` is missing,
run `/ss-setup` before UI code; otherwise preserve it. Invoke `/ss-resolve` (Claude Code) or
`$ss-resolve` (Codex) with `--from-lock STYLESEED.md --agent <agent>`, read
`.styleseed/effective-rules.md`, and preserve `.styleseed/manifest.json`.

If a supplied visual reference is not represented by the selected grammar, use `/ss-reference`
within the selected project boundary. Never reduce an unfamiliar reference to a palette swap or
replace approved project choices without human approval. Do not load `llms-full.txt` after
resolution succeeds.

## Step 2 — Compose, do not improvise

The compiled bundle already composes the authority order: core invariants → selected grammar →
surface adapter → domain/page → brand recipe → optional profile → bounded lock → craft baseline. Use the
manifest selection and source hashes to detect drift. Open a full source document only when the
bundle points to a genuine ambiguity; do not reassemble the handbook ad hoc.

Before code, state the effective rule set in one line, for example:

```text
operations-console × SaaS × dashboard × enterprise-workbench × swiss × locked brand tokens
```

Resolve conflicts by authority. A profile or lock cannot waive task fitness, coherence, or
accessibility.

## Step 3 — Build with design judgment

- Make the grammar's user job and primary decision visible in the first viewport.
- Establish one focal point; avoid equal-weight template grids.
- Use the grammar's composition, density, type, color, surface, imagery/data, action, state,
  responsive, and motion contracts.
- Use the recipe's containment, geometry, control, collection, and navigation morphology.
  Set `data-styleseed-recipe="<id>"` on the artifact root when using bundled pattern components.
- Use product-specific content and evidence. Never copy the StyleSeed demo or a reference screen.
- Implement loading, empty, error, focus, reduced-motion, and responsive behavior where relevant.

For spacing work, use the resolver's [spatial roles guide](../ss-resolve/references/spacing.md).
Read any compiled `spacing` section before choosing gaps. Map its scoped variables to existing
components and preserve undeclared roles. Group related content deliberately; do not multiply
nested insets or shrink type to achieve density. An implementation must consume the variables;
config alone does not change rendered layout.

## Step 4 — Code gate loop

For interactive work, name the required user outcomes before testing: for example, a saved
setting survives reload, a failed save preserves the draft, or a viewer cannot perform an
editor action. Reuse the project's real implementation and test tools; a disconnected demo
or a source-text assertion does not establish that the action works.

Registry builds record applicable outcomes as `validation.functional.scenarios` in the artifact
and cover the tests and their implementation dependencies with `implementation.sourceRoots`.
Use the installed `ss-score` reference `references/functional-checks.md` to run and retain
evidence. A failed, skipped, missing, or unexecuted required scenario blocks completion even
with a high code score. If the available runner cannot execute the project, report the exact
unverified outcome; do not omit its requirement to obtain a pass. Static artifacts may omit
functional scenarios with an explicit not-applicable explanation.

Run `/ss-score` on the actual implementation. The score must name the effective rule set and
check both core invariants and grammar-specific tells. Fix the highest-gain failures and
re-score for at most three correction passes, stopping earlier on ≥80. Prioritize broken flows
and core failures before optional score gains. If it cannot pass, report the actual score and
remaining failures; do not restart the pass budget by invoking a different skill.

## Step 5 — Pixel gate loop

For every renderable artifact, invoke `/ss-verify`: use the adapter renderer, inspect every
required viewport/frame/page and relevant state, fix perceptual failures, and re-render. If no renderer
is available, say the visual gate was skipped; never imply it passed.

## Step 6 — Present with proof

Report:

- effective rule set and why it fits;
- final code score;
- visual verification status and viewport;
- material fixes made by the gates;
- project/artifact configuration paths (or legacy `STYLESEED.md`) and any compiled grammar path.

## Rules

- Grammar before code; code gate after build; pixel gate last.
- Output grammar is functional. Brand recipe is morphological. Aesthetic profile is optional.
  Neither substitutes for the grammar or permits a brand clone.
- The primary action must remain identifiable; additional color is permitted only where the
  grammar gives it stable semantic or categorical meaning.
- Re-read the lock and grammar on every UI change.