Triumphoid Claude Skill For Design: the Field Guide

What Each Skill Enforces and How to Run Them Together

This isn’t the origin story. That’s already written up over at elizabethsramek.com. This is the manual: exactly what each Triumphoid skill enforces, whether you should run them on the same project, and how to get a usable result on the first try instead of the fifth.

Triumphoid Anti-Slop Frontend, in specifics

This skill doesn’t hand you a look. It hands you a process that runs before any code exists, and it’s the one you want active on every frontend project regardless of aesthetic.

• The design read. A one-line statement of page kind, audience, and vibe, inferred from the brief before anything gets generated.
• Three dials. Design variance, motion intensity, and visual density, each set from 1 to 10 based on the brief, gating every layout and animation decision that follows.
• An honesty rule about design systems. If the brief reads as enterprise, public-sector, or a specific platform, use the real official system for it instead of hand-rolling a lookalike.
• A long, specific catalog of banned defaults, covering typography, color, layout, motion, and copy. A few of the more commonly violated ones: no more than one “eyebrow” label per three sections, no two CTAs on the same page carrying the same intent under different labels, no invented statistics, and zero tolerance for the em dash anywhere on the page.
• A mandatory pre-flight checklist covering contrast, color and shape consistency, hero composition limits, and whether every animation on the page can be justified in one sentence. Nothing ships until it’s honestly checked off.

Triumphoid Industrial Frontend, in specifics

Where Anti-Slop is a process for any brief, Industrial is a committed visual identity for one specific register: raw, mechanical, engineered. It offers four archetypes, and the hard rule is to pick exactly one per project and hold the line on it.

Archetype	Substrate	Accent	Best fit
Swiss Industrial Print	Matte off-white paper	Hazard red	Editorial and print-derived portfolios
Tactical Telemetry	Near-black CRT	Hazard red, optional terminal green	Dashboards, monitoring, live data
Machine-Shop Signage	Satin steel grey	Safety yellow	Hardware and product brands
Blueprint Drafting	Cyanotype blue	Safety orange	Architecture and engineering portfolios

Typography runs on three tiers no matter which archetype is chosen: an extreme-scale black-weight grotesque for macro hierarchy, small tracked-out monospace for every piece of metadata, and a rarely-used, deliberately degraded serif for texture. Layout is grid-anchored with square corners only, borders doing the work that shadows and rounded cards do elsewhere. Motion is scored, not decorated: one pinned scroll-choreography sequence per page, hovers timed to 120 to 250 milliseconds, larger state changes to 300 to 600, and nothing that bounces unless it’s meant to feel genuinely elastic.

Do they work together?

Yes, and the order matters.

1. Start with Industrial to lock the archetype and the visual system. This decision has to happen first and has to stay fixed for the rest of the build.
2. Let Anti-Slop’s banned-defaults list and pre-flight checklist run underneath it the whole time. Industrial governs what the page looks like; Anti-Slop is still the one catching duplicate CTAs, hero overflow, missing reduced-motion handling, and copy that reads like it was never edited by a person.
3. If the brief turns out not to want the industrial register at all, drop Industrial and run Anti-Slop on its own, using its dial system to find whatever visual language actually fits instead.

In short: Industrial tells the model what to build, Anti-Slop tells it what never to ship. They’re not competing systems, one is a specific case sitting inside the other’s broader discipline.

Installing both

git clone https://github.com/loreleiweb/triumphoid-anti-slop-frontend.git
cp -r triumphoid-anti-slop-frontend ~/.claude/skills/

git clone https://github.com/loreleiweb/triumphoid-industrial-frontend.git
cp -r triumphoid-industrial-frontend ~/.claude/skills/

Both work the same way whether they’re installed globally in ~/.claude/skills/ or copied into a single project’s .claude/skills/ folder if you only want them active there.

Getting the best results out of them

• Give the brief real detail: page kind, audience, and any reference sites, before asking for output. The design read is only as good as what it has to infer from.
• Once an archetype is chosen, don’t ask for “a little bit of both.” Mixing substrates is the one thing that reliably breaks the illusion that the page is one coherent object.
• Let the pre-flight checklist actually run before accepting a page as finished, rather than eyeballing it and moving on.
• If a section still feels generic after all of this, the fix is almost always to cut something rather than add something. Both skills are built around restraint, not a longer feature list.

Full documentation, all reference files, and the complete rule sets live in each repo:

Both skills are free, open, and documented on GitHub:

The general discipline for any brief

The Swiss-manual/tactical visual system

Drop either one into your Claude Code skills folder and stop re-explaining your taste from scratch every time you open a new project.

All three preview mockups are published as Artifacts and ready to view:

Tactical Telemetry — Triumphoid Industrial Frontend archetype: CRT dark, phosphor white, scanlines, ASCII-bracket data panel.

Northfield Studio — Triumphoid Anti-Slop Frontend: an asymmetric architecture-studio hero (cold-luxury silver-grey + cobalt, condensed display type, no rounded cards, no gradient) showing the process skill applied to a non-industrial brief.

Swiss Industrial Print — Triumphoid Industrial Frontend archetype: matte paper, carbon ink, hazard red, bleeding extreme-scale type.