@jaimevalasek/aioson 1.6.0 → 1.7.2

package/template/.aioson/skills/static/multi-agent-patterns.md

@@ -0,0 +1,43 @@
+# Multi-Agent Patterns for MEDIUM Projects
+
+> Load when orchestrating a MEDIUM project with 3+ features or 5+ phases.
+
+## Pattern: Planner / Generator / Evaluator (PGE)
+
+### Roles
+
+| Role | AIOSON Agents | Responsibility |
+|------|--------------|----------------|
+| Planner | @product → @sheldon → @analyst → @architect | Produce spec pack: PRD + requirements + architecture + implementation plan |
+| Generator | @dev, @deyvin | Implement against the spec pack, one phase at a time |
+| Evaluator | @qa, @tester | Verify implementation against spec, report findings |
+
+### Feedback loops
+
+```
+Planner ──spec-pack──→ Generator ──code──→ Evaluator
+    ^                                          |
+    └──────── findings + drift report ─────────┘
+```
+
+When Evaluator finds issues:
+1. **Minor (Low/Medium findings):** Generator fixes in next phase
+2. **Major (Critical/High findings):** Generator stops, Evaluator reports to user
+3. **Spec drift detected:** Route back to Planner (@analyst or @sheldon) for spec update
+4. **Architecture issue:** Route to @architect for design revision
+
+### Session isolation
+
+Each role should run in a fresh context window:
+- Planner sessions: produce artifacts, then /clear
+- Generator sessions: read spec pack + implement, then /clear
+- Evaluator sessions: read code + spec + verify, then /clear
+
+Cross-role communication happens through artifacts on disk, not conversation history.
+
+### When NOT to use PGE
+
+- MICRO projects: skip Planner (except @product), go direct to Generator
+- SMALL projects: compressed PGE — Planner is 1-2 sessions, not 4
+- Bug fixes: Generator only, Evaluator optional
+- Exploration: not PGE at all — use @deyvin in pair mode

package/template/.aioson/skills/static/react-motion-patterns.md

@@ -575,3 +575,25 @@ Add to `app/layout.tsx`:
 - Tilt and 3D effects must be disabled on touch devices (`hover: none` media query)
 - Do not install Framer Motion just for one CSS animation — use plain CSS keyframes instead
 - Keep decorative elements (`orbs`, `mesh`, `marquee`) `aria-hidden="true"` and `pointer-events: none`
+
+## When CSS is not enough — Three.js (on-demand)
+
+The patterns above cover 95% of animation needs. When the user explicitly requests
+particle systems, WebGL scenes, holographic effects, or interactive 3D objects:
+
+Load `.aioson/skills/static/threejs-patterns.md` instead.
+
+**CSS 3D Transforms vs Three.js/WebGL:**
+
+| Technique | CSS 3D Transforms (above) | Three.js (threejs-patterns.md) |
+|---|---|---|
+| Card tilt | `perspective(700px) rotateY/X` | Not needed — CSS handles it |
+| Mesh background | `@keyframes meshDrift` on gradient | Particle aurora backdrop (3D points) |
+| Floating orbs | CSS with `border-radius: 50%` blur | Not needed — CSS is cleaner |
+| 3D object showcase | Not possible | TorusKnot/Icosahedron with OrbitControls |
+| Holographic effect | Not possible | MeshPhysicalMaterial with iridescence + bloom |
+| Scroll-driven 3D | Not possible | Camera moves through 3D scene on scroll |
+| Particle physics | Not possible | 3,000–8,000 points with drift behavior |
+
+Three.js is CDN-only (no npm install required) for all patterns in threejs-patterns.md.
+It is always additive — the design skill tokens (colors, typography, spacing) continue to govern the HTML/CSS layer.

package/template/.aioson/skills/static/static-html-patterns/checklists.md

@@ -0,0 +1,43 @@
+# Checklists — Section Map & Pre-delivery
+
+> Load when planning which sections to include or doing final QA before delivery.
+
+---
+
+## 12. Full Section Checklist (AI / SaaS Landing Page)
+
+For complete AI agency or SaaS landing pages, include these sections in order:
+
+| # | Section | Purpose |
+|---|---|---|
+| 1 | Header (sticky) | Logo + nav + CTA button |
+| 2 | Hero | Headline + sub + 2 CTAs + social proof |
+| 3 | Logos bar | "Trusted by" brand names |
+| 4 | Features grid | 3–6 cards with icon + title + description |
+| 5 | How it works | 3 numbered steps with image alternation |
+| 6 | Services | Cards with deeper service descriptions |
+| 7 | Stats / Numbers | Animated counters (clients, projects, uptime) |
+| 8 | Case studies | Portfolio cards with hover image reveal |
+| 9 | Testimonials | Swiper slider with quotes + avatars |
+| 10 | Pricing | 3-tier cards with "Most popular" badge |
+| 11 | FAQ | Accordion with open/close animation |
+| 12 | Final CTA | Single button, urgency, no distractions |
+| 13 | Footer | Dense: links + social + newsletter + copyright |
+
+**For MICRO landing pages (single page, simple product):** sections 1, 2, 4, 9, 12, 13.
+
+---
+
+## 13. Pre-delivery Checklist
+
+- [ ] Mobile menu opens/closes, body scroll locked when open
+- [ ] Sliders have correct breakpoints and accessible buttons
+- [ ] GSAP scroll animations work on mobile (use `start: 'top 85%'` for shorter viewports)
+- [ ] Hero image loads eagerly with `fetchpriority="high"`, all others `loading="lazy"`
+- [ ] No layout shift (CLS): img/video elements have explicit width+height
+- [ ] `prefers-reduced-motion: reduce` disables all animations
+- [ ] All interactive elements reachable by keyboard
+- [ ] Color contrast ≥ 4.5:1 checked
+- [ ] `<title>` and `<meta description>` are real content (not placeholders)
+- [ ] Open Graph meta tags present (`og:title`, `og:description`, `og:image`)
+- [ ] No placeholder text remains anywhere in the HTML