mirror of
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
synced 2026-09-18 18:16:16 +00:00
91c193ac05
Refs #474 (finding 1 follow-up to #476, which rewrote design/SKILL.md and added a contract that grepped only */SKILL.md; the same defect one level down survived). - 29 home-rooted paths (~/.claude/skills/design/scripts/...) in design/references/{cip,icon,logo}-design.md -> scripts/... (27 at review time, two more added by #470); the printed hint in design/scripts/cip/generate.py now derives the absolute path from __file__ - 19 project-rooted invocations (.claude/skills/<skill>/scripts/...) in brand/, slides/ and design/ references -> scripts/... (own skill) or ../<skill>/scripts/... (sibling sub-skill; sub-skills are installed side by side in every layout) - brand/scripts/sync-brand-to-tokens.cjs resolved its sibling script from process.cwd(), silently skipping CSS regeneration under plugin and --global installs; now resolved from __dirname, with a warning when the sibling skill is missing; regression test asserts the regeneration - brand/scripts/extract-colors.cjs: tool-neutral hint instead of a project-rooted path into a skill this plugin does not ship - "Script Paths" section in the five sub-skills that invoke scripts: script path from the skill directory, working directory at the project root - new test_skill_script_paths.py (src, mirrored to both scripts/tests copies): every python/node/bash invocation in every shipped skill markdown must be skill-relative and name a file that ships - check-asset-sync.yml: contract covers every file under both skill trees and home-/project-/variable-rooted forms; ${CLAUDE_PLUGIN_ROOT} allowed only in the plugin-only core SKILL.md; LC_ALL=C + -I for the tracked .coverage binary; grep errors fail instead of passing; push filter includes the workflow and sync-assets.mjs - CLI copy regenerated via sync-assets.mjs Co-authored-by: notbucki <daniel@buckenmaier.xyz> Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
138 lines
3.6 KiB
Markdown
138 lines
3.6 KiB
Markdown
# Layout Patterns
|
|
|
|
25 slide layouts with CSS structures and animation classes.
|
|
|
|
## Layout Selection by Use Case
|
|
|
|
| Layout | Use Case | Animation |
|
|
|--------|----------|-----------|
|
|
| Title Slide | Opening/first impression | `animate-fade-up` |
|
|
| Problem Statement | Establish pain point | `animate-stagger` |
|
|
| Solution Overview | Introduce solution | `animate-scale` |
|
|
| Feature Grid | Show capabilities (3-6 cards) | `animate-stagger` |
|
|
| Metrics Dashboard | Display KPIs (3-4 metrics) | `animate-stagger-scale` |
|
|
| Comparison Table | Compare options | `animate-fade-up` |
|
|
| Timeline Flow | Show progression | `animate-stagger` |
|
|
| Team Grid | Introduce people | `animate-stagger` |
|
|
| Quote Testimonial | Customer endorsement | `animate-fade-up` |
|
|
| Two Column Split | Compare/contrast | `animate-fade-up` |
|
|
| Big Number Hero | Single powerful metric | `animate-count` |
|
|
| Product Screenshot | Show product UI | `animate-scale` |
|
|
| Pricing Cards | Present tiers | `animate-stagger` |
|
|
| CTA Closing | Drive action | `animate-pulse` |
|
|
|
|
## CSS Structures
|
|
|
|
### Title Slide
|
|
```css
|
|
.slide-title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
```
|
|
|
|
### Two Column Split
|
|
```css
|
|
.slide-split {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 48px;
|
|
align-items: center;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.slide-split { grid-template-columns: 1fr; gap: 24px; }
|
|
}
|
|
```
|
|
|
|
### Feature Grid (3 columns)
|
|
```css
|
|
.slide-features {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.slide-features { grid-template-columns: repeat(2, 1fr); gap: 16px; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.slide-features { grid-template-columns: 1fr; }
|
|
}
|
|
```
|
|
|
|
### Metrics Dashboard (4 columns)
|
|
```css
|
|
.slide-metrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.slide-metrics { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.slide-metrics { grid-template-columns: 1fr; }
|
|
}
|
|
```
|
|
|
|
## Component Variants
|
|
|
|
### Card Styles
|
|
| Style | CSS Class | Use For |
|
|
|-------|-----------|---------|
|
|
| Icon Left | `.card-icon-left` | Features with icons |
|
|
| Accent Bar | `.card-accent-bar` | Highlighted features |
|
|
| Metric Card | `.card-metric` | Numbers/stats |
|
|
| Avatar Card | `.card-avatar` | Team members |
|
|
| Pricing Card | `.card-pricing` | Price tiers |
|
|
|
|
### Metric Styles
|
|
| Style | Effect |
|
|
|-------|--------|
|
|
| `gradient-number` | Gradient text on numbers |
|
|
| `oversized` | Extra large (120px+) |
|
|
| `sparkline` | Small inline chart |
|
|
| `funnel-numbers` | Conversion stages |
|
|
|
|
## Visual Treatments
|
|
|
|
| Treatment | When to Use |
|
|
|-----------|-------------|
|
|
| `gradient-glow` | Title slides, CTAs |
|
|
| `subtle-border` | Problem statements |
|
|
| `icon-top` | Feature grids |
|
|
| `screenshot-shadow` | Product screenshots |
|
|
| `popular-highlight` | Pricing (scale 1.05) |
|
|
| `bg-overlay` | Background images |
|
|
| `contrast-pair` | Before/after |
|
|
| `logo-grayscale` | Client logos |
|
|
|
|
## Search Commands
|
|
|
|
```bash
|
|
# Find layout for specific use
|
|
python ../design-system/scripts/search-slides.py "metrics dashboard" -d layout
|
|
|
|
# Contextual recommendation
|
|
python ../design-system/scripts/search-slides.py "traction slide" \
|
|
--context --position 4 --total 10
|
|
```
|
|
|
|
## Layout Decision Flow
|
|
|
|
```
|
|
1. What's the slide goal?
|
|
└─> Search layout-logic.csv
|
|
|
|
2. What emotion should it trigger?
|
|
└─> Search color-logic.csv
|
|
|
|
3. What's the content type?
|
|
└─> Search typography.csv
|
|
|
|
4. Should it break pattern?
|
|
└─> Check position (1/3, 2/3) → Use full-bleed
|
|
```
|