freecodego 0.1.7-alpha.2.2 → 0.1.7-rc.2.2
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/README.i18n.yaml +45 -5
- package/README.md +4 -4
- package/README.zh.md +4 -4
- package/cordis.patch.yml +230 -126
- package/dist/assets/design/craft/FUTURE_SECTIONS.md +9 -0
- package/dist/assets/design/craft/LICENSE +201 -0
- package/dist/assets/design/craft/PROVENANCE.md +77 -0
- package/dist/assets/design/craft/README.md +106 -0
- package/dist/assets/design/craft/accessibility-baseline.md +201 -0
- package/dist/assets/design/craft/animation-discipline.md +154 -0
- package/dist/assets/design/craft/anti-ai-slop.md +84 -0
- package/dist/assets/design/craft/color.md +88 -0
- package/dist/assets/design/craft/form-validation.md +221 -0
- package/dist/assets/design/craft/laws-of-ux.md +296 -0
- package/dist/assets/design/craft/rtl-and-bidi.md +186 -0
- package/dist/assets/design/craft/state-coverage.md +134 -0
- package/dist/assets/design/craft/typography-hierarchy-editorial.md +182 -0
- package/dist/assets/design/craft/typography-hierarchy.md +165 -0
- package/dist/assets/design/craft/typography.md +122 -0
- package/dist/assets/design/react-bits/SKILL.md +130 -0
- package/dist/assets/design/skills/embedded-captions/CATALOG.md +91 -0
- package/dist/assets/design/skills/embedded-captions/SKILL.md +260 -0
- package/dist/assets/design/skills/embedded-captions/assets/fonts/char-widths.json +2211 -0
- package/dist/assets/design/skills/embedded-captions/assets/strokefonts/HersheyScript1.svg +242 -0
- package/dist/assets/design/skills/embedded-captions/assets/strokefonts/HersheyScriptMed.svg +242 -0
- package/dist/assets/design/skills/embedded-captions/dna/README.md +148 -0
- package/dist/assets/design/skills/embedded-captions/dna/chrome.json +68 -0
- package/dist/assets/design/skills/embedded-captions/dna/cream.json +69 -0
- package/dist/assets/design/skills/embedded-captions/dna/documentary.json +62 -0
- package/dist/assets/design/skills/embedded-captions/dna/editorial.json +70 -0
- package/dist/assets/design/skills/embedded-captions/dna/glitch.json +82 -0
- package/dist/assets/design/skills/embedded-captions/dna/ink.json +65 -0
- package/dist/assets/design/skills/embedded-captions/dna/keynote.json +62 -0
- package/dist/assets/design/skills/embedded-captions/dna/loud.json +75 -0
- package/dist/assets/design/skills/embedded-captions/dna/neon.json +58 -0
- package/dist/assets/design/skills/embedded-captions/dna/velocity.json +89 -0
- package/dist/assets/design/skills/embedded-captions/modes/cinematic/README.md +48 -0
- package/dist/assets/design/skills/embedded-captions/modes/cinematic/_archive/champion/spec.md +98 -0
- package/dist/assets/design/skills/embedded-captions/modes/cinematic/_archive/champion/template.html +188 -0
- package/dist/assets/design/skills/embedded-captions/modes/cinematic/_archive/memory-wall/spec.md +134 -0
- package/dist/assets/design/skills/embedded-captions/modes/cinematic/_archive/memory-wall/template.html +179 -0
- package/dist/assets/design/skills/embedded-captions/modes/cinematic/_archive/portrait-header/spec.md +81 -0
- package/dist/assets/design/skills/embedded-captions/modes/cinematic/_archive/portrait-header/template.html +170 -0
- package/dist/assets/design/skills/embedded-captions/modes/cinematic/cinematic-cream/spec.md +16 -0
- package/dist/assets/design/skills/embedded-captions/modes/cinematic/cinematic-cream/template.html +226 -0
- package/dist/assets/design/skills/embedded-captions/modes/cinematic/engine.html +355 -0
- package/dist/assets/design/skills/embedded-captions/modes/standard/_anatomy.md +232 -0
- package/dist/assets/design/skills/embedded-captions/modes/standard/_motion.md +192 -0
- package/dist/assets/design/skills/embedded-captions/references/aesthetic-principles.md +167 -0
- package/dist/assets/design/skills/embedded-captions/references/anti-patterns.md +188 -0
- package/dist/assets/design/skills/embedded-captions/references/bespoke-vs-presets.md +178 -0
- package/dist/assets/design/skills/embedded-captions/references/caption-grouping.md +130 -0
- package/dist/assets/design/skills/embedded-captions/references/composition-craft.md +522 -0
- package/dist/assets/design/skills/embedded-captions/references/direction-catalog.md +138 -0
- package/dist/assets/design/skills/embedded-captions/references/example-renders/champion.html +371 -0
- package/dist/assets/design/skills/embedded-captions/references/example-renders/memory-wall.html +334 -0
- package/dist/assets/design/skills/embedded-captions/references/failure-modes.md +145 -0
- package/dist/assets/design/skills/embedded-captions/references/layout-heuristics.md +238 -0
- package/dist/assets/design/skills/embedded-captions/references/motion-vocabulary.md +148 -0
- package/dist/assets/design/skills/embedded-captions/references/rail.md +68 -0
- package/dist/assets/design/skills/embedded-captions/references/reference-bar.md +47 -0
- package/dist/assets/design/skills/embedded-captions/references/scene-types.md +94 -0
- package/dist/assets/design/skills/embedded-captions/references/typographic-moves.md +266 -0
- package/dist/assets/design/skills/embedded-captions/references/typography-presets.md +63 -0
- package/dist/assets/design/skills/embedded-captions/scripts/fixtures/heroless/theme.json +11 -0
- package/dist/assets/design/skills/embedded-captions/scripts/fixtures/heroless/transcript.json +10 -0
- package/dist/assets/design/skills/embedded-captions/themes/README.md +243 -0
- package/dist/assets/design/skills/embedded-captions/themes/anchor.json +27 -0
- package/dist/assets/design/skills/embedded-captions/themes/arcade.json +51 -0
- package/dist/assets/design/skills/embedded-captions/themes/aurora.json +41 -0
- package/dist/assets/design/skills/embedded-captions/themes/biolume.json +35 -0
- package/dist/assets/design/skills/embedded-captions/themes/brush.json +74 -0
- package/dist/assets/design/skills/embedded-captions/themes/chalkboard.json +52 -0
- package/dist/assets/design/skills/embedded-captions/themes/dossier.json +56 -0
- package/dist/assets/design/skills/embedded-captions/themes/graffiti.json +62 -0
- package/dist/assets/design/skills/embedded-captions/themes/hologram.json +41 -0
- package/dist/assets/design/skills/embedded-captions/themes/inkwater.json +43 -0
- package/dist/assets/design/skills/embedded-captions/themes/laser.json +46 -0
- package/dist/assets/design/skills/embedded-captions/themes/lastpage.json +33 -0
- package/dist/assets/design/skills/embedded-captions/themes/neonsign.json +53 -0
- package/dist/assets/design/skills/embedded-captions/themes/ordnance.json +54 -0
- package/dist/assets/design/skills/embedded-captions/themes/papercut.json +37 -0
- package/dist/assets/design/skills/embedded-captions/themes/popup.json +46 -0
- package/dist/assets/design/skills/embedded-captions/themes/ransom.json +62 -0
- package/dist/assets/design/skills/embedded-captions/themes/scoreboard.json +54 -0
- package/dist/assets/design/skills/embedded-captions/themes/spectrum.json +46 -0
- package/dist/assets/design/skills/embedded-captions/themes/stardust.json +29 -0
- package/dist/assets/design/skills/embedded-captions/themes/stomp.json +43 -0
- package/dist/assets/design/skills/embedded-captions/themes/terminal.json +49 -0
- package/dist/assets/design/skills/embedded-captions/themes/thunder.json +44 -0
- package/dist/assets/design/skills/embedded-captions/themes/transit.json +44 -0
- package/dist/assets/design/skills/embedded-captions/themes/vhs.json +47 -0
- package/dist/assets/design/skills/faceless-explainer/SKILL.md +235 -0
- package/dist/assets/design/skills/faceless-explainer/references/cut-catalog.md +215 -0
- package/dist/assets/design/skills/faceless-explainer/references/motion-language.md +156 -0
- package/dist/assets/design/skills/faceless-explainer/references/story-design.md +255 -0
- package/dist/assets/design/skills/faceless-explainer/references/visual-design.md +146 -0
- package/dist/assets/design/skills/faceless-explainer/sub-agents/frame-worker.md +12 -0
- package/dist/assets/design/skills/general-video/SKILL.md +164 -0
- package/dist/assets/design/skills/general-video/sub-agents/frame-worker.md +34 -0
- package/dist/assets/design/skills/hyperframes/SKILL.md +134 -0
- package/dist/assets/design/skills/hyperframes/references/brief-contract.md +108 -0
- package/dist/assets/design/skills/hyperframes/references/brief-format.md +72 -0
- package/dist/assets/design/skills/hyperframes/references/capability-menu.md +47 -0
- package/dist/assets/design/skills/hyperframes/references/frame-worker-core.md +80 -0
- package/dist/assets/design/skills/hyperframes/references/intent-interview.md +71 -0
- package/dist/assets/design/skills/hyperframes/references/pitch-round.md +40 -0
- package/dist/assets/design/skills/hyperframes/references/production-loop.md +26 -0
- package/dist/assets/design/skills/hyperframes/references/review-loop.md +37 -0
- package/dist/assets/design/skills/hyperframes/references/route-briefs.md +11 -0
- package/dist/assets/design/skills/hyperframes/references/routes/embedded-captions.md +11 -0
- package/dist/assets/design/skills/hyperframes/references/routes/faceless-explainer.md +12 -0
- package/dist/assets/design/skills/hyperframes/references/routes/general-video.md +12 -0
- package/dist/assets/design/skills/hyperframes/references/routes/motion-graphics.md +11 -0
- package/dist/assets/design/skills/hyperframes/references/routes/music-to-video.md +12 -0
- package/dist/assets/design/skills/hyperframes/references/routes/pr-to-video.md +28 -0
- package/dist/assets/design/skills/hyperframes/references/routes/product-launch-video.md +13 -0
- package/dist/assets/design/skills/hyperframes/references/routes/remotion-to-hyperframes.md +9 -0
- package/dist/assets/design/skills/hyperframes/references/routes/slideshow.md +11 -0
- package/dist/assets/design/skills/hyperframes/references/routes/talking-head-recut.md +11 -0
- package/dist/assets/design/skills/hyperframes/references/script-format.md +52 -0
- package/dist/assets/design/skills/hyperframes/references/skill-lifecycle.md +30 -0
- package/dist/assets/design/skills/hyperframes/references/storyboard-format.md +99 -0
- package/dist/assets/design/skills/hyperframes/references/subagent-dispatch.md +35 -0
- package/dist/assets/design/skills/hyperframes/references/workflow-catalog.md +10 -0
- package/dist/assets/design/skills/hyperframes-animation/SKILL.md +86 -0
- package/dist/assets/design/skills/hyperframes-animation/adapters/animate-text.md +64 -0
- package/dist/assets/design/skills/hyperframes-animation/adapters/animejs.md +130 -0
- package/dist/assets/design/skills/hyperframes-animation/adapters/css-animations.md +143 -0
- package/dist/assets/design/skills/hyperframes-animation/adapters/gsap-easing-and-stagger.md +199 -0
- package/dist/assets/design/skills/hyperframes-animation/adapters/gsap-timeline-and-labels.md +96 -0
- package/dist/assets/design/skills/hyperframes-animation/adapters/gsap-transforms-and-perf.md +129 -0
- package/dist/assets/design/skills/hyperframes-animation/adapters/gsap.md +105 -0
- package/dist/assets/design/skills/hyperframes-animation/adapters/html-in-canvas-patterns.md +507 -0
- package/dist/assets/design/skills/hyperframes-animation/adapters/lottie.md +130 -0
- package/dist/assets/design/skills/hyperframes-animation/adapters/three.md +145 -0
- package/dist/assets/design/skills/hyperframes-animation/adapters/typegpu.md +182 -0
- package/dist/assets/design/skills/hyperframes-animation/adapters/waapi.md +101 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/agent-progress-theater.md +76 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/camera-journey.md +61 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/comparison-split.md +27 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/constellation-hub.md +63 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/cta-morph-press.md +63 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/cursor-ui-demo.md +89 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/dataviz-countup.md +59 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/device-surface-showcase.md +68 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/fixed-anchor-cycle.md +46 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/grid-card-assemble.md +81 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/kinetic-type-beats.md +133 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/logo-assemble-lockup.md +121 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/overwhelm-surround.md +58 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/panel-edit-live-sync.md +73 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/prompt-type-submit-generate.md +85 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/spatial-pan-stations.md +37 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/ticker-takeover.md +29 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/titlecard-reveal.md +80 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/transcript-scroll-artifact-reveal.md +45 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/typewriter-reveal.md +51 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/video-text-pivot.md +30 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints/zoom-out-workspace-reveal.md +68 -0
- package/dist/assets/design/skills/hyperframes-animation/blueprints-index.md +202 -0
- package/dist/assets/design/skills/hyperframes-animation/examples/brand-reveal-assemble-zoom.html +382 -0
- package/dist/assets/design/skills/hyperframes-animation/examples/comparison-split-cards.html +649 -0
- package/dist/assets/design/skills/hyperframes-animation/examples/concept-demo-decode-pan.html +520 -0
- package/dist/assets/design/skills/hyperframes-animation/examples/cta-morph-press.html +468 -0
- package/dist/assets/design/skills/hyperframes-animation/examples/cta-orbit-collapse.html +1298 -0
- package/dist/assets/design/skills/hyperframes-animation/examples/demo-page-scroll-spotlight.html +759 -0
- package/dist/assets/design/skills/hyperframes-animation/examples/hook-counter-burst.html +729 -0
- package/dist/assets/design/skills/hyperframes-animation/examples/messaging-multi-phrase.html +352 -0
- package/dist/assets/design/skills/hyperframes-animation/examples/metric-video-text-pivot.html +779 -0
- package/dist/assets/design/skills/hyperframes-animation/examples/problem-mockup-overwhelm.html +1374 -0
- package/dist/assets/design/skills/hyperframes-animation/examples/proof-logo-chain.html +861 -0
- package/dist/assets/design/skills/hyperframes-animation/examples/takeover-ticker-displace.html +347 -0
- package/dist/assets/design/skills/hyperframes-animation/examples/workflow-approve-press.html +606 -0
- package/dist/assets/design/skills/hyperframes-animation/references/motion-blur.md +133 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/3d-camera-flight.md +180 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/3d-page-scroll.md +135 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/3d-text-depth-layers.md +128 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/ai-tracking-box.md +139 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/ambient-glow-bloom.md +133 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/anchored-layout-expand.md +148 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/asr-keyword-glow.md +128 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/avatar-cloud-network.md +145 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/camera-cursor-tracking.md +133 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/card-morph-anchor.md +134 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/center-outward-expansion.md +88 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/chart-scrub-readout.md +151 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/chromatic-glitch.md +150 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/context-sensitive-cursor.md +140 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/control-target-sync.md +131 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/coordinate-target-zoom.md +138 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/counting-dynamic-scale.md +115 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/css-marker-patterns.md +208 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/cursor-click-ripple.md +104 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/cursor-drag.md +141 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/depth-of-field-blur.md +112 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/depth-scatter-assemble.md +139 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/discrete-text-sequence.md +146 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/dynamic-content-sequencing.md +149 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/gradient-text-sweep.md +136 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/gsap-effects.md +196 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/hacker-flip-3d.md +123 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/kinetic-beat-slam.md +137 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/motion-blur-streak.md +130 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/multi-cursor-choreography.md +133 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/multi-phase-camera.md +129 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/nudge-curve.md +47 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/orbit-3d-entry.md +148 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/particle-burst.md +149 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/physics-press-reaction.md +101 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/press-release-spring.md +108 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/reactive-displacement.md +92 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/scale-swap-transition.md +88 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/sine-wave-loop.md +85 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/split-tilt-cards.md +123 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/spring-pop-entrance.md +107 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/stat-bars-and-fills.md +145 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/svg-icon-enrichment.md +141 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/svg-path-draw.md +122 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/theme-crossfade-morph.md +126 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/vertical-spring-ticker.md +104 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/viewport-change.md +148 -0
- package/dist/assets/design/skills/hyperframes-animation/rules/waterfall-entry.md +81 -0
- package/dist/assets/design/skills/hyperframes-animation/rules-index.md +113 -0
- package/dist/assets/design/skills/hyperframes-animation/techniques.md +507 -0
- package/dist/assets/design/skills/hyperframes-animation/transitions/TRANSITION-REGISTRY.md +168 -0
- package/dist/assets/design/skills/hyperframes-animation/transitions/catalog.md +127 -0
- package/dist/assets/design/skills/hyperframes-animation/transitions/css-3d.md +12 -0
- package/dist/assets/design/skills/hyperframes-animation/transitions/css-blur.md +51 -0
- package/dist/assets/design/skills/hyperframes-animation/transitions/css-cover.md +43 -0
- package/dist/assets/design/skills/hyperframes-animation/transitions/css-destruction.md +95 -0
- package/dist/assets/design/skills/hyperframes-animation/transitions/css-dissolve.md +66 -0
- package/dist/assets/design/skills/hyperframes-animation/transitions/css-distortion.md +45 -0
- package/dist/assets/design/skills/hyperframes-animation/transitions/css-grid.md +10 -0
- package/dist/assets/design/skills/hyperframes-animation/transitions/css-light.md +49 -0
- package/dist/assets/design/skills/hyperframes-animation/transitions/css-mechanical.md +30 -0
- package/dist/assets/design/skills/hyperframes-animation/transitions/css-other.md +25 -0
- package/dist/assets/design/skills/hyperframes-animation/transitions/css-push.md +41 -0
- package/dist/assets/design/skills/hyperframes-animation/transitions/css-radial.md +37 -0
- package/dist/assets/design/skills/hyperframes-animation/transitions/css-scale.md +24 -0
- package/dist/assets/design/skills/hyperframes-animation/transitions/overview.md +153 -0
- package/dist/assets/design/skills/hyperframes-audio/SKILL.md +476 -0
- package/dist/assets/design/skills/hyperframes-audio/references/attributes.md +138 -0
- package/dist/assets/design/skills/hyperframes-audio/references/diagnosis.md +274 -0
- package/dist/assets/design/skills/hyperframes-audio/references/fx-registry.md +84 -0
- package/dist/assets/design/skills/hyperframes-audio/references/presets.md +216 -0
- package/dist/assets/design/skills/hyperframes-core/SKILL.md +97 -0
- package/dist/assets/design/skills/hyperframes-core/references/composition-patterns.md +224 -0
- package/dist/assets/design/skills/hyperframes-core/references/creator-editing-recipes.md +491 -0
- package/dist/assets/design/skills/hyperframes-core/references/data-attributes.md +78 -0
- package/dist/assets/design/skills/hyperframes-core/references/determinism-rules.md +53 -0
- package/dist/assets/design/skills/hyperframes-core/references/full-screen-motion.md +67 -0
- package/dist/assets/design/skills/hyperframes-core/references/minimal-composition.md +69 -0
- package/dist/assets/design/skills/hyperframes-core/references/sub-compositions.md +176 -0
- package/dist/assets/design/skills/hyperframes-core/references/tailwind.md +104 -0
- package/dist/assets/design/skills/hyperframes-core/references/tracks-and-clips.md +87 -0
- package/dist/assets/design/skills/hyperframes-core/references/variables-and-media.md +107 -0
- package/dist/assets/design/skills/hyperframes-creative/SKILL.md +71 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/biennale-yellow/FRAME.md +289 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/biennale-yellow/caption-skin.html +221 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/biennale-yellow/frame-showcase.html +1214 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/blockframe/FRAME.md +275 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/blockframe/caption-skin.html +224 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/blockframe/frame-showcase.html +1347 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/blue-professional/FRAME.md +307 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/blue-professional/caption-skin.html +223 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/blue-professional/frame-showcase.html +1372 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/bold-poster/FRAME.md +275 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/bold-poster/caption-skin.html +230 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/bold-poster/frame-showcase.html +1140 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/broadside/FRAME.md +284 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/broadside/caption-skin.html +225 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/broadside/frame-showcase.html +1166 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/capsule/FRAME.md +284 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/capsule/caption-skin.html +224 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/capsule/frame-showcase.html +1465 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/cartesian/FRAME.md +278 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/cartesian/caption-skin.html +222 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/cartesian/frame-showcase.html +1263 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/cobalt-grid/FRAME.md +265 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/cobalt-grid/caption-skin.html +238 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/cobalt-grid/frame-showcase.html +1468 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/code-editorial/FRAME.md +277 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/code-editorial/caption-skin.html +224 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/code-editorial/fonts/OFL-eb-garamond.txt +93 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/code-editorial/fonts/OFL-inter.txt +93 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/code-editorial/fonts/OFL-jetbrains-mono.txt +93 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/code-editorial/frame-showcase.html +1438 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/coral/FRAME.md +314 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/coral/caption-skin.html +226 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/coral/frame-showcase.html +1268 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/creative-mode/FRAME.md +333 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/creative-mode/caption-skin.html +227 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/creative-mode/frame-showcase.html +1330 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/daisy-days/FRAME.md +274 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/daisy-days/caption-skin.html +230 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/daisy-days/frame-showcase.html +1444 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/editorial-forest/FRAME.md +265 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/editorial-forest/caption-skin.html +223 -0
- package/dist/assets/design/skills/hyperframes-creative/frame-presets/editorial-forest/frame-showcase.html +1273 -0
- package/dist/assets/design/skills/hyperframes-creative/palettes/bold-energetic.md +14 -0
- package/dist/assets/design/skills/hyperframes-creative/palettes/clean-corporate.md +14 -0
- package/dist/assets/design/skills/hyperframes-creative/palettes/dark-premium.md +14 -0
- package/dist/assets/design/skills/hyperframes-creative/palettes/jewel-rich.md +14 -0
- package/dist/assets/design/skills/hyperframes-creative/palettes/monochrome.md +14 -0
- package/dist/assets/design/skills/hyperframes-creative/palettes/nature-earth.md +14 -0
- package/dist/assets/design/skills/hyperframes-creative/palettes/neon-electric.md +14 -0
- package/dist/assets/design/skills/hyperframes-creative/palettes/pastel-soft.md +14 -0
- package/dist/assets/design/skills/hyperframes-creative/palettes/warm-editorial.md +14 -0
- package/dist/assets/design/skills/hyperframes-creative/references/audio-reactive.md +76 -0
- package/dist/assets/design/skills/hyperframes-creative/references/beat-direction.md +164 -0
- package/dist/assets/design/skills/hyperframes-creative/references/composition-patterns.md +199 -0
- package/dist/assets/design/skills/hyperframes-creative/references/data-in-motion.md +19 -0
- package/dist/assets/design/skills/hyperframes-creative/references/design-adherence.md +19 -0
- package/dist/assets/design/skills/hyperframes-creative/references/design-picker.md +123 -0
- package/dist/assets/design/skills/hyperframes-creative/references/design-spec.md +55 -0
- package/dist/assets/design/skills/hyperframes-creative/references/house-style.md +73 -0
- package/dist/assets/design/skills/hyperframes-creative/references/motion-principles.md +151 -0
- package/dist/assets/design/skills/hyperframes-creative/references/narration.md +92 -0
- package/dist/assets/design/skills/hyperframes-creative/references/prompt-expansion.md +68 -0
- package/dist/assets/design/skills/hyperframes-creative/references/story-spine.md +45 -0
- package/dist/assets/design/skills/hyperframes-creative/references/storyboard-recipe.md +57 -0
- package/dist/assets/design/skills/hyperframes-creative/references/typography.md +218 -0
- package/dist/assets/design/skills/hyperframes-creative/references/video-composition.md +63 -0
- package/dist/assets/design/skills/hyperframes-creative/references/visual-styles.md +457 -0
- package/dist/assets/design/skills/hyperframes-creative/templates/design-picker.html +1432 -0
- package/dist/assets/design/skills/hyperframes-keyframes/SKILL.md +262 -0
- package/dist/assets/design/skills/hyperframes-keyframes/agents/openai.yaml +4 -0
- package/dist/assets/design/skills/hyperframes-keyframes/references/keyframe-patterns.md +108 -0
- package/dist/assets/design/skills/hyperframes-studio/SKILL.md +75 -0
- package/dist/assets/design/skills/motion-graphics/SKILL.md +175 -0
- package/dist/assets/design/skills/motion-graphics/agents/builder.md +41 -0
- package/dist/assets/design/skills/motion-graphics/agents/director.md +54 -0
- package/dist/assets/design/skills/motion-graphics/agents/finalize.md +17 -0
- package/dist/assets/design/skills/motion-graphics/catalog-map.md +52 -0
- package/dist/assets/design/skills/motion-graphics/categories/asset-fusion/module.md +37 -0
- package/dist/assets/design/skills/motion-graphics/categories/charts/module.md +22 -0
- package/dist/assets/design/skills/motion-graphics/categories/kinetic-type/module.md +19 -0
- package/dist/assets/design/skills/motion-graphics/categories/logo-reveal/module.md +17 -0
- package/dist/assets/design/skills/motion-graphics/categories/lower-thirds/module.md +20 -0
- package/dist/assets/design/skills/motion-graphics/categories/maps/module.md +61 -0
- package/dist/assets/design/skills/motion-graphics/categories/news/module.md +56 -0
- package/dist/assets/design/skills/motion-graphics/categories/stat/module.md +21 -0
- package/dist/assets/design/skills/motion-graphics/categories/tweet/module.md +16 -0
- package/dist/assets/design/skills/motion-graphics/categories/webpage/module.md +30 -0
- package/dist/assets/design/skills/motion-graphics/grounding/PROTOCOL.md +64 -0
- package/dist/assets/design/skills/motion-graphics/phases/source/guide.md +21 -0
- package/dist/assets/design/skills/motion-graphics/references/builder-contract.md +38 -0
- package/dist/assets/design/skills/motion-graphics/references/motion-vocabulary.md +47 -0
- package/dist/assets/design/skills/motion-graphics/references/shot-plan-ir.md +54 -0
- package/dist/assets/design/skills/motion-graphics/samples/asset-fusion/_ref-circle-highlight.html +306 -0
- package/dist/assets/design/skills/music-to-video/SKILL.md +207 -0
- package/dist/assets/design/skills/music-to-video/references/frame-skeleton.md +100 -0
- package/dist/assets/design/skills/music-to-video/references/montage.md +55 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitive-catalog.md +75 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/3d-card-flip/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/3d-card-flip/scene.html +119 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/bg-flow-field/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/bg-flow-field/scene.html +294 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/binary-decrypt/index.html +54 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/binary-decrypt/scene.html +85 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/blur-resolve/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/blur-resolve/scene.html +60 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/braam-punch/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/braam-punch/scene.html +100 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/chromatic-split/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/chromatic-split/scene.html +111 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/chrome-sweep/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/chrome-sweep/scene.html +68 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/counting-punch/index.html +54 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/counting-punch/scene.html +119 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/crash-zoom-in/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/crash-zoom-in/scene.html +120 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/datamosh-smear/index.html +55 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/datamosh-smear/scene.html +131 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/directional-fill/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/directional-fill/scene.html +103 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/dolly-zoom/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/dolly-zoom/scene.html +102 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/electric-arc/index.html +54 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/electric-arc/scene.html +105 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/flash-cut/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/flash-cut/scene.html +97 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/gooey-metaball/index.html +54 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/gooey-metaball/scene.html +206 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/hard-cut/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/hard-cut/scene.html +82 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/hypercut-whip/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/hypercut-whip/scene.html +44 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/iris-open/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/iris-open/scene.html +69 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/kinetic-letter-in/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/kinetic-letter-in/scene.html +64 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/liquid-morph/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/liquid-morph/scene.html +96 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/mask-reveal/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/mask-reveal/scene.html +74 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/mosaic-pack/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/mosaic-pack/scene.html +89 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/neon-flicker/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/neon-flicker/scene.html +73 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/outline-to-fill/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/outline-to-fill/scene.html +82 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/palette-flip/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/palette-flip/scene.html +97 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/particle-burst/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/particle-burst/scene.html +106 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/pixel-dissolve/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/pixel-dissolve/scene.html +86 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/radial-burst-lines/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/radial-burst-lines/scene.html +130 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/screen-shake/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/screen-shake/scene.html +78 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/slot-machine-reveal/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/slot-machine-reveal/scene.html +100 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/spotlight-sweep/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/spotlight-sweep/scene.html +102 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/staggered-exit/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/staggered-exit/scene.html +82 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/text-spectral-rays/USAGE.md +42 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/text-spectral-rays/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/text-spectral-rays/scene.html +280 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/text-wave-distort/index.html +54 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/text-wave-distort/scene.html +106 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/tile-mosaic/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/tile-mosaic/scene.html +109 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/typewriter-reveal/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/typewriter-reveal/scene.html +91 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/word-grid-burst/index.html +53 -0
- package/dist/assets/design/skills/music-to-video/references/motion-primitives/word-grid-burst/scene.html +96 -0
- package/dist/assets/design/skills/music-to-video/references/planning.md +104 -0
- package/dist/assets/design/skills/music-to-video/references/storyboard-format.md +94 -0
- package/dist/assets/design/skills/music-to-video/references/template-catalog.md +106 -0
- package/dist/assets/design/skills/music-to-video/references/templates/card-flyby/index.html +527 -0
- package/dist/assets/design/skills/music-to-video/references/templates/card-flyby/program.json +13 -0
- package/dist/assets/design/skills/music-to-video/references/templates/held-message-living-field/index.html +485 -0
- package/dist/assets/design/skills/music-to-video/references/templates/held-text-strobe-burst/index.html +302 -0
- package/dist/assets/design/skills/music-to-video/references/templates/intro-kinetic-cascade/index.html +610 -0
- package/dist/assets/design/skills/music-to-video/references/templates/intro-kinetic-cascade/program.json +41 -0
- package/dist/assets/design/skills/music-to-video/references/templates/logo-split-lockup-pulse/index.html +596 -0
- package/dist/assets/design/skills/music-to-video/references/templates/poster-tile-mosaic/index.html +589 -0
- package/dist/assets/design/skills/music-to-video/references/templates/poster-tile-mosaic/program.json +25 -0
- package/dist/assets/design/skills/music-to-video/references/templates/roll-flipbook-word-cycle/index.html +267 -0
- package/dist/assets/design/skills/music-to-video/references/templates/split-anchor-word-slot/index.html +594 -0
- package/dist/assets/design/skills/music-to-video/references/templates/split-anchor-word-slot/program.json +39 -0
- package/dist/assets/design/skills/music-to-video/references/templates/typewriter-phrase-keyword-shuffle/index.html +238 -0
- package/dist/assets/design/skills/music-to-video/sub-agents/frame-worker.md +49 -0
- package/dist/assets/design/skills/pr-to-video/SKILL.md +271 -0
- package/dist/assets/design/skills/pr-to-video/references/code-vocabulary.md +112 -0
- package/dist/assets/design/skills/pr-to-video/references/cut-catalog.md +215 -0
- package/dist/assets/design/skills/pr-to-video/references/motion-language.md +156 -0
- package/dist/assets/design/skills/pr-to-video/references/story-design.md +230 -0
- package/dist/assets/design/skills/pr-to-video/references/visual-design.md +164 -0
- package/dist/assets/design/skills/pr-to-video/sub-agents/frame-worker.md +38 -0
- package/dist/assets/design/skills/product-launch-video/SKILL.md +262 -0
- package/dist/assets/design/skills/product-launch-video/references/cut-catalog.md +220 -0
- package/dist/assets/design/skills/product-launch-video/references/motion-language.md +156 -0
- package/dist/assets/design/skills/product-launch-video/references/story-design.md +508 -0
- package/dist/assets/design/skills/product-launch-video/references/visual-design.md +126 -0
- package/dist/assets/design/skills/product-launch-video/sub-agents/frame-worker.md +21 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/SKILL.md +130 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/README.md +41 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/expected.json +26 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/hf-src/compositions/title.html +31 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/hf-src/index.html +46 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/package.json +14 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/tsconfig.json +15 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/README.md +54 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/expected.json +29 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/compositions/scene-1.html +35 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/compositions/scene-2.html +35 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/compositions/scene-3.html +36 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/index.html +75 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/package.json +14 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/tsconfig.json +15 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/README.md +85 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/expected.json +41 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-1.html +52 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-2.html +99 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-3.html +55 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/index.html +70 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/package.json +15 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/tsconfig.json +15 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/README.md +51 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/expected.json +85 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/references/api-map.md +142 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/references/escape-hatch.md +115 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/references/eval.md +140 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/references/fonts.md +112 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/references/limitations.md +136 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/references/lottie.md +119 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/references/media.md +149 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/references/parameters.md +172 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/references/sequencing.md +251 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/references/timing.md +165 -0
- package/dist/assets/design/skills/remotion-to-hyperframes/references/transitions.md +113 -0
- package/dist/assets/design/skills/slideshow/SKILL.md +530 -0
- package/dist/assets/design/skills/slideshow/references/standalone-harness.md +1017 -0
- package/dist/assets/design/skills/talking-head-recut/NOTICE.md +39 -0
- package/dist/assets/design/skills/talking-head-recut/SKILL.md +1007 -0
- package/dist/assets/design/skills/talking-head-recut/references/DESIGN_INDEX.md +145 -0
- package/dist/assets/design/skills/talking-head-recut/references/confirm-visual-direction-with-user-do-this-first.md +211 -0
- package/dist/assets/design/skills/talking-head-recut/references/frames/clean.html +92 -0
- package/dist/assets/design/skills/talking-head-recut/references/frames/hairline.html +171 -0
- package/dist/assets/design/skills/talking-head-recut/references/frames/polaroid.html +131 -0
- package/dist/assets/design/skills/talking-head-recut/references/layouts/overlay.html +164 -0
- package/dist/assets/design/skills/talking-head-recut/references/layouts/pip.html +143 -0
- package/dist/assets/design/skills/talking-head-recut/references/layouts/split.html +121 -0
- package/dist/assets/design/skills/talking-head-recut/references/layouts/stack.html +109 -0
- package/dist/assets/design/skills/talking-head-recut/references/styles/academic.html +172 -0
- package/dist/assets/design/skills/talking-head-recut/references/styles/audit.html +170 -0
- package/dist/assets/design/skills/talking-head-recut/references/styles/editorial.html +189 -0
- package/dist/assets/design/skills/talking-head-recut/references/styles/geom.html +181 -0
- package/dist/assets/design/skills/talking-head-recut/references/styles/minimal.html +130 -0
- package/dist/assets/design/skills/talking-head-recut/references/styles/spotlight.html +142 -0
- package/dist/assets/design/skills/talking-head-recut/references/styles/swiss.html +188 -0
- package/dist/assets/design/skills/talking-head-recut/references/styles/terminal.html +196 -0
- package/dist/assets/design/skills/talking-head-recut/references/styles/whiteboard.html +170 -0
- package/dist/assets/design/skills/talking-head-recut/references/styles/xhs.html +206 -0
- package/dist/assets/design/taste/LICENSE +21 -0
- package/dist/assets/design/taste/PROVENANCE.md +70 -0
- package/dist/assets/design/taste/brandkit/SKILL.md +798 -0
- package/dist/assets/design/taste/brutalist-skill/SKILL.md +92 -0
- package/dist/assets/design/taste/gpt-tasteskill/SKILL.md +74 -0
- package/dist/assets/design/taste/image-to-code-skill/SKILL.md +1228 -0
- package/dist/assets/design/taste/imagegen-frontend-mobile/SKILL.md +1465 -0
- package/dist/assets/design/taste/imagegen-frontend-web/SKILL.md +987 -0
- package/dist/assets/design/taste/minimalist-skill/SKILL.md +85 -0
- package/dist/assets/design/taste/output-skill/SKILL.md +49 -0
- package/dist/assets/design/taste/redesign-skill/SKILL.md +178 -0
- package/dist/assets/design/taste/soft-skill/SKILL.md +98 -0
- package/dist/assets/design/taste/stitch-skill/DESIGN.md +121 -0
- package/dist/assets/design/taste/stitch-skill/SKILL.md +184 -0
- package/dist/assets/design/taste/taste-skill/SKILL.md +1043 -0
- package/dist/assets/design/taste/taste-skill/references/4-2-color-calibration.md +24 -0
- package/dist/assets/design/taste/taste-skill/references/4-7-layout-discipline-hard-rules-failing-any-of-.md +27 -0
- package/dist/assets/design/taste/taste-skill/references/4-8-image-visual-asset-strategy.md +35 -0
- package/dist/assets/design/taste/taste-skill/references/4-9-content-density.md +34 -0
- package/dist/assets/design/taste/taste-skill/references/9-f-production-test-tells-banned-outright.md +54 -0
- package/dist/assets/design/taste/taste-skill-v1/SKILL.md +226 -0
- package/dist/assets/engineering/skills-starter/engineering-ui-design/SKILL.md +84 -0
- package/dist/assets/engineering/skills-superpowers/subagent-driven-development/SKILL.md +68 -459
- package/dist/assets/engineering/skills-superpowers/subagent-driven-development/dispatch-and-review-rules.md +74 -0
- package/dist/assets/engineering/skills-superpowers/subagent-driven-development/example-workflow.md +70 -0
- package/dist/assets/engineering/skills-superpowers/subagent-driven-development/model-selection.md +40 -0
- package/dist/assets/engineering/skills-superpowers/subagent-driven-development/process-diagrams.md +92 -0
- package/dist/assets/engineering/skills-superpowers/subagent-driven-development/setup-and-ledger.md +75 -0
- package/dist/assets/uiux/LICENSE +21 -0
- package/dist/assets/uiux/PROVENANCE.md +110 -0
- package/dist/assets/uiux/data/app-interface.csv +33 -0
- package/dist/assets/uiux/data/charts.csv +26 -0
- package/dist/assets/uiux/data/colors.csv +193 -0
- package/dist/assets/uiux/data/icons.csv +106 -0
- package/dist/assets/uiux/data/landing.csv +35 -0
- package/dist/assets/uiux/data/motion.csv +18 -0
- package/dist/assets/uiux/data/products.csv +193 -0
- package/dist/assets/uiux/data/react-performance.csv +45 -0
- package/dist/assets/uiux/data/stacks/angular.csv +51 -0
- package/dist/assets/uiux/data/stacks/astro.csv +54 -0
- package/dist/assets/uiux/data/stacks/avalonia.csv +57 -0
- package/dist/assets/uiux/data/stacks/flutter.csv +53 -0
- package/dist/assets/uiux/data/stacks/html-tailwind.csv +60 -0
- package/dist/assets/uiux/data/stacks/javafx.csv +76 -0
- package/dist/assets/uiux/data/stacks/jetpack-compose.csv +53 -0
- package/dist/assets/uiux/data/stacks/laravel.csv +51 -0
- package/dist/assets/uiux/data/stacks/nextjs.csv +62 -0
- package/dist/assets/uiux/data/stacks/nuxt-ui.csv +77 -0
- package/dist/assets/uiux/data/stacks/nuxtjs.csv +68 -0
- package/dist/assets/uiux/data/stacks/react-native.csv +52 -0
- package/dist/assets/uiux/data/stacks/react.csv +67 -0
- package/dist/assets/uiux/data/stacks/shadcn.csv +69 -0
- package/dist/assets/uiux/data/stacks/svelte.csv +56 -0
- package/dist/assets/uiux/data/stacks/swiftui.csv +51 -0
- package/dist/assets/uiux/data/stacks/threejs.csv +54 -0
- package/dist/assets/uiux/data/stacks/uno.csv +60 -0
- package/dist/assets/uiux/data/stacks/uwp.csv +56 -0
- package/dist/assets/uiux/data/stacks/vue.csv +50 -0
- package/dist/assets/uiux/data/stacks/winui.csv +60 -0
- package/dist/assets/uiux/data/stacks/wpf.csv +57 -0
- package/dist/assets/uiux/data/styles.csv +89 -0
- package/dist/assets/uiux/data/typography.csv +75 -0
- package/dist/assets/uiux/data/ui-reasoning.csv +193 -0
- package/dist/assets/uiux/data/ux-guidelines.csv +120 -0
- package/dist/auto-review.js +38 -4
- package/dist/bootstrap.js +65061 -56810
- package/dist/client.cjs +4668 -3598
- package/dist/subagent-claude-code.js +493 -0
- package/dist/subagent-codex.js +1068 -0
- package/dist/tool-session-query.js +993 -0
- package/package.json +81 -74
- package/dist/agent-team.js +0 -16235
- package/dist/schedule.js +0 -15898
- package/dist/tool-agent-team.js +0 -16766
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
|
|
2
|
+
1,Architecture,Use Islands Architecture,Astro's partial hydration only loads JS for interactive components,Interactive components with client directives,Hydrate entire page like traditional SPA,<Counter client:load />,Everything as client component,High,https://docs.astro.build/en/concepts/islands/,astro 7.1.6,active,2026-08-13
|
|
3
|
+
2,Architecture,Default to zero JS,Astro ships zero JS by default - add only when needed,Static components without client directive,Add client:load to everything,<Header /> (static),<Header client:load /> (unnecessary),High,https://docs.astro.build/en/basics/astro-components/,astro 7.1.6,active,2026-08-13
|
|
4
|
+
3,Architecture,Choose right client directive,Different directives for different hydration timing,client:visible for below-fold client:idle for non-critical,client:load for everything,<Comments client:visible />,<Comments client:load />,Medium,https://docs.astro.build/en/reference/directives-reference/#client-directives,astro 7.1.6,active,2026-08-13
|
|
5
|
+
4,Architecture,Use content collections,Type-safe content management for blogs docs,Content collections for structured content,Loose markdown files without schema,const posts = await getCollection('blog'),import.meta.glob('./posts/*.md'),High,https://docs.astro.build/en/guides/content-collections/,astro 7.1.6,active,2026-08-13
|
|
6
|
+
5,Architecture,Define collection schemas,Zod schemas for content validation,Schema with required fields and types,No schema validation,defineCollection({ schema: z.object({...}) }),defineCollection({}),High,https://docs.astro.build/en/guides/content-collections/#defining-a-collection-schema,astro 7.1.6,active,2026-08-13
|
|
7
|
+
6,Routing,Use file-based routing,Create routes by adding .astro files in pages/,pages/ directory for routes,Manual route configuration,src/pages/about.astro,Custom router setup,Medium,https://docs.astro.build/en/basics/astro-pages/,astro 7.1.6,active,2026-08-13
|
|
8
|
+
7,Routing,Dynamic routes with brackets,Use [param] for dynamic routes,Bracket notation for params,Query strings for dynamic content,pages/blog/[slug].astro,pages/blog.astro?slug=x,Medium,https://docs.astro.build/en/guides/routing/#dynamic-routes,astro 7.1.6,active,2026-08-13
|
|
9
|
+
8,Routing,Use getStaticPaths for SSG,Generate static pages at build time,getStaticPaths for known dynamic routes,Fetch at runtime for static content,export async function getStaticPaths() { return [...] },No getStaticPaths with dynamic route,High,https://docs.astro.build/en/reference/api-reference/#getstaticpaths,astro 7.1.6,active,2026-08-13
|
|
10
|
+
9,Routing,Enable on-demand rendering when needed,Render only dynamic routes on demand or choose server output for a mostly dynamic site,export const prerender = false on selected routes,Use removed output: 'hybrid',export const prerender = false;,output: 'hybrid',Medium,https://docs.astro.build/en/guides/on-demand-rendering/,astro 7.1.6,active,2026-08-13
|
|
11
|
+
10,Components,Keep .astro for static,Use .astro components for static content,Astro components for layout structure,React/Vue for static markup,<Layout><slot /></Layout>,<ReactLayout>{children}</ReactLayout>,High,https://docs.astro.build/en/basics/astro-components/,astro 7.1.6,active,2026-08-13
|
|
12
|
+
11,Components,Use framework components for interactivity,React Vue Svelte for complex interactivity,Framework component with client directive,Astro component with inline scripts,<ReactCounter client:load />,<script> in .astro for complex state,Medium,https://docs.astro.build/en/guides/framework-components/,astro 7.1.6,active,2026-08-13
|
|
13
|
+
12,Components,Pass data via props,Astro components receive props in frontmatter,Astro.props for component data,Global state for simple data,const { title } = Astro.props;,Import global store,Low,https://docs.astro.build/en/basics/astro-components/#component-props,astro 7.1.6,active,2026-08-13
|
|
14
|
+
13,Components,Use slots for composition,Named and default slots for flexible layouts,<slot /> for child content,Props for HTML content,"<slot name=""header"" />",<Component header={<div>...</div>} />,Medium,https://docs.astro.build/en/basics/astro-components/#slots,astro 7.1.6,active,2026-08-13
|
|
15
|
+
14,Components,Colocate component styles,Scoped styles in component file,<style> in same .astro file,Separate CSS files for component styles,<style> .card { } </style>,import './Card.css',Low,,astro 7.1.6,active,2026-08-13
|
|
16
|
+
15,Styling,Use scoped styles by default,Astro scopes styles to component automatically,<style> for component-specific styles,Global styles for everything,<style> h1 { } </style> (scoped),<style is:global> for everything,Medium,https://docs.astro.build/en/guides/styling/#scoped-styles,astro 7.1.6,active,2026-08-13
|
|
17
|
+
16,Styling,Use is:global sparingly,Global styles only when truly needed,is:global for base styles or overrides,is:global for component styles,<style is:global> body { } </style>,<style is:global> .card { } </style>,Medium,,astro 7.1.6,active,2026-08-13
|
|
18
|
+
17,Styling,Integrate Tailwind 4 through Vite,The Astro CLI configures Tailwind 4 with the official Vite plugin,Use astro add tailwind or configure @tailwindcss/vite,Add the deprecated @astrojs/tailwind integration,npx astro add tailwind,@astrojs/tailwind,Low,https://docs.astro.build/en/guides/styling/#tailwind,astro 7.1.6,active,2026-08-13
|
|
19
|
+
18,Styling,Use CSS variables for theming,Define tokens in :root,CSS custom properties for themes,Hardcoded colors everywhere,:root { --primary: #3b82f6; },color: #3b82f6; everywhere,Medium,,astro 7.1.6,active,2026-08-13
|
|
20
|
+
19,Data,Fetch in frontmatter,Data fetching in component frontmatter,Top-level await in frontmatter,useEffect for initial data,const data = await fetch(url),client-side fetch on mount,High,https://docs.astro.build/en/guides/data-fetching/,astro 7.1.6,active,2026-08-13
|
|
21
|
+
20,Data,Use Astro.glob for local files,Import multiple local files,Astro.glob for markdown/data files,Manual imports for each file,const posts = await Astro.glob('./posts/*.md'),import post1; import post2;,Medium,,astro 7.1.6,active,2026-08-13
|
|
22
|
+
21,Data,Prefer content collections over glob,Type-safe collections for structured content,getCollection() for blog/docs,Astro.glob for structured content,await getCollection('blog'),await Astro.glob('./blog/*.md'),High,https://docs.astro.build/en/guides/content-collections/,astro 7.1.6,active,2026-08-13
|
|
23
|
+
22,Data,Use environment variables correctly,Import.meta.env for env vars,PUBLIC_ prefix for client vars,Expose secrets to client,import.meta.env.PUBLIC_API_URL,import.meta.env.SECRET in client,High,https://docs.astro.build/en/guides/environment-variables/,astro 7.1.6,active,2026-08-13
|
|
24
|
+
23,Performance,Preload critical assets,Use link preload for important resources,Preload fonts above-fold images,No preload hints,"<link rel=""preload"" href=""font.woff2"" as=""font"">",No preload for critical assets,Medium,,astro 7.1.6,active,2026-08-13
|
|
25
|
+
24,Performance,Optimize images with astro:assets,Built-in image optimization,<Image /> component for optimization,<img> for local images,import { Image } from 'astro:assets';,"<img src=""./image.jpg"">",High,https://docs.astro.build/en/guides/images/,astro 7.1.6,active,2026-08-13
|
|
26
|
+
25,Performance,Use picture for responsive images,Multiple formats and sizes,<Picture /> for art direction,Single image size for all screens,<Picture /> with multiple sources,<Image /> with single size,Medium,,astro 7.1.6,active,2026-08-13
|
|
27
|
+
26,Performance,Lazy load below-fold content,Defer loading non-critical content,loading=lazy for images client:visible for components,Load everything immediately,"<img loading=""lazy"">",No lazy loading,Medium,,astro 7.1.6,active,2026-08-13
|
|
28
|
+
27,Performance,Minimize client directives,Each directive adds JS bundle,Audit client: usage regularly,Sprinkle client:load everywhere,Only interactive components hydrated,Every component with client:load,High,https://docs.astro.build/en/reference/directives-reference/#client-directives,astro 7.1.6,active,2026-08-13
|
|
29
|
+
28,ViewTransitions,Use ClientRouter for client-side transitions,Enable Astro client-side routing and transition fallbacks with the current component,<ClientRouter /> in the shared head,Use removed <ViewTransitions />,import { ClientRouter } from 'astro:transitions';,<ViewTransitions />,Medium,https://docs.astro.build/en/guides/view-transitions/,astro 7.1.6,active,2026-08-13
|
|
30
|
+
29,ViewTransitions,Use transition:name,Named elements for morphing,transition:name for persistent elements,Unnamed transitions,"<header transition:name=""header"">",<header> without name,Low,,astro 7.1.6,active,2026-08-13
|
|
31
|
+
30,ViewTransitions,Handle transition:persist,Keep state across navigations,transition:persist for media players,Re-initialize on every navigation,"<video transition:persist id=""player"">",Video restarts on navigation,Medium,,astro 7.1.6,active,2026-08-13
|
|
32
|
+
31,ViewTransitions,Add fallback for no-JS,Graceful degradation,Content works without JS,Require ClientRouter for basic navigation,Static content accessible,Broken without client-side routing JS,High,https://docs.astro.build/en/guides/view-transitions/,astro 7.1.6,active,2026-08-13
|
|
33
|
+
32,SEO,Use a shared head component,Centralize title canonical and metadata without assuming a built-in SEO component,Reusable project Head component or explicit head tags,No metadata or an undocumented built-in SEO API,"<Head title={title} description={description} />","<SEO title={title} /> // package not installed",High,https://docs.astro.build/en/basics/astro-components/,astro 7.1.6,active,2026-08-13
|
|
34
|
+
33,SEO,Generate sitemap,Automatic sitemap generation,@astrojs/sitemap integration,Manual sitemap maintenance,npx astro add sitemap,Hand-written sitemap.xml,Medium,https://docs.astro.build/en/guides/integrations-guide/sitemap/,astro 7.1.6,active,2026-08-13
|
|
35
|
+
34,SEO,Add RSS feed for content,RSS for blogs and content sites,@astrojs/rss for feed generation,No RSS feed,rss() helper in pages/rss.xml.js,No feed for blog,Low,https://docs.astro.build/en/guides/rss/,astro 7.1.6,active,2026-08-13
|
|
36
|
+
35,SEO,Use canonical URLs,Prevent duplicate content issues,Astro.url for canonical generation,No canonical tags,"<link rel=""canonical"" href={Astro.url}>",No canonical tags,Medium,,astro 7.1.6,active,2026-08-13
|
|
37
|
+
36,Integrations,Use official integrations,Astro's integration system,npx astro add for integrations,Manual configuration,npx astro add react,Manual React setup,Medium,https://docs.astro.build/en/guides/integrations-guide/,astro 7.1.6,active,2026-08-13
|
|
38
|
+
37,Integrations,Configure integrations in astro.config,Centralized configuration,Supported integrations in the integrations array,Scattered configuration,"integrations: [react(), sitemap()]",Multiple config files,Low,,astro 7.1.6,active,2026-08-13
|
|
39
|
+
38,Integrations,Use adapter for deployment,Platform-specific adapters,Correct adapter for host,Wrong or no adapter,@astrojs/vercel for Vercel,No adapter for SSR,High,https://docs.astro.build/en/guides/deploy/,astro 7.1.6,active,2026-08-13
|
|
40
|
+
39,TypeScript,Enable TypeScript,Type safety for Astro projects,tsconfig.json with astro types,No TypeScript,Astro TypeScript template,JavaScript only,Medium,https://docs.astro.build/en/guides/typescript/,astro 7.1.6,active,2026-08-13
|
|
41
|
+
40,TypeScript,Type component props,Define prop interfaces,Props interface in frontmatter,Untyped props,interface Props { title: string },No props typing,Medium,,astro 7.1.6,active,2026-08-13
|
|
42
|
+
41,TypeScript,Use strict mode,Catch errors early,strict: true in tsconfig,Loose TypeScript config,strictest template,base template,Low,,astro 7.1.6,active,2026-08-13
|
|
43
|
+
42,Markdown,Use MDX for components,Components in markdown content,@astrojs/mdx for interactive docs,Plain markdown with workarounds,<Component /> in .mdx,HTML in .md files,Medium,https://docs.astro.build/en/guides/integrations-guide/mdx/,astro 7.1.6,active,2026-08-13
|
|
44
|
+
43,Markdown,Configure markdown plugins,Extend markdown capabilities,remarkPlugins rehypePlugins in config,Manual HTML for features,remarkPlugins: [remarkToc],Manual TOC in every post,Low,,astro 7.1.6,active,2026-08-13
|
|
45
|
+
44,Markdown,Use frontmatter for metadata,Structured post metadata,Frontmatter with typed schema,Inline metadata,title date in frontmatter,# Title as first line,Medium,,astro 7.1.6,active,2026-08-13
|
|
46
|
+
45,API,Use API routes for endpoints,Server endpoints in pages/api,pages/api/[endpoint].ts for APIs,External API for simple endpoints,pages/api/posts.json.ts,Separate Express server,Medium,https://docs.astro.build/en/guides/endpoints/,astro 7.1.6,active,2026-08-13
|
|
47
|
+
46,API,Return proper responses,Use Response object,new Response() with headers,Plain objects,return new Response(JSON.stringify(data)),return data,Medium,,astro 7.1.6,active,2026-08-13
|
|
48
|
+
47,API,Handle methods correctly,Export named method handlers,export GET POST handlers,Single default export,export const GET = async () => {},export default async () => {},Low,,astro 7.1.6,active,2026-08-13
|
|
49
|
+
48,Security,Sanitize user content,Prevent XSS in dynamic content,set:html only for trusted or sanitized content,set:html with user input,<Fragment set:html={sanitized} />,<div set:html={userInput} />,High,https://docs.astro.build/en/reference/directives-reference/#sethtml,astro 7.1.6,active,2026-08-13
|
|
50
|
+
49,Security,Use HTTPS in production,Deploy behind a host or proxy that terminates TLS,HTTPS for all production sites,HTTP in production,https://example.com,http://example.com,High,https://docs.astro.build/en/guides/deploy/,astro 7.1.6,active,2026-08-13
|
|
51
|
+
50,Security,Validate API input,Check and sanitize all input,Schema validation for endpoint input,Trust all input,const body = schema.parse(data),const body = await request.json(),High,https://docs.astro.build/en/guides/endpoints/,astro 7.1.6,active,2026-08-13
|
|
52
|
+
51,Build,Mix prerendered and on-demand routes,Static output supports selected server-rendered routes when an adapter is configured,Keep static output and set prerender false per dynamic route,Use removed output: 'hybrid',export const prerender = false,output: 'hybrid',Medium,https://docs.astro.build/en/guides/on-demand-rendering/,astro 7.1.6,active,2026-08-13
|
|
53
|
+
52,Build,Analyze bundle size,Monitor JS bundle impact,Build output shows bundle sizes,Ignore bundle growth,Check astro build output,No size monitoring,Medium,,astro 7.1.6,active,2026-08-13
|
|
54
|
+
53,Build,Configure built-in prefetch,Preload likely next pages with Astro's built-in prefetch configuration,Set prefetch true or use data-astro-prefetch,Install the removed prefetch integration,prefetch: true,npx astro add prefetch,Low,https://docs.astro.build/en/guides/prefetch/,astro 7.1.6,active,2026-08-13
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
|
|
2
|
+
1,XAML,Use Avalonia XAML namespace,Avalonia has its own XAML namespace not WPF,xmlns= for Avalonia-specific namespace,WPF xmlns or UWP xmlns,"<Window xmlns=""https://github.com/avaloniaui"">","<Window xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"">",High,https://docs.avaloniaui.net/docs/fundamentals/avalonia-xaml,avalonia 12,active,2026-08-13
|
|
3
|
+
2,XAML,Use compiled bindings with x:DataType,Enable compile-time binding validation,x:DataType on root or DataTemplate for compiled bindings,Reflection-based bindings in production,"<Window x:DataType=""vm:MainViewModel""><TextBlock Text=""{Binding Name}""/></Window>","<Window><TextBlock Text=""{Binding Name}""/> without x:DataType",High,https://docs.avaloniaui.net/docs/data-binding/compiled-bindings,avalonia 12,active,2026-08-13
|
|
4
|
+
3,XAML,Enable compiled bindings globally,Avalonia 12 enables AvaloniaUseCompiledBindingsByDefault by default so every binding requires x:DataType and remains trim-safe for Native AOT,Keep the Avalonia 12 default or set AvaloniaUseCompiledBindingsByDefault explicitly when documenting the project contract,Disable compiled bindings or rely on runtime binding resolution,<AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>,<AvaloniaUseCompiledBindingsByDefault>false</AvaloniaUseCompiledBindingsByDefault>,High,https://docs.avaloniaui.net/docs/data-binding/compiled-bindings,avalonia 12,active,2026-08-13
|
|
5
|
+
4,XAML,Use #name shorthand for element-to-element bindings,Compiled bindings cannot resolve {Binding ElementName=...} - use the #name shorthand which relies on NameScope lookup,#name shorthand referencing x:Name controls in the same NameScope,ElementName binding inside a compiled-binding scope,"<TextBlock Text=""{Binding #SearchBox.Text}""/>","<TextBlock Text=""{Binding ElementName=SearchBox, Path=Text}""/> under compiled bindings",Medium,https://docs.avaloniaui.net/docs/data-binding/compiled-bindings,avalonia 12,active,2026-08-13
|
|
6
|
+
5,Styling,Use CSS-like selectors,Avalonia uses selectors not implicit styles,Selectors targeting control types classes and pseudoclasses,WPF-style implicit Style with TargetType,"<Style Selector=""Button.primary""><Setter Property=""Background"" Value=""Blue""/></Style>","<Style TargetType=""Button""> without Selector",High,https://docs.avaloniaui.net/docs/styling/selectors,avalonia 12,active,2026-08-13
|
|
7
|
+
6,Styling,Use pseudoclass selectors for states,Target control states with colon syntax,:pointerover :pressed :focus for interactive states,VisualStateManager or Triggers,"<Style Selector=""Button:pointerover""><Setter Property=""Opacity"" Value=""0.8""/></Style>",<VisualStateManager> for hover effects,Medium,https://docs.avaloniaui.net/docs/styling/pseudoclasses,avalonia 12,active,2026-08-13
|
|
8
|
+
7,Styling,Use nesting selectors,Child and descendant combinators for scoped styles,> for direct child and space for descendant,Flat selectors that match too broadly,"<Style Selector=""StackPanel > Button""><Setter Property=""Margin"" Value=""4""/></Style>","<Style Selector=""Button""> that affects all buttons unintentionally",Medium,https://docs.avaloniaui.net/docs/styling/style-selector-syntax,avalonia 12,active,2026-08-13
|
|
9
|
+
8,Styling,Use StyleInclude for modularity,Split styles into separate AXAML files,StyleInclude to import themed resource files,All styles in a single monolithic App.axaml,"<StyleInclude Source=""/Styles/ButtonStyles.axaml""/>",1000+ line App.axaml with all styles,Medium,https://docs.avaloniaui.net/docs/styling/styles,avalonia 12,active,2026-08-13
|
|
10
|
+
9,Styling,Use Fluent or Simple theme,Built-in Avalonia themes,FluentTheme or SimpleTheme as base,Custom theme from scratch,<FluentTheme/>,Building all control templates manually,High,https://docs.avaloniaui.net/docs/styling/themes,avalonia 12,active,2026-08-13
|
|
11
|
+
10,Styling,Use theme variants for dark mode,Switch between light and dark,RequestedThemeVariant for theme switching,Hardcoded colors ignoring theme variants,Application.Current.RequestedThemeVariant = ThemeVariant.Dark;,Manually changing every brush for dark mode,Medium,https://docs.avaloniaui.net/docs/styling/themes,avalonia 12,active,2026-08-13
|
|
12
|
+
11,Controls,Use DataGrid for tabular data,DataGrid is a separate Avalonia.Controls.DataGrid NuGet package and requires its theme StyleInclude in App.axaml,DataGrid after adding package and StyleInclude for the matching theme,Custom Grid layouts for tabular data or DataGrid without the theme StyleInclude,"<DataGrid ItemsSource=""{Binding Items}"" AutoGenerateColumns=""False""/> with <StyleInclude Source=""avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml""/> in App.axaml",<DataGrid/> with no package reference or no StyleInclude (renders unstyled),Medium,https://docs.avaloniaui.net/docs/reference/controls/datagrid/,avalonia 12,active,2026-08-13
|
|
13
|
+
12,Controls,Use TreeView with TreeDataTemplate,Avalonia uses TreeDataTemplate for hierarchical data - HierarchicalDataTemplate is WPF only,TreeDataTemplate inside TreeView.ItemTemplate with ItemsSource pointing at child collection,HierarchicalDataTemplate copied from WPF or nested ItemsControls,"<TreeView ItemsSource=""{Binding Nodes}""><TreeView.ItemTemplate><TreeDataTemplate ItemsSource=""{Binding Children}""><TextBlock Text=""{Binding Name}""/></TreeDataTemplate></TreeView.ItemTemplate></TreeView>",<TreeView><TreeView.ItemTemplate><HierarchicalDataTemplate/></TreeView.ItemTemplate></TreeView> // HierarchicalDataTemplate does not exist in Avalonia,High,https://docs.avaloniaui.net/docs/reference/controls/treeview-1,avalonia 12,active,2026-08-13
|
|
14
|
+
13,Controls,Use NativeMenu for platform menus,Native menu bar on macOS and desktop,NativeMenu for cross-platform menu bar,Custom menu implementation per platform,"<NativeMenu.Menu><NativeMenu><NativeMenuItem Header=""File""/></NativeMenu></NativeMenu.Menu>",Custom menu bar control for each platform,Medium,https://docs.avaloniaui.net/docs/reference/controls/nativemenu,avalonia 12,active,2026-08-13
|
|
15
|
+
14,Data Binding,Implement INotifyPropertyChanged,Standard .NET property notification,INotifyPropertyChanged or CommunityToolkit.Mvvm,Properties without change notification,[ObservableProperty] private string _name;,public string Name { get; set; } without notification,High,https://docs.avaloniaui.net/docs/data-binding/inotifypropertychanged,avalonia 12,active,2026-08-13
|
|
16
|
+
15,Data Binding,Use ObservableCollection for lists,UI updates on collection changes,ObservableCollection<T> for bound collections,List<T> for ItemsSources,ObservableCollection<Item> Items { get; } = new();,List<Item> Items { get; set; },High,https://docs.avaloniaui.net/docs/data-binding/inotifypropertychanged,avalonia 12,active,2026-08-13
|
|
17
|
+
16,Data Binding,Use binding to named controls,Element-to-element binding with # syntax,#ElementName.Property for cross-element binding,Code-behind for element references,"<TextBlock Text=""{Binding #slider.Value, StringFormat='{}{0:F0}'}""/>",Code-behind ValueChanged handler to update TextBlock,Medium,https://docs.avaloniaui.net/docs/data-binding/introduction-to-data-binding,avalonia 12,active,2026-08-13
|
|
18
|
+
17,Data Binding,Use converters or FuncValueConverter,Transform data for display,FuncValueConverter for simple inline conversions,Complex IValueConverter classes for trivial transforms,"public static FuncValueConverter<bool, IBrush> BoolToColor = new(b => b ? Brushes.Green : Brushes.Red);",Full IValueConverter class for bool to color,Medium,https://docs.avaloniaui.net/docs/data-binding/how-to-create-a-custom-data-binding-converter,avalonia 12,active,2026-08-13
|
|
19
|
+
18,Cross-Platform,Use platform-specific code carefully,Isolate platform code behind abstractions,Interface + platform implementation pattern,#if directives scattered through ViewModels,IPlatformService with platform-specific implementations,#if WINDOWS ... #elif LINUX ... in ViewModel,Medium,https://docs.avaloniaui.net/docs/guides/building-cross-platform-applications/,avalonia 12,active,2026-08-13
|
|
20
|
+
19,Cross-Platform,Test on all target platforms,Rendering and behavior varies across platforms,CI testing on Windows macOS and Linux,Testing only on development platform,GitHub Actions matrix with windows-latest ubuntu-latest macos-latest,Testing only on Windows assuming cross-platform works,High,https://docs.avaloniaui.net/docs/guides/building-cross-platform-applications/,avalonia 12,active,2026-08-13
|
|
21
|
+
20,Cross-Platform,Handle platform file paths,Path separators differ across OS,Path.Combine and Environment.SpecialFolder,Hardcoded backslashes or forward slashes,"Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), ""MyApp"")","@""C:\Users\data\config.json""",Medium,https://docs.avaloniaui.net/docs/guides/building-cross-platform-applications/dealing-with-platforms,avalonia 12,active,2026-08-13
|
|
22
|
+
21,Cross-Platform,Use Avalonia asset system,Platform-agnostic resource loading,avares:// URI scheme for embedded resources,File system paths for assets,"<Image Source=""avares://MyApp/Assets/logo.png""/>","<Image Source=""C:/images/logo.png""/>",High,https://docs.avaloniaui.net/docs/fundamentals/including-assets,avalonia 12,active,2026-08-13
|
|
23
|
+
22,Performance,Use virtualization for large lists,Only render visible items,ListBox and ItemsRepeater with virtualization,Non-virtualizing ItemsControl for large lists,"<ListBox ItemsSource=""{Binding LargeList}""/>",<ItemsControl><StackPanel> for 10K items,High,https://docs.avaloniaui.net/docs/reference/controls/listbox,avalonia 12,active,2026-08-13
|
|
24
|
+
23,Performance,Avoid unnecessary bindings,Each binding has overhead,Bind only properties that change,Binding static labels and headers,"<TextBlock Text=""{Binding DynamicTitle}""/> but static: <TextBlock Text=""Settings""/>","<TextBlock Text=""{Binding SettingsLabel}""/> for constant string",Low,https://docs.avaloniaui.net/docs/data-binding/introduction-to-data-binding,avalonia 12,active,2026-08-13
|
|
25
|
+
24,Performance,Set bitmap interpolation mode on scaled images,RenderOptions.BitmapInterpolationMode controls image scaling quality vs cost; default may look aliased on upscaled or downscaled bitmaps,RenderOptions.SetBitmapInterpolationMode tuned to the use case,Default interpolation on scaled images that look blurry or aliased,"RenderOptions.SetBitmapInterpolationMode(image, BitmapInterpolationMode.HighQuality);",Image scaled with Stretch and no interpolation hint set,Low,https://docs.avaloniaui.net/docs/concepts/image-interpolation,avalonia 12,active,2026-08-13
|
|
26
|
+
25,Performance,Profile with Avalonia DevTools,Built-in diagnostic tools,DevTools for visual tree and binding inspection,Console.WriteLine debugging,Attach DevTools in debug mode with F12,Print statements to debug layout issues,Medium,https://docs.avaloniaui.net/docs/guides/implementation-guides/developer-tools,avalonia 12,active,2026-08-13
|
|
27
|
+
26,Architecture,Use MVVM with ReactiveUI or CommunityToolkit,Proven MVVM frameworks for Avalonia,ReactiveUI or CommunityToolkit.Mvvm for ViewModels,Code-behind for all logic,public class MainViewModel : ReactiveObject { },MainWindow.axaml.cs with all business logic,High,https://docs.avaloniaui.net/docs/how-to/mvvm-how-to,avalonia 12,active,2026-08-13
|
|
28
|
+
27,Architecture,Use ViewLocator pattern,Convention-based View-ViewModel resolution,ViewLocator for automatic view resolution,Manual view instantiation and DataContext wiring,class ViewLocator : IDataTemplate { Build(object data) => new MainView(); },new MainView { DataContext = new MainViewModel() } everywhere,Medium,https://docs.avaloniaui.net/docs/data-templates/view-locator,avalonia 12,active,2026-08-13
|
|
29
|
+
28,Architecture,Use dependency injection,Register services in a Microsoft.Extensions.DependencyInjection container during startup before any view is constructed - resolve ViewModels through the provider not via a static ServiceLocator,Build the ServiceProvider in BuildAvaloniaApp or OnFrameworkInitializationCompleted then resolve ViewModels from it,Static ServiceLocator or new-ing ViewModels inline in code-behind,"services.AddSingleton<IDataService, DataService>(); services.AddTransient<MainViewModel>(); var provider = services.BuildServiceProvider(); // wired before windows are created",ServiceLocator.Current.GetInstance<IDataService>() called from random ViewModels with no registration ordering,Medium,https://docs.avaloniaui.net/docs/app-development/dependency-injection,avalonia 12,active,2026-08-13
|
|
30
|
+
29,Architecture,Separate Views from ViewModels,Keep UI and logic in separate projects,ViewModels in a separate class library,ViewModels in the same project referencing Avalonia types,MyApp.Core (no Avalonia refs) + MyApp.Desktop (Avalonia views),ViewModel importing Avalonia.Controls,Medium,https://docs.avaloniaui.net/docs/how-to/mvvm-how-to,avalonia 12,active,2026-08-13
|
|
31
|
+
30,Accessibility,Set AutomationProperties,Enable screen reader support,AutomationProperties.Name on interactive controls,Controls without accessible names,"<Button AutomationProperties.Name=""Close dialog""><PathIcon Data=""...""/></Button>",<Button><PathIcon/></Button> without accessible name,High,https://docs.avaloniaui.net/api/avalonia/automation/automationproperties,avalonia 12,active,2026-08-13
|
|
32
|
+
31,Accessibility,Support keyboard navigation,Full keyboard operability,TabIndex and KeyboardNavigation properties,Mouse-only interactions,"<Button TabIndex=""1"" Content=""Save""/>",Clickable controls without keyboard support,High,https://docs.avaloniaui.net/docs/input-interaction/keyboard-and-hotkeys,avalonia 12,active,2026-08-13
|
|
33
|
+
32,Accessibility,Use semantic control types,Controls convey meaning to assistive tech,Button for actions ListBox for selection,TextBlock with PointerPressed as fake button,"<Button Content=""Submit""/>","<TextBlock PointerPressed=""OnSubmitClick"" Text=""Submit""/>",High,https://docs.avaloniaui.net/docs/reference/controls/,avalonia 12,active,2026-08-13
|
|
34
|
+
33,Testing,Use Avalonia.Headless for UI tests,Run UI tests without display server,Avalonia.Headless for CI-compatible UI testing,Skipping UI tests in CI,[AvaloniaTest] public void Button_Click_Updates_Label() { ... },UI tests that require a display server,Medium,https://docs.avaloniaui.net/docs/concepts/headless/,avalonia 12,active,2026-08-13
|
|
35
|
+
34,Testing,Unit test ViewModels,Test business logic independently,xUnit or NUnit on ViewModel methods,Testing through UI only,"[Fact] public void AddItem_IncreasesCount() { vm.AddItem(); Assert.Equal(1, vm.Items.Count); }",Manual testing by running the app,Medium,https://docs.avaloniaui.net/docs/concepts/headless/,avalonia 12,active,2026-08-13
|
|
36
|
+
35,Testing,Test converters independently,Value converters contain testable logic,Unit tests on Convert and ConvertBack,Assuming converters work without tests,"[Fact] public void BoolToColor_True_ReturnsGreen() { Assert.Equal(Brushes.Green, converter.Convert(true)); }",No converter tests,Low,https://docs.avaloniaui.net/docs/data-binding/how-to-create-a-custom-data-binding-converter,avalonia 12,active,2026-08-13
|
|
37
|
+
36,Navigation,Use ReactiveUI routing for navigation,IScreen and RoutingState for page navigation,ReactiveUI RoutingState with IScreen on main ViewModel,Manual content swapping in code-behind,public RoutingState Router { get; } = new(); Router.Navigate.Execute(new DetailViewModel());,contentControl.Content = new DetailView(); in code-behind,Medium,https://docs.avaloniaui.net/docs/how-to/navigation-how-to,avalonia 12,active,2026-08-13
|
|
38
|
+
37,Navigation,Use UserControl for views,Pages and screens should be UserControls hosted in a ContentControl,UserControl for each view with RoutedViewHost or ContentControl,Window per page or nested Windows,"<UserControl x:Class=""MyApp.Views.DetailView"">",new Window() for each page in the app,Medium,https://docs.avaloniaui.net/docs/custom-controls/,avalonia 12,active,2026-08-13
|
|
39
|
+
38,Navigation,Use page transitions for view switching,Built-in transitions for smooth navigation,CrossFade PageSlide or CompositePageTransition declared as a property element,Abrupt content swaps with no visual continuity,"<RoutedViewHost><RoutedViewHost.PageTransition><PageSlide Orientation=""Horizontal"" Duration=""0:0:0.3""/></RoutedViewHost.PageTransition></RoutedViewHost>",ContentControl with no transition between views,Low,https://docs.avaloniaui.net/docs/reference/controls/transitioningcontentcontrol,avalonia 12,active,2026-08-13
|
|
40
|
+
39,Navigation,Support back navigation,Maintain navigation history for complex apps,Router.NavigateBack or custom back stack,No way to return to previous views,"<Button Command=""{Binding Router.NavigateBack}"" Content=""Back""/>",Single-direction navigation with no back support,Medium,https://docs.avaloniaui.net/docs/how-to/navigation-how-to,avalonia 12,active,2026-08-13
|
|
41
|
+
40,Controls,Use AutoCompleteBox for search,Built-in autocomplete and suggestion control,AutoCompleteBox with FilterMode and ItemsSource,TextBox with manual Popup and ListBox for suggestions,"<AutoCompleteBox ItemsSource=""{Binding Suggestions}"" FilterMode=""Contains""/>",TextBox with custom Popup for autocomplete,Medium,https://docs.avaloniaui.net/docs/reference/controls/autocompletebox,avalonia 12,active,2026-08-13
|
|
42
|
+
41,Controls,Use TabControl for tabbed interfaces,Standard tabbed navigation and content switching,TabControl with TabItem for tabbed layouts,Manual toggle buttons swapping content,"<TabControl><TabItem Header=""General""><GeneralView/></TabItem><TabItem Header=""Advanced""><AdvancedView/></TabItem></TabControl>",ToggleButtons with manual content switching logic,Medium,https://docs.avaloniaui.net/docs/reference/controls/tabcontrol,avalonia 12,active,2026-08-13
|
|
43
|
+
42,Controls,Use SplitView for master-detail,Collapsible pane layout for navigation or panels,SplitView with Pane and Content areas,Manual Grid with column toggling for sidebar,"<SplitView IsPaneOpen=""{Binding IsPaneOpen}"" DisplayMode=""Inline""><SplitView.Pane><ListBox/></SplitView.Pane><ContentControl/></SplitView>",Grid with manual column width animation for sidebar,Medium,https://docs.avaloniaui.net/docs/reference/controls/splitview,avalonia 12,active,2026-08-13
|
|
44
|
+
43,Controls,Use Flyout for contextual actions,Attach popup menus and actions to controls,Flyout and MenuFlyout on Button or other controls,Custom Popup positioning and management,"<Button Content=""Options""><Button.Flyout><MenuFlyout><MenuItem Header=""Edit""/><MenuItem Header=""Delete""/></MenuFlyout></Button.Flyout></Button>",Custom Popup with manual open/close and positioning,Medium,https://docs.avaloniaui.net/docs/reference/controls/flyouts,avalonia 12,active,2026-08-13
|
|
45
|
+
44,Lifecycle,Use AppBuilder for app configuration,Configure platform features and services at startup,AppBuilder with UsePlatformDetect and fluent API,Manual platform initialization,AppBuilder.Configure<App>().UsePlatformDetect().WithInterFont().StartWithClassicDesktopLifetime(args);,Manual platform-specific startup code per OS,High,https://docs.avaloniaui.net/docs/fundamentals/application-lifetimes,avalonia 12,active,2026-08-13
|
|
46
|
+
45,Lifecycle,Initialize MainWindow in OnFrameworkInitializationCompleted,Override OnFrameworkInitializationCompleted on App and check ApplicationLifetime - on desktop cast to IClassicDesktopStyleApplicationLifetime to set MainWindow and ShutdownMode; never create windows in the App constructor before the framework is ready,Override OnFrameworkInitializationCompleted and pattern-match on IClassicDesktopStyleApplicationLifetime for desktop-only setup,Creating windows in the App constructor or assuming the same lifetime type on every platform,public override void OnFrameworkInitializationCompleted() { if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop) { desktop.MainWindow = new MainWindow(); desktop.ShutdownMode = ShutdownMode.OnMainWindowClose; } base.OnFrameworkInitializationCompleted(); },public App() { new MainWindow().Show(); } // window created before framework init and ignores lifetime type,High,https://docs.avaloniaui.net/docs/fundamentals/application-lifetimes,avalonia 12,active,2026-08-13
|
|
47
|
+
46,Animation,Use CSS-like keyframe animations,Avalonia supports declarative animations in XAML and code,Animation with KeyFrame and Setter for property animations,Manual timer-based property updates,"<Border.Transitions><DoubleTransition Property=""Opacity"" Duration=""0:0:0.3""/></Border.Transitions>",DispatcherTimer ticking to update Opacity manually,Medium,https://docs.avaloniaui.net/docs/graphics-animation/animations,avalonia 12,active,2026-08-13
|
|
48
|
+
47,Animation,Use Transitions for implicit animations,Automatic animation when property values change,Transitions collection on controls for smooth changes,Instant property changes with no visual feedback,"<Button.Transitions><TransformOperationsTransition Property=""RenderTransform"" Duration=""0:0:0.2""/></Button.Transitions>",Direct property set with no transition,Low,https://docs.avaloniaui.net/docs/graphics-animation/control-transitions,avalonia 12,active,2026-08-13
|
|
49
|
+
48,Performance,Use compiled bindings and TrimmerRoots.xml for PublishAot,Avalonia 11+ supports Native AOT for self-contained desktop deployments; XAML reflection paths must use compiled bindings or be preserved via TrimmerRoots so trimming does not strip them,x:CompileBindings=True on every view plus TrimmerRoots.xml for runtime-resolved types,PublishAot with reflection-based {Binding} markup or trimming without checking warnings,"<UserControl x:CompileBindings=""True"" x:DataType=""vm:MainViewModel""/> with <PublishAot>true</PublishAot> and TrimmerRoots.xml listing reflected types",<PublishAot>true</PublishAot> with default <Binding> markup and no TrimmerRoots configuration,Medium,https://docs.avaloniaui.net/docs/deployment/native-aot,avalonia 12,active,2026-08-13
|
|
50
|
+
49,Threading,Marshal cross-thread work to the UI thread,Avalonia controls and bound properties are not thread-safe and touching them off the UI thread throws InvalidOperationException,Dispatcher.UIThread.Post or InvokeAsync to bounce work back to the UI thread,Direct property writes from Task.Run or background threads,"await Dispatcher.UIThread.InvokeAsync(() => Status = ""Done"");","Task.Run(() => { Status = ""Done""; }); // throws Call from invalid thread",High,https://docs.avaloniaui.net/docs/app-development/threading,avalonia 12,active,2026-08-13
|
|
51
|
+
50,Commands,Use AsyncRelayCommand or ReactiveCommand for async work,Async-aware commands disable themselves while running and surface CancellationToken so users cannot double-invoke a long operation,[RelayCommand] async Task method or ReactiveCommand.CreateFromTask,async void event handlers or fire-and-forget Task.Run from a click handler,[RelayCommand] private async Task LoadAsync(CancellationToken ct) { await _api.GetAsync(ct); },"private async void OnClick(object s, RoutedEventArgs e) { await LongOperation(); }",High,https://docs.avaloniaui.net/docs/input-interaction/commanding,avalonia 12,active,2026-08-13
|
|
52
|
+
51,Styling,Use DynamicResource for theme-aware brushes,ResourceDictionary.ThemeDictionaries entries must be looked up via DynamicResource - StaticResource resolves once at load and won't update when the active theme variant changes,DynamicResource for brushes and colors that follow the active theme variant,Hardcoded hex colors or StaticResource for values that should follow theme,"<Border Background=""{DynamicResource SystemControlBackgroundAccentBrush}""/>","<Border Background=""#FF0078D4""/> while the rest of the app honors light/dark variants",Medium,https://docs.avaloniaui.net/docs/app-development/resource-dictionary,avalonia 12,active,2026-08-13
|
|
53
|
+
52,Input,Use HotKey or KeyBinding for keyboard shortcuts,Built-in HotKey on ICommandSource and Window.KeyBindings handle modifier keys focus scoping and cross-platform Ctrl/Cmd mapping,HotKey on a command-bound control or KeyBinding on the Window,Manual KeyDown handlers checking Key and KeyModifiers,"<Button Command=""{Binding SaveCommand}"" HotKey=""Ctrl+S"" Content=""Save""/>",OnKeyDown checking e.Key == Key.S && e.KeyModifiers == KeyModifiers.Control,Medium,https://docs.avaloniaui.net/docs/input-interaction/mouse-and-keyboard-shortcuts,avalonia 12,active,2026-08-13
|
|
54
|
+
53,Windowing,Customize window chrome with ExtendClientAreaToDecorationsHint,Set ExtendClientAreaToDecorationsHint to extend content into the title bar area and tag a region with WindowDecorationProperties.ElementRole=TitleBar to keep native drag and maximize behavior,ExtendClientAreaToDecorationsHint plus a region tagged ElementRole=TitleBar,SystemDecorations=None with hand-rolled PointerPressed dragging in code-behind,"<Window ExtendClientAreaToDecorationsHint=""True""><Border WindowDecorationProperties.ElementRole=""TitleBar""/></Window>","<Window SystemDecorations=""None""> with manual BeginMoveDrag from code-behind",Medium,https://docs.avaloniaui.net/docs/app-development/window-management,avalonia 12,active,2026-08-13
|
|
55
|
+
54,Storage,Use TopLevel.StorageProvider for file pickers,The legacy OpenFileDialog/SaveFileDialog APIs are obsolete - use TopLevel.GetTopLevel(this).StorageProvider with OpenFilePickerAsync/SaveFilePickerAsync/OpenFolderPickerAsync which returns IStorageFile/IStorageFolder and works on desktop mobile and browser,TopLevel.StorageProvider with OpenFilePickerAsync and FilePickerOpenOptions,OpenFileDialog or SaveFileDialog from older Avalonia samples or copied from WPF,var top = TopLevel.GetTopLevel(this); var files = await top.StorageProvider.OpenFilePickerAsync(new FilePickerOpenOptions { AllowMultiple = false });,var dlg = new OpenFileDialog(); var paths = await dlg.ShowAsync(window); // obsolete API,High,https://docs.avaloniaui.net/docs/services/storage/storage-provider,avalonia 12,active,2026-08-13
|
|
56
|
+
55,Windowing,Use TrayIcon for system tray icon,TrayIcon shows a native system tray/notification-area icon with a NativeMenu - declare it via the Application.TrayIcon.Icons attached property in App.axaml; works on Windows macOS and most Linux desktops,TrayIcon with NativeMenu inside TrayIcon.Icons on the Application,Custom borderless window pretending to be a tray icon or per-platform native interop,"<TrayIcon.Icons><TrayIcons><TrayIcon Icon=""/Assets/tray.ico"" ToolTipText=""MyApp""><TrayIcon.Menu><NativeMenu><NativeMenuItem Header=""Show"" Command=""{Binding ShowCommand}""/></NativeMenu></TrayIcon.Menu></TrayIcon></TrayIcons></TrayIcon.Icons>",Hidden Window with custom shell-notification-area P/Invoke,Medium,https://docs.avaloniaui.net/docs/controls/tray-icon,avalonia 12,active,2026-08-13
|
|
57
|
+
56,Cross-Platform,Use OnPlatform and OnFormFactor markup for per-OS values,OnPlatform and OnFormFactor markup extensions resolve to a different value per OS or form factor at XAML load time and replace if-statements in code-behind for tweaks like fonts spacing or icon sizes,OnPlatform with Default Windows macOS Linux entries directly in the property setter,RuntimeInformation.IsOSPlatform branches in code-behind to set XAML properties,"<TextBlock FontFamily=""{OnPlatform Default='Inter', Windows='Segoe UI', macOS='SF Pro Text', Linux='Ubuntu'}""/>","if (OperatingSystem.IsWindows()) textBlock.FontFamily = new(""Segoe UI""); else if (OperatingSystem.IsMacOS()) ...",Medium,https://docs.avaloniaui.net/docs/platform-specific-guides/xaml,avalonia 12,active,2026-08-13
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
|
|
2
|
+
1,Widgets,Use StatelessWidget when possible,Immutable widgets are simpler,StatelessWidget for static UI,StatefulWidget for everything,class MyWidget extends StatelessWidget,class MyWidget extends StatefulWidget (static),Medium,https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
3
|
+
2,Widgets,Keep widgets small,Single responsibility principle,Extract widgets into smaller pieces,Large build methods,Column(children: [Header() Content()]),500+ line build method,Medium,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
4
|
+
3,Widgets,Use const constructors,Compile-time constants for performance,const MyWidget() when possible,Non-const for static widgets,const Text('Hello'),Text('Hello') for literals,High,https://docs.flutter.dev/perf/best-practices#control-build-cost,flutter 3.44.x (current stable line),active,2026-08-13
|
|
5
|
+
4,Widgets,Prefer composition over inheritance,Combine widgets using children,Compose widgets,Extend widget classes,Container(child: MyContent()),class MyContainer extends Container,Medium,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
6
|
+
5,State,Use setState correctly,Minimal state in StatefulWidget,setState for UI state changes,setState for business logic,setState(() { _counter++; }),Complex logic in setState,Medium,https://api.flutter.dev/flutter/widgets/State/setState.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
7
|
+
6,State,Avoid setState in build,Never call setState during build,setState in callbacks only,setState in build method,onPressed: () => setState(() {}),build() { setState(); },High,https://api.flutter.dev/flutter/widgets/State/setState.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
8
|
+
7,State,Use state management for complex apps,Provider Riverpod BLoC,State management for shared state,setState for global state,Provider.of<MyState>(context),Global setState calls,Medium,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
9
|
+
8,State,Prefer Riverpod or Provider,Recommended state solutions,Riverpod for new projects,InheritedWidget manually,ref.watch(myProvider),Custom InheritedWidget,Medium,https://riverpod.dev/,flutter 3.44.x (current stable line),active,2026-08-13
|
|
10
|
+
9,State,Dispose resources,Clean up controllers and subscriptions,dispose() for cleanup,Memory leaks from subscriptions,@override void dispose() { controller.dispose(); },No dispose implementation,High,https://api.flutter.dev/flutter/widgets/State/dispose.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
11
|
+
10,Layout,Use Column and Row,Basic layout widgets,Column Row for linear layouts,Stack for simple layouts,"Column(children: [Text(), Button()])",Stack for vertical list,Medium,https://api.flutter.dev/flutter/widgets/Column-class.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
12
|
+
11,Layout,Use Expanded and Flexible,Control flex behavior,Expanded to fill space,Fixed sizes in flex containers,Expanded(child: Container()),Container(width: 200) in Row,Medium,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
13
|
+
12,Layout,Use SizedBox for spacing,Consistent spacing,SizedBox for gaps,Container for spacing only,SizedBox(height: 16),Container(height: 16),Low,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
14
|
+
13,Layout,Use LayoutBuilder for responsive,Respond to constraints,LayoutBuilder for adaptive layouts,Fixed sizes for responsive,LayoutBuilder(builder: (context constraints) {}),Container(width: 375),Medium,https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
15
|
+
14,Layout,Avoid deep nesting,Keep widget tree shallow,Extract deeply nested widgets,10+ levels of nesting,Extract widget to method or class,Column(Row(Column(Row(...)))),Medium,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
16
|
+
15,Lists,Use ListView.builder,Lazy list building,ListView.builder for long lists,ListView with children for large lists,"ListView.builder(itemCount: 100, itemBuilder: ...)",ListView(children: items.map(...).toList()),High,https://api.flutter.dev/flutter/widgets/ListView-class.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
17
|
+
16,Lists,Provide itemExtent when known,Skip measurement,itemExtent for fixed height items,No itemExtent for uniform lists,ListView.builder(itemExtent: 50),ListView.builder without itemExtent,Medium,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
18
|
+
17,Lists,Use keys for stateful items,Preserve widget state,Key for stateful list items,No key for dynamic lists,ListTile(key: ValueKey(item.id)),ListTile without key,High,https://api.flutter.dev/flutter/foundation/ValueKey-class.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
19
|
+
18,Lists,Use SliverList for custom scroll,Custom scroll effects,CustomScrollView with Slivers,Nested ListViews,CustomScrollView(slivers: [SliverList()]),ListView inside ListView,Medium,https://api.flutter.dev/flutter/widgets/SliverList-class.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
20
|
+
19,Navigation,Use Navigator 2.0 or GoRouter,Declarative routing,go_router for navigation,Navigator.push for complex apps,GoRouter(routes: [...]),Navigator.push everywhere,Medium,https://pub.dev/packages/go_router,flutter 3.44.x (current stable line),active,2026-08-13
|
|
21
|
+
20,Navigation,Use named routes,Organized navigation,Named routes for clarity,Anonymous routes,Navigator.pushNamed(context '/home'),Navigator.push(context MaterialPageRoute()),Low,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
22
|
+
21,Navigation,Handle back button with PopScope,Android back behavior and predictive back (Android 14+),Use PopScope with onPopInvokedWithResult,Use WillPopScope,"PopScope(canPop: canPop, onPopInvokedWithResult: (didPop, result) { ... })",WillPopScope(onWillPop: ...),High,https://api.flutter.dev/flutter/widgets/PopScope-class.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
23
|
+
22,Navigation,Pass typed arguments,Type-safe route arguments,Typed route arguments,Dynamic arguments,MyRoute(id: '123'),arguments: {'id': '123'},Medium,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
24
|
+
23,Async,Use FutureBuilder,Async UI building,FutureBuilder for async data,setState for async,FutureBuilder(future: fetchData()),fetchData().then((d) => setState()),Medium,https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
25
|
+
24,Async,Use StreamBuilder,Stream UI building,StreamBuilder for streams,Manual stream subscription,StreamBuilder(stream: myStream),stream.listen in initState,Medium,https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
26
|
+
25,Async,Handle loading and error states,Complete async UI states,ConnectionState checks,Only success state,if (snapshot.connectionState == ConnectionState.waiting),No loading indicator,High,https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
27
|
+
26,Async,Cancel subscriptions,Clean up stream subscriptions,Cancel in dispose,Memory leaks,subscription.cancel() in dispose,No subscription cleanup,High,https://api.flutter.dev/flutter/dart-async/StreamSubscription/cancel.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
28
|
+
27,Theming,Use ThemeData,Consistent theming,ThemeData for app theme,Hardcoded colors,Theme.of(context).primaryColor,Color(0xFF123456) everywhere,Medium,https://api.flutter.dev/flutter/material/ThemeData-class.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
29
|
+
28,Theming,Use ColorScheme,Material 3 color system,ColorScheme for colors,Individual color properties,colorScheme: ColorScheme.fromSeed(),primaryColor: Colors.blue,Medium,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
30
|
+
29,Theming,Access theme via context,Dynamic theme access,Theme.of(context),Static theme reference,Theme.of(context).textTheme.bodyLarge,TextStyle(fontSize: 16),Medium,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
31
|
+
30,Theming,Support dark mode,Respect system theme,darkTheme in MaterialApp,Light theme only,"MaterialApp(theme: light, darkTheme: dark)",MaterialApp(theme: light),Medium,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
32
|
+
31,Animation,Use implicit animations,Simple animations,AnimatedContainer AnimatedOpacity,Explicit for simple transitions,AnimatedContainer(duration: Duration()),AnimationController for fade,Low,https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
33
|
+
32,Animation,Use AnimationController for complex,Fine-grained control,AnimationController with Ticker,Implicit for complex sequences,AnimationController(vsync: this),AnimatedContainer for staggered,Medium,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
34
|
+
33,Animation,Dispose AnimationControllers,Clean up animation resources,dispose() for controllers,Memory leaks,controller.dispose() in dispose,No controller disposal,High,https://api.flutter.dev/flutter/animation/AnimationController/dispose.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
35
|
+
34,Animation,Use Hero for transitions,Shared element transitions,Hero for navigation animations,Manual shared element,Hero(tag: 'image' child: Image()),Custom shared element animation,Low,https://api.flutter.dev/flutter/widgets/Hero-class.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
36
|
+
35,Forms,Use Form widget,Form validation,Form with GlobalKey,Individual validation,Form(key: _formKey child: ...),TextField without Form,Medium,https://api.flutter.dev/flutter/widgets/Form-class.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
37
|
+
36,Forms,Use TextEditingController,Control text input,Controller for text fields,onChanged for all text,final controller = TextEditingController(),onChanged: (v) => setState(),Medium,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
38
|
+
37,Forms,Validate on submit,Form validation flow,_formKey.currentState!.validate(),Skip validation,if (_formKey.currentState!.validate()),Submit without validation,High,https://api.flutter.dev/flutter/widgets/FormState/validate.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
39
|
+
38,Forms,Dispose controllers,Clean up text controllers,dispose() for controllers,Memory leaks,controller.dispose() in dispose,No controller disposal,High,https://api.flutter.dev/flutter/widgets/TextEditingController-class.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
40
|
+
39,Performance,Use const widgets,Reduce rebuilds,const for static widgets,No const for literals,const Icon(Icons.add),Icon(Icons.add),High,https://docs.flutter.dev/perf/best-practices#control-build-cost,flutter 3.44.x (current stable line),active,2026-08-13
|
|
41
|
+
40,Performance,Avoid rebuilding entire tree,Minimal rebuild scope,Isolate changing widgets,setState on parent,Consumer only around changing widget,setState on root widget,High,https://docs.flutter.dev/perf/best-practices#control-build-cost,flutter 3.44.x (current stable line),active,2026-08-13
|
|
42
|
+
41,Performance,Use RepaintBoundary,Isolate repaints,RepaintBoundary for animations,Full screen repaints,RepaintBoundary(child: AnimatedWidget()),Animation without boundary,Medium,https://api.flutter.dev/flutter/widgets/RepaintBoundary-class.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
43
|
+
42,Performance,Profile with DevTools,Measure before optimizing,Flutter DevTools profiling,Guess at performance,DevTools performance tab,Optimize without measuring,Medium,https://docs.flutter.dev/tools/devtools,flutter 3.44.x (current stable line),active,2026-08-13
|
|
44
|
+
43,Accessibility,Use Semantics widget,Screen reader support,Semantics for accessibility,Missing accessibility info,Semantics(label: 'Submit button'),GestureDetector without semantics,High,https://api.flutter.dev/flutter/widgets/Semantics-class.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
45
|
+
44,Accessibility,Support large fonts,Use TextScaler for nonlinear text scaling,Use MediaQuery.textScalerOf(context),Fixed font sizes,final scaler = MediaQuery.textScalerOf(context); scaler.scale(14),MediaQuery.textScaleFactor,High,https://api.flutter.dev/flutter/widgets/MediaQuery/textScalerOf.html,flutter 3.44.x (current stable line),active,2026-08-13
|
|
46
|
+
45,Accessibility,Test with screen readers,TalkBack and VoiceOver,Test accessibility regularly,Skip accessibility testing,Regular TalkBack testing,No screen reader testing,High,https://docs.flutter.dev/ui/accessibility-and-internationalization/accessibility#screen-readers,flutter 3.44.x (current stable line),active,2026-08-13
|
|
47
|
+
46,Testing,Use widget tests,Test widget behavior,WidgetTester for UI tests,Unit tests only,testWidgets('...' (tester) async {}),Only test() for UI,Medium,https://docs.flutter.dev/testing,flutter 3.44.x (current stable line),active,2026-08-13
|
|
48
|
+
47,Testing,Use integration tests,Full app testing,integration_test package,Manual testing only,IntegrationTestWidgetsFlutterBinding,Manual E2E testing,Medium,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
49
|
+
48,Testing,Mock dependencies,Isolate tests,Mockito or mocktail,Real dependencies in tests,when(mock.method()).thenReturn(),Real API calls in tests,Medium,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
50
|
+
49,Platform,Use Platform checks,Platform-specific code,Platform.isIOS Platform.isAndroid,Same code for all platforms,if (Platform.isIOS) {},Hardcoded iOS behavior,Medium,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
51
|
+
50,Platform,Use kIsWeb for web,Web platform detection,kIsWeb for web checks,Platform for web,if (kIsWeb) {},Platform.isWeb (doesn't exist),Medium,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
52
|
+
51,Packages,Use pub.dev packages,Community packages,Popular maintained packages,Custom implementations,cached_network_image,Custom image cache,Medium,https://pub.dev/,flutter 3.44.x (current stable line),active,2026-08-13
|
|
53
|
+
52,Packages,Check package quality,Quality before adding,Pub points and popularity,Any package without review,100+ pub points,Unmaintained packages,Medium,,flutter 3.44.x (current stable line),active,2026-08-13
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
|
|
2
|
+
1,Animation,Use Tailwind animate utilities,Built-in animations are optimized and respect reduced-motion,Use animate-pulse animate-spin animate-ping,Custom @keyframes for simple effects,animate-pulse,@keyframes pulse {...},Medium,https://tailwindcss.com/docs/animation,html-tailwind 4.3,active,2026-08-13
|
|
3
|
+
2,Animation,Limit bounce animations,Continuous bounce is distracting and can conflict with reduced-motion preferences,Use animate-bounce sparingly and add motion-reduce:animate-none,Multiple unbounded bounce animations,animate-bounce motion-reduce:animate-none,5+ elements with animate-bounce,High,https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion,html-tailwind 4.3,active,2026-08-13
|
|
4
|
+
3,Animation,Transition duration,Use appropriate transition speeds for UI feedback,duration-150 to duration-300 for UI,duration-1000 or longer for UI elements,transition-all duration-200,transition-all duration-1000,Medium,https://tailwindcss.com/docs/transition-duration,html-tailwind 4.3,active,2026-08-13
|
|
5
|
+
4,Animation,Hover transitions,Add smooth transitions on hover state changes,Add transition class with hover states,Instant hover changes without transition,hover:bg-gray-100 transition-colors,hover:bg-gray-100 (no transition),Low,,html-tailwind 4.3,active,2026-08-13
|
|
6
|
+
5,Z-Index,Use Tailwind z-* scale,Consistent stacking context with predefined scale,z-0 z-10 z-20 z-30 z-40 z-50,Arbitrary z-index values,z-50 for modals,z-[9999],Medium,https://tailwindcss.com/docs/z-index,html-tailwind 4.3,active,2026-08-13
|
|
7
|
+
6,Z-Index,Fixed elements z-index,Fixed navigation and overlays need an intentional stacking order,Use documented z-* tokens for the application layer,Rely only on DOM order for stacking,fixed top-0 z-50,fixed top-0 (no z-index),High,https://tailwindcss.com/docs/z-index,html-tailwind 4.3,active,2026-08-13
|
|
8
|
+
7,Z-Index,Negative z-index for backgrounds,Use negative z-index for decorative backgrounds,z-[-1] for background elements,Positive z-index for backgrounds,-z-10 for decorative,z-10 for background,Low,,html-tailwind 4.3,active,2026-08-13
|
|
9
|
+
8,Layout,Container max-width,Limit content width for readability,max-w-7xl mx-auto for main content,Full-width content on large screens,max-w-7xl mx-auto px-4,w-full (no max-width),Medium,https://tailwindcss.com/docs/container,html-tailwind 4.3,active,2026-08-13
|
|
10
|
+
9,Layout,Responsive padding,Adjust padding for different screen sizes,px-4 md:px-6 lg:px-8,Same padding all sizes,px-4 sm:px-6 lg:px-8,px-8 (same all sizes),Medium,,html-tailwind 4.3,active,2026-08-13
|
|
11
|
+
10,Layout,Grid gaps,Use consistent gap utilities for spacing,gap-4 gap-6 gap-8,Margins on individual items,grid gap-6,grid with mb-4 on each item,Medium,https://tailwindcss.com/docs/gap,html-tailwind 4.3,active,2026-08-13
|
|
12
|
+
11,Layout,Flexbox alignment,Use flex utilities for alignment,items-center justify-between,Multiple nested wrappers,flex items-center justify-between,Nested divs for alignment,Low,,html-tailwind 4.3,active,2026-08-13
|
|
13
|
+
12,Images,Aspect ratio,Maintain consistent image aspect ratios,aspect-video aspect-square,No aspect ratio on containers,aspect-video rounded-lg,No aspect control,Medium,https://tailwindcss.com/docs/aspect-ratio,html-tailwind 4.3,active,2026-08-13
|
|
14
|
+
13,Images,Object fit,Control image scaling within containers,object-cover object-contain,Stretched distorted images,object-cover w-full h-full,No object-fit,Medium,https://tailwindcss.com/docs/object-fit,html-tailwind 4.3,active,2026-08-13
|
|
15
|
+
14,Images,Reserve image space,Give image wrappers an aspect ratio or dimensions to avoid layout shifts,aspect-video or explicit dimensions,Let images determine layout after load,aspect-video overflow-hidden,Image without reserved space,High,https://tailwindcss.com/docs/aspect-ratio,html-tailwind 4.3,active,2026-08-13
|
|
16
|
+
15,Images,Responsive image layout,Adjust image sizing and placement mobile-first with breakpoint variants,w-full md:w-1/2,Use a fixed desktop width at every viewport,w-full md:max-w-xl,w-[900px],High,https://tailwindcss.com/docs/responsive-design,html-tailwind 4.3,active,2026-08-13
|
|
17
|
+
16,Typography,Prose plugin,Use @tailwindcss/typography for rich text,prose prose-lg for article content,Custom styles for markdown,prose prose-lg max-w-none,Custom text styling,Medium,https://tailwindcss.com/docs/typography-plugin,html-tailwind 4.3,active,2026-08-13
|
|
18
|
+
17,Typography,Line height,Use appropriate line height for readability,leading-relaxed for body text,Default tight line height,leading-relaxed (1.625),leading-none or leading-tight,Medium,https://tailwindcss.com/docs/line-height,html-tailwind 4.3,active,2026-08-13
|
|
19
|
+
18,Typography,Font size scale,Use consistent text size scale,text-sm text-base text-lg text-xl,Arbitrary font sizes,text-lg,text-[17px],Low,https://tailwindcss.com/docs/font-size,html-tailwind 4.3,active,2026-08-13
|
|
20
|
+
19,Typography,Text truncation,Handle long text gracefully,truncate or line-clamp-*,Overflow breaking layout,line-clamp-2,No overflow handling,Medium,https://tailwindcss.com/docs/text-overflow,html-tailwind 4.3,active,2026-08-13
|
|
21
|
+
20,Colors,Opacity utilities,Use color opacity utilities,bg-black/50 text-white/80,Separate opacity class,bg-black/50,bg-black opacity-50,Low,https://tailwindcss.com/docs/background-color,html-tailwind 4.3,active,2026-08-13
|
|
22
|
+
21,Colors,Dark mode,Support dark mode with dark: prefix,dark:bg-gray-900 dark:text-white,No dark mode support,dark:bg-gray-900,Only light theme,Medium,https://tailwindcss.com/docs/dark-mode,html-tailwind 4.3,active,2026-08-13
|
|
23
|
+
22,Colors,Semantic colors,Define semantic design tokens with CSS-first @theme,Declare --color-primary and related tokens in @theme,Repeat palette utilities in components,bg-primary,bg-blue-500 everywhere,Medium,https://tailwindcss.com/docs/theme,html-tailwind 4.3,active,2026-08-13
|
|
24
|
+
23,Spacing,Consistent spacing scale,Use Tailwind spacing scale consistently,p-4 m-6 gap-8,Arbitrary pixel values,p-4 (1rem),p-[15px],Low,https://tailwindcss.com/docs/customizing-spacing,html-tailwind 4.3,active,2026-08-13
|
|
25
|
+
24,Spacing,Negative margins,Use sparingly for overlapping effects,-mt-4 for overlapping elements,Negative margins for layout fixing,-mt-8 for card overlap,-m-2 to fix spacing issues,Medium,,html-tailwind 4.3,active,2026-08-13
|
|
26
|
+
25,Spacing,Space between,Use space-y-* for vertical lists,space-y-4 on flex/grid column,Margin on each child,space-y-4,Each child has mb-4,Low,https://tailwindcss.com/docs/space,html-tailwind 4.3,active,2026-08-13
|
|
27
|
+
26,Forms,Focus states,Always show focus indicators,focus:ring-2 focus:ring-blue-500,Remove focus outline,focus:ring-2 focus:ring-offset-2,focus:outline-none (no replacement),High,https://tailwindcss.com/docs/hover-focus-and-other-states#focus,html-tailwind 4.3,active,2026-08-13
|
|
28
|
+
27,Forms,Input sizing,Consistent input dimensions,h-10 px-3 for inputs,Inconsistent input heights,h-10 w-full px-3,Various heights per input,Medium,,html-tailwind 4.3,active,2026-08-13
|
|
29
|
+
28,Forms,Disabled states,Clear disabled styling,disabled:opacity-50 disabled:cursor-not-allowed,No disabled indication,disabled:opacity-50,Same style as enabled,Medium,,html-tailwind 4.3,active,2026-08-13
|
|
30
|
+
29,Forms,Placeholder styling,Style placeholder text appropriately,placeholder:text-gray-400,Dark placeholder text,placeholder:text-gray-400,Default dark placeholder,Low,,html-tailwind 4.3,active,2026-08-13
|
|
31
|
+
30,Responsive,Mobile-first approach,Start with mobile styles and add breakpoints,Default mobile + md: lg: xl:,Desktop-first approach,text-sm md:text-base,text-base max-md:text-sm,Medium,https://tailwindcss.com/docs/responsive-design,html-tailwind 4.3,active,2026-08-13
|
|
32
|
+
31,Responsive,Breakpoint testing,Test across breakpoint boundaries and representative viewport sizes,Test below at and above configured breakpoints,Only test on development device,Test mobile through 2xl boundaries,Single device testing,High,https://tailwindcss.com/docs/responsive-design,html-tailwind 4.3,active,2026-08-13
|
|
33
|
+
32,Responsive,Hidden/shown utilities,Control visibility per breakpoint,hidden md:block,Different content per breakpoint,hidden md:flex,Separate mobile/desktop components,Low,https://tailwindcss.com/docs/display,html-tailwind 4.3,active,2026-08-13
|
|
34
|
+
33,Buttons,Button sizing,Consistent button dimensions,px-4 py-2 or px-6 py-3,Inconsistent button sizes,px-4 py-2 text-sm,Various padding per button,Medium,,html-tailwind 4.3,active,2026-08-13
|
|
35
|
+
34,Buttons,Touch targets,Minimum 44px touch target on mobile,min-h-11 min-w-11 on mobile,Small buttons on mobile,min-h-11 min-w-11,h-8 w-8 on mobile,High,https://tailwindcss.com/docs/min-height,html-tailwind 4.3,active,2026-08-13
|
|
36
|
+
35,Buttons,Loading states,Show loading feedback and prevent duplicate activation,Disable the action and expose busy state,Leave button clickable during loading,<button disabled aria-busy='true'>Saving</button>,Button without loading state,High,https://tailwindcss.com/docs/opacity,html-tailwind 4.3,active,2026-08-13
|
|
37
|
+
36,Buttons,Icon buttons,Accessible icon-only buttons,aria-label on icon buttons,Icon button without label,<button aria-label='Close'><XIcon/></button>,<button><XIcon/></button>,High,https://tailwindcss.com/docs/screen-readers,html-tailwind 4.3,active,2026-08-13
|
|
38
|
+
37,Cards,Card structure,Consistent card styling,rounded-lg shadow-md p-6,Inconsistent card styles,rounded-2xl shadow-lg p-6,Mixed card styling,Low,,html-tailwind 4.3,active,2026-08-13
|
|
39
|
+
38,Cards,Card hover states,Interactive cards should have hover feedback,hover:shadow-lg transition-shadow,No hover on clickable cards,hover:shadow-xl transition-shadow,Static cards that are clickable,Medium,,html-tailwind 4.3,active,2026-08-13
|
|
40
|
+
39,Cards,Card spacing,Consistent internal card spacing,space-y-4 for card content,Inconsistent internal spacing,space-y-4 or p-6,Mixed mb-2 mb-4 mb-6,Low,,html-tailwind 4.3,active,2026-08-13
|
|
41
|
+
40,Accessibility,Screen reader text,Provide context for screen readers,sr-only for hidden labels,Missing context for icons,<span class='sr-only'>Close menu</span>,No label for icon button,High,https://tailwindcss.com/docs/screen-readers,html-tailwind 4.3,active,2026-08-13
|
|
42
|
+
41,Accessibility,Focus visible,Show focus only for keyboard users,focus-visible:ring-2,Focus on all interactions,focus-visible:ring-2,focus:ring-2 (shows on click too),Medium,,html-tailwind 4.3,active,2026-08-13
|
|
43
|
+
42,Accessibility,Reduced motion,Respect user motion preferences,motion-reduce:animate-none,Ignore motion preferences,motion-reduce:transition-none,No reduced motion support,High,https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion,html-tailwind 4.3,active,2026-08-13
|
|
44
|
+
43,Performance,Declare non-detected sources,Tailwind v4 detects source files automatically; use @source only for ignored or external paths,@source '../node_modules/@acme/ui',Maintain a legacy content array for ordinary v4 sources,@source '../node_modules/@acme/ui',"content: ['./src/**/*.{js,ts,jsx,tsx}']",High,https://tailwindcss.com/docs/detecting-classes-in-source-files,html-tailwind 4.3,active,2026-08-13
|
|
45
|
+
44,Performance,JIT mode migration,Tailwind v3 made JIT the default; remove obsolete mode configuration during migration,Use the v3 default compiler behavior,Keep mode:'jit' as a current v4 requirement,Tailwind v3 defaults,"mode: 'jit'",Medium,https://tailwindcss.com/blog/just-in-time-the-next-generation-of-tailwind-css,html-tailwind legacy 3.x,deprecated,2026-08-13
|
|
46
|
+
45,Performance,Avoid @apply bloat,Use @apply sparingly,Direct utilities in HTML,Heavy @apply usage,class='px-4 py-2 rounded',@apply px-4 py-2 rounded;,Low,https://tailwindcss.com/docs/reusing-styles,html-tailwind 4.3,active,2026-08-13
|
|
47
|
+
46,Plugins,Official plugins,Use maintained plugins only for capabilities not built into core,@tailwindcss/forms or @tailwindcss/typography,Install legacy aspect-ratio or container-query plugins,@tailwindcss/forms,@tailwindcss/aspect-ratio,Medium,https://tailwindcss.com/docs/functions-and-directives#plugin-directive,html-tailwind 4.3,active,2026-08-13
|
|
48
|
+
47,Plugins,Custom utilities,Define reusable custom utilities with @utility,@utility content-auto { content-visibility: auto; },Repeat complex arbitrary values,@utility content-auto { content-visibility: auto; },"[content-visibility:auto] everywhere",Medium,https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities,html-tailwind 4.3,active,2026-08-13
|
|
49
|
+
48,Layout,Container queries,Use built-in container queries and Tailwind 4.3 container-size queries for component responsiveness,@container with @lg variants and @container-size when both dimensions matter,Install the retired container-query plugin,@container @lg:grid-cols-2,@tailwindcss/container-queries,Medium,https://tailwindcss.com/blog/tailwindcss-v4-3,html-tailwind 4.3,active,2026-08-13
|
|
50
|
+
49,Interactivity,Group and Peer,Style based on parent/sibling state,group-hover peer-checked,JS for simple state interactions,group-hover:text-blue-500,onMouseEnter={() => setHover(true)},Low,https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state,html-tailwind 4.3,active,2026-08-13
|
|
51
|
+
50,Customization,Arbitrary Values,Use [] for one-off values,w-[350px] for specific needs,Creating config for single use,top-[117px] (if strictly needed),style={{ top: '117px' }},Low,https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values,html-tailwind 4.3,active,2026-08-13
|
|
52
|
+
51,Colors,Theme color variables,Declare color namespaces in @theme so Tailwind generates semantic utilities,@theme { --color-primary: oklch(...); },Use arbitrary CSS-variable utilities for registered tokens,bg-primary,bg-[var(--color-primary)],Medium,https://tailwindcss.com/docs/colors#customizing-your-colors,html-tailwind 4.3,active,2026-08-13
|
|
53
|
+
52,Colors,Use bg-linear-to-* for gradients,Tailwind v4 uses bg-linear-to-* syntax for gradients,bg-linear-to-r bg-linear-to-b,bg-gradient-to-* (deprecated in v4),bg-linear-to-r from-blue-500 to-purple-500,bg-gradient-to-r from-blue-500 to-purple-500,Medium,https://tailwindcss.com/docs/background-image,html-tailwind 4.3,active,2026-08-13
|
|
54
|
+
53,Layout,Use shrink-0 shorthand,Shorter class name for flex-shrink-0,shrink-0 shrink,flex-shrink-0 flex-shrink,shrink-0,flex-shrink-0,Low,https://tailwindcss.com/docs/flex-shrink,html-tailwind 4.3,active,2026-08-13
|
|
55
|
+
54,Layout,Use size-* for square dimensions,Single utility for equal width and height,size-4 size-8 size-12,Separate h-* w-* for squares,size-6,h-6 w-6,Low,https://tailwindcss.com/docs/size,html-tailwind 4.3,active,2026-08-13
|
|
56
|
+
55,Images,SVG explicit dimensions,Add width and height attributes to reserve intrinsic SVG space before CSS loads,<svg class='size-6' width='24' height='24'>,SVG without intrinsic dimensions,<svg class='size-6' width='24' height='24'>,<svg class='size-6'>,High,https://tailwindcss.com/docs/width,html-tailwind 4.3,active,2026-08-13
|
|
57
|
+
56,Performance,Use complete class tokens,Keep utility class names statically detectable in source,Map variants to complete tokens like colorMap[color],Construct partial tokens with interpolation,"const colorMap = { red: 'bg-red-500', blue: 'bg-blue-500' }","`bg-${color}-500`",High,https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names,html-tailwind 4.3,active,2026-08-13
|
|
58
|
+
57,Typography,Balanced heading wrapping,Polish short multi-line headings without fixing exact line breaks,Use text-balance with a readable max-width and natural wrapping fallback,Insert hardcoded br tags or blanket nonbreaking spaces,max-w-xl text-balance,whitespace-nowrap with manual br,Medium,https://tailwindcss.com/docs/text-wrap,html-tailwind 4.3,active,2026-08-13
|
|
59
|
+
58,Typography,Long token resilience,Allow URLs identifiers and user content to break without widening flex layouts,Use wrap-anywhere on unpredictable text and min-w-0 on its flexible parent,Use break-all globally or keep the flex child at its intrinsic minimum,flex min-w-0 with wrap-anywhere,flex with whitespace-nowrap,High,https://tailwindcss.com/docs/overflow-wrap,html-tailwind 4.3,active,2026-08-13
|
|
60
|
+
59,Layout,Compact label layout,Handle chip and badge text overflow without breaking compact labels or hiding collection values,Use flex flex-wrap gap-2 for collections; for one label use whitespace-nowrap bounded min-w-0 truncate and shrink-0 controls,Clip a fixed-height row let labels wrap inside a pill or let dismiss icons shrink,flex flex-wrap gap-2; label min-w-0 whitespace-nowrap truncate; icon shrink-0,flex h-8 overflow-hidden,High,https://tailwindcss.com/docs/flex-wrap,html-tailwind 4.3,active,2026-08-13
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
|
|
2
|
+
1,Application,Start UI from Application subclass,JavaFX apps should bootstrap the primary Stage through Application.start(),Extend Application and configure Scene in start(),Create UI from a random main method without launching JavaFX,public class App extends Application { public void start(Stage stage) { stage.setScene(new Scene(root)); stage.show(); } },new Stage().show(),High,https://openjfx.io/javadoc/26/javafx.graphics/javafx/application/Application.html,javafx 26,active,2026-08-13
|
|
3
|
+
2,Threading,Keep work off the FX Application Thread,Long-running work blocks rendering and input when executed on the UI thread,Use Task or Service for background work,Run network database or file work in button handlers,Task<List<Item>> task = new Task<>() { protected List<Item> call() { return repo.load(); } }; new Thread(task).start();,loadLargeFile(); table.setItems(items);,High,https://openjfx.io/javadoc/26/javafx.graphics/javafx/concurrent/Task.html,javafx 26,active,2026-08-13
|
|
4
|
+
3,Threading,Update UI only on FX thread,Scene graph changes must happen on the JavaFX Application Thread,Use bindings task handlers or Platform.runLater for UI changes,Mutate controls directly from background threads,task.setOnSucceeded(e -> table.setItems(FXCollections.observableArrayList(task.getValue())));,"new Thread(() -> label.setText(""Done"")).start()",High,https://openjfx.io/javadoc/26/javafx.graphics/javafx/application/Platform.html,javafx 26,active,2026-08-13
|
|
5
|
+
4,Threading,Bind progress to background tasks,Task exposes progress and message properties for responsive feedback,Bind ProgressBar and Label to task properties,Poll progress manually or leave users without feedback,progress.progressProperty().bind(task.progressProperty()); status.textProperty().bind(task.messageProperty());,while(running) progress.setProgress(x);,Medium,https://openjfx.io/javadoc/26/javafx.graphics/javafx/concurrent/Task.html,javafx 26,active,2026-08-13
|
|
6
|
+
5,FXML,Use FXML for stable declarative layouts,FXML keeps view structure readable for screens with many controls,Place layout in FXML and behavior in controller,Build large screens entirely in one Java method,"<VBox spacing=""12"" xmlns:fx=""http://javafx.com/fxml"" fx:controller=""app.MainController"">",VBox root = new VBox(); root.getChildren().add(... 200 lines ...);,Medium,https://openjfx.io/javadoc/26/javafx.fxml/javafx/fxml/FXMLLoader.html,javafx 26,active,2026-08-13
|
|
7
|
+
6,FXML,Keep controllers focused on view behavior,Controllers should coordinate controls and delegate business logic to services,Inject services or call application services from controller,Put database queries and domain rules directly in controller,public void save() { customerService.save(form.toCommand()); },public void save() { DriverManager.getConnection(...); },High,https://openjfx.io/javadoc/26/javafx.fxml/javafx/fxml/FXML.html,javafx 26,active,2026-08-13
|
|
8
|
+
7,FXML,Use fx:id for injected controls,FXML controls need stable fx:id values that match controller fields,Annotate fields with @FXML and keep ids descriptive,Look up controls by CSS selector for normal wiring,@FXML private TableView<Customer> customerTable;,"root.lookup(""#customerTable"")",Medium,https://openjfx.io/javadoc/26/javafx.fxml/javafx/fxml/FXML.html,javafx 26,active,2026-08-13
|
|
9
|
+
8,FXML,Fail fast when loading FXML,FXML load errors should surface during screen creation with clear context,Load resources with getResource and handle IOException explicitly,Swallow loader errors and show a blank scene,"URL view = getClass().getResource(\/views/main.fxml\""); Parent root = FXMLLoader.load(view);""",try { FXMLLoader.load(url); } catch(Exception ignored) {},High,https://openjfx.io/javadoc/26/javafx.fxml/javafx/fxml/FXMLLoader.html,javafx 26,active,2026-08-13
|
|
10
|
+
9,CSS,Style with style classes,JavaFX CSS works best through reusable styleClass names,Add semantic style classes and define them in CSS,Set long inline style strings throughout code,"button.getStyleClass().add(\primary-action\"");""",".setStyle(\-fx-background-color: #2563eb; -fx-padding: 12; ...\"")""",Medium,https://openjfx.io/javadoc/26/javafx.graphics/javafx/scene/doc-files/cssref.html,javafx 26,active,2026-08-13
|
|
11
|
+
10,CSS,Use design tokens through looked-up colors,Looked-up colors keep palettes consistent across controls,Define named colors on root and reuse them in CSS,Repeat hex values in every selector,.root { -brand-primary: #2563eb; } .button.primary { -fx-background-color: -brand-primary; },.save { -fx-background-color: #2563eb; } .link { -fx-text-fill: #2563eb; },Medium,https://openjfx.io/javadoc/26/javafx.graphics/javafx/scene/doc-files/cssref.html,javafx 26,active,2026-08-13
|
|
12
|
+
11,CSS,Avoid overusing inline effects,Expensive CSS effects and shadows can hurt desktop UI responsiveness,Use subtle shadows only on important elevated surfaces,Apply blur drop shadow and glow to every node,".dialog-card { -fx-effect: dropshadow(gaussian, rgba(0,0,0,.18), 16, 0, 0, 4); }",".table-row-cell { -fx-effect: dropshadow(gaussian, black, 20, .5, 0, 0); }",Medium,https://openjfx.io/javadoc/26/javafx.graphics/javafx/scene/effect/package-summary.html,javafx 26,active,2026-08-13
|
|
13
|
+
12,Layout,Choose layout panes by responsibility,Each pane solves a different layout problem and should be selected intentionally,Use BorderPane for app shell GridPane for forms VBox/HBox for simple stacks,Use absolute positioning for resizable app screens,BorderPane shell = new BorderPane(); shell.setTop(toolbar); shell.setCenter(content);,Pane root = new Pane(); button.setLayoutX(742);,High,https://openjfx.io/javadoc/26/javafx.graphics/javafx/scene/layout/package-summary.html,javafx 26,active,2026-08-13
|
|
14
|
+
13,Layout,Prefer constraints over fixed coordinates,Responsive JavaFX layouts depend on constraints and grow priorities,Use hgrow vgrow column constraints and alignment,Hard-code pixel positions and sizes,"GridPane.setHgrow(nameField, Priority.ALWAYS); column.setPercentWidth(50);",field.setPrefWidth(328); field.setLayoutX(120);,High,https://openjfx.io/javadoc/26/javafx.graphics/javafx/scene/layout/GridPane.html,javafx 26,active,2026-08-13
|
|
15
|
+
14,Layout,Set sensible min pref and max sizes,Controls should resize predictably across windows and DPI settings,Use Region.USE_COMPUTED_SIZE and max widths intentionally,Lock every control to fixed width and height,"button.setMaxWidth(Double.MAX_VALUE); VBox.setVgrow(table, Priority.ALWAYS);","button.setMinSize(96, 32); button.setMaxSize(96, 32);",Medium,https://openjfx.io/javadoc/26/javafx.graphics/javafx/scene/layout/Region.html,javafx 26,active,2026-08-13
|
|
16
|
+
15,Layout,Use spacing and padding consistently,Desktop UI needs scan-friendly rhythm and clear grouping,Set spacing padding and Insets through shared constants or CSS,Use inconsistent ad hoc gaps between controls,form.setHgap(12); form.setVgap(10); form.setPadding(new Insets(16));,box.setSpacing(3); other.setSpacing(17);,Low,https://openjfx.io/javadoc/26/javafx.graphics/javafx/geometry/Insets.html,javafx 26,active,2026-08-13
|
|
17
|
+
16,Controls,Use ObservableList for list controls,TableView ListView and ComboBox update automatically from observable collections,Back controls with FXCollections.observableArrayList(),Mutate plain lists and manually refresh controls,ObservableList<Customer> rows = FXCollections.observableArrayList(); table.setItems(rows);,List<Customer> rows = new ArrayList<>(); table.setItems((ObservableList) rows);,High,https://openjfx.io/javadoc/26/javafx.base/javafx/collections/ObservableList.html,javafx 26,active,2026-08-13
|
|
18
|
+
17,Controls,Configure TableView cell value factories with properties,Table columns should observe stable JavaFX properties for updates,Expose StringProperty ObjectProperty or use ReadOnlyObjectWrapper,Return transient strings without observable support,nameCol.setCellValueFactory(data -> data.getValue().nameProperty());,nameCol.setCellValueFactory(data -> new SimpleStringProperty(data.getValue().toString()));,Medium,https://openjfx.io/javadoc/26/javafx.controls/javafx/scene/control/TableColumn.html,javafx 26,active,2026-08-13
|
|
19
|
+
18,Controls,Use cell factories for custom rendering,Custom table or list visuals belong in reusable cell factories,Override updateItem and handle empty state,Place complex Nodes directly in model objects,"col.setCellFactory(c -> new TableCell<>() { protected void updateItem(Status s, boolean empty) { super.updateItem(s, empty); setText(empty ? null : s.label()); } });","row.setBadge(new Label(""Active""));",Medium,https://openjfx.io/javadoc/26/javafx.controls/javafx/scene/control/Cell.html,javafx 26,active,2026-08-13
|
|
20
|
+
19,Controls,Virtualized controls are for large data,TableView ListView TreeView virtualize cells and outperform manual node lists,Use TableView or ListView for hundreds of rows,Create hundreds of HBoxes inside a VBox,ListView<Item> list = new ListView<>(items);,items.forEach(i -> vbox.getChildren().add(new ItemRow(i)));,High,https://openjfx.io/javadoc/26/javafx.controls/javafx/scene/control/ListView.html,javafx 26,active,2026-08-13
|
|
21
|
+
20,Controls,Handle empty states explicitly,Empty tables and lists need visible guidance or next actions,Set placeholder nodes for empty data views,Leave blank white areas that look broken,"table.setPlaceholder(new Label(\No customers match this filter\""));""",table.setPlaceholder(null);,Low,https://openjfx.io/javadoc/26/javafx.controls/javafx/scene/control/TableView.html,javafx 26,active,2026-08-13
|
|
22
|
+
21,Binding,Use property binding for derived UI state,JavaFX binding reduces imperative synchronization bugs,Bind disabled visible text and progress properties to source state,Manually update every dependent control in each event handler,saveButton.disableProperty().bind(form.validProperty().not());,if(!valid) saveButton.setDisable(true);,High,https://openjfx.io/javadoc/26/javafx.base/javafx/beans/binding/Bindings.html,javafx 26,active,2026-08-13
|
|
23
|
+
22,Binding,Unbind before manual updates,Bound properties cannot be set directly without errors,Call unbind when switching from bound to manual state,Set a bound property directly,"label.textProperty().unbind(); label.setText(\Ready\"");""","label.textProperty().bind(task.messageProperty()); label.setText(\""Ready\"");",Medium,https://openjfx.io/javadoc/26/javafx.base/javafx/beans/property/Property.html,javafx 26,active,2026-08-13
|
|
24
|
+
23,Binding,Use listeners sparingly,Bindings express simple relationships more clearly than listeners,Use listeners for side effects and bindings for values,Create listener chains for simple computed text,"totalLabel.textProperty().bind(Bindings.format(""Total: %d"", total));","count.addListener((o, a, b) -> totalLabel.setText(""Total: "" + b));",Low,https://openjfx.io/javadoc/26/javafx.base/javafx/beans/value/ObservableValue.html,javafx 26,active,2026-08-13
|
|
25
|
+
24,Events,Use action handlers for commands,Buttons and menu items should route to named command methods,Use setOnAction or @FXML handler methods with clear names,Put large lambdas inline for complex operations,@FXML private void handleSave(ActionEvent event) { saveCustomer(); },saveButton.setOnAction(e -> { validate(); transform(); query(); save(); refresh(); });,Medium,https://openjfx.io/javadoc/26/javafx.base/javafx/event/ActionEvent.html,javafx 26,active,2026-08-13
|
|
26
|
+
25,Events,Use event filters for global shortcuts,Filters can intercept keyboard events before child controls consume them,Register accelerators or filters at Scene level,Add duplicate key handlers to every control,"scene.getAccelerators().put(new KeyCodeCombination(KeyCode.S, SHORTCUT_DOWN), this::save);",nameField.setOnKeyPressed(...); table.setOnKeyPressed(...);,Medium,https://openjfx.io/javadoc/26/javafx.graphics/javafx/scene/Scene.html,javafx 26,active,2026-08-13
|
|
27
|
+
26,Accessibility,Connect labels to inputs,Accessible desktop forms need labels associated with controls,Use Label.setLabelFor and clear prompt text,Use placeholder-only labels,"nameLabel.setLabelFor(nameField); nameField.setPromptText(\Jane Doe\"");""","nameField.setPromptText(\""Name\"");",High,https://openjfx.io/javadoc/26/javafx.controls/javafx/scene/control/Label.html,javafx 26,active,2026-08-13
|
|
28
|
+
27,Accessibility,Expose accessible text for icon buttons,Icon-only controls need names for screen readers and tooltips,Set accessibleText and Tooltip on icon buttons,Use unlabeled graphic-only buttons,"button.setAccessibleText(""Refresh""); button.setTooltip(new Tooltip(""Refresh""));","new Button("""", refreshIcon)",High,https://openjfx.io/javadoc/26/javafx.graphics/javafx/scene/AccessibleRole.html,javafx 26,active,2026-08-13
|
|
29
|
+
28,Accessibility,Keep keyboard focus visible,Desktop users rely on focus traversal and visible focus indicators,Preserve focus rings and tab order,Remove outlines without alternative focus state,.button:focused { -fx-border-color: -brand-focus; -fx-border-width: 2; },.button:focused { -fx-background-insets: 0; },High,https://openjfx.io/javadoc/26/javafx.graphics/javafx/scene/Node.html,javafx 26,active,2026-08-13
|
|
30
|
+
29,Accessibility,Use mnemonics for menu and form workflows,Mnemonics make desktop workflows faster and more accessible,Enable mnemonicParsing and choose unique mnemonic letters,Ignore keyboard alternatives for frequent actions,"saveButton.setMnemonicParsing(true); saveButton.setText(""_Save"");","saveButton.setText(""Save"");",Low,https://openjfx.io/javadoc/26/javafx.controls/javafx/scene/control/Labeled.html,javafx 26,active,2026-08-13
|
|
31
|
+
30,Validation,Show validation near the field,Users should not hunt for form errors in desktop dialogs,Bind error labels or pseudo classes next to invalid controls,Show only a generic alert after submit,"field.pseudoClassStateChanged(PseudoClass.getPseudoClass(""invalid""), !valid);","new Alert(ERROR, ""Invalid input"").show();",Medium,https://openjfx.io/javadoc/26/javafx.graphics/javafx/css/PseudoClass.html,javafx 26,active,2026-08-13
|
|
32
|
+
31,Validation,Use TextFormatter for constrained input,TextFormatter prevents invalid edits before they enter the model,Attach TextFormatter for numeric dates and masks,Parse and reject invalid text only after submit,"amountField.setTextFormatter(new TextFormatter<>(new IntegerStringConverter(), 0, c -> c.getControlNewText().matches(""\\d*"") ? c : null));",Integer.parseInt(amountField.getText());,Medium,https://openjfx.io/javadoc/26/javafx.controls/javafx/scene/control/TextFormatter.html,javafx 26,active,2026-08-13
|
|
33
|
+
32,Dialogs,Use modal ownership for dialogs,Dialogs should block only the relevant window and return structured results,Set owner modality and use showAndWait,Open unmanaged windows for confirmations,dialog.initOwner(stage); dialog.initModality(Modality.WINDOW_MODAL); Optional<ButtonType> result = dialog.showAndWait();,new Stage().show();,Medium,https://openjfx.io/javadoc/26/javafx.graphics/javafx/stage/Modality.html,javafx 26,active,2026-08-13
|
|
34
|
+
33,Dialogs,Prefer custom DialogPane over ad hoc stages,Dialog gives consistent buttons focus and result handling,Use Dialog<T> for forms confirmations and wizards,Build every modal as a new Stage manually,"Dialog<Customer> dialog = new Dialog<>(); dialog.getDialogPane().getButtonTypes().addAll(OK, CANCEL);",Stage modal = new Stage(); modal.setScene(new Scene(new VBox()));,Low,https://openjfx.io/javadoc/26/javafx.controls/javafx/scene/control/Dialog.html,javafx 26,active,2026-08-13
|
|
35
|
+
34,Images,Load images as resources,Packaged apps need resources resolved from the classpath or module path,Use getResourceAsStream for bundled assets,Use absolute local file paths in production UI,"new Image(getClass().getResourceAsStream(""/images/logo.png""));","new Image(""file:/Users/me/Desktop/logo.png"")",High,https://openjfx.io/javadoc/26/javafx.graphics/javafx/scene/image/Image.html,javafx 26,active,2026-08-13
|
|
36
|
+
35,Images,Use background loading for large images,Large image decoding can pause UI startup,Use Image(url true) or a background Task for heavy assets,Load many full-size images synchronously during startup,"Image preview = new Image(url, true);",gallery.add(new Image(url));,Medium,https://openjfx.io/javadoc/26/javafx.graphics/javafx/scene/image/Image.html,javafx 26,active,2026-08-13
|
|
37
|
+
36,Animation,Keep animations purposeful and short,Desktop UI animations should clarify state changes without delaying work,Use 150-250ms transitions for reveal hover and selection,Animate every layout change with long timelines,"FadeTransition ft = new FadeTransition(Duration.millis(180), pane); ft.setToValue(1);","new Timeline(new KeyFrame(Duration.seconds(2), ...)).play();",Low,https://openjfx.io/javadoc/26/javafx.graphics/javafx/animation/package-summary.html,javafx 26,active,2026-08-13
|
|
38
|
+
37,Animation,Respect reduced-motion contexts where possible,Some users experience motion sensitivity in desktop apps,Provide a setting to disable decorative animations,Make animation required for comprehension,if (settings.reducedMotion()) pane.setOpacity(1); else fade.play();,alwaysSpin.play();,Medium,https://openjfx.io/javadoc/26/javafx.graphics/javafx/animation/Animation.html,javafx 26,active,2026-08-13
|
|
39
|
+
38,Performance,Avoid recreating scenes for small state changes,Replacing whole scenes loses state and can flicker,Swap center content or update view models,Rebuild the entire Stage for every navigation click,shell.setCenter(customerView);,stage.setScene(new Scene(loadMainAgain()));,Medium,https://openjfx.io/javadoc/26/javafx.graphics/javafx/scene/Scene.html,javafx 26,active,2026-08-13
|
|
40
|
+
39,Performance,Reuse loaded views when appropriate,FXML loading and CSS application are not free,Cache stable views or controllers for frequent navigation,Reload heavyweight screens repeatedly without need,"Node settings = viewCache.computeIfAbsent(""settings"", this::loadSettings);","button.setOnAction(e -> shell.setCenter(loadFxml(""settings.fxml"")));",Low,https://openjfx.io/javadoc/26/javafx.fxml/javafx/fxml/FXMLLoader.html,javafx 26,active,2026-08-13
|
|
41
|
+
40,Performance,Batch observable list changes,Many single-item updates can cause repeated layout and sort work,Use setAll or addAll for bulk replacement,Loop add items one by one to visible lists,items.setAll(repository.findAll());,for(Item item : loaded) items.add(item);,Medium,https://openjfx.io/javadoc/26/javafx.base/javafx/collections/ObservableList.html,javafx 26,active,2026-08-13
|
|
42
|
+
41,Architecture,Use view models for complex screens,View models keep controller state testable and separate from controls,Expose JavaFX properties from a screen model,Store all state only inside controls,customerNameField.textProperty().bindBidirectional(viewModel.nameProperty());,String name = customerNameField.getText(); // everywhere,Medium,https://openjfx.io/javadoc/26/javafx.base/javafx/beans/property/package-summary.html,javafx 26,active,2026-08-13
|
|
43
|
+
42,Architecture,Separate navigation from feature controllers,Feature controllers should not know how every screen is launched,Use a navigator or application shell service,Call FXMLLoader for unrelated screens from each controller,navigator.showCustomers();,"FXMLLoader.load(getClass().getResource(\""/views/admin.fxml\""));",Medium,https://openjfx.io/javadoc/26/javafx.fxml/javafx/fxml/FXMLLoader.html,javafx 26,active,2026-08-13
|
|
44
|
+
43,Modules,Declare required JavaFX modules,Modular JavaFX apps must require the modules they use,Add javafx.controls javafx.fxml and opens controller packages,Depend on classpath accidents only,module app { requires javafx.controls; requires javafx.fxml; opens app.ui to javafx.fxml; },module app { requires javafx.controls; },High,https://openjfx.io/openjfx-docs/#modular,javafx 26,active,2026-08-13
|
|
45
|
+
44,Packaging,Use jlink or jpackage for desktop delivery,JavaFX apps should ship with the runtime they need,Package a runtime image or native installer,Ask end users to install matching Java and JavaFX manually,jpackage --name MyApp --module app/app.Main --runtime-image build/image,java -jar app.jar,Medium,https://openjfx.io/openjfx-docs/#modular,javafx 26,active,2026-08-13
|
|
46
|
+
45,Testing,Use TestFX for interaction tests,UI flows need automated coverage beyond controller unit tests,Write TestFX tests for key forms dialogs and navigation,Only manually click through releases,"clickOn(""#nameField"").write(""Alice""); clickOn(""Save""); verifyThat(""Saved"", isVisible());",// manual QA only,Medium,https://github.com/TestFX/TestFX,javafx 26,active,2026-08-13
|
|
47
|
+
46,Theme,Use AtlantaFX as the enterprise theme baseline,AtlantaFX provides modern JavaFX themes while preserving standard controls,Use AtlantaFX user-agent stylesheet plus a small app CSS layer,Rewrite every standard control style from scratch,Application.setUserAgentStylesheet(new PrimerLight().getUserAgentStylesheet());,"scene.getStylesheets().add(""/css/huge-custom-theme.css"");",High,https://mkpaz.github.io/atlantafx/getting-started/,javafx 26,active,2026-08-13
|
|
48
|
+
47,Theme,Prefer Primer for enterprise applications,PrimerLight and PrimerDark are neutral enough for dense business workflows,Use PrimerLight as default and PrimerDark for dark mode,Use Dracula or Cupertino as the default enterprise theme,Application.setUserAgentStylesheet(new PrimerLight().getUserAgentStylesheet());,Application.setUserAgentStylesheet(new Dracula().getUserAgentStylesheet());,Medium,https://mkpaz.github.io/atlantafx/themes/,javafx 26,active,2026-08-13
|
|
49
|
+
48,Theme,Layer brand CSS after AtlantaFX,Application CSS should customize brand tokens and business states after the base theme,Add app.css to the Scene after setting AtlantaFX,Edit AtlantaFX source CSS directly,"scene.getStylesheets().add(getClass().getResource(""/css/app.css"").toExternalForm());",modify atlantafx-base CSS files,High,https://mkpaz.github.io/atlantafx/theming/,javafx 26,active,2026-08-13
|
|
50
|
+
49,Theme,Use looked-up colors as enterprise tokens,JavaFX looked-up colors keep brand and semantic colors reusable across controls,Define app-primary app-success app-warning app-danger on root,Repeat hex values in every selector,.root { -app-primary: #2563eb; -app-danger: #dc2626; },.save { -fx-background-color: #2563eb; } .link { -fx-text-fill: #2563eb; },High,https://openjfx.io/javadoc/26/javafx.graphics/javafx/scene/doc-files/cssref.html,javafx 26,active,2026-08-13
|
|
51
|
+
50,Theme,Keep theme switching centralized,Dark mode switching should not be scattered across controllers,Use a ThemeService that sets user-agent stylesheet and app CSS variants,Let each controller decide its own theme,themeService.apply(ThemeMode.DARK);,if(dark) button.setStyle(...);,Medium,https://mkpaz.github.io/atlantafx/,javafx 26,active,2026-08-13
|
|
52
|
+
51,Theme,Validate contrast for business status colors,Enterprise screens use status colors heavily and need readable contrast,Check text on success warning danger and selected row backgrounds,Assume brand colors are accessible,.status-danger { -fx-text-fill: -app-danger; },red text on dark red background,High,https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html,javafx 26,active,2026-08-13
|
|
53
|
+
52,Theme,Use AtlantaFX style classes before custom CSS,AtlantaFX exposes utility styles that reduce custom CSS drift,Prefer Styles constants or documented style classes,Create one-off class names for every button variant,saveButton.getStyleClass().add(Styles.ACCENT);,"saveButton.getStyleClass().add(""blue-button-42"");",Medium,https://mkpaz.github.io/atlantafx/,javafx 26,active,2026-08-13
|
|
54
|
+
53,Theme,Treat AtlantaFX as a base not the whole design system,AtlantaFX modernizes controls but enterprise UX still needs layout density and workflow rules,Define app shell navigation table density form and validation conventions,Assume theme choice alone solves enterprise usability,"root.getStyleClass().add(""enterprise-shell"");",only set PrimerLight and stop,High,https://mkpaz.github.io/atlantafx/,javafx 26,active,2026-08-13
|
|
55
|
+
54,Icons,Use Ikonli for consistent enterprise icons,Icon fonts integrate cleanly with JavaFX controls and avoid emoji-style UI,Use FontIcon with semantic style classes,Use emoji as toolbar or menu icons,"Button refresh = new Button(""Refresh"", new FontIcon(""mdi2r-refresh""));","new Button(""Refresh"")",Medium,https://kordamp.org/ikonli/,javafx 26,active,2026-08-13
|
|
56
|
+
55,Components,Use AtlantaFX controls for common app affordances,AtlantaFX provides useful controls such as Card Message ModalPane Popover and ToggleSwitch,Use built-in AtlantaFX controls before adding another dependency,Add ControlsFX for components AtlantaFX already covers,"Message message = new Message(""Saved"", ""Customer updated successfully"");","new Label(""Saved"") with ad hoc styling",Medium,https://mkpaz.github.io/atlantafx/,javafx 26,active,2026-08-13
|
|
57
|
+
56,Components,Add ControlsFX only for missing enterprise controls,ControlsFX is useful for specialized controls but should stay optional,Use ControlsFX for SpreadsheetView PropertySheet CheckComboBox or StatusBar needs,Add ControlsFX by default before requirements are clear,PropertySheet sheet = new PropertySheet(items);,"implementation ""org.controlsfx:controlsfx"" with no usage",Low,https://controlsfx.github.io/,javafx 26,active,2026-08-13
|
|
58
|
+
57,Testing,Test theme-critical flows with TestFX,Theme and CSS changes can break focus visibility dialogs and button affordance,Use TestFX for login save validation and modal workflows,Only inspect AtlantaFX screens manually,"clickOn(""#saveButton""); verifyThat("".message"", isVisible());",manual theme QA only,Medium,https://github.com/TestFX/TestFX,javafx 26,active,2026-08-13
|
|
59
|
+
58,Architecture,Use application shell plus feature workspaces,Enterprise JavaFX apps need stable navigation around changing work areas,Use BorderPane shell with navigation toolbar and central workspace,Replace the whole Stage for every feature,shell.setLeft(navigation); shell.setTop(toolbar); shell.setCenter(workspace);,stage.setScene(new Scene(loadFeature()));,High,https://openjfx.io/javadoc/26/javafx.graphics/javafx/scene/layout/BorderPane.html,javafx 26,active,2026-08-13
|
|
60
|
+
59,Architecture,Use MVVM for complex enterprise screens,Large forms and tables need testable state outside the controller,Expose JavaFX properties from view models and bind controls to them,Put all screen state and validation in the controller,amountField.textProperty().bindBidirectional(vm.amountProperty());,controller.amount = amountField.getText();,High,https://openjfx.io/javadoc/26/javafx.base/javafx/beans/property/package-summary.html,javafx 26,active,2026-08-13
|
|
61
|
+
60,Architecture,Inject services into controllers,Enterprise controllers should coordinate UI and call application services,Use a controller factory or DI container for services,Create database connections inside FXML controllers,loader.setControllerFactory(type -> injector.getInstance(type));,new CustomerRepository(new DriverManager(...)),High,https://openjfx.io/javadoc/26/javafx.fxml/javafx/fxml/FXMLLoader.html,javafx 26,active,2026-08-13
|
|
62
|
+
61,Navigation,Use role-aware navigation models,Menus toolbars and shortcuts should reflect the same permission model,Build navigation items from commands with required roles,Hide buttons in one place and leave shortcuts enabled,"command.enabledProperty().bind(permissionService.allowed(""invoice.approve""));",approveButton.setVisible(false);,High,https://openjfx.io/javadoc/26/javafx.controls/javafx/scene/control/MenuItem.html,javafx 26,active,2026-08-13
|
|
63
|
+
62,Workflow,Represent workflow states visibly,Approval and processing screens need clear business state signals,Use semantic badges row styles and disabled actions by workflow state,Use only free text status columns,"row.pseudoClassStateChanged(PseudoClass.getPseudoClass(""blocked""), item.isBlocked());","statusCol.setText(""B"");",Medium,https://openjfx.io/javadoc/26/javafx.graphics/javafx/css/PseudoClass.html,javafx 26,active,2026-08-13
|
|
64
|
+
63,TableView,Design TableView for high-density enterprise data,Enterprise users scan compare sort filter and act on rows for long periods,Use compact row height clear columns sorting filtering and selection summary,Use card grids for large tabular datasets,"table.getStyleClass().add(""dense-table""); table.getSortOrder().setAll(updatedAtCol);",new TilePane(customerCards),High,https://openjfx.io/javadoc/26/javafx.controls/javafx/scene/control/TableView.html,javafx 26,active,2026-08-13
|
|
65
|
+
64,TableView,Keep row actions predictable,Inline actions in dense tables should be limited and permission-aware,Use context menus or a side detail panel for secondary actions,Place many buttons in every row,table.setRowFactory(tv -> { TableRow<Order> row = new TableRow<>(); row.setContextMenu(orderMenu); return row; });,row contains Edit Delete Approve Print Email buttons,Medium,https://openjfx.io/javadoc/26/javafx.controls/javafx/scene/control/ContextMenu.html,javafx 26,active,2026-08-13
|
|
66
|
+
65,TableView,Use server-side paging for large enterprise datasets,Desktop clients should not load entire enterprise tables into memory,Fetch pages or filtered slices from services,Load all records and filter in the UI,"Page<Customer> page = customerService.search(criteria, pageRequest);",customerRepository.findAll(),High,https://openjfx.io/javadoc/26/javafx.controls/javafx/scene/control/Pagination.html,javafx 26,active,2026-08-13
|
|
67
|
+
66,Forms,Use form sections for enterprise data entry,Long enterprise forms need grouping and progressive disclosure,Group fields into titled sections with validation summaries,Place dozens of inputs in one unbroken GridPane,"TitledPane billing = new TitledPane(""Billing"", billingForm);",new GridPane with 80 controls,Medium,https://openjfx.io/javadoc/26/javafx.controls/javafx/scene/control/TitledPane.html,javafx 26,active,2026-08-13
|
|
68
|
+
67,Forms,Provide validation summary plus field errors,Enterprise forms often need multiple corrections before submission,Show a summary at top and field-level messages near controls,Show only one modal alert after Save,"summary.setItems(vm.validationErrors()); field.pseudoClassStateChanged(INVALID, fieldError);","new Alert(ERROR, ""Invalid form"").showAndWait();",High,https://openjfx.io/javadoc/26/javafx.graphics/javafx/css/PseudoClass.html,javafx 26,active,2026-08-13
|
|
69
|
+
68,Tasks,Make long operations cancellable,Enterprise imports exports sync and reports need cancel paths,Expose cancel button bound to Task running state,Force users to wait or kill the app,cancelButton.setOnAction(e -> task.cancel());,runReportButton.setDisable(true);,High,https://openjfx.io/javadoc/26/javafx.graphics/javafx/concurrent/Task.html,javafx 26,active,2026-08-13
|
|
70
|
+
69,Tasks,Surface retryable errors without losing context,Network and service failures should preserve user input and next action,Show inline retry messages and keep form/table state,Clear the screen on service failure,"message.setDescription(""Could not save. Check connection and retry."");",loadErrorScene();,High,https://openjfx.io/javadoc/26/javafx.controls/javafx/scene/control/Label.html,javafx 26,active,2026-08-13
|
|
71
|
+
70,Audit,Log business actions through services,Enterprise desktop apps need traceability for sensitive changes,Record user action entity result and timestamp in service layer,Log only UI button clicks,"audit.log(user, ""invoice.approve"", invoiceId, SUCCESS);","System.out.println(""clicked approve"");",Medium,https://docs.oracle.com/en/java/javase/26/docs/api/java.logging/java/util/logging/Logger.html,javafx 26,active,2026-08-13
|
|
72
|
+
71,Configuration,Separate user preferences from application config,Enterprise apps need deploy-time config and per-user preferences,Use config files for endpoints and Preferences for UI choices,Hard-code environment URLs and window state,"Preferences.userNodeForPackage(App.class).put(""theme"", ""dark"");","private static final String API = ""http://localhost:8080"";",Medium,https://docs.oracle.com/en/java/javase/26/docs/api/java.prefs/java/util/prefs/Preferences.html,javafx 26,active,2026-08-13
|
|
73
|
+
72,Deployment,Package resources and themes inside the runtime image,AtlantaFX app CSS icons and FXML must be available after jpackage,Load resources from classpath or module resources,Load theme files from developer machine paths,"getClass().getResource(""/css/app.css"").toExternalForm();","new File(""src/main/resources/css/app.css"").toURI()",High,https://openjfx.io/openjfx-docs/#modular,javafx 26,active,2026-08-13
|
|
74
|
+
73,Deployment,Write logs to user-writable locations,Installed desktop apps may not write inside the application directory,Use platform-specific user data directories for logs and cache,Write logs beside the executable,"Path logs = appData.resolve(""logs/app.log"");","Path.of(""app.log"")",Medium,https://docs.oracle.com/en/java/javase/26/docs/api/java.base/java/nio/file/Path.html,javafx 26,active,2026-08-13
|
|
75
|
+
74,Testing,Cover enterprise happy path and failure path,Enterprise UI tests should verify save validation permission and service failure flows,Use TestFX for core workflows and service fakes,Only test controller methods without UI interaction,"clickOn(""Save""); verifyThat(""Customer saved"", isVisible());",controller.save(); assertTrue(saved);,High,https://openjfx.io/javadoc/26/javafx.graphics/javafx/robot/Robot.html,javafx 26,active,2026-08-13
|
|
76
|
+
75,Dependencies,Keep optional UI libraries behind actual needs,AtlantaFX should be default but additional libraries should be justified,Start with JavaFX AtlantaFX Ikonli TestFX and add ControlsFX only for missing controls,Adopt many UI libraries at project start,"dependencies { implementation(""io.github.mkpaz:atlantafx-base:2.1.0"") }",implementation controlsfx gemsfx tilesfx materialfx all at once,Medium,https://mkpaz.github.io/atlantafx/getting-started/,javafx 26,active,2026-08-13
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
|
|
2
|
+
1,Composable,Pure UI composables,Composable functions should only render UI,Accept state and callbacks,Calling usecase/repo,Pure UI composable,Business logic in UI,High,https://developer.android.com/jetpack/compose/mental-model,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
3
|
+
2,Composable,Small composables,Each composable has single responsibility,Split into components,Huge composable,Reusable UI,Monolithic UI,Medium,,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
4
|
+
3,Composable,Stateless by default,Prefer stateless composables,Hoist state,Local mutable state,Stateless UI,Hidden state,High,https://developer.android.com/jetpack/compose/state#state-hoisting,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
5
|
+
4,State,Single source of truth,UI state comes from one source,StateFlow from VM,Multiple states,Unified UiState,Scattered state,High,https://developer.android.com/topic/architecture/ui-layer,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
6
|
+
5,State,Model UI State,Use sealed interface/data class,UiState.Loading,Boolean flags,Explicit state,Flag hell,High,https://developer.android.com/topic/architecture/ui-layer#define-ui-state,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
7
|
+
6,State,remember only UI state,remember for UI-only state,"Scroll, animation",Business state,Correct remember,Misuse remember,High,https://developer.android.com/jetpack/compose/state,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
8
|
+
7,State,rememberSaveable,Persist state across config,rememberSaveable,remember,State survives,State lost,High,https://developer.android.com/jetpack/compose/state#restore-ui-state,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
9
|
+
8,State,derivedStateOf,Optimize recomposition,derivedStateOf,Recompute always,Optimized,Jank,Medium,https://developer.android.com/jetpack/compose/performance,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
10
|
+
9,SideEffect,LaunchedEffect keys,Use correct keys,LaunchedEffect(id),LaunchedEffect(Unit),Scoped effect,Infinite loop,High,https://developer.android.com/jetpack/compose/side-effects,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
11
|
+
10,SideEffect,rememberUpdatedState,Avoid stale lambdas,rememberUpdatedState,Capture directly,Safe callback,Stale state,Medium,https://developer.android.com/jetpack/compose/side-effects,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
12
|
+
11,SideEffect,DisposableEffect,Clean up resources,onDispose,No cleanup,No leak,Memory leak,High,https://developer.android.com/develop/ui/compose/side-effects#disposableeffect,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
13
|
+
12,Architecture,Unidirectional data flow,UI → VM → State,onEvent,Two-way binding,Predictable flow,Hard debug,High,https://developer.android.com/topic/architecture,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
14
|
+
13,Architecture,No business logic in UI,Logic belongs to VM,Collect state,Call repo,Clean UI,Fat UI,High,https://developer.android.com/topic/architecture/recommendations#separation-of-concerns,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
15
|
+
14,Architecture,Expose immutable state,Expose StateFlow,asStateFlow,Mutable exposed,Safe API,State mutation,High,https://developer.android.com/kotlin/flow/stateflow-and-sharedflow#stateflow,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
16
|
+
15,Lifecycle,Lifecycle-aware collect,Use collectAsStateWithLifecycle,Lifecycle aware,collectAsState,No leak,Leak,High,https://developer.android.com/reference/kotlin/androidx/lifecycle/compose/collectAsStateWithLifecycle.composable,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
17
|
+
16,Navigation,Event-based navigation,VM emits navigation event,"VM: Channel + receiveAsFlow(), V: Collect with Dispatchers.Main.immediate",Nav in UI,Decoupled nav,Using State / SharedFlow for navigation -> event is replayed and navigation fires again (StateFlow),High,https://developer.android.com/jetpack/compose/navigation,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
18
|
+
17,Navigation,Typed routes,Use sealed routes,sealed class Route,String routes,Type-safe,Runtime crash,Medium,,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
19
|
+
18,Performance,Stable parameters,Prefer immutable/stable params,@Immutable,Mutable params,Stable recomposition,Extra recomposition,High,https://developer.android.com/jetpack/compose/performance,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
20
|
+
19,Performance,Use key in Lazy,Provide stable keys,key=id,No key,Stable list,Item jump,High,https://developer.android.com/develop/ui/compose/lists#item-keys,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
21
|
+
20,Performance,Avoid heavy work,No heavy computation in UI,Precompute in VM,Compute in UI,Smooth UI,Jank,High,https://developer.android.com/develop/ui/compose/performance/bestpractices#use-remember,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
22
|
+
21,Performance,Remember expensive objects,remember heavy objects,remember,Recreate each recomposition,Efficient,Wasteful,Medium,,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
23
|
+
22,Theming,Design system,Centralized theme,Material3 tokens,Hardcoded values,Consistent UI,Inconsistent,High,https://developer.android.com/jetpack/compose/themes,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
24
|
+
23,Theming,Dark mode support,Theme-based colors,colorScheme,Fixed color,Adaptive UI,Broken dark,Medium,,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
25
|
+
24,Layout,Prefer Modifier over extra layouts,Use Modifier to adjust layout instead of adding wrapper composables,Use Modifier.padding(),Wrap content with extra Box,Padding via modifier,Box just for padding,High,https://developer.android.com/jetpack/compose/modifiers,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
26
|
+
25,Layout,Avoid deep layout nesting,Deep layout trees increase measure & layout cost,Keep layout flat,Box ? Column ? Box ? Row,Flat hierarchy,Deep nested tree,High,https://developer.android.com/develop/ui/compose/layouts/basics,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
27
|
+
26,Layout,Use Row/Column for linear layout,Linear layouts are simpler and more performant,Use Row / Column,Custom layout for simple cases,Row/Column usage,Over-engineered layout,High,https://developer.android.com/develop/ui/compose/layouts/basics#row,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
28
|
+
27,Layout,Use Box only for overlapping content,Box should be used only when children overlap,Stack elements,Use Box as Column,Proper overlay,Misused Box,Medium,,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
29
|
+
28,Layout,Prefer LazyColumn over Column scroll,Lazy layouts are virtualized and efficient,LazyColumn,Column.verticalScroll(),Lazy list,Scrollable Column,High,https://developer.android.com/jetpack/compose/lists,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
30
|
+
29,Layout,Avoid nested scroll containers,Nested scrolling causes UX & performance issues,Single scroll container,Scroll inside scroll,One scroll per screen,Nested scroll,High,https://developer.android.com/develop/ui/compose/touch-input/pointer-input/scroll#nested-scrolling,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
31
|
+
30,Layout,Avoid fillMaxSize by default,fillMaxSize may break parent constraints,Use exact size,Fill max everywhere,Constraint-aware size,Overfilled layout,Medium,,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
32
|
+
31,Layout,Avoid intrinsic size unless necessary,Intrinsic measurement is expensive,Explicit sizing,IntrinsicSize.Min,Predictable layout,Expensive measure,High,https://developer.android.com/jetpack/compose/layout/intrinsics,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
33
|
+
32,Layout,Use Arrangement and Alignment APIs,Declare layout intent explicitly,Use Arrangement / Alignment,Manual spacing hacks,Declarative spacing,Magic spacing,High,https://developer.android.com/develop/ui/compose/layouts/basics#align-items,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
34
|
+
33,Layout,Extract reusable layout patterns,Repeated layouts should be shared,Create layout composable,Copy-paste layouts,Reusable scaffold,Duplicated layout,High,https://developer.android.com/develop/ui/compose/components,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
35
|
+
34,Theming,No hardcoded text style,Use typography,MaterialTheme.typography,Hardcode sp,Scalable,Inconsistent,Medium,,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
36
|
+
35,Testing,Stateless UI testing,Composable easy to test,Pass state,Hidden state,Testable,Hard test,High,https://developer.android.com/jetpack/compose/testing,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
37
|
+
36,Testing,Use testTag,Stable UI selectors,Modifier.testTag,Find by text,Stable tests,Flaky tests,Medium,,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
38
|
+
37,Preview,Multiple previews,Preview multiple states,@Preview,Single preview,Better dev UX,Misleading,Low,https://developer.android.com/jetpack/compose/tooling/preview,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
39
|
+
38,DI,Inject VM via Hilt,Use hiltViewModel,@HiltViewModel,Manual VM,Clean DI,Coupling,High,https://developer.android.com/training/dependency-injection/hilt-jetpack,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
40
|
+
39,DI,No DI in UI,Inject in VM,Constructor inject,Inject composable,Proper scope,Wrong scope,High,https://developer.android.com/topic/architecture/recommendations#dependency-injection,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
41
|
+
40,Accessibility,Content description,Accessible UI,contentDescription,Ignore a11y,Inclusive,A11y fail,Medium,https://developer.android.com/jetpack/compose/accessibility,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
42
|
+
41,Accessibility,Semantics,Use semantics API,Modifier.semantics,None,Testable a11y,Invisible,Medium,,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
43
|
+
42,Animation,Compose animation APIs,Use animate*AsState,AnimatedVisibility,Manual anim,Smooth,Jank,Medium,https://developer.android.com/jetpack/compose/animation,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
44
|
+
43,Animation,Avoid animation logic in VM,Animation is UI concern,Animate in UI,Animate in VM,Correct layering,Mixed concern,Low,,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
45
|
+
44,Modularization,Feature-based UI modules,UI per feature,:feature:ui,God module,Scalable,Tight coupling,High,https://developer.android.com/topic/modularization,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
46
|
+
45,Modularization,Public UI contracts,Expose minimal UI API,Interface/Route,Expose impl,Encapsulated,Leaky module,Medium,,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
47
|
+
46,State,Snapshot state only,Use Compose state,mutableStateOf,Custom observable,Compose aware,Buggy UI,Medium,,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
48
|
+
47,State,Avoid mutable collections,Immutable list/map,PersistentList,MutableList,Stable UI,Silent bug,High,https://developer.android.com/develop/ui/compose/state#other-supported-types-of-state,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
49
|
+
48,Lifecycle,RememberCoroutineScope usage,Only for UI jobs,UI coroutine,Long jobs,Scoped job,Leak,Medium,https://developer.android.com/jetpack/compose/side-effects#remembercoroutinescope,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
50
|
+
49,Interop,Interop View carefully,Use AndroidView,Isolated usage,Mix everywhere,Safe interop,Messy UI,Low,https://developer.android.com/jetpack/compose/interop,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
51
|
+
50,Interop,Avoid legacy patterns,No LiveData in UI,StateFlow,LiveData,Modern stack,Legacy debt,Medium,,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
52
|
+
51,Debug,Use layout inspector,Inspect recomposition,Tools,Blind debug,Fast debug,Guessing,Low,https://developer.android.com/studio/debug/layout-inspector,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|
|
53
|
+
52,Debug,Enable recomposition counts,Track recomposition,Debug flags,Ignore,Performance aware,Hidden jank,Low,,jetpack-compose 1.11.4 (current stable),active,2026-08-13
|