skills.rest
zhiwendesign
zhiwendesignCOMMUNITY
Explore all skills by this author →
GitHub

kkstyle-class-notes-screenshot

Convert study notes into branded HTML class-notes posters with date and QR elements.

11|1|Updated Mar 30, 2026
Search Tags:#automation#branding#html#poster#claude-code#screenshot#class-notes
One-click install
npx skills add https://github.com/zhiwendesign/kkskills --skill kkstyle-class-notes-screenshot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kkstyle-class-notes-screenshot
Source: https://github.com/zhiwendesign/kkskills/tree/main/kkstyle-class-notes-screenshot
Command: npx skills add https://github.com/zhiwendesign/kkskills --skill kkstyle-class-notes-screenshot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires google-chrome, chromium, chromium-browser, chrome, and includes assets (resource) and references (resource) and scripts (resource) components.

What problem does it solve?

This Skill removes the manual struggle of styling study notes into shareable posters by enforcing a consistent class-notes aesthetic with a fixed date label and branded contact block while delivering HTML ready for screenshotting.

Core Features & Use Cases

  • Branded classroom layout: generates a 3:4 handwritten title, highlight strip, double note columns, and mandatory date, QR, and IP elements for every poster.
  • Flexible canvas presets: respects the 3:4 default yet supports 4:3, 1:1, 16:9, and 9:16 sizes while following the inline CSS and design rules documented in references.
  • Use Case: turn course summaries, study reflections, or knowledge checklists into organized HTML before optionally invoking the capture script for PNG exports.

Quick Start

Tell the skill to craft a 3:4 handwritten class-notes poster with a top date label, highlighted summary, and fixed QR/IP assets so it outputs HTML ready for screenshots.

Frequently Asked Questions about kkstyle-class-notes-screenshot

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert study notes into branded HTML posters for screenshots?▼

To convert study notes into branded HTML posters, this Skill transforms raw text into a handwritten class-notes layout with highlighted summaries and fixed contact blocks, delivering inline CSS HTML ready for screenshotting.

Can I generate class-notes posters in different aspect ratios like 16:9 or 1:1?▼

Yes, you can generate class-notes posters in 16:9 or 1:1 layouts. The Skill defaults to a 3:4 canvas but supports flexible presets including 4:3 and 9:16 sizes while maintaining the branded design rules.

Does this HTML poster generator require Chrome to export PNG files?▼

Yes, exporting PNG files requires Chrome. The Skill delivers inline CSS HTML and includes a Chrome-based capture script that automates the PNG export process using chromium-browser dependencies.

What is the best way to automate course summary creation for training resource cards?▼

The best way to automate course summary creation is using this Skill to process raw study recaps into organized HTML. It automatically applies a branded classroom layout with mandatory date labels and QR assets for training resource cards.

How to add mandatory QR codes and date labels to automated class-notes posters?▼

To add mandatory QR codes and date labels, the Skill enforces a fixed branded contact block within the HTML layout. Every generated poster automatically includes these elements alongside the highlighted summary strips.

Related Skills

Explore More Design & Creative Skills→
zhiwendesignzhiwendesign
11

kkstyle-kksticker-noline-screenshot

Convert release notes into KKSticker HTML posters with mascot board and Chrome capture script.

Community
Intermediate
yuyuxinliyuyuxinli
1

wechat-infographic

Convert HTML and CSS infographics into WeChat-ready PNGs and inline HTML.

Official
Advanced
RamanEbrahimiRamanEbrahimi
3

pptx-posters

Generate research posters with HTML/CSS and export to PDF or PPTX.

Community
Intermediate
kk580kkkk580kk
1

pptx-posters

Create PPTX research posters with AI-generated graphics and predefined templates.

Community
Advanced