ourdigital/our-claude-skills
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add OurDigital custom skills package (10 skills)

Browse Source 
Complete implementation of OurDigital skills with dual-platform support
(Claude Desktop + Claude Code) following standardized structure.

Skills created:
- 01-ourdigital-brand-guide: Brand reference & style guidelines
- 02-ourdigital-blog: Korean blog drafts (blog.ourdigital.org)
- 03-ourdigital-journal: English essays (journal.ourdigital.org)
- 04-ourdigital-research: Research prompts & workflows
- 05-ourdigital-document: Notion-to-presentation pipeline
- 06-ourdigital-designer: Visual/image prompt generation
- 07-ourdigital-ad-manager: Ad copywriting & keyword research
- 08-ourdigital-trainer: Training materials & workshop planning
- 09-ourdigital-backoffice: Quotes, proposals, cost analysis
- 10-ourdigital-skill-creator: Meta skill for creating new skills

Features:
- YAML frontmatter with "ourdigital" or "our" prefix triggers
- Standardized directory structure (code/, desktop/, shared/, docs/)
- Shared environment setup (_ourdigital-shared/)
- Comprehensive reference documentation
- Cross-skill integration support

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Andrew Yim
2026-01-31 16:50:17 +07:00
parent 7d20abe811
commit 0bc24d00b9
169 changed files with 9970 additions and 741 deletions
Download Patch File Download Diff File Expand all files Collapse all files

327
custom-skills/05-ourdigital-document/code/references/slide_layouts.md Normal file
View File

