mcpbeat Sign in

Document Design Skill for Claude

by jamditis

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, CSS patterns for print layout, and document design best practices.

3k tokens
context cost
the whole folder, loaded on every use
2
files
instructions only
0
copies elsewhere
how many repositories repackaged it
351
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/jamditis/claude-skills-journalism --skill document-design

The instruction itself

24 sections, as written by the author

Document design

Create professional, print-ready HTML documents that export to PDF with customizable branding.

Brand configuration

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.

Reading brand config

Look for .claude/pdf-playground.local.md in the project root. Parse the YAML frontmatter:

---
brand:
  name: "Organization Name"
  tagline: "Tagline"
  website: "https://example.com"
  email: "[email protected]"

colors:
  primary: "#CA3553"
  secondary: "#000000"
  background: "#FFFFFF"
  text: "#2d2a28"
  muted: "#666666"

fonts:
  heading: "Playfair Display"
  body: "Source Sans 3"

style:
  headingCase: "sentence"
  useOxfordComma: true
---

Default brand values

If no config exists, use these defaults:

  • Primary color: #CA3553 (red)
  • Secondary color: #000000 (black)
  • Heading font: Playfair Display
  • Body font: Source Sans 3
  • Heading case: sentence case

Core principles

  • Print-first design: All documents target 8.5" × 11" letter size with proper margins
  • Brand compliance: Use colors and fonts from brand configuration
  • Sentence case by default: Unless brand config specifies "title" case
  • Clean exports: Documents must render correctly when printed to PDF

CSS variables

Generate CSS variables from brand config:

:root {
    --primary: [colors.primary];
    --secondary: [colors.secondary];
    --background: [colors.background];
    --text: [colors.text];
    --muted: [colors.muted];

    /* Derived colors */
    --primary-dark: [darken primary by 15%];
    --gray-100: #f5f4f2;
    --gray-200: #e8e6e3;
}

Print CSS fundamentals

Page setup

@page {
    size: 8.5in 11in;
    margin: 0;
}

@media print {
    body {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .page {
        page-break-after: always;
        page-break-inside: avoid;
    }
}

Fixed page dimensions

.page {
    width: 8.5in;
    height: 11in;
    padding: 0.5in 0.75in;
    padding-bottom: 1in; /* Space for footer */
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

Fixed footers

.page-footer {
    position: absolute;
    bottom: 0.4in;
    left: 0.75in;
    right: 0.75in;
    font-size: 9pt;
    border-top: 1px solid var(--gray-200);
    padding-top: 0.1in;
    background: var(--background);
}

Footer clearance (critical)

Content overlapping or touching the footer is a recurring issue.

Preferred layout — grid rows auto 1fr auto:

.page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
}

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.

Required safeguards:

  • Use grid-template-rows: auto 1fr auto on the page so content automatically gets the space between header and footer
  • Set overflow: hidden on the content container to prevent text bleeding past its bounds
  • Include padding-bottom: 0.3in (minimum) inside the content area as a buffer
  • Never use hardcoded height: calc(...) with magic numbers for header/footer heights — they drift when padding or font sizes change
  • After rendering, always screenshot and visually verify the bottom of the page before delivering
  • If content overflows, reduce content — never shrink the footer gap. Tighten the header first if you need more room.

Typography patterns

Font loading

@import url('https://fonts.googleapis.com/css2?family=[heading-font]:wght@400;600;700&family=[body-font]:wght@400;500;600;700&display=swap');

body {
    font-family: '[body-font]', Arial, sans-serif;
    font-size: 11pt;
    line-height: 1.6;
    color: var(--text);
}

h1, h2, h3 {
    font-family: '[heading-font]', Georgia, serif;
    font-weight: 700;
}

Heading styles

.section-title {
    font-size: 26pt;
    color: var(--secondary);
    margin-bottom: 0.25in;
}

.section-title::after {
    content: '';
    display: block;
    width: 0.5in;
    height: 3px;
    background: var(--primary);
    margin-top: 0.12in;
}

Common components

Cover page header

<header class="cover-header">
    <div class="logo-bar">
        <div class="logo-primary">[brand.name]</div>
    </div>
    <div class="cover-title-block">
        <div class="cover-eyebrow">[Document type] • [Date]</div>
        <h1 class="cover-title">[Title in configured case]</h1>
    </div>
</header>

Budget table

.budget-table thead {
    background: var(--secondary);
    color: white;
}

.budget-table tbody tr:last-child {
    background: var(--primary);
    color: white;
    font-weight: 700;
}

Highlight box

.highlight-box {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 0.3in;
}

Document creation workflow

  • Check for brand config in .claude/pdf-playground.local.md
  • Load template from ${CLAUDE_PLUGIN_ROOT}/templates/
  • Apply brand settings to CSS variables and content
  • Customize content based on user requirements
  • Save HTML file in current working directory
  • Offer preview with Playwright browser tools

PDF export instructions

  • Open the HTML file in Chrome
  • Press Ctrl+P (or Cmd+P on Mac)
  • Set "Destination" to "Save as PDF"
  • Set "Margins" to "None"
  • Enable "Background graphics"
  • Save the file

Additional resources

Templates

Pre-built templates in ${CLAUDE_PLUGIN_ROOT}/templates/:

  • proposal-template.html
  • report-template.html
  • onepager-template.html
  • newsletter-template.html
  • slides-template.html
  • event-template.html

Brand examples

Example brand configurations in ${CLAUDE_PLUGIN_ROOT}/brands/:

  • default.yaml - Default brand settings
  • ccm.yaml - Center for Cooperative Media
  • example-newsroom.yaml - Sample newsroom config

Reference files

For detailed CSS patterns: references/css-patterns.md

Other skills for the same job

different authors, same section of the catalogue
DOCX
by anthropics
vendor ×16

Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks

7k tokens
PDF
by anthropics
vendor ×16

Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. When Claude needs to fill in a PDF form or programmatically process, generate, or analyze PDF documents at scale.

13k tokens scripts
PPTX
by JayZeeDesign
×15

Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layouts, (4) Adding comments or speaker notes, or any other presentation tasks

308k tokens scripts
Canvas Design
by anthropics
vendor ×13

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

1388k tokens
PDF
by anthropics
vendor ×10

Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.

15k tokens scripts
DOCX
by w95
×6

Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', or requests to produce professional documents with formatting like tables of contents, headings, page numbers, or letterheads. Also use when extracting or reorganizing content from .docx files, inserting or replacing images in documents, performing find-and-replace in Word files, working with tracked changes or comments, or converting content into a polished Word document. If the user asks for a 'report', 'memo', 'letter', 'template', or similar deliverable as a Word or .docx file, use this skill. Do NOT use for PDFs, spreadsheets, Google Docs, or general coding tasks unrelated to document generation.

5k tokens
PPTX
by w95
×4

Use this skill any time a .pptx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates, layouts, speaker notes, or comments. Trigger whenever the user mentions \"deck,\" \"slides,\" \"presentation,\" or references a .pptx filename, regardless of what they plan to do with the content afterward. If a .pptx file needs to be opened, created, or touched, use this skill.

2k tokens
Obsidian Markdown
by ZhanlinCui
×3

Create and edit Obsidian Flavored Markdown with wikilinks, embeds, callouts, properties, and other Obsidian-specific syntax. Use when working with .md files in Obsidian, or when the user mentions wikilinks, callouts, frontmatter, tags, embeds, or Obsidian notes.

3k tokens

How to use it

Copy the folder

Take jamditis/document-design from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

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.