graphic-case-study

Name: graphic-case-study
Author: Varnan-Tech

21installs59forks

How to install graphic-case-study?

varnan-tech/opendirectory/graphic-case-study

$npx -y skills add Varnan-Tech/opendirectory --skill graphic-case-study

Installs into the current project.

Summary

Generates a professionally designed case study PDF for B2B SaaS sales and marketing. Supports 7 page layouts, 9 style presets, 1-4 page output. Trigger when user says "create a case study", "write a customer story", "make a case study PDF", "design a success story", "turn this cu

Files · 1

View on GitHub

SKILL.md

1	# Graphic Case Study
2
3	Generate a professionally designed B2B case study PDF from customer story details. Output is a single self-contained HTML file (opens in any browser) plus a print-ready PDF. Supports 7 page section layouts and 9 style presets.
4
5	---
6
7	Critical rules -- non-negotiable:
8
9	1. Every page MUST fit within the A4 canvas (1200×1697px). No content overflow.
10	2. ALL scalable font sizes use `clamp()`. Fixed px only for structural borders/lines.
11	3. Single self-contained HTML: all CSS inline. Zero external dependencies except font CDN link.
12	4. Never dump HTML in chat. Save to file, show summary only.
13	5. Results stat numbers MUST be visually dominant -- at least 3× body text size.
14	6. No generic AI slop: no Inter as display font, no purple gradient on white, no "Thank You" closing.
15
16	---
17
18	## Step 1: Brief Intake
19
20	Need four things to start. If all four present in the message: skip to Step 2.
21
22	If any missing, ask exactly:
23
24	> "To create your case study, I need four things:
25	> 1. Customer name -- company name (or a descriptor to anonymize: "Fortune 500 Retailer")
26	> 2. Challenge -- what problem did they have before using your product? (2-5 sentences)
27	> 3. Solution -- what did your product do to solve it? (features, approach)
28	> 4. Results -- measurable outcomes: ideally 3 stats (%, time saved, revenue impact, etc.)"
29
30	Wait for all four before continuing.
31
32	---
33
34	## Step 2: Complete Intake
35
36	Ask all questions in one message, grouped by category. User can skip any -- defaults apply.
37
38	> "A few questions before I start:
39	>
40	> Content
41	> 1. Customer context -- industry, company size, location? (optional, used for overview page)
42	> 2. Testimonial -- customer quote (40 words max) + speaker name + title? (or "I'll add later")
43	> 3. Page count -- 1-pager (summary card) / 2-pager (standard, default) / 4-pager (detailed)
44	> 4. Customer logo -- URL or "none"
45	>
46	> Design
47	> 5. Your company name -- vendor name for the CTA page (+ logo URL if available)
48	> 6. Style -- clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / "show me options"
49	> 7. Orientation -- A4 portrait (default, 1200×1697) / landscape 4:3 (1200×900)
50	>
51	> Output
52	> 8. Anonymize? -- Keep company name / replace with industry descriptor
53	> 9. Slug -- filename slug (e.g. "acme-corp-2025"); I'll derive from customer name if skipped"
54
55	Defaults if skipped:
56
57	\| Question \| Default \|
58	\|---\|---\|
59	\| Customer context \| none \|
60	\| Testimonial \| none \|
61	\| Page count \| 2 \|
62	\| Customer logo \| none \|
63	\| Your company name \| derived from context \|
64	\| Style \| clean-slate \|
65	\| Orientation \| A4 portrait \|
66	\| Anonymize \| keep name \|
67	\| Slug \| kebab-case of customer name \|
68
69	If style = "show me options":
70	Generate 3 single-page HTML previews (cover page only). Save to `.claude-design/previews/style-a.html`, `style-b.html`, `style-c.html`. Open each: `open .claude-design/previews/style-a.html` etc. Choose 3 style presets that match the case study context. Ask user to pick before Step 3.
71
72	---
73
74	## Step 2.5: Internal Page Architecture (not shown to user)
75
76	Derive internally before Step 3. Never ask the user.
77
78	Hero metric identification:
79	Scan results for the single most impressive number (largest %, biggest $, greatest multiplier). This metric gets accent-color treatment and maximum visual weight on the results page.
80
81	Page count -> structure template:
82
83	\| Count \| Page sequence \|
84	\|---\|---\|
85	\| 1-pager \| 1 page: [cover-compact] -- all content condensed into one page \|
86	\| 2-pager \| Page 1: [cover] + [challenge-solution] stacked · Page 2: [results] + [testimonial-cta] stacked \|
87	\| 4-pager \| Page 1: [cover] · Page 2: [overview] + [challenge] · Page 3: [solution] + [results] · Page 4: [testimonial] + [closing-cta] \|
88
89	Visual character derived from style choice:
90	- clean-slate → professional authority, generous whitespace, enterprise-safe
91	- midnight-editorial → premium dark, editorial weight, tech/AI companies
92	- matt-gray → trusted neutral, operational, board-safe
93	- warm-earth → approachable warmth, consulting/agency/services
94	- brutalist → bold standout, design-forward, attention-commanding
95	- If not specified: default to clean-slate for B2B SaaS, midnight-editorial for technical companies.
96
97	---
98
99	## Step 3: Page Structure
100
101	Read `references/page-library.md` before planning.
102
103	Plan the full page sequence. Assign section types from the 7 in `references/page-library.md` to each page section. Multiple sections can stack within one page.
104
105	Output

