Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+20 more

    Agensi Listing Card

    2

    Turns any agensi.io skill listing (URL or SKILL.md) into a 1920×1080 explanatory card in Agensi branding: skill name, one-line explainer, numbered how-it-works steps, Agensi footer. Exports a PNG for the listing page.

    Free

    2 installs5.0 (1 review)
    Agensi Listing Card

    Agensi Listing Card

    Example session with this skill installed

    Generate a listing card for my local SKILL.md for a tool called "repo-audit" that costs $12.00.

    • Read your context and instructions
    • Compiled the agensi listing card
    • Generated the UI component

    I have analyzed your repo-audit SKILL.md and generated the technical breakdown. The layout uses Agensi brand tokens and has been rendered to a 1920x1080 PNG.

    Listing Card Asset

    <!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;700;800&family=JetBrains+Mono:wght@600&display=swap" rel="stylesheet">
  <style>
    :root {
      --indigo: #476CED; --ink: #111628; --muted: #6D727F;
      --hairline: #E5E7EB; --tint: #F0F3FE;
    }
    body { 
      width: 1920px; height: 1080px; margin: 0; background: white;
      padding: 84px 96px 72px; font-family: 'Inter', sans-serif;
      display: flex; flex-direction: column; box-sizing: border-box;
    }
    .eyebrow {
      background: var(--tint); color: var(--indigo); font-size: 20px;
      font-weight: 800; letter-spacing: 2px; padding: 8px 16px;
      width: fit-content; text-transform: uppercase; margin-bottom: 24px;
    }
    h1 { 
      font-size: 112px; color: var(--ink); margin: 0; font-weight: 800;
      letter-spacing: -4.5px; line-height: 1; text-transform: lowercase;
    }
    .explainer {
      font-size: 32px; color: var(--muted); font-weight: 500;
      max-width: 1300px; margin: 36px 0 64px;
    }
    .blue { color: var(--indigo); font-weight: 600; }
    .steps-grid {
      display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px;
      row-gap: 36px; border-top: 1.5px solid var(--hairline); padding-top: 48px;
    }
    .step { display: flex; align-items: flex-start; gap: 24px; }
    .number {
      min-width: 56px; height: 56px; border: 1.5px solid var(--hairline);
      border-radius: 50%; display: flex; align-items: center;
      justify-content: center; color: var(--indigo); font-weight: 700; font-size: 24px;
    }
    .step-content h3 { font-size: 27px; margin: 0 0 8px; color: var(--ink); }
    .step-content p { font-size: 20px; margin: 0; color: var(--muted); line-height: 1.5; }
    .footer {
      margin-top: auto; display: flex; justify-content: space-between;
      align-items: center; border-top: 1.5px solid var(--hairline); padding-top: 32px;
    }
    .path { font-family: 'JetBrains Mono'; color: var(--muted); font-size: 19px; }
    .price {
      background: var(--tint); color: var(--indigo); padding: 6px 14px;
      font-weight: 800; font-size: 17px; font-family: 'JetBrains Mono';
    }
  </style>
</head>
<body>
  <div class="eyebrow">How this skill works</div>
  <h1>repo-audit</h1>
  <p class="explainer">Analyzes repository structure to <span class="blue">identify security vulnerabilities and dependency risks</span> across private codebases.</p>
  
  <div class="steps-grid">
    <div class="step">
      <div class="number">1</div>
      <div class="step-content">
        <h3>Scans dependencies</h3>
        <p>Reads package manifests to build a complete tree of third-party libraries.</p>
      </div>
    </div>
    <div class="step">
      <div class="number">2</div>
      <div class="step-content">
        <h3>Checks CVE databases</h3>
        <p>Cross-references identified versions against known vulnerability datasets and patches.</p>
      </div>
    </div>
    <div class="step">
      <div class="number">3</div>
      <div class="step-content">
        <h3>Evaluates license types</h3>
        <p>Flags non-compliant or restrictive open-source licenses based on user configuration.</p>
      </div>
    </div>
    <div class="step">
      <div class="number">4</div>
      <div class="step-content">
        <h3>Compiles audit report</h3>
        <p>Writes a detailed summary of critical risks and required upgrade paths.</p>
      </div>
    </div>
  </div>

  <div class="footer">
    <img src="https://www.agensi.io/agensi-logo-256.webp" height="48">
    <div>
      <span class="path">repo-audit/SKILL.md</span>
      <span class="price">$12.00</span>
    </div>
  </div>
</body>
</html>

    Next steps

    1. Run chrome --headless --screenshot=repo-audit-card.png --window-size=1920,1080 card.html to generate the image.
    2. Upload the PNG to your Agensi listing gallery.
    3. Verify that the font weights rendered correctly in your local environment.

    agensi-listing-card.tsx

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Creating visual assets for Agensi listings is slow and prone to design inconsistency. This skill automates the production of high-fidelity 1920x1080 explanatory cards that follow the official Agensi brand guidelines. It parses your SKILL.md or a live URL to extract core logic, then generates a clean, step-by-step visual of your agent's pipeline.

    What it does

    • Extracts metadata from local Markdown files or Agensi listing URLs to identify core mechanics.
    • Drafts technical copy following strict constraints: sentence case, factual verbs, and specific character limits.
    • Populates HTML templates using Agensi brand tokens, Inter typography, and JetBrains Mono accents.
    • Generates PNG exports via headless browser rendering at a fixed 16:9 ratio for listing galleries.
    • Validates brand compliance by checking for specific hex codes, layout spacing, and proper logo placement.

    How it works

    1. Provide a local path to your SKILL.md or a live Agensi listing URL.
    2. The skill analyzes the sequence of operations and prices to draft a 4-5 step technical breakdown.
    3. It injects the processed copy and brand assets into a pre-configured HTML/CSS layout.
    4. It executes a headless browser command to capture a high-resolution screenshot of the card.

    Frameworks & tools

    Uses HTML5/CSS3 for layout, Google Fonts for Inter and JetBrains Mono, and headless Chrome or Playwright for image rendering.

    Why this beats prompting it yourself

    Manual design leads to brand drift and layout errors. This skill enforces Agensi's specific spacing, hex codes, and typography rules automatically, ensuring your listing looks professional and native to the platform.

    Use cases

    • Generating "How it works" gallery images for new Agensi marketplace listings.
    • Standardizing visual documentation for a suite of internal AI agents.
    • Refreshing old listing visuals to match the latest Agensi branding requirements.

    Known limitations

    Standard logo loading requires an internet connection unless a local asset is provided. The output is strictly fixed to a 16:9 aspect ratio.

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    5.0
    1 review
    5
    1
    4
    0
    3
    0
    2
    0
    1
    0

    2 people have installed this skill.

    Trust & safety

    Security scanned

    Verified clean 8 days ago

    • Free to download with an account

    Listed8 days ago

    What's inside

    Frequently Asked Questions