document-design

Name: document-design
Author: jamditis

150installs57forks

How to install document-design?

jamditis/claude-skills-journalism/document-design

$npx -y skills add jamditis/claude-skills-journalism --skill document-design

Installs into the current project.

Summary

This skill should be used when the user asks to "create a proposal", "design a report", "make a one-pager", "build a PDF", "create a newsletter", "design slides", "make event materials", "design a flyer", or needs help with print-ready HTML documents. Provides brand configuration

Files · 1

View on GitHub

SKILL.md

1	# Document design
2
3	Create professional, print-ready HTML documents that export to PDF with customizable branding.
4
5	## Brand configuration
6
7	Before creating documents, check for brand configuration in `.claude/pdf-playground.local.md`. If found, use those settings. If not, use sensible defaults or ask the user for their brand colors.
8
9	### Reading brand config
10
11	Look for `.claude/pdf-playground.local.md` in the project root. Parse the YAML frontmatter:
12
13	```yaml
14	---
15	brand:
16	name: "Organization Name"
17	tagline: "Tagline"
18	website: "https://example.com"
19	email: "contact@example.com"
20
21	colors:
22	primary: "#CA3553"
23	secondary: "#000000"
24	background: "#FFFFFF"
25	text: "#2d2a28"
26	muted: "#666666"
27
28	fonts:
29	heading: "Playfair Display"
30	body: "Source Sans 3"
31
32	style:
33	headingCase: "sentence"
34	useOxfordComma: true
35	---
36	```
37
38	### Default brand values
39
40	If no config exists, use these defaults:
41
42	- Primary color: `#CA3553` (red)
43	- Secondary color: `#000000` (black)
44	- Heading font: Playfair Display
45	- Body font: Source Sans 3
46	- Heading case: sentence case
47
48	## Core principles
49
50	1. Print-first design: All documents target 8.5" × 11" letter size with proper margins
51	2. Brand compliance: Use colors and fonts from brand configuration
52	3. Sentence case by default: Unless brand config specifies "title" case
53	4. Clean exports: Documents must render correctly when printed to PDF
54
55	## CSS variables
56
57	Generate CSS variables from brand config:
58
59	```css
60	:root {
61	--primary: [colors.primary];
62	--secondary: [colors.secondary];
63	--background: [colors.background];
64	--text: [colors.text];
65	--muted: [colors.muted];
66
67	/* Derived colors */
68	--primary-dark: [darken primary by 15%];
69	--gray-100: #f5f4f2;
70	--gray-200: #e8e6e3;
71	}
72	```
73
74	## Print CSS fundamentals
75
76	### Page setup
77
78	```css
79	@page {
80	size: 8.5in 11in;
81	margin: 0;
82	}
83
84	@media print {
85	body {
86	-webkit-print-color-adjust: exact !important;
87	print-color-adjust: exact !important;
88	}
89	.page {
90	page-break-after: always;
91	page-break-inside: avoid;
92	}
93	}
94	```
95
96	### Fixed page dimensions
97
98	```css
99	.page {
100	width: 8.5in;
101	height: 11in;
102	padding: 0.5in 0.75in;
103	padding-bottom: 1in; /* Space for footer */
104	position: relative;
105	box-sizing: border-box;
106	overflow: hidden;
107	}
108	```
109
110	### Fixed footers
111
112	```css
113	.page-footer {
114	position: absolute;
115	bottom: 0.4in;
116	left: 0.75in;
117	right: 0.75in;
118	font-size: 9pt;
119	border-top: 1px solid var(--gray-200);
120	padding-top: 0.1in;
121	background: var(--background);
122	}
123	```
124
125	### Footer clearance (critical)
126
127	Content overlapping or touching the footer is a recurring issue.
128
129	Preferred layout — grid rows `auto 1fr auto`:
130	```css
131	.page {
132	display: grid;
133	grid-template-rows: auto 1fr auto;
134	overflow: hidden;
135	}
136	```
137	This makes the header and footer take their natural height, and the content fills the remaining space. No magic-number `calc()` needed — the footer clearance is structural.
138
139	Required safeguards:
140	1. Use `grid-template-rows: auto 1fr auto` on the page so content automatically gets the space between header and footer
141	2. Set `overflow: hidden` on the content container to prevent text bleeding past its bounds
142	3. Include `padding-bottom: 0.3in` (minimum) inside the content area as a buffer
143	4. Never use hardcoded `height: calc(...)` with magic numbers for header/footer heights — they drift when padding or font sizes change
144	5. After rendering, always screenshot and visually verify the bottom of the page before delivering
145	6. If content overflows, reduce content — never shrink the footer gap. Tighten the header first if you need more room.
146
147	## Typography patterns
148
149	### Font loading
150
151	```css
152	@import url('https://fonts.googleapis.com/css2?family=[heading-font]:wght@400;600;700&family=[body-font]:wght@400;500;600;700&display=swap');
153
154	body {
155	font-family: '[body-font]', Arial, sans-serif;
156	font-size: 11pt;
157	line-height: 1.6;
158	color: var(--text);
159	}
160
161	h1, h2, h3 {
162	font-family: '[heading-font]', Georgia, serif;
163	font-weight: 700;
164	}
165	```
166
167	### Heading styles
168
169	```css
170	.section-title {
171	font-size: 26pt;
172	color: var(--secondary);
173	margin-bottom: 0.25in;
174	}
175
176	.section-title::after {
177	content: '';
178	display: block;
179	width: 0.5in;
180	height: 3px;
181	background: var(--primary);
182	margin-top: 0.12in;
183	}
184	```
185
186	## Common components
187
188	### Cover page header
189
190	```html
191	<header class="cover-header">
192	<div class="logo-bar">
193	<div class="logo-primary">[brand.name]</div>
194	</div>
195	<div class="cover-title-block">

People who liked this also viewed

6 picks

Type

document-design

150installs57forks

View on GitHub

How to install document-design?

jamditis/claude-skills-journalism/document-design

$npx -y skills add jamditis/claude-skills-journalism --skill document-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Document design
2
3	Create professional, print-ready HTML documents that export to PDF with customizable branding.
4
5	## Brand configuration
6
7	Before creating documents, check for brand configuration in `.claude/pdf-playground.local.md`. If found, use those settings. If not, use sensible defaults or ask the user for their brand colors.
8
9	### Reading brand config
10
11	Look for `.claude/pdf-playground.local.md` in the project root. Parse the YAML frontmatter:
12
13	```yaml
14	---
15	brand:
16	name: "Organization Name"
17	tagline: "Tagline"
18	website: "https://example.com"
19	email: "contact@example.com"
20
21	colors:
22	primary: "#CA3553"
23	secondary: "#000000"
24	background: "#FFFFFF"
25	text: "#2d2a28"
26	muted: "#666666"
27
28	fonts:
29	heading: "Playfair Display"
30	body: "Source Sans 3"
31
32	style:
33	headingCase: "sentence"
34	useOxfordComma: true
35	---
36	```
37
38	### Default brand values
39
40	If no config exists, use these defaults:
41
42	- Primary color: `#CA3553` (red)
43	- Secondary color: `#000000` (black)
44	- Heading font: Playfair Display
45	- Body font: Source Sans 3
46	- Heading case: sentence case
47
48	## Core principles
49
50	1. Print-first design: All documents target 8.5" × 11" letter size with proper margins
51	2. Brand compliance: Use colors and fonts from brand configuration
52	3. Sentence case by default: Unless brand config specifies "title" case
53	4. Clean exports: Documents must render correctly when printed to PDF
54
55	## CSS variables
56
57	Generate CSS variables from brand config:
58
59	```css
60	:root {
61	--primary: [colors.primary];
62	--secondary: [colors.secondary];
63	--background: [colors.background];
64	--text: [colors.text];
65	--muted: [colors.muted];
66
67	/* Derived colors */
68	--primary-dark: [darken primary by 15%];
69	--gray-100: #f5f4f2;
70	--gray-200: #e8e6e3;
71	}
72	```
73
74	## Print CSS fundamentals
75
76	### Page setup
77
78	```css
79	@page {
80	size: 8.5in 11in;
81	margin: 0;
82	}
83
84	@media print {
85	body {
86	-webkit-print-color-adjust: exact !important;
87	print-color-adjust: exact !important;
88	}
89	.page {
90	page-break-after: always;
91	page-break-inside: avoid;
92	}
93	}
94	```
95
96	### Fixed page dimensions
97
98	```css
99	.page {
100	width: 8.5in;
101	height: 11in;
102	padding: 0.5in 0.75in;
103	padding-bottom: 1in; /* Space for footer */
104	position: relative;
105	box-sizing: border-box;
106	overflow: hidden;
107	}
108	```
109
110	### Fixed footers
111
112	```css
113	.page-footer {
114	position: absolute;
115	bottom: 0.4in;
116	left: 0.75in;
117	right: 0.75in;
118	font-size: 9pt;
119	border-top: 1px solid var(--gray-200);
120	padding-top: 0.1in;
121	background: var(--background);
122	}
123	```
124
125	### Footer clearance (critical)
126
127	Content overlapping or touching the footer is a recurring issue.
128
129	Preferred layout — grid rows `auto 1fr auto`:
130	```css
131	.page {
132	display: grid;
133	grid-template-rows: auto 1fr auto;
134	overflow: hidden;
135	}
136	```
137	This makes the header and footer take their natural height, and the content fills the remaining space. No magic-number `calc()` needed — the footer clearance is structural.
138
139	Required safeguards:
140	1. Use `grid-template-rows: auto 1fr auto` on the page so content automatically gets the space between header and footer
141	2. Set `overflow: hidden` on the content container to prevent text bleeding past its bounds
142	3. Include `padding-bottom: 0.3in` (minimum) inside the content area as a buffer
143	4. Never use hardcoded `height: calc(...)` with magic numbers for header/footer heights — they drift when padding or font sizes change
144	5. After rendering, always screenshot and visually verify the bottom of the page before delivering
145	6. If content overflows, reduce content — never shrink the footer gap. Tighten the header first if you need more room.
146
147	## Typography patterns
148
149	### Font loading
150
151	```css
152	@import url('https://fonts.googleapis.com/css2?family=[heading-font]:wght@400;600;700&family=[body-font]:wght@400;500;600;700&display=swap');
153
154	body {
155	font-family: '[body-font]', Arial, sans-serif;
156	font-size: 11pt;
157	line-height: 1.6;
158	color: var(--text);
159	}
160
161	h1, h2, h3 {
162	font-family: '[heading-font]', Georgia, serif;
163	font-weight: 700;
164	}
165	```
166
167	### Heading styles
168
169	```css
170	.section-title {
171	font-size: 26pt;
172	color: var(--secondary);
173	margin-bottom: 0.25in;
174	}
175
176	.section-title::after {
177	content: '';
178	display: block;
179	width: 0.5in;
180	height: 3px;
181	background: var(--primary);
182	margin-top: 0.12in;
183	}
184	```
185
186	## Common components
187
188	### Cover page header
189
190	```html
191	<header class="cover-header">
192	<div class="logo-bar">
193	<div class="logo-primary">[brand.name]</div>
194	</div>
195	<div class="cover-title-block">

People who liked this also viewed

6 picks

Type