majiayu000 Content Saver
This skill provides professional formatting templates AND visual themes for saving generated content to files. Content can include summaries, notes, key points, analysis, or any text derived from transcriptions.
Available Formats
| Format | File | Best For |
|---|---|---|
| Executive Summary | formats/executive-summary.md |
Business stakeholders |
| Detailed Notes | formats/detailed-notes.md |
Research, reference |
| Key Points | formats/key-points.md |
Quick reference |
| Structured Data | formats/structured-data.md |
Integration, JSON |
| Plain Text | formats/plain-text.md |
Universal compatibility |
Available Themes
Classic Themes
| Theme | File | Style |
|---|---|---|
| Professional Dark | themes/professional-dark.md |
Dark mode, teal accents |
| Professional Light | themes/professional-light.md |
Clean, navy headings |
| Modern Minimalist | themes/modern-minimalist.md |
Off-white, whitespace |
| Academic | themes/academic.md |
Warm sepia, serif fonts |
| Vibrant Creative | themes/vibrant-creative.md |
Bold purple/pink |
Premium Themes (Enhanced UI/UX)
| Theme | File | Style | Features |
|---|---|---|---|
| Neural AI | themes/neural-ai.md |
Cyberpunk, glowing accents | Animations, gradients, callouts |
| Glassmorphism | themes/glassmorphism.md |
Frosted glass, modern | Blur effects, hover states, cards |
| Notion Style | themes/notion-style.md |
Notion-inspired, clean | Toggles, callouts, properties |
| GitHub Docs | themes/github-docs.md |
GitHub documentation | Alerts, labels, dark mode |
| Terminal Hacker | themes/terminal-hacker.md |
Retro terminal, green text | CRT effects, ASCII art, prompts |
Shared Resources
| Resource | File | Purpose |
|---|---|---|
| Components Library | themes/COMPONENTS.md |
Reusable UI patterns |
Theme Selection Guide
| Content Type | Recommended Themes |
|---|---|
| Technical documentation | GitHub Docs, Terminal Hacker |
| Meeting notes & wikis | Notion Style |
| Research papers | Academic |
| Product reports | Glassmorphism, Professional Light |
| AI/ML content | Neural AI |
| Developer logs | Terminal Hacker |
| Business documents | Professional Light/Dark |
| Creative briefs | Vibrant Creative, Glassmorphism |
Workflow
Step 1: Identify Content
Confirm what content the user wants to save (summary, key points, notes, analysis). If content doesn't exist yet, offer to generate it first.
Step 2: Present Format Options
## Save Content — Choose a Format
1. **Executive Summary** — Professional markdown with metadata
2. **Detailed Notes** — Comprehensive documentation format
3. **Key Points** — Bulleted action items and takeaways
4. **Structured Data** — JSON for programmatic use
5. **Plain Text** — Simple, universal format
Which format would you like? (1-5)
Step 3: Present Theme Options
## Apply a Theme
### Classic Themes
1. **Professional Dark** — Sleek dark mode with teal accents
2. **Professional Light** — Clean corporate styling
3. **Modern Minimalist** — Elegant simplicity
4. **Academic** — Scholarly with serif fonts
5. **Vibrant Creative** — Bold and energetic
### Premium Themes (Enhanced UI/UX)
6. **Neural AI** — Futuristic cyberpunk with glowing effects
7. **Glassmorphism** — Modern frosted glass aesthetic
8. **Notion Style** — Clean productivity-focused design
9. **GitHub Docs** — Developer documentation style
10. **Terminal Hacker** — Retro green-on-black terminal
11. **No Theme** — Plain formatting only
Which theme? (1-11)
Step 4: Apply Template & Save
- Read the template: Use Read tool on
formats/{format-name}.md - Read the theme (if selected): Use Read tool on
themes/{theme-name}.md - Read components (optional): Check
themes/COMPONENTS.mdfor reusable patterns - Structure content according to the format template
- Apply theme CSS/styling from theme file
- Include appropriate components (callouts, badges, cards) from the theme
- Generate filename:
{source}_{type}_{YYYYMMDD}.{ext} - Save with
write_filetool - Confirm save and offer next steps
Themed Output
When theme is applied, wrap content in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{Document Title}</title>
<style>
/* CSS from theme file */
</style>
</head>
<body>
<article>
<!-- Formatted content with theme components -->
</article>
</body>
</html>
Save as .html instead of .md when themed.
Using Theme Components
Premium themes include rich components. Reference themes/COMPONENTS.md for:
Callouts / Alerts
<!-- Notion/Glassmorphism style -->
<div class="callout callout-info">
<div class="callout-icon">💡</div>
<div class="callout-content">Important insight here...</div>
</div>
<!-- GitHub style -->
<div class="markdown-alert markdown-alert-note">
<p class="markdown-alert-title">📘 Note</p>
<p>Information the user should know...</p>
</div>
<!-- Terminal style -->
<div class="status status-success">[OK] Operation completed.</div>
Badges / Tags
<span class="badge badge-success">Complete</span>
<span class="tag tag-blue">transcript</span>
<span class="label label-purple">featured</span>
Cards (Glassmorphism, Neural AI)
<div class="card">
<h4>Key Insight</h4>
<p>Important finding...</p>
</div>
Toggle Sections (Notion, GitHub)
<details class="toggle">
<summary class="toggle-header">Expand for details</summary>
<div class="toggle-content">Hidden content...</div>
</details>
Theme Feature Matrix
| Feature | Neural AI | Glassmorphism | Notion | GitHub | Terminal |
|---|---|---|---|---|---|
| Dark Mode | Built-in | Gradient BG | Light only | Auto-detect | Built-in |
| Animations | Yes | Hover effects | No | No | Flicker |
| Callouts | Yes | Yes | Yes | 5 types | Status msgs |
| Cards | Yes | Yes (glass) | Properties | No | ASCII box |
| Code Highlighting | Gradient bar | Frost border | Border | GitHub style | Terminal |
| Print Styles | Yes | Yes | Yes | Yes | Yes |
| Responsive | Yes | Yes | Yes | Yes | Yes |
External Dependencies
Some premium themes load fonts from Google Fonts CDN:
| Theme | CDN Fonts | Fallback Fonts |
|---|---|---|
| Neural AI | Orbitron, Inter, JetBrains Mono | system sans-serif, monospace |
| Glassmorphism | Plus Jakarta Sans, Inter, Fira Code | DM Sans, system-ui, monospace |
| Notion Style | Inter | -apple-system, system-ui |
| Terminal Hacker | VT323, Fira Code, Share Tech Mono | Source Code Pro, monospace |
Offline/Restricted Environments: All themes include fallback fonts that work without internet access. The design will remain functional with system fonts.
Critical Rules
- Always Confirm — Never save without confirming format, theme, filename
- Read Templates On-Demand — Use Read tool to fetch specific format/theme files
- Preserve Content — Don't modify meaning when formatting
- Include Metadata — Source reference, date, content type
- Match Theme to Content — Suggest appropriate themes based on content type
- Use Components — Leverage theme-specific callouts, badges, and cards
- Report Success — Confirm path and offer follow-up
Error Handling
| Error | Resolution |
|---|---|
| No content to save | Offer to generate first |
| Write failure | Report error, suggest alternative |
| Template not found | Use Read tool on correct path |
| Theme not found | Fall back to Professional Light or no theme |
| Component not in theme | Use generic HTML equivalent |
Quick Examples
Neural AI Theme Output
Best for: AI research, technical analysis, ML documentation
<h1>Analysis Report</h1>
<span class="badge badge-primary">AI Generated</span>
<div class="callout callout-info">
<strong>Neural Analysis:</strong> Key insights detected...
</div>
Notion Style Output
Best for: Meeting notes, project documentation, wikis
<div class="properties">
<div class="property">
<span class="property-name">Source</span>
<span class="property-value">Video Transcript</span>
</div>
</div>
<details class="toggle">
<summary>Key Takeaways</summary>
<div class="toggle-content">...</div>
</details>
Terminal Hacker Output
Best for: Developer logs, CLI documentation, tech tutorials
<div class="status status-success">[OK] Transcript processed.</div>
<div class="prompt">
<span class="prompt-symbol">$</span>
<span class="prompt-command">cat summary.txt</span>
</div>