Merge pull request #176 from nextlevelbuilder/feat/google-fonts-collection

feat: add Google Fonts Collection + new design skills

Author: mrgoonie

.claude/skills/brand/SKILL.md

@@ -0,0 +1,97 @@
+---
+name: ckm:brand
+description: Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
+argument-hint: "[update|review|create] [args]"
+metadata:
+  author: claudekit
+  version: "1.0.0"
+---
+
+# Brand
+
+Brand identity, voice, messaging, asset management, and consistency frameworks.
+
+## When to Use
+
+- Brand voice definition and content tone guidance
+- Visual identity standards and style guide development
+- Messaging framework creation
+- Brand consistency review and audit
+- Asset organization, naming, and approval
+- Color palette management and typography specs
+
+## Quick Start
+
+**Inject brand context into prompts:**
+```bash
+node scripts/inject-brand-context.cjs
+node scripts/inject-brand-context.cjs --json
+```
+
+**Validate an asset:**
+```bash
+node scripts/validate-asset.cjs <asset-path>
+```
+
+**Extract/compare colors:**
+```bash
+node scripts/extract-colors.cjs --palette
+node scripts/extract-colors.cjs <image-path>
+```
+
+## Brand Sync Workflow
+
+```bash
+# 1. Edit docs/brand-guidelines.md (or use /brand update)
+# 2. Sync to design tokens
+node scripts/sync-brand-to-tokens.cjs
+# 3. Verify
+node scripts/inject-brand-context.cjs --json | head -20
+```
+
+**Files synced:**
+- `docs/brand-guidelines.md` → Source of truth
+- `assets/design-tokens.json` → Token definitions
+- `assets/design-tokens.css` → CSS variables
+
+## Subcommands
+
+| Subcommand | Description | Reference |
+|------------|-------------|-----------|
+| `update` | Update brand identity and sync to all design systems | `references/update.md` |
+
+## References
+
+| Topic | File |
+|-------|------|
+| Voice Framework | `references/voice-framework.md` |
+| Visual Identity | `references/visual-identity.md` |
+| Messaging | `references/messaging-framework.md` |
+| Consistency | `references/consistency-checklist.md` |
+| Guidelines Template | `references/brand-guideline-template.md` |
+| Asset Organization | `references/asset-organization.md` |
+| Color Management | `references/color-palette-management.md` |
+| Typography | `references/typography-specifications.md` |
+| Logo Usage | `references/logo-usage-rules.md` |
+| Approval Checklist | `references/approval-checklist.md` |
+
+## Scripts
+
+| Script | Purpose |
+|--------|---------|
+| `scripts/inject-brand-context.cjs` | Extract brand context for prompt injection |
+| `scripts/sync-brand-to-tokens.cjs` | Sync brand-guidelines.md → design-tokens.json/css |
+| `scripts/validate-asset.cjs` | Validate asset naming, size, format |
+| `scripts/extract-colors.cjs` | Extract and compare colors against palette |
+
+## Templates
+
+| Template | Purpose |
+|----------|---------|
+| `templates/brand-guidelines-starter.md` | Complete starter template for new brands |
+
+## Routing
+
+1. Parse subcommand from `$ARGUMENTS` (first word)
+2. Load corresponding `references/{subcommand}.md`
+3. Execute with remaining arguments

.claude/skills/brand/references/approval-checklist.md

