agentsclimarketplace
Sign in

Pesty frontend

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

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.From its SKILL.md

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.

SKILL.md

5.0 KB, ~1.3k tokens by cl100k_base, 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:

  1. Start every new file by copying the :root block from references/design-tokens.md into <style>. Never hardcode color or spacing values.
  2. 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">
  3. Pill scale — 11px for status badges / delta / labels; 28px for KPI data values. Never swap these.
  4. 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.
  5. 3+ actions in a row — use text pill links, not icon-only buttons.
  6. CSS-only animations — no JS animation libraries unless the user asks explicitly.
  7. Single-file HTML — unless the project already has a multi-file structure.
  8. Spacing — 8pt grid only: 4/8/12/16/24/32/48/64/80px. No arbitrary values.
  9. Transitions — name specific properties, never transition: all. Standard: 150ms ease.
  10. 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

NeverInstead
Inter, Roboto, system-ui as body fontMontserrat
Light background on internal dashboardDark navy #001c28
Purple gradientsvar(--accent) red or var(--blue) accents
Inline SVG logo<img src="logo.png">
Hero-scale (64px) text for status pills11px pill text, 28px for KPI values only
translateY hover liftsBackground/border color change only
transition: allName specific properties
Pure black shadows rgba(0,0,0,...)rgba(0, 35, 48, ...) navy-tinted
Hardcoded hex colors in stylesvar(--token-name)
Font sizes below 11pxUse --text-secondary or lighter weight instead
Bottom-border section separatorsborder-left: 3px solid var(--accent)
Mixed border radii8px cards, 9999px pills, 4px bars
text-align: center on topbar flexExplicit align-items: center on flex containers

Maintained by Pesty Marketing · Browse the full skill catalog.

What ships with it: 2 files

10.1 KB alongside SKILL.md

references/

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.