How do I install the IOS Notes Screenshot Generator skill?

Run npx skillmds@latest add tomevault-io/ios-notes-screenshot-generator in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is IOS Notes Screenshot Generator safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with IOS Notes Screenshot Generator?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is IOS Notes Screenshot Generator free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published IOS Notes Screenshot Generator?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

IOS Notes Screenshot Generator by tomevault-io

Name: IOS Notes Screenshot Generator
Author: tomevault-io

IOS Notes Screenshot Generator

This skill generates realistic iOS notes app screenshots from arbitrary text input. It creates pixel-perfect iPhone notes app interfaces with proper iOS design patterns, typography, spacing, and visual elements. Use this skill when users need to create iOS-style notes app screenshots for presentations, mockups, or design references. Use when this capability is needed.

tomevault-io 7efd40b 2 files · 4.2 KB Updated Sep 17, 2026

File contents

iOS Notes App Screenshot Generator

This skill transforms arbitrary text input into realistic iOS notes app screenshots that match Apple's design language and visual standards.

When to Use This Skill

Use this skill when:

User wants to create iOS-style notes app screenshots
User needs to display text in a realistic iPhone notes interface
User wants mockups for presentations or design references
User needs to show how text would look in iOS Notes app

How This Skill Works

Core Components

iPhone Screen Layout: Uses proper iPhone 14/15 dimensions (390x844px) with safe areas
iOS Design System: Implements Apple's 8pt grid system, San Francisco font, and system colors
Realistic UI Elements: Status bar, navigation bar, text areas, and interactive elements
Typography: Proper iOS font weights, sizes, and line spacing

Key Design Patterns Implemented

Navigation Bar: Large title mode (34pt) with standard iOS styling
Status Bar: Realistic time, battery, signal indicators
Text Areas: Proper margins (16pt), line height (1.4-1.5), and San Francisco font
Color Semes: System colors with light/dark mode support
Spacing: 8pt grid system throughout

Asset Usage

Use assets/ios-notes-template.html as the base template
Reference references/ios-design-patterns.md for detailed specifications
Customize scripts/screenshot-generator.js for dynamic content insertion

Usage Instructions

Input Processing: Extract the user's text content and identify key requirements
Template Selection: Choose appropriate notes app layout (list view vs detail view)
Content Insertion: Insert text into proper iOS-styled containers
Styling Application: Apply iOS design patterns, typography, and spacing
Screenshot Generation: Create final HTML/CSS output that renders as iOS screenshot

Implementation Steps

Create Base Template: Start with assets/ios-notes-template.html
Apply iOS Design System: Use references/ios-design-patterns.md specifications
Insert User Content: Place text in appropriate iOS-styled containers
Generate Screenshot: Output HTML/CSS that creates realistic iOS notes interface
Validate Fidelity: Ensure visual accuracy matches iOS Notes app

Output Specifications

The skill generates HTML/CSS that:

Creates pixel-perfect iOS notes app interface
Uses proper iPhone screen dimensions and safe areas
Implements iOS design patterns and typography
Displays user text in realistic iOS notes environment
Includes status bar, navigation, and text editing UI elements

Technical Requirements

Screen Size: 390x844px (iPhone 14/15 standard)
Typography: San Francisco font family with iOS font weights
Colors: iOS system colors with proper contrast ratios
Spacing: 8pt grid system alignment
Visual Elements: Realistic shadows, blur effects, and transitions

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: ios-notes-screenshot-generatordescription: This skill generates realistic iOS notes app screenshots from arbitrary text input. It creates pixel-perfect iPhone notes app interfaces with proper iOS design patterns, typography, spacing, and visual elements. Use this skill when users need to create iOS-style notes app screenshots for presentations, mockups, or design references. Use when this capability is needed.---# iOS Notes App Screenshot GeneratorThis skill transforms arbitrary text input into realistic iOS notes app screenshots that match Apple's design language and visual standards.## When to Use This SkillUse this skill when:- User wants to create iOS-style notes app screenshots- User needs to display text in a realistic iPhone notes interface- User wants mockups for presentations or design references- User needs to show how text would look in iOS Notes app## How This Skill Works### Core Components- **iPhone Screen Layout**: Uses proper iPhone 14/15 dimensions (390x844px) with safe areas- **iOS Design System**: Implements Apple's 8pt grid system, San Francisco font, and system colors- **Realistic UI Elements**: Status bar, navigation bar, text areas, and interactive elements- **Typography**: Proper iOS font weights, sizes, and line spacing### Key Design Patterns Implemented1. **Navigation Bar**: Large title mode (34pt) with standard iOS styling2. **Status Bar**: Realistic time, battery, signal indicators3. **Text Areas**: Proper margins (16pt), line height (1.4-1.5), and San Francisco font4. **Color Semes**: System colors with light/dark mode support5. **Spacing**: 8pt grid system throughout### Asset Usage- Use `assets/ios-notes-template.html` as the base template- Reference `references/ios-design-patterns.md` for detailed specifications- Customize `scripts/screenshot-generator.js` for dynamic content insertion## Usage Instructions1. **Input Processing**: Extract the user's text content and identify key requirements2. **Template Selection**: Choose appropriate notes app layout (list view vs detail view)3. **Content Insertion**: Insert text into proper iOS-styled containers4. **Styling Application**: Apply iOS design patterns, typography, and spacing5. **Screenshot Generation**: Create final HTML/CSS output that renders as iOS screenshot### Implementation Steps1. **Create Base Template**: Start with `assets/ios-notes-template.html`2. **Apply iOS Design System**: Use `references/ios-design-patterns.md` specifications3. **Insert User Content**: Place text in appropriate iOS-styled containers4. **Generate Screenshot**: Output HTML/CSS that creates realistic iOS notes interface5. **Validate Fidelity**: Ensure visual accuracy matches iOS Notes app## Output SpecificationsThe skill generates HTML/CSS that:- Creates pixel-perfect iOS notes app interface- Uses proper iPhone screen dimensions and safe areas- Implements iOS design patterns and typography- Displays user text in realistic iOS notes environment- Includes status bar, navigation, and text editing UI elements## Technical Requirements- **Screen Size**: 390x844px (iPhone 14/15 standard)- **Typography**: San Francisco font family with iOS font weights- **Colors**: iOS system colors with proper contrast ratios- **Spacing**: 8pt grid system alignment- **Visual Elements**: Realistic shadows, blur effects, and transitions---> Converted and distributed by [TomeVault](https://tomevault.io/claim/ivan23kor) — claim your Tome and manage your conversions.

Frequently asked questions