PenguinHarness is a local-first platform in which multiple AI agents create, evaluate, optimize, and deploy agent applications. It is for people building AI software who want agents to generate applications and improve their own behavior through skills.
Borrowing it
Nothing to install: this file belongs to Prism-Shadow/penguin-harness. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/Prism-Shadow/penguin-harness/main/.agents/skills/penguin-harness-frontend/SKILL.mdgit clone --depth 1 https://github.com/Prism-Shadow/penguin-harnessWrote 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.
[](https://agentmods.dev/skills/prism-shadow/penguin-harness/penguin-harness-frontend)<a href="https://agentmods.dev/skills/prism-shadow/penguin-harness/penguin-harness-frontend"><img src="https://agentmods.dev/badge/skills/prism-shadow/penguin-harness/penguin-harness-frontend/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.
<a href="https://agentmods.dev/skills/prism-shadow/penguin-harness/penguin-harness-frontend"><img src="https://agentmods.dev/badge/skills/prism-shadow/penguin-harness/penguin-harness-frontend.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 1 finding, up to medium
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- medium Rogue Agent · line 111 Skill establishes unauthorized persistence across sessions via cron jobs, startup scripts, or state files. Session persistence allows an attacker to maintain access beyond the current interaction.Fix: Remove any persistence mechanisms (cron jobs, startup scripts, state files). Skills should not maintain state across sessions without explicit user consent.
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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00104 | $0.03002 |
| Opus 5 | $0.00052 | $0.01501 |
| Sonnet 5 | $0.00021 | $0.00600 |
| Haiku 4.5 | $0.00010 | $0.00300 |
Grade A, and why
penguin-harness-frontend 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.
How it starts
The opening of the file, as written. The whole thing — 189 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Web App frontend conventions
packages/web is React 19 + Vite + Tailwind CSS 4, with no cn/clsx, no tailwind-merge, and no
variants library. Classes are composed with template literals, and a component's variants are a
Record<Key, string> next to it (button.tsx's variantClass, input.tsx's sizeClass). Match
that shape; do not introduce a styling dependency.
This file records the decisions that already exist so they are not re-litigated per PR. Read
penguin-harness-dev for the repo-wide contract (verification chain, changelog, two-repo layout).
Status colour: pick a tone, never a palette class
src/lib/tone.ts is the only place a status colour is spelled. Five tones, chosen by meaning:
| tone | meaning | when |
|---|---|---|
busy |
executing right now | spinners, live titles, running dots |
attention |
unfinished — waiting on time, a queue, or the user | hourglass glyphs, pending-approval marks, near-limit rings, warning strips |
success |
finished well, connected, healthy | completed badges, connected servers |
danger |
failed, destructive, over a limit | errors, delete affordances |
muted |
settled; the mark should recede | a done row's glyph |
Four maps, by the shape of the thing being coloured: toneInk (a glyph or a line of status text),
toneSurface (a tinted pill with its own text — badges), toneDot (the 6px state dots),
toneStrip (a bordered notice that owns a row).
Rules:
- Two states may share a tone.
busyandsuccessresolve to the same emerald on purpose. A tone says what a mark means, not which state it belongs to. Where two states share a tone, separate them by shape and motion — that is what the session list's turning hourglass and squeezing compress mark do, and it is legible to a reader who cannot separate hues. - Never make colour the only carrier. Every status mark also names its state in an accessible name or in adjacent text.
- Contrast is measured, not assumed. The ratios in
tone.tsare WCAG 2.x against the four surfaces marks actually sit on — white and gray-50 in light, and the values this app overrides instyles.cssfor dark (gray-950 is#000000, gray-900 is#0d0d0d, not Tailwind's stock values). Recompute if you change a tone; a graphical mark needs 3:1, andmutedis the one tone allowed below it because its meaning is always already in text. - What is out of scope, and must not be folded in: categorical palettes where colour is an
identity rather than a judgement (
category-colors.ts,token-colors.ts, the timeline phase bars, per-skill avatar tints); the terminal's chrome, which resolves light/dark in JS because a subtree cannot opt out of thedark:variant (terminal-appearance.tscarries its ownsuccess/attention/danger); secondary body text, which is typography; a background-only wash on a card section; and hover-only variants, since a tone token is the resting ink.
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.
- 11d ago First seen · 189 lines · 104 tokens per session scan A 5fc0f3285b68
penguin-harness-frontend is a skill published in the GitHub repository Prism-Shadow/penguin-harness (2,075 stars, last pushed today), licensed Apache-2.0. It adds 104 tokens to every session and 3,002 once invoked, about $0.0005 per session on Opus 5. 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.
Other skills, from other repositories
ui-craft
Design, build, redesign, or modify browser-visible web interfaces with product-quality composition, visual systems, interaction states, responsive behavior, accessibility, and browser visual QA. Use for HTML, CSS, JavaScript, React, Vue, or Svelte pages and components, landing pages, dashboards, admin tools, settings…
shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json…
tailwind-design-system
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
accessibility-a11y
Semantic HTML, keyboard navigation, focus states, ARIA labels, skip links, and WCAG contrast requirements. Use when ensuring accessibility compliance, implementing keyboard navigation, or adding screen reader support.
tailwind-shadcn
Tailwind CSS utility patterns with shadcn/ui component usage, theming via CSS variables, and responsive design. Use when styling components, installing shadcn components, implementing dark mode, or creating consistent design systems.
anti-slop-frontend
A mechanical, countable anti-slop checklist for AI-generated frontend. Catches the specific signatures an undirected model defaults to: AI-purple glows, Inter-everywhere, em-dashes, div-based fake screenshots, eyebrow-on-every-section, beige+brass "premium" palettes, generic Jane Doe / Acme data. Advisory layer that…