langfuse/customer-story-setup
>- Converts draft customer-story Markdown into Langfuse website MDX (Fumadocs), collects missing metadata and assets, wires meta.json and authors. Use when adding or converting a customer case study, user story, or /users page, or when the user mentions customer story setup, cresta/canva-style posts, or CustomerStoryCTA/BlogHeader for customers.
npx skills add https://github.com/langfuse/langfuse-docs --skill customer-story-setup> Single source of truth: maintain this skill under
> .agents/skills/customer-story-setup/ only. Claude and Cursor load
> projected copies under .claude/skills/customer-story-setup and
> .cursor/skills/customer-story-setup.
Turns a plain Markdown draft into content/customers/<slug>.mdx in the
same pattern as content/customers/canva.mdx and cresta.mdx.
Do not guess. If any item below is missing from the user's draft or
message, ask explicitly and wait for answers (or confirm defaults).
| Topic | Ask |
| --------------------- | ----------------------------------------------------------------------------------------- |
| Company name | Legal/marketing name for copy and quotes |
| Company website | Public URL for the Company link in About <Company> |
| Slug | Filename: <slug>.mdx (lowercase, hyphens), e.g. cresta -> cresta.mdx |
| Page title | H1 string for BlogHeader + YAML title (often "How <Company> ... with Langfuse") |
| Short description | YAML description + BlogHeader description (SEO/social; 1-2 sentences) |
| Publish date | YAML date + BlogHeader date (e.g. March 26, 2026) |
| OG image | Optional ogImage: path; if unset, leave empty like other stories |
authors={["..."]})| Topic | Ask |
| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Byline author(s) | Who should appear under the title (keys from data/authors.json) |
| External / guest speaker | If not in authors.json: collect name, title, optional socials, and headshot path under public/images/people/ or public/images/customers/<slug>/, then add an entry to data/authors.json (see existing entries). Every authors key must resolve in authors.json. |
| Topic | Ask |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| Logos | Paths for customerLogo and customerLogoDark (light + dark mode), usually under public/images/customers/<slug>/ |
| Pull quote | customerQuote (short, for grid card) |
| Quote attribution | quoteAuthor, quoteRole, quoteCompany |
| Speaker headshot (optional) | quoteAuthorImage for card/SEO if you use the same as Canva |
| Show on /users | showInCustomerIndex: true \| false |
Produce a numbered checklist for the user (and keep it in the PR
description if useful):
public/images/customers/<slug>/<Frame fullWidth> around markdown images, e.g. !Alt per site conventionssips -g pixelWidth -g pixelHeight <file> to get dimensions):<div className="flex justify-center"><Frame fullWidth className="w-1/2">...</Frame></div><div className="flex justify-center"><Frame fullWidth className="w-2/3">...</Frame></div><Frame fullWidth className="w-full">...</Frame> (no centering wrapper needed)If the draft says "screenshot here" without files, list placeholders in
MDX with consistent paths so the user can drop files in later.
Ask whether to add sparse internal links. Default policy: only link
major product concepts (match what we used on Cresta):
Do not pepper every noun with links. Use paths from **llms-docs.txt /
available-internal-links** rule so links resolve.
title, date, description, ogImage,tag: customer-story, author (display string if needed), customerLogo,
customerLogoDark, optional quote fields, showInCustomerIndex.
BlogHeader, CustomerQuote (if quote), ImpactChart (ifimpact section), CustomerStoryCTA; use Frame for images (global in MDX).
BlogHeader: title, description, customerLogo, authors, date;optional image for hero.
BlogHeader). Body uses## and ###; do not skip levels.
<CustomerQuote quote="..." name="..." role="..." company="..." />role / company with frontmatter so the byline reads "Name, Role at Company"rolew-1/2 centeredw-2/3 centeredw-full<ImpactChart items={[{ area, impact }, ...]} /> (optional)then <CustomerStoryCTA />.
Reference implementations: content/customers/canva.mdx,
content/customers/cresta.mdx.
content/customers/meta.json"<slug>" to the pages array (with "index" first).sorted by sortCustomerStoriesByMetaOrder in
lib/sortCustomerStoriesByMeta.ts, which reads this list. Place the slug
where the card should appear (e.g. last in the list = bottom-right in a
2-column grid).
data/authors.json (key must match BlogHeaderauthors).
public/images/customers/<slug>/.authors keys exist in data/authors.jsonmeta.json includes slug in desired order-) - the linter will do this anyway; better to do it upfrontAGENTS.md / documentation-pages.mdc: one H1 via BlogHeader, American English, accessible alt text---
title: "..."
date: ...
description: ...
ogImage:
tag: customer-story
author: ...
customerLogo: "/images/customers/<slug>/...-light.png"
customerLogoDark: "/images/customers/<slug>/...-dark.png"
customerQuote: "..."
quoteAuthor: "..."
quoteRole: "..."
quoteCompany: "..."
showInCustomerIndex: true
---
Take langfuse/customer-story-setup from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.