@@ -0,0 +1,327 @@
# Slide Layouts Guide
## Overview
Layout patterns and best practices for different slide types.
## Layout Principles
### Visual Hierarchy
1. **Primary**: Title/headline (largest, boldest)
2. **Secondary**: Key points (medium, clear)
3. **Tertiary**: Supporting details (smaller, lighter)
4. **Quaternary**: Metadata (smallest, subtle)
### Balance & Alignment
- **Rule of thirds**: Divide slide into 9 sections
- **White space**: 30-40% minimum
- **Alignment grid**: Consistent margins and gutters
- **Visual weight**: Balance text, images, and data
## Core Slide Types
### 1. Title Slide
```
┌─────────────────────────────────┐
│ │
│ │
│ [Company Logo] │
│ │
│ PRESENTATION TITLE │
│ Subtitle Text │
│ │
│ Date | Author │
│ │
└─────────────────────────────────┘
```
**Elements**:
- Title: 44-48pt, bold, centered
- Subtitle: 24-28pt, regular, centered
- Metadata: 14-16pt, light, centered
- Background: Gradient or image with overlay
### 2. Section Divider
```
┌─────────────────────────────────┐
│ │
│ │
│ │
│ SECTION TITLE │
│ Brief Context │
│ │
│ │
│ │
└─────────────────────────────────┘
```
**Elements**:
- Section title: 36-40pt, bold
- Context: 20-24pt, regular
- Background: Brand color or pattern
- Number indicator (optional): Large, subtle
### 3. Content Slide - Text Only
```
┌─────────────────────────────────┐
│ SLIDE TITLE │
├─────────────────────────────────┤
│ │
│ • Key point one with detail │
│ Supporting information │
│ │
│ • Key point two with detail │
│ Supporting information │
│ │
│ • Key point three with detail │
│ Supporting information │
│ │
└─────────────────────────────────┘
```
**Elements**:
- Title: 32pt, bold, left-aligned
- Bullets: 18-20pt, regular
- Sub-bullets: 16-18pt, light
- Line spacing: 1.5x
### 4. Content Slide - Text + Image
```
┌─────────────────────────────────┐
│ SLIDE TITLE │
├────────────────┬────────────────┤
│ │ │
│ • Point one │ │
│ │ [IMAGE/ │
│ • Point two │ CHART] │
│ │ │
│ • Point three │ │
│ │ │
└────────────────┴────────────────┘
```
**Proportions**:
- Text: 50-60% width
- Visual: 40-50% width
- Padding: 0.5" between columns
### 5. Data Visualization
```
┌─────────────────────────────────┐
│ DATA INSIGHT TITLE │
├─────────────────────────────────┤
│ ┌──────────┐ │
│ │ │ │
│ │ CHART/ │ │
│ │ GRAPH │ │
│ │ │ │
│ └──────────┘ │
│ │
│ Key Insight: [Callout text] │
└─────────────────────────────────┘
```
**Elements**:
- Chart: 60-70% of slide area
- Title: Descriptive, not just "Sales Data"
- Callout: Highlight key finding
- Legend: Only if necessary
### 6. Comparison Slide
```
┌─────────────────────────────────┐
│ COMPARISON TITLE │
├────────────────┬────────────────┤
│ Option A │ Option B │
├────────────────┼────────────────┤
│ │ │
│ ✓ Advantage 1 │ ✓ Advantage 1 │
│ ✓ Advantage 2 │ ✓ Advantage 2 │
│ ✗ Drawback 1 │ ✗ Drawback 1 │
│ │ │
│ Metric: 85% │ Metric: 72% │
│ │ │
└────────────────┴────────────────┘
```
**Layout**:
- Equal column widths
- Consistent formatting
- Visual indicators (✓/✗, +/-)
- Highlight winner (if applicable)
### 7. Process/Timeline
```
┌─────────────────────────────────┐
│ PROCESS TITLE │
├─────────────────────────────────┤
│ │
│ [1]────►[2]────►[3]────►[4] │
│ Start Step Step End │
│ One Two │
│ │
│ Description of the process │
│ │
└─────────────────────────────────┘
```
**Variations**:
- Horizontal timeline
- Vertical timeline
- Circular process
- Chevron diagram
### 8. Quote/Testimonial
```
┌─────────────────────────────────┐
│ │
│ │
│ "Impactful quote │
│ that supports │
│ your message" │
│ │
│ - Attribution │
│ Title/Company │
│ │
└─────────────────────────────────┘
```
**Styling**:
- Quote: 24-28pt, italic or serif
- Attribution: 16-18pt, regular
- Quotation marks: Large, subtle
- Background: Minimal, maybe texture
### 9. Image-Focused
```
┌─────────────────────────────────┐
│ │
│ │
│ [FULL BLEED IMAGE] │
│ │
│ │
├─────────────────────────────────┤
│ Caption or Context Text │
└─────────────────────────────────┘
```
**Best Practices**:
- High-resolution images only
- Text overlay needs contrast
- Consider semi-transparent overlay
- Keep text minimal
### 10. Call-to-Action
```
┌─────────────────────────────────┐
│ │
│ │
│ CLEAR ACTION ITEM │
│ │
│ [ BUTTON/ACTION ] │
│ │
│ Supporting context │
│ │
└─────────────────────────────────┘
```
**Elements**:
- Action: 32-36pt, bold
- Button: Contrasting color
- Context: 18-20pt, regular
- Contact info (if applicable)
## Responsive Layouts
### Mobile-First Considerations
- Larger text (minimum 14pt)
- Single column layouts
- Touch-friendly spacing
- Simplified graphics
### Aspect Ratios
- **16:9** (Standard): 1920×1080px
- **4:3** (Traditional): 1024×768px
- **16:10** (Modern): 1920×1200px
- **1:1** (Social): 1080×1080px
## Color Usage
### Background Options
1. **White**: Maximum readability
2. **Light gray**: Reduces glare
3. **Dark**: For high contrast
4. **Gradient**: Adds depth
5. **Pattern**: Subtle texture
### Text Colors
- **Primary text**: High contrast (90%+)
- **Secondary text**: Medium contrast (70%+)
- **Accent text**: Brand color
- **Disabled text**: Low contrast (40%)
## Typography Guidelines
### Font Pairing
```
Heading Font + Body Font
- Poppins + Lora
- Arial + Georgia
- Helvetica + Times
- Roboto + Merriweather
```
### Size Hierarchy
```
Title: 44-48pt
Subtitle: 32-36pt
Heading: 28-32pt
Subheading: 20-24pt
Body: 16-20pt
Caption: 12-14pt
```
### Line Spacing
- Titles: 1.0-1.2x
- Body text: 1.5-1.6x
- Bullets: 1.4-1.5x
- Captions: 1.2-1.3x
## Animation & Transitions
### Entrance Animations
- **Fade in**: Universal, professional
- **Slide in**: Directional emphasis
- **Grow**: Importance emphasis
- **Appear**: Simple, no distraction
### Transition Timing
- Fast: 0.3s (between related slides)
- Medium: 0.5s (section transitions)
- Slow: 1.0s (major transitions)
### Build Sequences
1. Title appears
2. Main content fades in
3. Supporting elements slide in
4. Call-to-action grows
## Accessibility Considerations
### Color Contrast
- WCAG AA: 4.5:1 for normal text
- WCAG AA: 3:1 for large text
- WCAG AAA: 7:1 for normal text
### Font Sizes
- Minimum: 14pt for body text
- Minimum: 18pt for important text
- Maximum: 54pt for titles
### Alt Text
- Describe all images
- Explain all charts
- Summarize complex diagrams
## Quality Checklist
### Before Finalizing
- [ ] Consistent alignment across slides
- [ ] Proper contrast ratios
- [ ] No orphaned bullets
- [ ] Images are high resolution
- [ ] Data is clearly labeled
- [ ] Slide numbers present
- [ ] Brand elements applied
- [ ] Spell check completed
- [ ] Animations tested
- [ ] Export quality verified