Pesty frontend

Skill Pesty-Marketing/agent-skills/pesty-frontend

Cross-agent skills (Agent Skills spec) for the Pesty team — install via npx skills add Pesty-Marketing/agent-skills

Install

npx -y skills add Pesty-Marketing/agent-skills --skill pesty-frontend

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

DEPRECATED — superseded by the pesty-design skill, which is now the default for all new Pesty frontend work. Use this skill ONLY when maintaining an EXISTING dark-navy internal dashboard or tool that already uses these tokens (Epilogue + Montserrat, #001c28 background). For anything new, use pesty-design instead.

SKILL.md

5.0 KB, as published. Nobody here has run it

⚠️ Deprecated (2026-07-17). pesty-design is now the default Pesty design system for all new frontend work. Use this skill only when maintaining an existing dark-navy internal tool or dashboard that already uses these tokens. For anything new, use pesty-design.

Pesty Frontend Skill

Mode Detection

Determine mode before writing any code:

Dashboard / internal tool — dark navy default, full token set, Epilogue headings, accessible at pestymarketing.com/internal/
Client report — light theme override, Arial for print-compat, max-width 860px, accessible at pestymarketing.com/clients/
Single-page tool / one-pager — dark navy default; confirm if ambiguous

Mandatory Rules (ALL modes)

Read references/design-tokens.md first. Then:

Start every new file by copying the :root block from references/design-tokens.md into <style>. Never hardcode color or spacing values.

Google Fonts — always include this exact link in <head>:

<link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@600;700;800&family=Montserrat:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

Pill scale — 11px for status badges / delta / labels; 28px for KPI data values. Never swap these.

Logo — always <img src="logo.png"> inside a flex anchor:

<a style="display:flex;align-items:center"><img src="logo.png" style="display:block;height:28px;width:auto"></a>

Never inline SVG. Never use a color logo variant.

3+ actions in a row — use text pill links, not icon-only buttons.
CSS-only animations — no JS animation libraries unless the user asks explicitly.
Single-file HTML — unless the project already has a multi-file structure.
Spacing — 8pt grid only: 4/8/12/16/24/32/48/64/80px. No arbitrary values.
Transitions — name specific properties, never transition: all. Standard: 150ms ease.
Shadows — navy-tinted base: rgba(0, 35, 48, ...). Never pure black rgba(0,0,0,...).

Dashboard / Internal Tool Mode

Standard rules apply. Additionally:

One-pager delta: a single-page tool / one-pager follows this Dashboard Mode section as its base (dark navy, same token set, same fonts) — the only difference is scope: one file, one view, no topbar navigation between sections. If ambiguous whether a request is a full dashboard or a one-pager, confirm with the user before building.

Background: var(--bg) (#001c28 dark navy) — never light background for internal tools
Body font: Montserrat 13px, --text color, -webkit-font-smoothing: antialiased
Page titles: Epilogue 800, --white color, letter-spacing: -0.5px
Section headers: Montserrat 13px 600, --text-secondary, uppercase, letter-spacing: 0.5px, red left-border accent (border-left: 3px solid var(--accent))
Container: max-width: 960px standard; up to 1200px for data-dense dashboards
Topbar: flex, align-items: center, justify-content: space-between, border-bottom: 1px solid var(--border-subtle)

Read references/patterns.md for complete topbar, card, table, and pill boilerplate.

Client Report Mode

Use light theme token override from references/design-tokens.md
Font: Arial (no Google Fonts load — print/PDF safe)
Max-width: 860px, white surface cards, standard semantic colors for status
Logos: base64-embedded in <img src="data:image/png;base64,..."> for full portability
No CSS animations
Self-contained: no external dependencies beyond inline CSS

Anti-Patterns — Never Do

Never	Instead
Inter, Roboto, system-ui as body font	Montserrat
Light background on internal dashboard	Dark navy `#001c28`
Purple gradients	`var(--accent)` red or `var(--blue)` accents
Inline SVG logo	`<img src="logo.png">`
Hero-scale (64px) text for status pills	11px pill text, 28px for KPI values only
`translateY` hover lifts	Background/border color change only
`transition: all`	Name specific properties
Pure black shadows `rgba(0,0,0,...)`	`rgba(0, 35, 48, ...)` navy-tinted
Hardcoded hex colors in styles	`var(--token-name)`
Font sizes below 11px	Use `--text-secondary` or lighter weight instead
Bottom-border section separators	`border-left: 3px solid var(--accent)`
Mixed border radii	8px cards, 9999px pills, 4px bars
`text-align: center` on topbar flex	Explicit `align-items: center` on flex containers

Maintained by Pesty Marketing · Browse the full skill catalog.