@@ -0,0 +1,169 @@
+# Asset Approval Checklist
+
+Comprehensive checklist for reviewing marketing assets before approval.
+
+## Quick Review
+
+Before detailed review, verify:
+- [ ] Asset serves stated purpose
+- [ ] Target audience appropriate
+- [ ] No obvious errors or issues
+- [ ] Aligns with campaign goals
+
+## Visual Elements
+
+### Logo Usage
+- [ ] Correct logo variant for context
+- [ ] Proper clear space maintained
+- [ ] Minimum size requirements met
+- [ ] Approved colors only
+- [ ] No unauthorized modifications
+- [ ] Appropriate for background
+
+### Color Compliance
+- [ ] Uses brand palette colors only
+- [ ] Primary/secondary ratio appropriate (60/30/10)
+- [ ] Semantic colors used correctly
+- [ ] No off-brand colors introduced
+- [ ] Consistent across all elements
+
+### Typography
+- [ ] Brand fonts used throughout
+- [ ] Correct font weights applied
+- [ ] Proper type hierarchy
+- [ ] Appropriate sizes for medium
+- [ ] Line heights adequate
+- [ ] No orphans/widows in body text
+
+### Imagery
+- [ ] Matches brand photography style
+- [ ] Appropriate subjects/content
+- [ ] Quality meets requirements
+- [ ] Properly licensed/credited
+- [ ] Optimized for intended use
+
+## Accessibility
+
+### Visual Accessibility
+- [ ] Text contrast ratio >= 4.5:1 (AA)
+- [ ] Large text contrast >= 3:1
+- [ ] Interactive elements have visible focus
+- [ ] Color not sole indicator of meaning
+- [ ] Alt text for all images
+
+### Content Accessibility
+- [ ] Clear and scannable layout
+- [ ] Readable font sizes
+- [ ] Logical reading order
+- [ ] Meaningful headings structure
+- [ ] Links describe destination
+
+## Content Quality
+
+### Copy Review
+- [ ] Matches brand voice
+- [ ] Appropriate tone for context
+- [ ] No prohibited terms used
+- [ ] Value proposition clear
+- [ ] CTA compelling and clear
+- [ ] Proofread for errors
+
+### Messaging
+- [ ] Aligns with key messages
+- [ ] Differentiators highlighted
+- [ ] Benefits over features
+- [ ] Target audience addressed
+- [ ] No conflicting claims
+
+## Technical Requirements
+
+### File Specifications
+- [ ] Correct file format
+- [ ] Appropriate resolution
+- [ ] File size optimized
+- [ ] Proper naming convention
+- [ ] Metadata included
+
+### Platform Requirements
+| Platform | Verified |
+|----------|----------|
+| Instagram | [ ] Correct dimensions |
+| Twitter/X | [ ] Meets requirements |
+| LinkedIn | [ ] Professional standards |
+| Facebook | [ ] Guidelines compliant |
+| Email | [ ] Size under 1MB |
+| Web | [ ] Optimized for web |
+
+## Legal & Compliance
+
+### Intellectual Property
+- [ ] Stock images licensed
+- [ ] Music/audio cleared
+- [ ] No trademark violations
+- [ ] User content authorized
+- [ ] Credits included where needed
+
+### Regulatory
+- [ ] Required disclosures present
+- [ ] No misleading claims
+- [ ] Pricing accurate
+- [ ] Terms linked where needed
+- [ ] Privacy compliant
+
+## Review Status
+
+### Reviewer Sign-off
+
+| Review Area | Reviewer | Date | Status |
+|-------------|----------|------|--------|
+| Visual Design | | | [ ] Pass / [ ] Revisions |
+| Copy/Content | | | [ ] Pass / [ ] Revisions |
+| Brand Compliance | | | [ ] Pass / [ ] Revisions |
+| Technical | | | [ ] Pass / [ ] Revisions |
+| Legal | | | [ ] Pass / [ ] Revisions |
+
+### Final Approval
+
+- [ ] All review areas passed
+- [ ] Revisions completed (if any)
+- [ ] Final version uploaded
+- [ ] Metadata updated
+- [ ] Ready for publish/use
+
+**Approved By:** _______________
+
+**Date:** _______________
+
+**Version:** _______________
+
+## Common Issues & Fixes
+
+| Issue | Fix |
+|-------|-----|
+| Logo too small | Increase to minimum size |
+| Wrong font | Replace with brand font |
+| Low contrast | Adjust colors for accessibility |
+| Off-brand color | Replace with palette color |
+| Blurry image | Use higher resolution source |
+| Missing alt text | Add descriptive alt text |
+| Weak CTA | Strengthen action-oriented copy |
+
+## Automation Support
+
+The `validate-asset.cjs` script can auto-check:
+- Color palette compliance
+- Minimum dimensions
+- File format/size
+- Naming convention
+- Basic metadata
+
+Run: `node .claude/skills/brand/scripts/validate-asset.cjs <asset-path>`
+
+## Archival
+
+After approval:
+1. Update asset status in manifest.json
+2. Add approver and timestamp
+3. Move previous versions to archive
+4. Update campaign tracking
+5. Notify relevant teams