suwappubot: Skill for Claude Code

.claude/skills/design-iterate/SKILL.md

design-iterate is a skill for Claude Code from 0xSoftBoi/suwappubot. It costs 0 tokens per session (2,218 once invoked), scanned A, original, Apache-2.0.

A repeatable website-improvement workflow that renders a site, captures desktop and mobile screenshots, reviews the design, and applies a small set of fixes. It verifies the build and pushes a commit when changes are made.

In plain words
What is it for?
Use it to improve a showcase website one iteration at a time, focusing on up to three concrete findings per pass. It can also report a clean pass after the design rubric finds no issues that meet its fix threshold.
Why use it?
It turns visual review into a bounded loop with evidence from screenshots and a clear stopping rule. This helps catch design problems without making large, unverified batches of edits.

Skill for Claude Code

Written for Claude Code: installed under .claude/.

This is 0xSoftBoi/suwappubot's own configuration. It tells Claude Code how to work on suwappubot itself, so it is not a mod to install elsewhere. Copy it as a starting point and replace the rules that are about this project. Everything suwappubot configures →

Reuse

Borrowing it

Nothing to install: this file belongs to 0xSoftBoi/suwappubot. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file
curl -O https://raw.githubusercontent.com/0xSoftBoi/suwappubot/main/.claude/skills/design-iterate/SKILL.md
Clone the repo
git clone --depth 1 https://github.com/0xSoftBoi/suwappubot

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for design-iterate

README.md
[![agentmods](https://agentmods.dev/badge/skills/0xsoftboi/suwappubot/design-iterate/github.svg)](https://agentmods.dev/skills/0xsoftboi/suwappubot/design-iterate)
Your own site
<a href="https://agentmods.dev/skills/0xsoftboi/suwappubot/design-iterate"><img src="https://agentmods.dev/badge/skills/0xsoftboi/suwappubot/design-iterate/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for design-iterate

Your own site · 80×15
<a href="https://agentmods.dev/skills/0xsoftboi/suwappubot/design-iterate"><img src="https://agentmods.dev/badge/skills/0xsoftboi/suwappubot/design-iterate.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 0 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,218 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00000 $0.02218
Opus 5 $0.00000 $0.01109
Sonnet 5 $0.00000 $0.00444
Haiku 4.5 $0.00000 $0.00222

Measured 11d ago against content hash 822a83cb3f25, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade A, and why

design-iterate scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 11d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.claude/skills/design-iterate/SKILL.md · 140 lines

How it starts

The opening of the file, as written. The whole thing — 140 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Design-iterate: test -> critique -> improve -> verify

One bounded iteration of showcase quality improvement. Each run must produce either (a) a pushed commit that fixes concrete findings, or (b) a clean-pass report saying the rubric found nothing above the fix threshold. Never end a run with unverified edits.

Ground rules

  • Branch: work on the current branch (never main directly). All copy claims must trace to docs/design/proof-material.md - no invented numbers, no unverifiable claims.
  • Patterns from reference sites are adapted, never copied (no external assets, copy, or brand).
  • Budget: fix at MOST the top 3 findings per iteration. Small verified steps beat big unverified leaps. If a finding needs >30 min of work, file it in the backlog instead.
  • The loop STOPS improving when a full critique pass yields zero findings at severity "fix" for 2 consecutive iterations - then report "converged" and recommend ending the loop.

The iteration

1. Render + capture (evidence first)

cd showcase && bun run build   # timeout 600000; must pass before anything else
bun run start -- -p 3459 &     # then screenshot with the Playwright pattern below

Playwright (chromium at /opt/pw-browsers, import playwright-core from the global npm root): capture viewport frames every ~850px at 1440x900 AND a full-page + 3 targeted frames at 390x844 with reducedMotion: 'reduce'. Pre-scroll the whole page first to fire reveal observers. (See docs/design/visual-study.md header for the known-good script shape; mobile-emulation screenshot mode gives false void artifacts - use plain viewport.)

2. Critique (three lenses, all mandatory)

Lens A - mechanical taste checks (grep-able, from the taste-skill pre-flight):

  • Em/en-dashes in any user-visible string (JSX text, i18n json, aria-labels): ZERO allowed. grep -n "—\|–" src/app/page.tsx src/components/*.tsx messages/*.json (ignore code comments).
  • Eyebrow count: uppercase-tracking labels above headlines <= ceil(sectionCount/3), and never on consecutive sections.
  • Duplicate CTA intent: one label per intent across nav/hero/sections/footer.
  • CTA wrap at desktop; button/text contrast >= 4.5:1; focus rings visible on clipped buttons.
  • No scroll cues, version labels, section-number eyebrows, decorative status dots, photo-credit-style captions, locale strips.
  • Section layout families: >= 4 distinct families; no family repeated adjacent.

Read the full file on GitHub · 140 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 11d ago First seen · 140 lines · 0 tokens per session scan A 822a83cb3f25

Subscribe to this mod's changes

design-iterate is a skill published in the GitHub repository 0xSoftBoi/suwappubot (3 stars, last pushed yesterday), licensed Apache-2.0. It costs nothing until one of its globs matches a file; then it loads 2,218 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories