> ## Documentation Index
> Fetch the complete documentation index at: https://www.opendirectory.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# graphic-case-study
> Generate a professionally designed case study PDF for B2B SaaS sales and marketing. Structured around the challenge → solution → results → testimonial arc. O...
**Category:** Visual & Media · **Version:** `1.0.0` · **Author:** `OpenDirectory` · **Compatibility:** All targets (claude, codex, opencode, gemini, anti-gravity, openclaw, hermes)
Generate a professionally designed case study PDF for B2B SaaS sales and marketing. Structured around the challenge → solution → results → testimonial arc. Outputs a browser-ready HTML file + print-ready PDF. Supports 7 page section layouts and 9 business style presets.
## Install
```bash theme={null}
npx "@opendirectory.dev/skills" install graphic-case-study --target claude
```
```bash theme={null}
npx skills add Varnan-Tech/opendirectory --skill graphic-case-study
```
```bash theme={null}
/plugin marketplace add Varnan-Tech/opendirectory
/plugin install opendirectory-gtm-skills@opendirectory-marketplace
```
1. Copy `https://github.com/Varnan-Tech/opendirectory/tree/main/skills/graphic-case-study` into [download-directory.github.io](https://download-directory.github.io/) to download the ZIP.
2. Open **Claude Desktop** -> **Customize** -> **Skills** -> **+** -> **Upload a skill** and drop the folder containing `SKILL.md`.
[**Install graphic-case-study in Manus AI**](https://manus.im/import-skills?githubUrl=https%3A%2F%2Fgithub.com%2FVarnan-Tech%2Fopendirectory%2Ftree%2Fmain%2Fskills%2Fgraphic-case-study\&utm_source=opendirectory)
## What it does
* Asks the questions that determine how the case study should be structured
* Interviews you (or processes your notes) to extract customer story details
* Structures the narrative: customer context → challenge → solution → results → testimonial
* Generates a single self-contained HTML file -- opens in any browser, no build tools
* Splits into per-page HTML files for individual sharing or editing
* Exports a print-ready PDF via Playwright (A4 portrait, 1200×1697px)
* Supports 1-pager summary card, standard 2-pager, and detailed 4-pager formats
## Example
> "Create a 2-page case study for Acme Corp. They were spending 20 hrs/week on manual reporting. We automated it. They saved 80% of that time and reduced errors by 95%. Use midnight-editorial style."
Output: 2-page PDF with cover, challenge/solution spread, results stat page, and closing CTA.
***
## Supported Styles
| Style | Best for |
| - | - |
| clean-slate | Enterprise B2B, sales teams, any audience that expects professionalism |
| midnight-editorial | Tech/AI companies, premium B2B, investor-grade materials |
| matt-gray | Board materials, internal reviews, professional mixed audiences |
| product-minimal | Product companies, design-forward B2B, design-savvy buyers |
| mint-pixel-corporate | SaaS sales, tech startups, growth-stage B2B |
| warm-earth | Agencies, consultancies, service businesses, health/education tech |
| brutalist | Standout sales materials, design-forward agencies, bold brands |
| magazine-red | Marketing agencies, brand-forward companies, editorial-style stories |
| soft-cloud | Onboarding materials, customer education, approachable SaaS |
***
## Supported Page Layouts
| Layout | Purpose |
| - | - |
| cover | Opening page -- customer name, headline result, logos |
| overview | At-a-glance: company profile, industry, use case |
| challenge | The problem -- context paragraph + pain points |
| solution | How your product solved it -- feature callouts |
| results | Key metrics in large stat format + supporting narrative |
| testimonial | Full-width pull quote with attribution |
| closing-cta | Vendor logo + contact info + next step CTA |
***
## Output
| File | What it is |
| - | - |
| `case-study/[slug]/index.html` | Full case study, browser-ready |
| `case-study/[slug]/page-01.html` ... | Per-page HTML files for individual sharing |
| `case-study/[slug].pdf` | Print-ready PDF (A4 portrait) |
Standard dimensions: 1200×1697px (A4 portrait). Landscape 4:3 (1200×900) available on request.
***
## Parameters
| Param | Required | Notes |
| - | - | - |
| customer\_name | Yes | Company name (or "Anonymous Fortune 500 Retailer" to anonymize) |
| challenge | Yes | Core problem in 2-5 sentences |
| solution | Yes | What your product did |
| results | Yes | Measurable outcomes -- ideally 3 stats |
| customer\_context | No | Industry, size, location (for overview page) |
| testimonial | No | Customer quote + name + title |
| page\_count | No | 1 / 2 / 4 (default: 2) |
| customer\_logo | No | Logo URL for cover page |
| your\_company\_name | No | Vendor name + logo URL for CTA page |
| style | No | One of 9 named presets or "show me options" (default: clean-slate) |
| orientation | No | A4 portrait (default) or landscape 4:3 |
| anonymize | No | Keep name or replace with industry descriptor |
| slug | No | Filename slug (derived from customer name if omitted) |
***
## Dependencies
This skill requires the `frontend-slides` skill files at:
`/Users/ksd/Desktop/Varnan_skills/frontend-slides/`
Specifically:
* `viewport-base.css` -- responsive page foundation (included verbatim in generated HTML)
* `scripts/export-pdf.sh` -- PDF export via Playwright (Node.js required, auto-installs; use `--portrait` flag for A4)
## No API keys required
Pure AI skill. No external services, no scraping, no dependencies beyond the above.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.