Skip to content

SKILL.md

Latest commit

 

History

History
78 lines (53 loc) · 2.24 KB

SKILL.md

File metadata and controls

78 lines (53 loc) · 2.24 KB
Raw
name Oas-brand-style-skill
description Create or refactor product banners/hero visuals into a unified retro arcade pixel style (ClawPiggy style system). Use when designing SVG/landing hero graphics, standardizing visual language across products, or improving message clarity with a token-economy flow narrative.

Oas-brand-style-skill

Use this skill to keep product visuals in one recognizable style while preserving business messaging.

Workflow

  1. Extract product loop in one line.
  2. Choose a three-block narrative layout.
  3. Assign one visual focus.
  4. Apply style tokens and pixel rules.
  5. Minimize copy to headline + module labels + one support line.
  6. Run the quality checklist before finalizing.

1) Extract Product Loop

Write the core value loop first.

Format:

  • Source resource -> Conversion/Credit -> Outcome

Examples:

  • Unused Tokens -> PiggyCoin -> Other Agents Help You
  • Idle Capacity -> Credits -> Tasks Done

Do not draw before this loop is clear.

2) Three-Block Narrative Layout

Use exactly three primary modules in one horizontal row:

  • Left: source resource (tokens/quota)
  • Middle: conversion engine/brand action
  • Right: value realization (agents helping / tasks done)

Connect modules with thin arrows. Keep direction left-to-right.

3) Visual Focus Rule

Pick only one primary focal anchor:

  • Preferred: middle conversion block
  • Alternative: right value block if goal is conversion outcome

If one block is highlighted, slightly mute non-focus blocks.

4) Style Tokens

Read references/style-spec.md and apply it directly.

Hard rules:

  • Pixel geometry only (shape-rendering: crispEdges)
  • Flat color planes (no gradients inside modules)
  • Warm retro palette from product theme
  • Keep typography in arcade/mono style for headings and labels

5) Copy Density Rules

Use short labels. Keep module text concise:

  • 1-2 lines per module
  • One top subtitle
  • One bottom explanatory sentence
  • Optional slogan line

Avoid repeating equivalent statements in multiple places.

6) Quality Gate

Read references/quality-checklist.md. Ship only if all checks pass.

Resources

  • Style spec: references/style-spec.md
  • Review checklist: references/quality-checklist.md
  • Starter template: assets/banner-template.svg