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

refactor: Reorganize skill numbering and update documentation

Browse Source 
Skill Numbering Changes:
- 01-03: OurDigital core (was 30-32)
- 31-32: Notion tools (was 01-02)
- 99_archive: Renamed from _archive for sorting

New Files:
- AGENTS.md: Claude Code agent routing guide
- requirements.txt for 00-claude-code-setting, 32-notion-writer, 43-jamie-youtube-manager

Documentation Updates:
- CLAUDE.md: Updated skill inventory (23 skills)
- AUDIT_REPORT.md: Current completion status (91%)
- Archived REFACTORING_PLAN.md (most tasks complete)

Removed:
- ga-agent-skills/ (moved to separate repo ~/Project/dintel-ga4-agent)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Andrew Yim
2026-01-23 18:42:39 +07:00
parent ae193d5e08
commit b69e4b6f3a
100 changed files with 655 additions and 1812 deletions
Download Patch File Download Diff File Expand all files Collapse all files

327
custom-skills/03-ourdigital-presentation/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