People who liked this also viewed

6 picks

Type

graphic-case-study

21installs59forks

View on GitHub

How to install graphic-case-study?

varnan-tech/opendirectory/graphic-case-study

$npx -y skills add Varnan-Tech/opendirectory --skill graphic-case-study

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Graphic Case Study
2
3	Generate a professionally designed B2B case study PDF from customer story details. Output is a single self-contained HTML file (opens in any browser) plus a print-ready PDF. Supports 7 page section layouts and 9 style presets.
4
5	---
6
7	Critical rules -- non-negotiable:
8
9	1. Every page MUST fit within the A4 canvas (1200×1697px). No content overflow.
10	2. ALL scalable font sizes use `clamp()`. Fixed px only for structural borders/lines.
11	3. Single self-contained HTML: all CSS inline. Zero external dependencies except font CDN link.
12	4. Never dump HTML in chat. Save to file, show summary only.
13	5. Results stat numbers MUST be visually dominant -- at least 3× body text size.
14	6. No generic AI slop: no Inter as display font, no purple gradient on white, no "Thank You" closing.
15
16	---
17
18	## Step 1: Brief Intake
19
20	Need four things to start. If all four present in the message: skip to Step 2.
21
22	If any missing, ask exactly:
23
24	> "To create your case study, I need four things:
25	> 1. Customer name -- company name (or a descriptor to anonymize: "Fortune 500 Retailer")
26	> 2. Challenge -- what problem did they have before using your product? (2-5 sentences)
27	> 3. Solution -- what did your product do to solve it? (features, approach)
28	> 4. Results -- measurable outcomes: ideally 3 stats (%, time saved, revenue impact, etc.)"
29
30	Wait for all four before continuing.
31
32	---
33
34	## Step 2: Complete Intake
35
36	Ask all questions in one message, grouped by category. User can skip any -- defaults apply.
37
38	> "A few questions before I start:
39	>
40	> Content
41	> 1. Customer context -- industry, company size, location? (optional, used for overview page)
42	> 2. Testimonial -- customer quote (40 words max) + speaker name + title? (or "I'll add later")
43	> 3. Page count -- 1-pager (summary card) / 2-pager (standard, default) / 4-pager (detailed)
44	> 4. Customer logo -- URL or "none"
45	>
46	> Design
47	> 5. Your company name -- vendor name for the CTA page (+ logo URL if available)
48	> 6. Style -- clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / "show me options"
49	> 7. Orientation -- A4 portrait (default, 1200×1697) / landscape 4:3 (1200×900)
50	>
51	> Output
52	> 8. Anonymize? -- Keep company name / replace with industry descriptor
53	> 9. Slug -- filename slug (e.g. "acme-corp-2025"); I'll derive from customer name if skipped"
54
55	Defaults if skipped:
56
57	\| Question \| Default \|
58	\|---\|---\|
59	\| Customer context \| none \|
60	\| Testimonial \| none \|
61	\| Page count \| 2 \|
62	\| Customer logo \| none \|
63	\| Your company name \| derived from context \|
64	\| Style \| clean-slate \|
65	\| Orientation \| A4 portrait \|
66	\| Anonymize \| keep name \|
67	\| Slug \| kebab-case of customer name \|
68
69	If style = "show me options":
70	Generate 3 single-page HTML previews (cover page only). Save to `.claude-design/previews/style-a.html`, `style-b.html`, `style-c.html`. Open each: `open .claude-design/previews/style-a.html` etc. Choose 3 style presets that match the case study context. Ask user to pick before Step 3.
71
72	---
73
74	## Step 2.5: Internal Page Architecture (not shown to user)
75
76	Derive internally before Step 3. Never ask the user.
77
78	Hero metric identification:
79	Scan results for the single most impressive number (largest %, biggest $, greatest multiplier). This metric gets accent-color treatment and maximum visual weight on the results page.
80
81	Page count -> structure template:
82
83	\| Count \| Page sequence \|
84	\|---\|---\|
85	\| 1-pager \| 1 page: [cover-compact] -- all content condensed into one page \|
86	\| 2-pager \| Page 1: [cover] + [challenge-solution] stacked · Page 2: [results] + [testimonial-cta] stacked \|
87	\| 4-pager \| Page 1: [cover] · Page 2: [overview] + [challenge] · Page 3: [solution] + [results] · Page 4: [testimonial] + [closing-cta] \|
88
89	Visual character derived from style choice:
90	- clean-slate → professional authority, generous whitespace, enterprise-safe
91	- midnight-editorial → premium dark, editorial weight, tech/AI companies
92	- matt-gray → trusted neutral, operational, board-safe
93	- warm-earth → approachable warmth, consulting/agency/services
94	- brutalist → bold standout, design-forward, attention-commanding
95	- If not specified: default to clean-slate for B2B SaaS, midnight-editorial for technical companies.
96
97	---
98
99	## Step 3: Page Structure
100
101	Read `references/page-library.md` before planning.
102
103	Plan the full page sequence. Assign section types from the 7 in `references/page-library.md` to each page section. Multiple sections can stack within one page.
104
105	Output

People who liked this also viewed

6 picks

Type