SF ShipGlows
Menu Open navigation menu Close navigation menu
Build & Fix Featured

Skill Detail

sg-design

One design skill, with explicit modes and rigorous playbooks.

The single public design entrypoint for system creation, playgrounds, UI/token/component/accessibility audits, implementation, proof, verification, and shipping.

Problem

What problem this solves

Design work spans tokens, components, layout, accessibility, screenshots, and implementation. Without one public entrypoint, the operator has to choose among overlapping commands and determine when centralization still needs a site-wide migration.

Outcome

What changes when it works

You get the right design route: audit, token creation, playground, component or accessibility review, spec-first implementation, browser proof, verification, and ship routing when the work is ready.

Why It Matters

What this changes for a solo founder

This is the practical default when the request is simply about design. It keeps specialist quality without making you memorize the design-system workflow.

When to use it

  • When you have a design-related question and are not sure which design mode applies
  • When token centralization needs to become a real site-wide implementation
  • When a redesign, visual cleanup, accessibility fix, or token migration spans more than one surface

What you give it

  • A design goal, page, route, screenshot description, or rough design concern
  • Any constraints such as no visual regression, brand direction, or target pages

What you get back

  • One explicit design mode with its matching bounded playbook
  • Spec-first implementation when the design work is broad or proof-sensitive
  • Checks, browser proof, and verification routing for visible design claims
  • An explicit handoff from token centralization to full-site token consumption when needed

Typical examples

  • /sg-design system src/styles/global.css
  • /sg-design playground /design-system
  • /sg-design audit ui src/pages/pricing.astro
  • /sg-design audit tokens
  • /sg-design audit components src/components
  • /sg-design audit a11y src/components
  • /sg-design redesign src/pages/pricing.astro
  • /sg-design migration src/pages

Limits

  • It is the sole public design command; each mode keeps detailed procedure in a local playbook.
  • Broad redesigns and multi-page migrations require a ready spec before implementation.

Arguments

Some arguments change the workflow, not just the wording.

These are the argument switches documented for this skill. For the general rule behind skill arguments, read the skill modes tutorial.

system [scope]

Loads the design-system creation playbook from existing UI evidence.

Consequence

Use when no coherent token authority exists.

audit <ui|tokens|components|a11y> [scope]

Loads exactly the named audit playbook; bare audit asks for a subtype.

Consequence

Use for a bounded professional diagnosis without another public command.

playground [route-path]

Routes to the design-system playground when a token layer exists.

Consequence

Useful for live visual token review.

redesign [scope]

Audits the current surface, resolves visual direction, and routes broad implementation through a ready spec.

Consequence

Use when the intended result changes visual direction rather than only repairing drift.

migration [scope]

Measures design-token consumption and routes a bounded cross-surface migration through the lifecycle.

Consequence

Use when the authority exists but pages or components still bypass it.

Related Skills

See the rest of the loop around this move.

Build & Fix

sg-build

Run non-trivial work from story to spec, build, verification, closeout, and ship without making the user drive every gate.

The master user-facing lifecycle orchestrator for carrying a story, bug, or goal through ShipGlows's spec, readiness, implementation, verification, onboarding consideration, documentation, closure, and shipping gates.

Open skill page
Audit & Improve

sg-verify

Check whether the work really satisfies the user story, not just whether the code compiles.

A verification skill for standard readiness or an explicit excellence-focused second pass beyond the task's acceptance criteria.

Open skill page

Go Deeper

This public page explains the move. The repository explains the execution contract.

Use the public catalog for education and workflow selection. Move to the docs and GitHub when you want the operator-grade execution details behind the skill system.