@event4u/agent-config 14.18.0 → 14.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.augment-plugin/marketplace.json +3 -3
- package/.augment-plugin/plugin.json +1 -1
- package/.claude-plugin/marketplace.json +1 -1
- package/CHANGELOG.md +169 -130
- package/README.md +71 -149
- package/dist/agent-src/README.md +1 -1
- package/dist/agent-src/commands/agent-handoff.md +2 -2
- package/dist/agent-src/commands/review/changes.md +19 -19
- package/dist/agent-src/commands/review.md +2 -2
- package/dist/agent-src/contexts/execution/host-capability-manifest.md +30 -3
- package/dist/agent-src/rules/autonomous-execution.md +1 -1
- package/dist/agent-src/rules/git-history-discipline.md +2 -2
- package/dist/agent-src/rules/guidelines.md +1 -1
- package/dist/agent-src/rules/session-canary.md +2 -2
- package/dist/agent-src/rules/token-efficiency.md +1 -1
- package/dist/agent-src/skills/adversarial-review/SKILL.md +0 -8
- package/dist/agent-src/skills/canvas-design/SKILL.md +1 -1
- package/dist/agent-src/skills/design-intelligence/SKILL.md +1 -1
- package/dist/agent-src/skills/design-intelligence/data/app-interface.csv +1 -1
- package/dist/agent-src/skills/design-intelligence/data/motion.csv +17 -17
- package/dist/agent-src/skills/design-intelligence/data/ux-guidelines.csv +2 -2
- package/dist/agent-src/skills/design-intelligence/references/context-and-registers.md +17 -0
- package/dist/agent-src/skills/design-intelligence/references/design-rules-checklist.md +4 -4
- package/dist/agent-src/skills/design-review/SKILL.md +1 -1
- package/dist/agent-src/skills/design-variations/SKILL.md +1 -1
- package/dist/agent-src/skills/existing-ui-audit/SKILL.md +1 -1
- package/dist/agent-src/skills/fe-design/SKILL.md +32 -5
- package/dist/agent-src/skills/fe-design/references/craft-floor.md +7 -0
- package/dist/agent-src/skills/fe-design/references/design-patterns.md +47 -2
- package/dist/agent-src/skills/laravel-scheduling/SKILL.md +3 -1
- package/dist/agent-src/skills/project-analyzer/SKILL.md +0 -6
- package/dist/agent-src/skills/react-native-setup/SKILL.md +3 -3
- package/dist/agent-src/skills/react-shadcn-ui/SKILL.md +1 -1
- package/dist/agent-src/skills/sequential-thinking/SKILL.md +18 -8
- package/dist/agent-src/skills/tailwind-engineer/SKILL.md +1 -1
- package/dist/agent-src/skills/ui-apply-generic/SKILL.md +1 -1
- package/dist/agent-src/skills/ui-component-architect/SKILL.md +1 -1
- package/dist/agent-src/skills/using-git-worktrees/SKILL.md +17 -2
- package/dist/agent-src/templates/agents/agent-project-settings.example.yml +1 -1
- package/dist/cli/commands/recordTriggerEval.js +2 -2
- package/dist/cli/main.js +1 -1
- package/dist/cli-delegate/{chunk-AKJGUQNO.js → chunk-GZTMRYCN.js} +405 -341
- package/dist/cli-delegate/{chunk-7RXIKF62.js → chunk-IDHUQIXP.js} +283 -132
- package/dist/cli-delegate/cmd_adr_effective.js +318 -81
- package/dist/cli-delegate/cmd_conformance.js +420 -16
- package/dist/cli-delegate/cmd_doctor.js +1 -1
- package/dist/cli-delegate/cmd_export.js +1 -1
- package/dist/cli-delegate/cmd_handoff.js +1 -1
- package/dist/cli-delegate/cmd_prune.js +1 -1
- package/dist/cli-delegate/cmd_route_audit.js +1 -1
- package/dist/cli-delegate/cmd_settings_migrate.js +1 -1
- package/dist/cli-delegate/cmd_sync.js +1 -1
- package/dist/cli-delegate/cmd_uninstall.js +1 -1
- package/dist/cli-delegate/cmd_validate.js +1 -1
- package/dist/discovery/deprecation-report.md +1 -1
- package/dist/discovery/discovery-manifest.json +28 -27
- package/dist/discovery/discovery-manifest.json.sha256 +1 -1
- package/dist/discovery/discovery-manifest.summary.md +1 -1
- package/dist/discovery/dormancy-report.md +1 -1
- package/dist/discovery/orphan-report.md +1 -1
- package/dist/discovery/packs.json +2 -2
- package/dist/discovery/trust-report.md +1 -1
- package/dist/discovery/workspaces.json +2 -2
- package/dist/hooks/dispatch.js +2132 -1462
- package/dist/install/install.mjs +588 -527
- package/dist/mcp/registry-manifest.json +1 -1
- package/dist/mcp/server.json +2 -2
- package/dist/mcp/server.mjs +1619 -1045
- package/dist/scripts/_lib/model_tier.js +1 -1
- package/docs/guidelines/agent-infra/evaluator-independence-mechanics.md +1 -1
- package/docs/guidelines/agent-infra/roadmap-progress-mechanics.md +1 -1
- package/docs/guidelines/design-antipatterns.md +87 -64
- package/package.json +1 -1
- package/src/agent-src/README.md +1 -1
- package/src/config/ci-local-parity.yml +6 -0
- package/src/config/gate-coverage.yml +170 -0
- package/src/config/gate-violation-baselines.json +3 -3
- package/src/config/release-gate-locality.yml +12 -0
- package/src/scripts/_cli/cmd_doctor.ts +2 -2
- package/src/scripts/_cli/cmd_handoff.ts +1 -1
- package/src/scripts/_cli/cmd_update.ts +1 -1
- package/src/scripts/_cli/cmd_versions.ts +1 -1
- package/src/scripts/_lib/adr_frontmatter.ts +44 -0
- package/src/scripts/_lib/consequence_objects.ts +152 -0
- package/src/scripts/_lib/exec_evidence.ts +7 -0
- package/src/scripts/_lib/global_deploy_inventory.ts +2 -2
- package/src/scripts/_lib/host_permission_checks.ts +251 -0
- package/src/scripts/_lib/model_tier.ts +1 -1
- package/src/scripts/_lib/obligation_frequency.ts +2 -2
- package/src/scripts/_lib/release_highlights.ts +93 -0
- package/src/scripts/_lib/release_material.ts +64 -1
- package/src/scripts/_lib/runtime_journal.ts +26 -3
- package/src/scripts/_lib/runtime_wiring_checks.ts +12 -1
- package/src/scripts/_lib/session_register.ts +11 -6
- package/src/scripts/_lib/sqlite_schema.ts +22 -0
- package/src/scripts/_lib/surface.ts +86 -0
- package/src/scripts/_lib/ui_authority.ts +116 -0
- package/src/scripts/adr/regenerate_index.ts +54 -1
- package/src/scripts/adr_cite_check.ts +71 -15
- package/src/scripts/ai_council/clients.ts +1 -1
- package/src/scripts/autonomy_friction_corpus.ts +229 -0
- package/src/scripts/build_proof.ts +15 -2
- package/src/scripts/check_beta_review_markers.ts +141 -17
- package/src/scripts/check_enforcement_coverage.ts +1 -1
- package/src/scripts/check_enforcement_denominator.ts +121 -11
- package/src/scripts/check_finding_dispositions.ts +66 -9
- package/src/scripts/check_gate_coverage.ts +96 -0
- package/src/scripts/check_release_highlights.ts +74 -1
- package/src/scripts/check_skill_activation_claim.ts +179 -0
- package/src/scripts/check_trigger_evals.ts +1 -1
- package/src/scripts/conformance_scan.ts +44 -3
- package/src/scripts/explain_run.ts +1 -1
- package/src/scripts/generate_capability_matrix.ts +1 -1
- package/src/scripts/git_authorization_hook.ts +75 -1
- package/src/scripts/hook_manifest.json +1 -1
- package/src/scripts/hook_manifest.yaml +14 -11
- package/src/scripts/hooks/augment-dispatcher.sh +1 -1
- package/src/scripts/hooks/category_a.ts +291 -0
- package/src/scripts/hooks/cline-dispatcher.sh +1 -1
- package/src/scripts/hooks/cursor-dispatcher.sh +11 -5
- package/src/scripts/hooks/dispatch_hook.ts +17 -22
- package/src/scripts/hooks/git_command_classifier.ts +156 -1
- package/src/scripts/hooks/host_lowering.ts +215 -0
- package/src/scripts/hooks/host_lowering.yaml +185 -0
- package/src/scripts/hooks/host_semantics.ts +105 -37
- package/src/scripts/hooks/journal_record_hook.ts +10 -0
- package/src/scripts/hooks/permission_gate.ts +117 -0
- package/src/scripts/hooks_status.ts +12 -10
- package/src/scripts/install.ts +53 -82
- package/src/scripts/install_anthropic_key.sh +2 -2
- package/src/scripts/lint_design_antipattern_parity.ts +80 -0
- package/src/scripts/lint_evidence_artifacts.ts +45 -1
- package/src/scripts/lint_hook_manifest.ts +87 -3
- package/src/scripts/lint_motion_authority_drift.ts +731 -0
- package/src/scripts/lint_readme_size.ts +158 -12
- package/src/scripts/lint_reasoning_fixtures.ts +216 -0
- package/src/scripts/lint_skill_trigger_contradiction.ts +161 -0
- package/src/scripts/measure_sibling_naming.ts +150 -0
- package/src/scripts/redact_hook_capture.ts +1 -1
- package/src/scripts/report_skill_activation.ts +319 -7
- package/src/scripts/schemas/review-findings.schema.json +5 -0
- package/src/scripts/schemas/skill.schema.json +2 -2
- package/src/scripts/session_canary_hook.ts +1 -1
- package/src/scripts/session_register_hook.ts +4 -3
- package/src/scripts/trigger_eval_grandfather.json +5 -1
- package/src/scripts/validate_agent_settings.ts +1 -1
|
@@ -142,14 +142,6 @@ logic, ≥ 3 explicit must/must-not constraints, stateful operations,
|
|
|
142
142
|
irreversibility} **and** estimated work ≥ ~1k tokens. Token length alone never
|
|
143
143
|
triggers it. See [`rdp-gate`](../../contexts/execution/rdp-gate.md) (L12).
|
|
144
144
|
|
|
145
|
-
## Auto-trigger keywords
|
|
146
|
-
|
|
147
|
-
- adversarial review
|
|
148
|
-
- self-review
|
|
149
|
-
- challenge plan
|
|
150
|
-
- review my approach
|
|
151
|
-
- sanity check
|
|
152
|
-
|
|
153
145
|
### Validate
|
|
154
146
|
|
|
155
147
|
- Confirm each identified risk has a concrete mitigation or explicit acceptance.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
model_tier: inherit
|
|
3
3
|
name: canvas-design
|
|
4
|
-
description: "
|
|
4
|
+
description: "Creating static visual art — posters, marketing visuals, brand assets, PDF/PNG design pieces — on 'design a poster' or 'mach uns ein Visual'. Grounded by design-intelligence."
|
|
5
5
|
domain: product
|
|
6
6
|
workspaces:
|
|
7
7
|
- small-business
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
model_tier: inherit
|
|
3
3
|
name: design-intelligence
|
|
4
|
-
description: "Grounded design brief from the
|
|
4
|
+
description: "Grounded design brief from the corpus — style, WCAG color tokens, typography, layout, anti-patterns. Use on ui-design-brief or any which-style/palette/font/chart call; feeds fe-design."
|
|
5
5
|
domain: engineering
|
|
6
6
|
personas:
|
|
7
7
|
- frontend-engineer
|
|
@@ -21,7 +21,7 @@ No,Category,Issue,Keywords,Platform,Description,Do,Don't,Code Example Good,Code
|
|
|
21
21
|
20,Performance,Virtualize Long Lists,FlatList SectionList virtualization,iOS/Android/React Native,Use FlatList/SectionList for lists over ~50 items,Use keyExtractor and initialNumToRender appropriately,Render hundreds of items with ScrollView,"<FlatList data={items} renderItem={...} />","<ScrollView>{items.map(renderItem)}</ScrollView>",High
|
|
22
22
|
21,Performance,Image Size & Cache,Image resize cache,iOS/Android/React Native,Use correctly sized and cached images,Use Image component with proper resizeMode and caching,Load full-resolution images everywhere,"<Image source={{uri}} resizeMode=""cover"" />","<Image source={require('4k.png')} /> // small avatar",Medium
|
|
23
23
|
22,Performance,Debounce High-Freq Events,debounce scroll search,iOS/Android/React Native,Debounce scroll/search callbacks to avoid jank,Wrap handlers with debounce/throttle,Run heavy logic on every event,"onScroll={debouncedHandleScroll}","onScroll={handleScrollHeavy}",Medium
|
|
24
|
-
23,Animation,Duration & Easing,animation duration easing,iOS/Android/React Native,Micro-interactions
|
|
24
|
+
23,Animation,Duration & Easing,animation duration easing,iOS/Android/React Native,"Micro-interactions follow the per-interaction bands in design-patterns.md § Motion, with native-like easing",Use ease-out for both enter and exit,Use long or linear animations for core UI,"Animated.timing(..., { duration: 200, easing: Easing.out(Easing.quad) })","Animated.timing(..., { duration: 800, easing: Easing.linear })",Medium
|
|
25
25
|
24,Animation,Respect Reduced Motion,reduced motion accessibility,iOS/Android/React Native,Respect OS reduced-motion accessibility setting,Check reduceMotionEnabled and simplify animations,Ignore user motion preferences,"if (reduceMotionEnabled) skipAnimation()","Always run complex parallax animations",Critical
|
|
26
26
|
25,Animation,Limited Continuous Motion,loop animation loader,iOS/Android/React Native,Reserve infinite animations for loaders and live data,Use looping only where necessary,Keep decorative elements looping forever,"Animated.loop(loaderAnim) for ActivityIndicator","Animated.loop(bounceAnim) on background icons",Medium
|
|
27
27
|
26,Typography,Base Font Size,fontScale dynamic type,iOS/Android/React Native,Body text must be readable and support Dynamic Type,Use platform fontScale and at least 14–16pt base,Render critical text below 12pt,"<Text style={{ fontSize: 16 }}>Body</Text>","<Text style={{ fontSize: 10 }}>Body</Text>",High
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
No,Category,Intensity Tier,Keywords,Trigger,Duration,Easing,GSAP Snippet,Framework Notes,Do,Don't,Performance Notes
|
|
2
|
-
1,Hover Micro-interaction,Subtle,"hover, button, opacity, lift, press feedback",hover,
|
|
3
|
-
2,Hover Micro-interaction,Standard,"hover, card, scale, tilt, cursor feedback",hover,200-300ms,power2.out,"gsap.to(el, { y: -4, scale: 1.02, boxShadow: '0 12px 24px rgba(0,0,0,0.12)', duration: 0.25, ease: 'power2.out' });","Use gsap.quickTo(el, 'y') for cards with many hover targets to avoid re-creating tweens every event",Pair with a matching mouseleave tween that reverses the same properties,Don't leave the hover state stuck if the pointer leaves fast; always attach the reverse tween,quickTo() avoids GC churn on lists with 20+ hoverable cards
|
|
4
|
-
3,Hover Micro-interaction,Complex,"hover, magnetic, cursor follow, 3d tilt",hover + mousemove,300-500ms,"elastic.out(1,0.4)","const xTo = gsap.quickTo(el, 'x', { duration: 0.4, ease: 'elastic.out(1,0.4)' }); const yTo = gsap.quickTo(el, 'y', { duration: 0.4, ease: 'elastic.out(1,0.4)' }); el.addEventListener('mousemove', (e) => { const r = el.getBoundingClientRect(); xTo((e.clientX - r.left - r.width/2) * 0.3); yTo((e.clientY - r.top - r.height/2) * 0.3); });",Debounce is not needed since quickTo interpolates; remove listeners on component unmount in React/Vue to avoid leaks,Clamp the pull strength (e.g. * 0.3) so the element never fully leaves its hit box,Don't apply magnetic effect to more than 1-2 focal elements per screen; it becomes noisy,Use will-change: transform on the target element for smoother compositing
|
|
5
|
-
4,Scroll Reveal,Subtle,"scroll, fade in, reveal, on view",scroll (viewport enter),300-400ms,power1.out,"gsap.from(el, { opacity: 0, y: 12, duration: 0.35, ease: 'power1.out', scrollTrigger: { trigger: el, start: 'top 90%', toggleActions: 'play none none reverse' } });",Requires the ScrollTrigger plugin registered once via gsap.registerPlugin(ScrollTrigger),"Keep the y offset small (8-16px) so it reads as a fade, not a slide",Don't reveal below-the-fold content needed for SEO/crawlers as invisible-by-default without a no-JS fallback,toggleActions 'play none none reverse' avoids re-triggering on every scroll direction change
|
|
6
|
-
5,Scroll Reveal,Standard,"scroll, slide up, staggered section, reveal",scroll (viewport enter),400-600ms,power2.out,"gsap.from(el.children, { opacity: 0, y: 24, duration: 0.5, stagger: 0.08, ease: 'power2.out', scrollTrigger: { trigger: el, start: 'top 85%' } });","In React use useGSAP(() => {...}, { scope: containerRef }) from @gsap/react to auto-cleanup on unmount",Scope the ScrollTrigger to the section container so it doesn't re-scan the whole page,Don't stagger more than ~8 children; beyond that the last items feel laggy,Set scroller/markers: false in production; markers is dev-only
|
|
7
|
-
6,Scroll Reveal,Complex,"scroll, pin, scrub, storytelling, scrollytelling",scroll (continuous scrub),tied to scroll position,none (scrub-driven),"gsap.timeline({ scrollTrigger: { trigger: section, start: 'top top', end: '+=150%', scrub: 1, pin: true } }).from('.headline', { opacity: 0, y: 40 }).to('.bg-layer', { yPercent: -20 }, '<');",Pinning needs the section to have deterministic height; recalc ScrollTrigger.refresh() after images/fonts load,Use scrub: true or a small number (0.5-1.5) instead of instant jumps so it feels tied to the scrollbar,Don't pin more than 1-2 sections per page; excessive pinning fights native scroll feel and hurts mobile UX,"Pinning forces layout reflow; test on mid-tier mobile devices, not just desktop"
|
|
8
|
-
7,Stagger List,Subtle,"list, stagger, cards, grid entrance",load or scroll,250-350ms,power1.out,"gsap.from('.list-item', { opacity: 0, y: 8, duration: 0.3, stagger: 0.03 });",Select items with a stable class/data-attribute (not array index) so re-renders in React don't break targeting,Keep per-item stagger delay small (0.02-0.04s) for lists longer than 10 items,Don't stagger by more than 0.1s per item on long lists; total reveal time becomes sluggish,"For virtualized lists, only animate items currently mounted in the DOM"
|
|
9
|
-
8,Stagger List,Standard,"grid, bento, cards, staggered scale",load or scroll,300-450ms,back.out(1.4),"gsap.from('.grid-item', { opacity: 0, scale: 0.92, y: 16, duration: 0.4, stagger: { each: 0.06, from: 'start', grid: 'auto' }, ease: 'back.out(1.4)' });",grid: 'auto' lets GSAP infer rows/columns from a CSS grid layout for a natural wave stagger,Combine with from: 'center' for a bento-grid layout to draw the eye inward first,Don't use back.out on dense data tables; the overshoot reads as sloppy on informational UI,Group DOM writes; avoid interleaving layout reads (getBoundingClientRect) between staggered tweens
|
|
10
|
-
9,Stagger List,Complex,"stagger, wave, text reveal, split text",load or scroll,400-700ms,expo.out,"const split = new SplitText(headline, { type: 'chars' }); gsap.from(split.chars, { opacity: 0, y: 20, rotateX: -40, duration: 0.6, stagger: 0.015, ease: 'expo.out' });",SplitText is a GSAP Club/paid plugin; confirm license before shipping and provide a plain fade fallback if unavailable,Revert SplitText on unmount/cleanup (split.revert()) to restore original text nodes for accessibility tools,Don't split-animate long paragraphs; reserve for short headlines (under ~8 words),Splitting text creates one element per character; keep it to headline-length copy only for DOM size
|
|
11
|
-
10,Page Transition,Subtle,"route change, fade, page transition",route change,200-300ms,power1.inOut,"gsap.to(main, { opacity: 0, duration: 0.2, onComplete: () => { navigate(); gsap.fromTo(main, { opacity: 0 }, { opacity: 1, duration: 0.2 }); } });","Pair with the router's transition hooks (Next.js App Router transitions, React Router's useNavigate, Vue Router's beforeEach/afterEach)",Preload the destination route's critical assets before the exit tween finishes,Don't block navigation on animation; cap exit duration at ~250ms so the app never feels unresponsive,Exit animation should always resolve faster than entrance (asymmetric timing) so back/forward feels snappy
|
|
12
|
-
11,Page Transition,Standard,"route change, slide, overlay wipe",route change,
|
|
13
|
-
12,Page Transition,Complex,"shared element, morph, hero transition",route change,
|
|
14
|
-
13,Parallax Scroll,Subtle,"parallax, background, depth, scroll speed",scroll (continuous),tied to scroll position,linear (scrub),"gsap.to('.bg-layer', { yPercent: 10, ease: 'none', scrollTrigger: { trigger: section, scrub: true } });","Apply parallax to background/decorative layers only, never to text or interactive controls",Keep the yPercent delta small (5-15) so foreground and background never desync distractingly,Don't parallax body copy; it hurts reading comfort and can trigger motion sickness,will-change: transform on the parallax layer only; remove it after scroll settles to free GPU memory
|
|
15
|
-
14,Parallax Scroll,Standard,"multi-layer parallax, depth, hero background",scroll (continuous),tied to scroll position,linear (scrub),"gsap.utils.toArray('.parallax-layer').forEach((layer, i) => { gsap.to(layer, { yPercent: (i + 1) * -8, ease: 'none', scrollTrigger: { trigger: layer.parentElement, scrub: 0.5 } }); });",Layer count beyond 3-4 has diminishing visual return and multiplies scroll-listener cost,"Vary speed per layer (background slowest, foreground fastest) to sell the depth illusion",Don't let parallax layers overflow their container; clip with overflow: hidden on the wrapper,Batch all layers under one ScrollTrigger container where possible instead of one per layer
|
|
16
|
-
15,Loading / Skeleton,Subtle,"loading, skeleton, shimmer, pulse",on mount / async wait,1200-1600ms loop,sine.inOut,"gsap.to('.skeleton', { backgroundPosition: '200% 0', duration: 1.4, ease: 'sine.inOut', repeat: -1 });",Kill the loop tween (tween.kill()) as soon as real content mounts to avoid orphaned repeating animations,Use a CSS gradient background-position sweep rather than opacity pulsing; reads as 'loading' more clearly,Don't run more than one shimmer loop per skeleton group; sync them under one timeline so the wave reads as a single unit,repeat: -1 tweens are cheap but must be explicitly killed on unmount or they leak in SPA route changes
|
|
17
|
-
16,Loading / Skeleton,Standard,"progress, spinner, morphing loader",on mount / async wait,800-1200ms loop,power1.inOut,"gsap.timeline({ repeat: -1 }).to('.loader-dot', { y: -8, duration: 0.4, stagger: { each: 0.15, yoyo: true, repeat: 1 } });",Wrap the whole loop timeline in useGSAP with { revertOnUpdate: false } in React so it isn't rebuilt every render,Cap total loop duration under ~1.5s so long waits don't feel like the UI froze on a single beat,Don't use elaborate loaders for sub-300ms waits; they flash and feel worse than no indicator,Pause the timeline (tl.pause()) when the loading tab/view is not visible to save CPU on background tabs
|
|
1
|
+
No,Category,Intensity Tier,Keywords,Trigger,Duration,Easing,GSAP Snippet,Framework Notes,Do,Don't,Performance Notes,Override Condition
|
|
2
|
+
1,Hover Micro-interaction,Subtle,"hover, button, opacity, lift, press feedback",hover,100-160ms,power1.out,"gsap.to(el, { y: -1, opacity: 0.9, duration: 0.15, ease: 'power1.out' });",Bind on mouseenter/mouseleave; in React wrap in a ref + useEffect (or onMouseEnter/onMouseLeave props directly calling gsap.to),Keep displacement under 2px so it reads as feedback not motion,Don't animate layout-affecting props (width/height/margin) on hover,Runs on transform/opacity only so it stays on the compositor thread,
|
|
3
|
+
2,Hover Micro-interaction,Standard,"hover, card, scale, tilt, cursor feedback",hover,200-300ms,power2.out,"gsap.to(el, { y: -4, scale: 1.02, boxShadow: '0 12px 24px rgba(0,0,0,0.12)', duration: 0.25, ease: 'power2.out' });","Use gsap.quickTo(el, 'y') for cards with many hover targets to avoid re-creating tweens every event",Pair with a matching mouseleave tween that reverses the same properties,Don't leave the hover state stuck if the pointer leaves fast; always attach the reverse tween,quickTo() avoids GC churn on lists with 20+ hoverable cards,
|
|
4
|
+
3,Hover Micro-interaction,Complex,"hover, magnetic, cursor follow, 3d tilt",hover + mousemove,300-500ms,"elastic.out(1,0.4)","const xTo = gsap.quickTo(el, 'x', { duration: 0.4, ease: 'elastic.out(1,0.4)' }); const yTo = gsap.quickTo(el, 'y', { duration: 0.4, ease: 'elastic.out(1,0.4)' }); el.addEventListener('mousemove', (e) => { const r = el.getBoundingClientRect(); xTo((e.clientX - r.left - r.width/2) * 0.3); yTo((e.clientY - r.top - r.height/2) * 0.3); });",Debounce is not needed since quickTo interpolates; remove listeners on component unmount in React/Vue to avoid leaks,Clamp the pull strength (e.g. * 0.3) so the element never fully leaves its hit box,Don't apply magnetic effect to more than 1-2 focal elements per screen; it becomes noisy,Use will-change: transform on the target element for smoother compositing,"M1 override — declared playful register: the magnetic pull is the affordance itself, not decoration on a state change"
|
|
5
|
+
4,Scroll Reveal,Subtle,"scroll, fade in, reveal, on view",scroll (viewport enter),300-400ms,power1.out,"gsap.from(el, { opacity: 0, y: 12, duration: 0.35, ease: 'power1.out', scrollTrigger: { trigger: el, start: 'top 90%', toggleActions: 'play none none reverse' } });",Requires the ScrollTrigger plugin registered once via gsap.registerPlugin(ScrollTrigger),"Keep the y offset small (8-16px) so it reads as a fade, not a slide",Don't reveal below-the-fold content needed for SEO/crawlers as invisible-by-default without a no-JS fallback,toggleActions 'play none none reverse' avoids re-triggering on every scroll direction change,
|
|
6
|
+
5,Scroll Reveal,Standard,"scroll, slide up, staggered section, reveal",scroll (viewport enter),400-600ms,power2.out,"gsap.from(el.children, { opacity: 0, y: 24, duration: 0.5, stagger: 0.08, ease: 'power2.out', scrollTrigger: { trigger: el, start: 'top 85%' } });","In React use useGSAP(() => {...}, { scope: containerRef }) from @gsap/react to auto-cleanup on unmount",Scope the ScrollTrigger to the section container so it doesn't re-scan the whole page,Don't stagger more than ~8 children; beyond that the last items feel laggy,Set scroller/markers: false in production; markers is dev-only,
|
|
7
|
+
6,Scroll Reveal,Complex,"scroll, pin, scrub, storytelling, scrollytelling",scroll (continuous scrub),tied to scroll position,none (scrub-driven),"gsap.timeline({ scrollTrigger: { trigger: section, start: 'top top', end: '+=150%', scrub: 1, pin: true } }).from('.headline', { opacity: 0, y: 40 }).to('.bg-layer', { yPercent: -20 }, '<');",Pinning needs the section to have deterministic height; recalc ScrollTrigger.refresh() after images/fonts load,Use scrub: true or a small number (0.5-1.5) instead of instant jumps so it feels tied to the scrollbar,Don't pin more than 1-2 sections per page; excessive pinning fights native scroll feel and hurts mobile UX,"Pinning forces layout reflow; test on mid-tier mobile devices, not just desktop",
|
|
8
|
+
7,Stagger List,Subtle,"list, stagger, cards, grid entrance",load or scroll,250-350ms,power1.out,"gsap.from('.list-item', { opacity: 0, y: 8, duration: 0.3, stagger: 0.03 });",Select items with a stable class/data-attribute (not array index) so re-renders in React don't break targeting,Keep per-item stagger delay small (0.02-0.04s) for lists longer than 10 items,Don't stagger by more than 0.1s per item on long lists; total reveal time becomes sluggish,"For virtualized lists, only animate items currently mounted in the DOM",
|
|
9
|
+
8,Stagger List,Standard,"grid, bento, cards, staggered scale",load or scroll,300-450ms,back.out(1.4),"gsap.from('.grid-item', { opacity: 0, scale: 0.92, y: 16, duration: 0.4, stagger: { each: 0.06, from: 'start', grid: 'auto' }, ease: 'back.out(1.4)' });",grid: 'auto' lets GSAP infer rows/columns from a CSS grid layout for a natural wave stagger,Combine with from: 'center' for a bento-grid layout to draw the eye inward first,Don't use back.out on dense data tables; the overshoot reads as sloppy on informational UI,Group DOM writes; avoid interleaving layout reads (getBoundingClientRect) between staggered tweens,"M1 override — declared playful register: the overshoot is the bento-grid entrance affordance; refused on data tables, per this row's Don't"
|
|
10
|
+
9,Stagger List,Complex,"stagger, wave, text reveal, split text",load or scroll,400-700ms,expo.out,"const split = new SplitText(headline, { type: 'chars' }); gsap.from(split.chars, { opacity: 0, y: 20, rotateX: -40, duration: 0.6, stagger: 0.015, ease: 'expo.out' });",SplitText is a GSAP Club/paid plugin; confirm license before shipping and provide a plain fade fallback if unavailable,Revert SplitText on unmount/cleanup (split.revert()) to restore original text nodes for accessibility tools,Don't split-animate long paragraphs; reserve for short headlines (under ~8 words),Splitting text creates one element per character; keep it to headline-length copy only for DOM size,
|
|
11
|
+
10,Page Transition,Subtle,"route change, fade, page transition",route change,200-300ms,power1.inOut,"gsap.to(main, { opacity: 0, duration: 0.2, onComplete: () => { navigate(); gsap.fromTo(main, { opacity: 0 }, { opacity: 1, duration: 0.2 }); } });","Pair with the router's transition hooks (Next.js App Router transitions, React Router's useNavigate, Vue Router's beforeEach/afterEach)",Preload the destination route's critical assets before the exit tween finishes,Don't block navigation on animation; cap exit duration at ~250ms so the app never feels unresponsive,Exit animation should always resolve faster than entrance (asymmetric timing) so back/forward feels snappy,
|
|
12
|
+
11,Page Transition,Standard,"route change, slide, overlay wipe",route change,300-500ms,power2.inOut,"const tl = gsap.timeline(); tl.to('.transition-overlay', { yPercent: 0, duration: 0.4, ease: 'power2.inOut' }).call(navigate).to('.transition-overlay', { yPercent: -100, duration: 0.4, ease: 'power2.inOut', delay: 0.1 });",Keep the overlay element mounted at the layout root (outside the page component) so it survives the route swap,Show a lightweight loading indicator if the destination route's data fetch outlasts the overlay,Don't tie the overlay's reveal directly to data-fetch completion without a max-wait timeout; a slow API stalls the whole transition,Prefer CSS transform (yPercent) over top/left to keep the overlay animation on the compositor thread,
|
|
13
|
+
12,Page Transition,Complex,"shared element, morph, hero transition",route change,300-500ms,expo.inOut,"const state = Flip.getState('.hero-image'); navigate(); Flip.from(state, { duration: 0.45, ease: 'expo.inOut', absolute: true, zIndex: 100 });",Requires the GSAP Flip plugin; the 'from' and 'to' route must render the same element with a shared data-flip-id,Verify the shared element exists in both DOM states before calling Flip.from to avoid a silent no-op,Don't use shared-element transitions across more than one element pair per navigation; compounding Flips are hard to time correctly,Flip recalculates layout (FLIP technique) so test on low-end devices for jank,
|
|
14
|
+
13,Parallax Scroll,Subtle,"parallax, background, depth, scroll speed",scroll (continuous),tied to scroll position,linear (scrub),"gsap.to('.bg-layer', { yPercent: 10, ease: 'none', scrollTrigger: { trigger: section, scrub: true } });","Apply parallax to background/decorative layers only, never to text or interactive controls",Keep the yPercent delta small (5-15) so foreground and background never desync distractingly,Don't parallax body copy; it hurts reading comfort and can trigger motion sickness,will-change: transform on the parallax layer only; remove it after scroll settles to free GPU memory,
|
|
15
|
+
14,Parallax Scroll,Standard,"multi-layer parallax, depth, hero background",scroll (continuous),tied to scroll position,linear (scrub),"gsap.utils.toArray('.parallax-layer').forEach((layer, i) => { gsap.to(layer, { yPercent: (i + 1) * -8, ease: 'none', scrollTrigger: { trigger: layer.parentElement, scrub: 0.5 } }); });",Layer count beyond 3-4 has diminishing visual return and multiplies scroll-listener cost,"Vary speed per layer (background slowest, foreground fastest) to sell the depth illusion",Don't let parallax layers overflow their container; clip with overflow: hidden on the wrapper,Batch all layers under one ScrollTrigger container where possible instead of one per layer,
|
|
16
|
+
15,Loading / Skeleton,Subtle,"loading, skeleton, shimmer, pulse",on mount / async wait,1200-1600ms loop,sine.inOut,"gsap.to('.skeleton', { backgroundPosition: '200% 0', duration: 1.4, ease: 'sine.inOut', repeat: -1 });",Kill the loop tween (tween.kill()) as soon as real content mounts to avoid orphaned repeating animations,Use a CSS gradient background-position sweep rather than opacity pulsing; reads as 'loading' more clearly,Don't run more than one shimmer loop per skeleton group; sync them under one timeline so the wave reads as a single unit,repeat: -1 tweens are cheap but must be explicitly killed on unmount or they leak in SPA route changes,
|
|
17
|
+
16,Loading / Skeleton,Standard,"progress, spinner, morphing loader",on mount / async wait,800-1200ms loop,power1.inOut,"gsap.timeline({ repeat: -1 }).to('.loader-dot', { y: -8, duration: 0.4, stagger: { each: 0.15, yoyo: true, repeat: 1 } });",Wrap the whole loop timeline in useGSAP with { revertOnUpdate: false } in React so it isn't rebuilt every render,Cap total loop duration under ~1.5s so long waits don't feel like the UI froze on a single beat,Don't use elaborate loaders for sub-300ms waits; they flash and feel worse than no indicator,Pause the timeline (tl.pause()) when the loading tab/view is not visible to save CPU on background tabs,
|
|
@@ -6,13 +6,13 @@ No,Category,Issue,Platform,Description,Do,Don't,Code Example Good,Code Example B
|
|
|
6
6
|
5,Navigation,Deep Linking,All,URLs should reflect current state for sharing,Update URL on state/view changes,Static URLs for dynamic content,Use query params or hash,Single URL for all states,Medium
|
|
7
7
|
6,Navigation,Breadcrumbs,Web,Show user location in site hierarchy,Use for sites with 3+ levels of depth,Use for flat single-level sites,Home > Category > Product,Only on deep nested pages,Low
|
|
8
8
|
7,Animation,Excessive Motion,All,Too many animations cause distraction and motion sickness,Animate 1-2 key elements per view maximum,Animate everything that moves,Single hero animation,animate-bounce on 5+ elements,High
|
|
9
|
-
8,Animation,Duration Timing,All,Animations should feel responsive not sluggish,Use
|
|
9
|
+
8,Animation,Duration Timing,All,Animations should feel responsive not sluggish,Use the per-interaction bands in design-patterns.md § Motion,Use animations longer than 500ms for UI,transition-colors duration-200,transition-all duration-1000,Medium
|
|
10
10
|
9,Animation,Reduced Motion,All,Respect user's motion preferences,Check prefers-reduced-motion media query,Ignore accessibility motion settings,@media (prefers-reduced-motion: reduce),No motion query check,High
|
|
11
11
|
10,Animation,Loading States,All,Show feedback during async operations,Use skeleton screens or spinners,Leave UI frozen with no feedback,animate-pulse skeleton,Blank screen while loading,High
|
|
12
12
|
11,Animation,Hover vs Tap,All,Hover effects don't work on touch devices,Use click/tap for primary interactions,Rely only on hover for important actions,onClick handler,onMouseEnter only,High
|
|
13
13
|
12,Animation,Continuous Animation,All,Infinite animations are distracting,Use for loading indicators only,Use for decorative elements,animate-spin on loader,animate-bounce on icons,Medium
|
|
14
14
|
13,Animation,Transform Performance,Web,Some CSS properties trigger expensive repaints,Use transform and opacity for animations,Animate width/height/top/left properties,transform: translateY(),top: 10px animation,Medium
|
|
15
|
-
14,Animation,Easing Functions,All,Linear motion feels robotic,Use ease-out
|
|
15
|
+
14,Animation,Easing Functions,All,Linear motion feels robotic,Use ease-out in both directions entering and exiting,Use linear for UI transitions,ease-out,linear,Low
|
|
16
16
|
15,Layout,Z-Index Management,Web,Stacking context conflicts cause hidden elements,Define z-index scale system (10 20 30 50),Use arbitrary large z-index values,z-10 z-20 z-50,z-[9999],High
|
|
17
17
|
16,Layout,Overflow Hidden,Web,Hidden overflow can clip important content,Test all content fits within containers,Blindly apply overflow-hidden,overflow-auto with scroll,overflow-hidden truncating content,Medium
|
|
18
18
|
17,Layout,Fixed Positioning,Web,Fixed elements can overlap or be inaccessible,Account for safe areas and other fixed elements,Stack multiple fixed elements carelessly,Fixed nav + fixed bottom with gap,Multiple overlapping fixed elements,Medium
|
|
@@ -78,6 +78,23 @@ config, not a vibe — never re-infer when `DESIGN.md` already sets them
|
|
|
78
78
|
| default / unstated | 5–6 | 3–4 | 4–5 |
|
|
79
79
|
| data-dense / dashboard / admin / cockpit | 4–6 | 2–3 | 7–9 |
|
|
80
80
|
| bold / playful / expressive / awards / Dribbble | 8–10 | 7–10 | 3–5 |
|
|
81
|
+
| **DISQUALIFIER** — brief `frequency: high` or `initiation: keyboard` | — | **cap 3** | — |
|
|
82
|
+
|
|
83
|
+
The Motion row is the one dial with a **disqualifier**, and it outranks the
|
|
84
|
+
brief signal above it rather than averaging with it. The two brief fields it
|
|
85
|
+
reads are `frequency` and `initiation` ([`fe-design`](../../fe-design/SKILL.md)
|
|
86
|
+
§ The loop, step 2): a surface used 100-plus times a day, or reached by
|
|
87
|
+
keyboard, does not get a high Motion dial however expressive the rest of the
|
|
88
|
+
brief reads. A keyboard-initiated surface is reached by someone who already
|
|
89
|
+
knows where they are going, so the animation is latency they pay on every
|
|
90
|
+
invocation — the decision tree in
|
|
91
|
+
[`design-patterns.md`](../../fe-design/references/design-patterns.md) § Motion
|
|
92
|
+
answers "should this animate at all" with *no* for exactly this case, and a
|
|
93
|
+
dial that could still reach 9 would contradict it.
|
|
94
|
+
|
|
95
|
+
A `bold / playful` brief on a command palette therefore resolves to `V 8–10 ·
|
|
96
|
+
M ≤ 3 · D 3–5`, and the cap is stated in the Design Read line so the user can
|
|
97
|
+
see it fired rather than wondering why the motion is flat.
|
|
81
98
|
|
|
82
99
|
**Dial → downstream levers** (how a dial value changes generation):
|
|
83
100
|
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
| 4 | Style Selection | HIGH | `style`, `product` | Match product type, Consistency, SVG icons (no emoji) | Mixing flat & skeuomorphic randomly, Emoji as icons |
|
|
26
26
|
| 5 | Layout & Responsive | HIGH | `ux` | Mobile-first breakpoints, Viewport meta, No horizontal scroll | Horizontal scroll, Fixed px container widths, Disable zoom |
|
|
27
27
|
| 6 | Typography & Color | MEDIUM | `typography`, `color` | Base 16px, Line-height 1.5, Semantic color tokens | Text < 12px body, Gray-on-gray, Raw hex in components |
|
|
28
|
-
| 7 | Animation | MEDIUM | `ux` | Duration
|
|
28
|
+
| 7 | Animation | MEDIUM | `ux` | Duration within the authority's per-interaction bands, Motion conveys meaning, Spatial continuity | Decorative-only animation, Animating width/height, No reduced-motion |
|
|
29
29
|
| 8 | Forms & Feedback | MEDIUM | `ux` | Visible labels, Error near field, Helper text, Progressive disclosure | Placeholder-only label, Errors only at top, Overwhelm upfront |
|
|
30
30
|
| 9 | Navigation Patterns | HIGH | `ux` | Predictable back, Bottom nav ≤5, Deep linking | Overloaded nav, Broken back behavior, No deep links |
|
|
31
31
|
| 10 | Charts & Data | LOW | `chart` | Legends, Tooltips, Accessible colors | Relying on color alone to convey meaning |
|
|
@@ -146,16 +146,16 @@
|
|
|
146
146
|
|
|
147
147
|
### 7. Animation (MEDIUM)
|
|
148
148
|
|
|
149
|
-
- `duration-timing` - Use
|
|
149
|
+
- `duration-timing` - Use the per-interaction bands in `design-patterns.md` § Motion; never above 500ms (MD)
|
|
150
150
|
- `transform-performance` - Use transform/opacity only; avoid animating width/height/top/left
|
|
151
151
|
- `loading-states` - Show skeleton or progress indicator when loading exceeds 300ms
|
|
152
152
|
- `excessive-motion` - Animate 1-2 key elements per view max
|
|
153
|
-
- `easing` - Use ease-out
|
|
153
|
+
- `easing` - Use ease-out in both directions, entering and exiting; avoid linear for UI transitions
|
|
154
154
|
- `motion-meaning` - Every animation must express a cause-effect relationship, not just be decorative (Apple HIG)
|
|
155
155
|
- `state-transition` - State changes (hover / active / expanded / collapsed / modal) should animate smoothly, not snap
|
|
156
156
|
- `continuity` - Page/screen transitions should maintain spatial continuity (shared element, directional slide) (Apple HIG)
|
|
157
157
|
- `parallax-subtle` - Use parallax sparingly; must respect reduced-motion and not cause disorientation (Apple HIG)
|
|
158
|
-
- `spring-physics` - Prefer spring
|
|
158
|
+
- `spring-physics` - Prefer critically damped spring curves (no overshoot) over linear for natural feel (Apple HIG fluid animations)
|
|
159
159
|
- `exit-faster-than-enter` - Exit animations shorter than enter (~60–70% of enter duration) to feel responsive (MD motion)
|
|
160
160
|
- `stagger-sequence` - Stagger list/grid item entrance by 30–50ms per item; avoid all-at-once or too-slow reveals (MD)
|
|
161
161
|
- `shared-element-transition` - Use shared element / hero transitions for visual continuity between screens (MD, HIG)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
model_tier: high
|
|
3
3
|
name: design-review
|
|
4
|
-
description: "When the user says \"review the design\", \"check the UI\", or wants a comprehensive UI/UX review.
|
|
4
|
+
description: "When the user says \"review the design\", \"check the UI\", or wants a comprehensive UI/UX review. 7 phases: interaction, responsiveness, accessibility. Inventory via existing-ui-audit."
|
|
5
5
|
domain: quality
|
|
6
6
|
enforced_by:
|
|
7
7
|
- "instruction-only: the Phase 4 sweep claims WCAG 2.1 AA and its criteria table is a deliberate SUBSET — depth is delegated to accessibility-auditor, which claims 2.2 AA and carries the resolver. No resolver checks this table against 2.1, so the claim is model-carried and the gap is recorded rather than implied."
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
model_tier: inherit
|
|
3
3
|
name: design-variations
|
|
4
|
-
description: "Produce 3+
|
|
4
|
+
description: "Produce 3+ distinct hi-fi design variations — basic to bold, one file with tweak controls — when the user asks for options, alternatives, \"show me a few takes\". Extends fe-design."
|
|
5
5
|
domain: product
|
|
6
6
|
personas: []
|
|
7
7
|
workspaces:
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
model_tier: high
|
|
3
3
|
name: existing-ui-audit
|
|
4
|
-
description: "Use BEFORE writing or editing any non-trivial UI — inventories components, design tokens, shadcn primitives, and reusable patterns into state.ui_audit. Hard gate for
|
|
4
|
+
description: "Use BEFORE writing or editing any non-trivial UI — inventories components, design tokens, shadcn primitives, and reusable patterns into state.ui_audit. Hard gate for fe-design."
|
|
5
5
|
personas:
|
|
6
6
|
- frontend-engineer
|
|
7
7
|
domain: discovery
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
model_tier: medium
|
|
3
3
|
name: fe-design
|
|
4
|
-
description: "Frontend design heuristics
|
|
4
|
+
description: "Frontend design heuristics and the loop applying them: existing-ui-audit, brief, inventory, build, review. Use when building or changing any UI, not only when planning one."
|
|
5
5
|
personas:
|
|
6
6
|
- frontend-engineer
|
|
7
7
|
domain: engineering
|
|
@@ -46,10 +46,37 @@ else runs the loop.
|
|
|
46
46
|
1. **Audit first** — run [`existing-ui-audit`](../existing-ui-audit/SKILL.md).
|
|
47
47
|
What already exists (components, tokens, layout conventions) outranks every
|
|
48
48
|
heuristic below. Reinventing an existing component is the #1 failure mode.
|
|
49
|
-
2. **Brief** —
|
|
50
|
-
`layout`, `components`, `states`, `microcopy`,
|
|
51
|
-
five of `empty`, `loading`, `error`, `success`,
|
|
52
|
-
one is unfinished, not concise.
|
|
49
|
+
2. **Brief** — seven keys before any code. Five are the ones the engine gates
|
|
50
|
+
(`REQUIRED_BRIEF_KEYS`): `layout`, `components`, `states`, `microcopy`,
|
|
51
|
+
`a11y`. `states` means all five of `empty`, `loading`, `error`, `success`,
|
|
52
|
+
`disabled` — a brief missing one is unfinished, not concise.
|
|
53
|
+
|
|
54
|
+
Two more are **declared, not gated**: `frequency` and `initiation`. The
|
|
55
|
+
engine does not halt on them, and that is stated rather than left to be
|
|
56
|
+
discovered — adding a required key would halt every brief already written
|
|
57
|
+
against the five.
|
|
58
|
+
|
|
59
|
+
| Key | Values | Why it is declared and never inferred |
|
|
60
|
+
|---|---|---|
|
|
61
|
+
| `frequency` | `one-time` · `low` · `medium` · `high` (100+ per day) | How often a surface is used decides whether motion on it reads as polish or as a toll. Nothing in a diff reveals it. |
|
|
62
|
+
| `initiation` | `keyboard` · `pointer` · `system` | A keyboard-initiated surface is reached by someone who already knows where they are going; an animation there is pure latency. |
|
|
63
|
+
|
|
64
|
+
Both are prefilled from the surface's role and overridden only on evidence.
|
|
65
|
+
There is no resolver and no inference from handlers: a `mousemove` listener
|
|
66
|
+
is not proof of pointer initiation, and a keyboard shortcut in the code is
|
|
67
|
+
not proof anyone uses it.
|
|
68
|
+
|
|
69
|
+
| Surface role | `frequency` | `initiation` |
|
|
70
|
+
|---|---|---|
|
|
71
|
+
| Command palette | `high` | `keyboard` |
|
|
72
|
+
| Tooltip | `high` | `pointer` |
|
|
73
|
+
| Modal / sheet | `medium` | `pointer` |
|
|
74
|
+
| Onboarding flow | `one-time` | `pointer` |
|
|
75
|
+
| Toast / notification | `medium` | `system` |
|
|
76
|
+
| Table row action | `high` | `pointer` |
|
|
77
|
+
|
|
78
|
+
The default for a role not listed is `medium` / `pointer`, stated in the
|
|
79
|
+
brief as a default rather than left blank.
|
|
53
80
|
3. **Inventory — only when an artifact was provided, and before you build.**
|
|
54
81
|
List the artifact's **interactions, keyframes, and script includes** from its
|
|
55
82
|
source (`design-fidelity-mechanics` § Data-basis ladder — read it, do not
|
|
@@ -43,6 +43,13 @@ the moment the floor has to be present. Same content, later delivery.
|
|
|
43
43
|
An undeclared pick is an undeclared choice (T7).
|
|
44
44
|
12. **Zero silent drops.** A mechanic present in a supplied source and absent
|
|
45
45
|
from the output, with no `flagged` entry, is a silent drop.
|
|
46
|
+
13. **Shipped motion carries a `feel` line naming its method.** Duration and
|
|
47
|
+
easing being inside the bands in
|
|
48
|
+
[`design-patterns.md`](design-patterns.md) § Motion is a static check, and
|
|
49
|
+
motion that passes it can still be wrong to watch. The line names one of
|
|
50
|
+
`slow-motion` · `frame-step` · `device` · `next-day` and its outcome; an
|
|
51
|
+
outcome of `unbacked` is legal, an absent method is not
|
|
52
|
+
(`docs/contracts/evidence-artifact-types.md` § `feel`).
|
|
46
53
|
|
|
47
54
|
## What is NOT on this page
|
|
48
55
|
|
|
@@ -152,6 +152,16 @@ Step indicator (1 — 2 — 3)
|
|
|
152
152
|
|
|
153
153
|
## Motion — decision-tree and rationale
|
|
154
154
|
|
|
155
|
+
This section is the **sole carrier** of motion duration bands, easing choice and
|
|
156
|
+
the bounce prohibition; the five files that restate any of them are bound to the
|
|
157
|
+
values below and are checked against them by
|
|
158
|
+
`src/scripts/lint_motion_authority_drift.ts`:
|
|
159
|
+
`src/skills/design-intelligence/references/design-rules-checklist.md`,
|
|
160
|
+
`src/skills/design-intelligence/data/ux-guidelines.csv`,
|
|
161
|
+
`src/skills/design-intelligence/data/app-interface.csv`,
|
|
162
|
+
`src/skills/design-intelligence/data/styles.csv`,
|
|
163
|
+
`src/skills/design-intelligence/data/motion.csv`.
|
|
164
|
+
|
|
155
165
|
Before adding any animation to a UI element, run through this decision tree:
|
|
156
166
|
|
|
157
167
|
**1. Should this animate at all?**
|
|
@@ -162,8 +172,8 @@ Before adding any animation to a UI element, run through this decision tree:
|
|
|
162
172
|
|
|
163
173
|
**2. Which easing?**
|
|
164
174
|
- Entering (element appearing)? **ease-out** (starts fast, slows to rest). Why: the element arriving quickly signals responsiveness; the deceleration feels natural as it settles.
|
|
165
|
-
- Exiting (element disappearing)? **ease-
|
|
166
|
-
- **Never ease-in
|
|
175
|
+
- Exiting (element disappearing)? **ease-out** as well. Why: one curve in both directions is the value a reader can hold and a gate can check; the field has no settled answer on exit easing, so a single shared curve removes the contradiction between carriers instead of propagating it. This line settles the **curve** only — how long an exit runs relative to its enter is a separate question it does not answer.
|
|
176
|
+
- **Never ease-in, in either direction.** Why: ease-in delays the initial movement — the exact moment the user is watching most closely — making it feel slow even at the same total duration.
|
|
167
177
|
- **Never bounce or elastic easing in UI.** Why: bounce draws attention to the animation itself, not the content; it feels dated.
|
|
168
178
|
|
|
169
179
|
**3. How long?**
|
|
@@ -199,6 +209,41 @@ The six interaction states every interactive element must assert are
|
|
|
199
209
|
[`design-review`](../../design-review/SKILL.md)'s; this entry is the motion half
|
|
200
210
|
of the hover one.
|
|
201
211
|
|
|
212
|
+
**6. Which mechanism carries it?**
|
|
213
|
+
|
|
214
|
+
Steps 1-5 decide *whether* and *how much*. This step decides *with what*, and it
|
|
215
|
+
is the step the tree used to skip: a CSS `transition` was the implicit answer to
|
|
216
|
+
everything, which is why an entry animation on a `<dialog>` or a popover
|
|
217
|
+
silently does nothing and a shared-element route change gets hand-rolled.
|
|
218
|
+
|
|
219
|
+
- **A CSS `transition` on `transform` and `opacity`** is the default and covers
|
|
220
|
+
most of steps 1-5. Reach past it only for the cases below.
|
|
221
|
+
- **An element entering or leaving the DOM, or the top layer** (`<dialog>`,
|
|
222
|
+
`popover`) has no "before" state to transition from and is gone before an exit
|
|
223
|
+
could run. That is what `@starting-style` is for — it supplies the entry's
|
|
224
|
+
starting values — together with `transition-behavior: allow-discrete` so
|
|
225
|
+
`display` and `overlay` participate instead of snapping. Without both, the
|
|
226
|
+
animation is not slow or wrong; it does not happen.
|
|
227
|
+
- **The Web Animations API** (`Element.animate()`) is the mechanism when the
|
|
228
|
+
values are computed at runtime, when the animation must be interruptible
|
|
229
|
+
(`Animation.cancel()`, `.reverse()`, `.finished`), or when several elements
|
|
230
|
+
share one timeline. A keyframe set known at author time does not need it.
|
|
231
|
+
- **A view transition** (`document.startViewTransition()`) is the mechanism for
|
|
232
|
+
a state or route change where an element persists across the change. It is the
|
|
233
|
+
first-party form of what a hand-built shared-element transition approximates,
|
|
234
|
+
and it is the case the 300-500ms page-transition band is for.
|
|
235
|
+
- **`transform-origin`** decides where a `scale()` grows from. A menu or popover
|
|
236
|
+
scaling in should originate at its trigger, not at its own centre, or it reads
|
|
237
|
+
as arriving from nowhere. Scale in from ~0.96, never from `scale(0)`: growing
|
|
238
|
+
from nothing is an entrance, and steps 1-2 asked for feedback.
|
|
239
|
+
- **`@media (hover: hover)`** gates any hover-carried motion. Without it a touch
|
|
240
|
+
device fires the hover treatment on tap and leaves it stuck, because there is
|
|
241
|
+
no pointer to leave.
|
|
242
|
+
|
|
243
|
+
All six still obey step 3's bands, step 2's single `ease-out` curve, and the
|
|
244
|
+
`@media (prefers-reduced-motion: reduce)` requirement above — a newer mechanism
|
|
245
|
+
is not an exemption from the authority, it is another way of spending it.
|
|
246
|
+
|
|
202
247
|
**4. What to animate?**
|
|
203
248
|
Animate `transform` and `opacity` only. Why: these run on the GPU compositor thread, not the main thread; they never trigger layout or paint.
|
|
204
249
|
`scale(0)` → `scale(1)` is wrong. Why: nothing in the real world appears from nothing. Use `scale(0.95)` + `opacity: 0` → `scale(1)` + `opacity: 1` instead.
|
|
@@ -118,7 +118,9 @@ Schedule::command('queue:work')->everyMinute()->evenInMaintenanceMode();
|
|
|
118
118
|
## Running the scheduler
|
|
119
119
|
|
|
120
120
|
```bash
|
|
121
|
-
# The scheduler itself runs every minute via system cron
|
|
121
|
+
# The scheduler itself runs every minute via system cron.
|
|
122
|
+
# cron has no working directory to inherit, and artisan takes no directory
|
|
123
|
+
# flag, so the `cd` is the shape here rather than a habit worth replacing.
|
|
122
124
|
* * * * * cd /path-to-project && php artisan schedule:run >> /dev/null 2>&1
|
|
123
125
|
|
|
124
126
|
# Test locally
|
|
@@ -350,12 +350,6 @@ After detecting **any** match, record the stack in the analysis output and selec
|
|
|
350
350
|
2. Tech stack inventory with versions and dependencies
|
|
351
351
|
3. Architecture diagram or module map
|
|
352
352
|
|
|
353
|
-
## Auto-trigger keywords
|
|
354
|
-
|
|
355
|
-
- project analysis
|
|
356
|
-
- codebase analysis
|
|
357
|
-
- architecture analysis
|
|
358
|
-
|
|
359
353
|
## Gotcha
|
|
360
354
|
|
|
361
355
|
- Full project analysis can take several minutes — warn the user about the time investment.
|
|
@@ -113,8 +113,8 @@ Before installing or upgrading anything, inspect what's already there — modify
|
|
|
113
113
|
- Stuck pods: `pod deintegrate && pod install`.
|
|
114
114
|
|
|
115
115
|
**Build failures**
|
|
116
|
-
- Clean iOS: `
|
|
117
|
-
- Clean Android:
|
|
116
|
+
- Clean iOS: `rm -rf ios/build ios/Pods ios/Podfile.lock` then `pod install --project-directory=ios`.
|
|
117
|
+
- Clean Android: `./gradlew -p android clean`.
|
|
118
118
|
- Clear Xcode derived data when stale build artefacts persist.
|
|
119
119
|
|
|
120
120
|
**New Architecture issues**
|
|
@@ -142,7 +142,7 @@ echo $ANDROID_HOME # non-empty
|
|
|
142
142
|
```bash
|
|
143
143
|
npx @react-native-community/cli init MyProject
|
|
144
144
|
cd MyProject
|
|
145
|
-
|
|
145
|
+
RCT_NEW_ARCH_ENABLED=1 pod install --project-directory=ios
|
|
146
146
|
npm start # Metro
|
|
147
147
|
npm run ios # in a second terminal
|
|
148
148
|
npm run android # in a third terminal
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
model_tier: medium
|
|
3
3
|
name: react-shadcn-ui
|
|
4
|
-
description: "
|
|
4
|
+
description: "Building React UI on shadcn/ui primitives + Tailwind — the apply/review/polish skill dispatched by `directives/ui/*` for the `react-shadcn` stack; idiom from tailwind-engineer."
|
|
5
5
|
domain: engineering
|
|
6
6
|
workspaces:
|
|
7
7
|
- engineering
|
|
@@ -129,12 +129,22 @@ Explore alternatives when:
|
|
|
129
129
|
1. Numbered reasoning steps with conclusions
|
|
130
130
|
2. Final answer or recommendation with confidence level
|
|
131
131
|
|
|
132
|
-
##
|
|
132
|
+
## Tool availability — this is a procedure, not a tool call
|
|
133
133
|
|
|
134
|
-
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
134
|
+
Everything above runs **in-session**: it is a way of structuring reasoning, and
|
|
135
|
+
it needs nothing installed.
|
|
136
|
+
|
|
137
|
+
The wider MCP ecosystem carries a `sequentialthinking` server exposing a tool of
|
|
138
|
+
that name. **This package registers no MCP server** — `mcp.json` ships
|
|
139
|
+
`{"servers": {}}` — so on a default install that tool is not present, and
|
|
140
|
+
nothing here tries to call it. Registering one is a consumer-side install
|
|
141
|
+
decision this package deliberately does not make for you.
|
|
142
|
+
|
|
143
|
+
So a reader on a default install can answer the question directly: the tool is
|
|
144
|
+
not available to you, and none of this skill depends on it. If you have
|
|
145
|
+
registered such a server yourself, the once-per-task limit below governs that
|
|
146
|
+
call too — the limit is about looping, not about which mechanism does the
|
|
147
|
+
thinking.
|
|
138
148
|
|
|
139
149
|
## Gotcha
|
|
140
150
|
|
|
@@ -145,9 +155,9 @@ Explore alternatives when:
|
|
|
145
155
|
## Do NOT
|
|
146
156
|
|
|
147
157
|
- Do NOT use this for simple, well-understood tasks — it adds unnecessary overhead.
|
|
148
|
-
- Do NOT
|
|
149
|
-
you
|
|
150
|
-
- Do NOT use
|
|
158
|
+
- Do NOT run this procedure more than **once per task**. If you are reaching for it
|
|
159
|
+
repeatedly, you are looping — stop and act directly instead.
|
|
160
|
+
- Do NOT use it as a "thinking proxy" — if the task is "view a file" or
|
|
151
161
|
"run a command", just do it. No thinking step needed.
|
|
152
162
|
- Do NOT skip the validation step — always check the solution against the original problem.
|
|
153
163
|
- Do NOT ignore contradictions — they are signals, not noise.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
model_tier: medium
|
|
3
3
|
name: tailwind-engineer
|
|
4
|
-
description: "
|
|
4
|
+
description: "Writing or reviewing Tailwind CSS — utility-first, design tokens, no inline-style drift, responsive variants, dark mode — 'style this' or 'mach das hübsch'. Pairs with react-shadcn-ui."
|
|
5
5
|
personas:
|
|
6
6
|
- frontend-engineer
|
|
7
7
|
domain: engineering
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
model_tier: medium
|
|
3
3
|
name: ui-apply-generic
|
|
4
|
-
description: "Use when implementing a UI brief on a stack with no framework executor — Svelte, Astro, Angular, plain HTML.
|
|
4
|
+
description: "Use when implementing a UI brief on a stack with no framework executor — Svelte, Astro, Angular, plain HTML. Stack-independent sibling of react-shadcn-ui; idiom from the stack corpus."
|
|
5
5
|
personas:
|
|
6
6
|
- frontend-engineer
|
|
7
7
|
domain: engineering
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
model_tier: high
|
|
3
3
|
name: ui-component-architect
|
|
4
|
-
description: "
|
|
4
|
+
description: "Shaping a UI component tree — composition vs inheritance, slot patterns, prop API design, controlled vs uncontrolled, polymorphic — on 'split this component'. Feeds react-shadcn-ui."
|
|
5
5
|
personas:
|
|
6
6
|
- frontend-engineer
|
|
7
7
|
domain: engineering
|
|
@@ -105,7 +105,9 @@ Ask format:
|
|
|
105
105
|
|
|
106
106
|
> 1. `.worktrees/` — project-local, hidden
|
|
107
107
|
> 2. `worktrees/` — project-local, visible
|
|
108
|
-
> 3. `~/.event4u/agent-config/worktrees/<project>/` — global
|
|
108
|
+
> 3. `~/.event4u/agent-config/worktrees/<project>/` — global, **outside the
|
|
109
|
+
> repository root**: costs the persistent shell cwd (see below) and requires
|
|
110
|
+
> declaring the parent in the host's working-directory allowlist
|
|
109
111
|
|
|
110
112
|
**Recommendation: 1 — `.worktrees/`** — project-local keeps the worktree next to the repo (easy cleanup), and the leading dot keeps it out of `ls`. Caveat: pick 3 if multiple repos must share a single worktree root.
|
|
111
113
|
|
|
@@ -135,9 +137,22 @@ passes. For the global location, skip — path is outside the repo.
|
|
|
135
137
|
|
|
136
138
|
```bash
|
|
137
139
|
git worktree add .worktrees/<branch-name> -b <branch-name>
|
|
138
|
-
cd .worktrees/<branch-name>
|
|
139
140
|
```
|
|
140
141
|
|
|
142
|
+
**Then address the worktree by flag, not by `cd`.** Every tool that matters
|
|
143
|
+
takes a directory flag, and the flag survives where a `cd` does not:
|
|
144
|
+
|
|
145
|
+
```bash
|
|
146
|
+
git -C .worktrees/<branch-name> status
|
|
147
|
+
npm --prefix .worktrees/<branch-name> test
|
|
148
|
+
composer -d .worktrees/<branch-name> install
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
A `cd X && …` compound re-enters the directory on every single call, and the
|
|
152
|
+
one call that forgets it edits the main checkout silently — the failure is
|
|
153
|
+
invisible because the command succeeds. Where a tool genuinely has no directory
|
|
154
|
+
flag, use a subshell so the change cannot leak: `( cd <path> && <cmd> )`.
|
|
155
|
+
|
|
141
156
|
Branch names must match the project convention — see
|
|
142
157
|
`commit-conventions` rule.
|
|
143
158
|
|
|
@@ -39,7 +39,7 @@ schema_version: 1
|
|
|
39
39
|
# CI guard: a release bump of `package.json` must update this value
|
|
40
40
|
# in lockstep — see scripts/check_template_pin_drift.ts (road-to-
|
|
41
41
|
# portable-runtime-and-update-check P3.3).
|
|
42
|
-
agent_config_version: "14.
|
|
42
|
+
agent_config_version: "14.19.0"
|
|
43
43
|
|
|
44
44
|
# --- Project identity ---
|
|
45
45
|
project:
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Records a live trigger-eval result into a corpus manifest's `upstream`
|
|
5
5
|
* block (the second half of the corpus-refresh DoD, ADR-061 §6). It does
|
|
6
|
-
* NOT run the eval — `skill_trigger_eval
|
|
6
|
+
* NOT run the eval — `skill_trigger_eval`'s confirmation gate hard-aborts
|
|
7
7
|
* under automation by design, so the live run stays a human, interactive
|
|
8
8
|
* step. This command is a *post-processor*: it reads the `EvalResult` JSON the
|
|
9
9
|
* live run wrote (`--output`), enforces a precision/recall floor, and writes
|
|
@@ -36,7 +36,7 @@ import { logger } from '../log/logger.js';
|
|
|
36
36
|
// Floors shared with the weekly canary rotation (ADR-118 §4) — values
|
|
37
37
|
// unchanged, single source of truth.
|
|
38
38
|
import { floor_for } from '../../scripts/_lib/trigger_eval_floors.js';
|
|
39
|
-
/** Subset of `skill_trigger_eval
|
|
39
|
+
/** Subset of `skill_trigger_eval`'s `EvalResult` we depend on. */
|
|
40
40
|
const EvalResultSchema = z.object({
|
|
41
41
|
skill: z.string().optional(),
|
|
42
42
|
model: z.string().optional(),
|
package/dist/cli/main.js
CHANGED
|
@@ -83,7 +83,7 @@ async function main(rawArgv) {
|
|
|
83
83
|
program
|
|
84
84
|
.command('eval:record')
|
|
85
85
|
.description('Record a live trigger-eval result into a corpus manifest (ADR-061 §6 refresh DoD)')
|
|
86
|
-
.requiredOption('--eval-json <path>', 'EvalResult JSON written by skill_trigger_eval
|
|
86
|
+
.requiredOption('--eval-json <path>', 'EvalResult JSON written by skill_trigger_eval --output')
|
|
87
87
|
.requiredOption('--manifest <path>', 'corpus manifest.json to patch')
|
|
88
88
|
.option('--min-recall <n>', 'Recall floor override (per-skill default otherwise)', (v) => Number.parseFloat(v))
|
|
89
89
|
.option('--min-precision <n>', 'Precision floor override (per-skill default otherwise)', (v) => Number.parseFloat(v))
|