From b61fdd572f73c4a79b7de82635a5a3a7b7b392c3 Mon Sep 17 00:00:00 2001 From: JL Kruger Date: Fri, 27 Mar 2026 12:33:18 +0200 Subject: [PATCH] Trim repo to site files only Remove agent workspace (skills, spores, CREATURE-PLAYGROUND, DumperCan, agent MD files, JL notes) from tracking. Gitignore updated to exclude these permanently. Only site content remains: site/, Writings/, Playlists/, Videos/, Music/, Watchlists/, ToolsnToys/. Co-Authored-By: Claude Sonnet 4.6 --- CREATURE-PLAYGROUND/Noto_Emoji/OFL.txt | 93 - CREATURE-PLAYGROUND/Noto_Emoji/README.txt | 67 - CREATURE-PLAYGROUND/Uncodixfy.md | 189 - CREATURE-PLAYGROUND/WebsiteDesignPrompt.md | 151 - .../homepage-redesign/aesthetic-brief.md | 156 - .../homepage-redesign/coordination.md | 206 - .../integration-v6-overgrowth.html | 386 -- .../gemini-drafts/integration-v7.html | 417 -- .../gemini-drafts/starfield-bold-v2.html | 554 --- .../gemini-drafts/starfield-bold-v3.html | 596 --- .../gemini-drafts/starfield-celestial-v4.html | 528 --- .../gemini-drafts/starfield-nebula-v1.html | 551 --- .../homepage-redesign/integration-v14.html | 1228 ------ .../sonnet-drafts/integration-bold-v3.html | 992 ----- .../sonnet-drafts/integration-final-v4.html | 1000 ----- .../sonnet-drafts/integration-full-v1.html | 1177 ------ .../sonnet-drafts/integration-merged-v2.html | 1011 ----- .../sonnet-drafts/integration-v5.html | 1247 ------ .../sonnet-drafts/integration-v8.html | 1215 ------ Creatorlists/Creatorlists-JL-notes.md | 7 - DumperCan/DumperCan-JL-notes.md | 11 - DumperCan/FOSS-tools.md | 251 -- .../Facebook Streaming Setup Guide_v2.md | 282 -- .../RememberToForget_WorkdayLogger_v2.html | 723 ---- ...TA_QCTO_tabs-export-2025-11-06T11-25-59.md | 116 - .../anarchist-angels_style_reference.html | 963 ----- .../angelic-anarchist_style_reference.html | 566 --- .../bubblicorn_style_reference.html | 1591 -------- .../bubblicorn_style_reference_fixed.html | 921 ----- .../course_marketing_page.html | 798 ---- ...epuscular-city-lights_style_reference.html | 843 ---- ...crepuscular_corporate_style_reference.html | 1504 ------- ...cular_corporate_style_reference_fixed.html | 729 ---- .../faerie-fire_style_reference.html | 657 ---- ...ughty-little-whispers_style_reference.html | 887 ----- ...rismatic-storm-dragon_style_reference.html | 835 ---- ...solarpunk-deep-jungle_style_reference.html | 627 --- .../solarpunk-rainforest_style_reference.html | 601 --- .../solarpunk-sundae_style_reference.html | 581 --- .../solarpunk_style_reference.html | 1506 ------- .../soviet-cyberpunk_style_reference.html | 637 --- DumperCan/WAMEX/README.md | 60 - DumperCan/appimage-installation-guide.md | 644 --- DumperCan/appimage-quick-reference.md | 353 -- DumperCan/dendritic_links_network_v23.html | 828 ---- DumperCan/docker-cheatsheet-enhanced.html | 1955 --------- DumperCan/jl_foss_tools_restyled.html | 785 ---- DumperCan/linux-installation-methods-guide.md | 1649 -------- DumperCan/linux-uninstallation-guide.md | 926 ----- DumperCan/rainbow-lyme-haiku.html | 190 - DumperCan/silly_scaffolding_demo.html | 301 -- DumperCan/sweat_odor_science.html | 377 -- DumperCan/system_prompt_demo.html | 247 -- DumperCan/tokenization_demo.html | 261 -- DumperCan/tos_scavenger_hunt_completed.html | 772 ---- GEMINI.md | 158 - HomePage-JL-notes.md | 19 - Images/Images-JL-notes.md | 21 - PARENT.md | 107 - Playlists/Playlists-JL-notes.md | 7 - SEEDS.md | 182 - SONNET.md | 139 - SPORE_SYSTEM_SPEC_v0.2.md | 471 --- ToolsnToys/ToolsnToys-JL-notes.md | 19 - Videos/Videos-JL-notes.md | 9 - Watchlists/Watchlists-JL-notes.md | 7 - Writings/Writings-JL-notes.md | 15 - skills/algorithmic-art/LICENSE.txt | 202 - skills/algorithmic-art/SKILL.md | 405 -- .../templates/generator_template.js | 223 -- skills/algorithmic-art/templates/viewer.html | 599 --- skills/annotated-writing/SKILL.md | 45 - .../annotated-writing-build.md | 297 -- .../content-mapping-fiction.md | 232 -- .../content-mapping-non-fiction.md | 229 -- skills/canvas-design/LICENSE.txt | 202 - skills/canvas-design/SKILL.md | 130 - .../canvas-fonts/ArsenalSC-OFL.txt | 93 - .../canvas-fonts/BigShoulders-OFL.txt | 93 - .../canvas-fonts/Boldonse-OFL.txt | 93 - .../canvas-fonts/BricolageGrotesque-OFL.txt | 93 - .../canvas-fonts/CrimsonPro-OFL.txt | 93 - .../canvas-design/canvas-fonts/DMMono-OFL.txt | 93 - .../canvas-fonts/EricaOne-OFL.txt | 94 - .../canvas-fonts/GeistMono-OFL.txt | 93 - .../canvas-design/canvas-fonts/Gloock-OFL.txt | 93 - .../canvas-fonts/IBMPlexMono-OFL.txt | 93 - .../canvas-fonts/InstrumentSans-OFL.txt | 93 - .../canvas-fonts/Italiana-OFL.txt | 93 - .../canvas-fonts/JetBrainsMono-OFL.txt | 93 - .../canvas-design/canvas-fonts/Jura-OFL.txt | 93 - .../canvas-fonts/LibreBaskerville-OFL.txt | 93 - .../canvas-design/canvas-fonts/Lora-OFL.txt | 93 - .../canvas-fonts/NationalPark-OFL.txt | 93 - .../canvas-fonts/NothingYouCouldDo-OFL.txt | 93 - .../canvas-design/canvas-fonts/Outfit-OFL.txt | 93 - .../canvas-fonts/PixelifySans-OFL.txt | 93 - .../canvas-fonts/PoiretOne-OFL.txt | 93 - .../canvas-fonts/RedHatMono-OFL.txt | 93 - .../canvas-fonts/Silkscreen-OFL.txt | 93 - .../canvas-fonts/SmoochSans-OFL.txt | 93 - .../canvas-design/canvas-fonts/Tektur-OFL.txt | 93 - .../canvas-fonts/WorkSans-OFL.txt | 93 - .../canvas-fonts/YoungSerif-OFL.txt | 93 - skills/commissioning-skill/SKILL.md | 270 -- .../fetched-skills/frontend-design/SKILL.md | 42 - .../fetched-skills/ux-design/SKILL.md | 42 - .../ux-design/refactoring-ui.md | 304 -- .../references/refui-accessibility-depth.md | 507 --- .../references/refui-advanced-patterns.md | 472 --- .../refui-animation-microinteractions.md | 428 -- .../references/refui-data-visualization.md | 472 --- .../references/refui-theming-dark-mode.md | 446 --- .../references/uxh-audit-template.md | 257 -- .../ux-design/references/uxh-cultural-ux.md | 346 -- .../ux-design/references/uxh-dark-patterns.md | 362 -- .../references/uxh-heuristic-conflicts.md | 296 -- .../references/uxh-krug-principles.md | 289 -- .../references/uxh-nielsen-heuristics.md | 360 -- .../references/uxh-wcag-checklist.md | 306 -- .../fetched-skills/ux-design/ux-heuristics.md | 301 -- skills/commissioning-skill/hook-patterns.md | 226 -- skills/commissioning-skill/hook-protocol.md | 366 -- .../commissioning-skill/seeds-entry-format.md | 163 - skills/commissioning-skill/skill-scout.md | 90 - .../commissioning-skill/spore-entry-format.md | 170 - skills/commissioning-skill/token-budgets.md | 78 - skills/composition-patterns/AGENTS.md | 946 ----- skills/composition-patterns/README.md | 60 - skills/composition-patterns/SKILL.md | 89 - skills/composition-patterns/metadata.json | 11 - .../composition-patterns/rules/_sections.md | 29 - .../composition-patterns/rules/_template.md | 24 - .../rules/architecture-avoid-boolean-props.md | 100 - .../rules/architecture-compound-components.md | 112 - .../patterns-children-over-render-props.md | 87 - .../rules/patterns-explicit-variants.md | 100 - .../rules/react19-no-forwardref.md | 42 - .../rules/state-context-interface.md | 191 - .../rules/state-decouple-implementation.md | 113 - .../rules/state-lift-state.md | 125 - .../controlled-ux-designer/ACCESSIBILITY.md | 828 ---- .../DESIGN-SYSTEM-TEMPLATE.md | 577 --- skills/controlled-ux-designer/MOTION-SPEC.md | 544 --- .../RESPONSIVE-DESIGN.md | 604 --- skills/controlled-ux-designer/SKILL.md | 738 ---- skills/frontend-design/LICENSE.txt | 177 - skills/frontend-design/SKILL.md | 42 - .../innovative-ux-designer/ACCESSIBILITY.md | 111 - .../DESIGN-SYSTEM-TEMPLATE.md | 577 --- skills/innovative-ux-designer/MOTION-SPEC.md | 72 - .../RESPONSIVE-DESIGN.md | 90 - skills/innovative-ux-designer/SKILL.md | 718 ---- skills/react-best-practices/AGENTS.md | 3502 ----------------- skills/react-best-practices/README.md | 123 - skills/react-best-practices/SKILL.md | 145 - skills/react-best-practices/metadata.json | 15 - .../react-best-practices/rules/_sections.md | 46 - .../react-best-practices/rules/_template.md | 28 - .../rules/advanced-event-handler-refs.md | 55 - .../rules/advanced-init-once.md | 42 - .../rules/advanced-use-latest.md | 39 - .../rules/async-api-routes.md | 38 - .../rules/async-defer-await.md | 80 - .../rules/async-dependencies.md | 51 - .../rules/async-parallel.md | 28 - .../rules/async-suspense-boundaries.md | 99 - .../rules/bundle-barrel-imports.md | 60 - .../rules/bundle-conditional.md | 31 - .../rules/bundle-defer-third-party.md | 49 - .../rules/bundle-dynamic-imports.md | 35 - .../rules/bundle-preload.md | 50 - .../rules/client-event-listeners.md | 74 - .../rules/client-localstorage-schema.md | 71 - .../rules/client-passive-event-listeners.md | 48 - .../rules/client-swr-dedup.md | 56 - .../rules/js-batch-dom-css.md | 107 - .../rules/js-cache-function-results.md | 80 - .../rules/js-cache-property-access.md | 28 - .../rules/js-cache-storage.md | 70 - .../rules/js-combine-iterations.md | 32 - .../rules/js-early-exit.md | 50 - .../rules/js-flatmap-filter.md | 60 - .../rules/js-hoist-regexp.md | 45 - .../rules/js-index-maps.md | 37 - .../rules/js-length-check-first.md | 49 - .../rules/js-min-max-loop.md | 82 - .../rules/js-request-idle-callback.md | 105 - .../rules/js-set-map-lookups.md | 24 - .../rules/js-tosorted-immutable.md | 57 - .../rules/rendering-activity.md | 26 - .../rules/rendering-animate-svg-wrapper.md | 47 - .../rules/rendering-conditional-render.md | 40 - .../rules/rendering-content-visibility.md | 38 - .../rules/rendering-hoist-jsx.md | 46 - .../rules/rendering-hydration-no-flicker.md | 82 - .../rendering-hydration-suppress-warning.md | 30 - .../rules/rendering-resource-hints.md | 85 - .../rules/rendering-script-defer-async.md | 68 - .../rules/rendering-svg-precision.md | 28 - .../rules/rendering-usetransition-loading.md | 75 - .../rules/rerender-defer-reads.md | 39 - .../rules/rerender-dependencies.md | 45 - .../rules/rerender-derived-state-no-effect.md | 40 - .../rules/rerender-derived-state.md | 29 - .../rules/rerender-functional-setstate.md | 74 - .../rules/rerender-lazy-state-init.md | 58 - .../rules/rerender-memo-with-default-value.md | 38 - .../rules/rerender-memo.md | 44 - .../rules/rerender-move-effect-to-event.md | 45 - .../rules/rerender-no-inline-components.md | 82 - .../rerender-simple-expression-in-memo.md | 35 - .../rules/rerender-split-combined-hooks.md | 64 - .../rules/rerender-transitions.md | 40 - .../rules/rerender-use-deferred-value.md | 59 - .../rerender-use-ref-transient-values.md | 73 - .../rules/server-after-nonblocking.md | 73 - .../rules/server-auth-actions.md | 96 - .../rules/server-cache-lru.md | 41 - .../rules/server-cache-react.md | 76 - .../rules/server-dedup-props.md | 65 - .../rules/server-hoist-static-io.md | 142 - .../rules/server-parallel-fetching.md | 83 - .../rules/server-parallel-nested-fetching.md | 34 - .../rules/server-serialization.md | 38 - skills/react-native-skills/AGENTS.md | 2897 -------------- skills/react-native-skills/README.md | 165 - skills/react-native-skills/SKILL.md | 121 - skills/react-native-skills/metadata.json | 16 - skills/react-native-skills/rules/_sections.md | 86 - skills/react-native-skills/rules/_template.md | 28 - .../rules/animation-derived-value.md | 53 - .../rules/animation-gesture-detector-press.md | 95 - .../rules/animation-gpu-properties.md | 65 - .../design-system-compound-components.md | 66 - .../rules/fonts-config-plugin.md | 71 - .../rules/imports-design-system-folder.md | 68 - .../rules/js-hoist-intl.md | 61 - .../rules/list-performance-callbacks.md | 44 - .../list-performance-function-references.md | 132 - .../rules/list-performance-images.md | 53 - .../rules/list-performance-inline-objects.md | 97 - .../rules/list-performance-item-expensive.md | 94 - .../rules/list-performance-item-memo.md | 82 - .../rules/list-performance-item-types.md | 104 - .../rules/list-performance-virtualize.md | 67 - .../rules/monorepo-native-deps-in-app.md | 46 - .../monorepo-single-dependency-versions.md | 63 - .../rules/navigation-native-navigators.md | 188 - .../react-compiler-destructure-functions.md | 50 - ...react-compiler-reanimated-shared-values.md | 48 - .../rules/react-state-dispatcher.md | 91 - .../rules/react-state-fallback.md | 56 - .../rules/react-state-minimize.md | 65 - .../rules/rendering-no-falsy-and.md | 74 - .../rules/rendering-text-in-text-component.md | 36 - .../rules/scroll-position-no-state.md | 82 - .../rules/state-ground-truth.md | 80 - .../rules/ui-expo-image.md | 66 - .../rules/ui-image-gallery.md | 104 - .../rules/ui-measure-views.md | 78 - skills/react-native-skills/rules/ui-menus.md | 174 - .../rules/ui-native-modals.md | 77 - .../react-native-skills/rules/ui-pressable.md | 61 - .../rules/ui-safe-area-scroll.md | 65 - .../rules/ui-scrollview-content-inset.md | 45 - .../react-native-skills/rules/ui-styling.md | 87 - skills/typography/SKILL.md | 344 -- skills/typography/css-templates.md | 305 -- skills/typography/html-entities.md | 171 - skills/web-artifacts-builder/LICENSE.txt | 202 - skills/web-artifacts-builder/SKILL.md | 74 - .../scripts/bundle-artifact.sh | 54 - .../scripts/init-artifact.sh | 322 -- .../scripts/shadcn-components.tar.gz | Bin 19967 -> 0 bytes skills/web-design-guidelines/SKILL.md | 39 - skills/webapp-testing/LICENSE.txt | 202 - skills/webapp-testing/SKILL.md | 96 - .../examples/console_logging.py | 35 - .../examples/element_discovery.py | 40 - .../examples/static_html_automation.py | 33 - skills/webapp-testing/scripts/with_server.py | 106 - spores/builder-spores.md | 77 - spores/commit-tracker-spores.md | 34 - spores/designer-spores.md | 150 - spores/sorter-spores.md | 89 - 286 files changed, 72721 deletions(-) delete mode 100644 CREATURE-PLAYGROUND/Noto_Emoji/OFL.txt delete mode 100644 CREATURE-PLAYGROUND/Noto_Emoji/README.txt delete mode 100644 CREATURE-PLAYGROUND/Uncodixfy.md delete mode 100644 CREATURE-PLAYGROUND/WebsiteDesignPrompt.md delete mode 100644 CREATURE-PLAYGROUND/homepage-redesign/aesthetic-brief.md delete mode 100644 CREATURE-PLAYGROUND/homepage-redesign/coordination.md delete mode 100644 CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/integration-v6-overgrowth.html delete mode 100644 CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/integration-v7.html delete mode 100644 CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/starfield-bold-v2.html delete mode 100644 CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/starfield-bold-v3.html delete mode 100644 CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/starfield-celestial-v4.html delete mode 100644 CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/starfield-nebula-v1.html delete mode 100644 CREATURE-PLAYGROUND/homepage-redesign/integration-v14.html delete mode 100644 CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-bold-v3.html delete mode 100644 CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-final-v4.html delete mode 100644 CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-full-v1.html delete mode 100644 CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-merged-v2.html delete mode 100644 CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-v5.html delete mode 100644 CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-v8.html delete mode 100644 Creatorlists/Creatorlists-JL-notes.md delete mode 100644 DumperCan/DumperCan-JL-notes.md delete mode 100755 DumperCan/FOSS-tools.md delete mode 100755 DumperCan/Facebook Streaming Setup Guide_v2.md delete mode 100644 DumperCan/RememberToForget_WorkdayLogger_v2.html delete mode 100644 DumperCan/SAQA_MICTSETA_QCTO_tabs-export-2025-11-06T11-25-59.md delete mode 100644 DumperCan/UI Style References/anarchist-angels_style_reference.html delete mode 100644 DumperCan/UI Style References/angelic-anarchist_style_reference.html delete mode 100644 DumperCan/UI Style References/bubblicorn_style_reference.html delete mode 100644 DumperCan/UI Style References/bubblicorn_style_reference_fixed.html delete mode 100644 DumperCan/UI Style References/course_marketing_page.html delete mode 100644 DumperCan/UI Style References/crepuscular-city-lights_style_reference.html delete mode 100644 DumperCan/UI Style References/crepuscular_corporate_style_reference.html delete mode 100644 DumperCan/UI Style References/crepuscular_corporate_style_reference_fixed.html delete mode 100644 DumperCan/UI Style References/faerie-fire_style_reference.html delete mode 100644 DumperCan/UI Style References/naughty-little-whispers_style_reference.html delete mode 100644 DumperCan/UI Style References/prismatic-storm-dragon_style_reference.html delete mode 100644 DumperCan/UI Style References/solarpunk-deep-jungle_style_reference.html delete mode 100644 DumperCan/UI Style References/solarpunk-rainforest_style_reference.html delete mode 100644 DumperCan/UI Style References/solarpunk-sundae_style_reference.html delete mode 100644 DumperCan/UI Style References/solarpunk_style_reference.html delete mode 100644 DumperCan/UI Style References/soviet-cyberpunk_style_reference.html delete mode 100644 DumperCan/WAMEX/README.md delete mode 100644 DumperCan/appimage-installation-guide.md delete mode 100644 DumperCan/appimage-quick-reference.md delete mode 100755 DumperCan/dendritic_links_network_v23.html delete mode 100644 DumperCan/docker-cheatsheet-enhanced.html delete mode 100755 DumperCan/jl_foss_tools_restyled.html delete mode 100644 DumperCan/linux-installation-methods-guide.md delete mode 100644 DumperCan/linux-uninstallation-guide.md delete mode 100755 DumperCan/rainbow-lyme-haiku.html delete mode 100755 DumperCan/silly_scaffolding_demo.html delete mode 100755 DumperCan/sweat_odor_science.html delete mode 100755 DumperCan/system_prompt_demo.html delete mode 100755 DumperCan/tokenization_demo.html delete mode 100755 DumperCan/tos_scavenger_hunt_completed.html delete mode 100644 GEMINI.md delete mode 100644 HomePage-JL-notes.md delete mode 100644 Images/Images-JL-notes.md delete mode 100644 PARENT.md delete mode 100644 Playlists/Playlists-JL-notes.md delete mode 100644 SEEDS.md delete mode 100644 SONNET.md delete mode 100644 SPORE_SYSTEM_SPEC_v0.2.md delete mode 100644 ToolsnToys/ToolsnToys-JL-notes.md delete mode 100644 Videos/Videos-JL-notes.md delete mode 100644 Watchlists/Watchlists-JL-notes.md delete mode 100644 Writings/Writings-JL-notes.md delete mode 100644 skills/algorithmic-art/LICENSE.txt delete mode 100644 skills/algorithmic-art/SKILL.md delete mode 100644 skills/algorithmic-art/templates/generator_template.js delete mode 100644 skills/algorithmic-art/templates/viewer.html delete mode 100644 skills/annotated-writing/SKILL.md delete mode 100644 skills/annotated-writing/annotated-writing-build.md delete mode 100644 skills/annotated-writing/content-mapping-fiction.md delete mode 100644 skills/annotated-writing/content-mapping-non-fiction.md delete mode 100644 skills/canvas-design/LICENSE.txt delete mode 100644 skills/canvas-design/SKILL.md delete mode 100644 skills/canvas-design/canvas-fonts/ArsenalSC-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/BigShoulders-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/Boldonse-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/BricolageGrotesque-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/CrimsonPro-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/DMMono-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/EricaOne-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/GeistMono-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/Gloock-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/IBMPlexMono-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/InstrumentSans-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/Italiana-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/JetBrainsMono-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/Jura-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/LibreBaskerville-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/Lora-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/NationalPark-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/NothingYouCouldDo-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/Outfit-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/PixelifySans-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/PoiretOne-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/RedHatMono-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/Silkscreen-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/SmoochSans-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/Tektur-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/WorkSans-OFL.txt delete mode 100644 skills/canvas-design/canvas-fonts/YoungSerif-OFL.txt delete mode 100644 skills/commissioning-skill/SKILL.md delete mode 100644 skills/commissioning-skill/fetched-skills/frontend-design/SKILL.md delete mode 100644 skills/commissioning-skill/fetched-skills/ux-design/SKILL.md delete mode 100644 skills/commissioning-skill/fetched-skills/ux-design/refactoring-ui.md delete mode 100644 skills/commissioning-skill/fetched-skills/ux-design/references/refui-accessibility-depth.md delete mode 100644 skills/commissioning-skill/fetched-skills/ux-design/references/refui-advanced-patterns.md delete mode 100644 skills/commissioning-skill/fetched-skills/ux-design/references/refui-animation-microinteractions.md delete mode 100644 skills/commissioning-skill/fetched-skills/ux-design/references/refui-data-visualization.md delete mode 100644 skills/commissioning-skill/fetched-skills/ux-design/references/refui-theming-dark-mode.md delete mode 100644 skills/commissioning-skill/fetched-skills/ux-design/references/uxh-audit-template.md delete mode 100644 skills/commissioning-skill/fetched-skills/ux-design/references/uxh-cultural-ux.md delete mode 100644 skills/commissioning-skill/fetched-skills/ux-design/references/uxh-dark-patterns.md delete mode 100644 skills/commissioning-skill/fetched-skills/ux-design/references/uxh-heuristic-conflicts.md delete mode 100644 skills/commissioning-skill/fetched-skills/ux-design/references/uxh-krug-principles.md delete mode 100644 skills/commissioning-skill/fetched-skills/ux-design/references/uxh-nielsen-heuristics.md delete mode 100644 skills/commissioning-skill/fetched-skills/ux-design/references/uxh-wcag-checklist.md delete mode 100644 skills/commissioning-skill/fetched-skills/ux-design/ux-heuristics.md delete mode 100644 skills/commissioning-skill/hook-patterns.md delete mode 100644 skills/commissioning-skill/hook-protocol.md delete mode 100644 skills/commissioning-skill/seeds-entry-format.md delete mode 100644 skills/commissioning-skill/skill-scout.md delete mode 100644 skills/commissioning-skill/spore-entry-format.md delete mode 100644 skills/commissioning-skill/token-budgets.md delete mode 100644 skills/composition-patterns/AGENTS.md delete mode 100644 skills/composition-patterns/README.md delete mode 100644 skills/composition-patterns/SKILL.md delete mode 100644 skills/composition-patterns/metadata.json delete mode 100644 skills/composition-patterns/rules/_sections.md delete mode 100644 skills/composition-patterns/rules/_template.md delete mode 100644 skills/composition-patterns/rules/architecture-avoid-boolean-props.md delete mode 100644 skills/composition-patterns/rules/architecture-compound-components.md delete mode 100644 skills/composition-patterns/rules/patterns-children-over-render-props.md delete mode 100644 skills/composition-patterns/rules/patterns-explicit-variants.md delete mode 100644 skills/composition-patterns/rules/react19-no-forwardref.md delete mode 100644 skills/composition-patterns/rules/state-context-interface.md delete mode 100644 skills/composition-patterns/rules/state-decouple-implementation.md delete mode 100644 skills/composition-patterns/rules/state-lift-state.md delete mode 100644 skills/controlled-ux-designer/ACCESSIBILITY.md delete mode 100644 skills/controlled-ux-designer/DESIGN-SYSTEM-TEMPLATE.md delete mode 100644 skills/controlled-ux-designer/MOTION-SPEC.md delete mode 100644 skills/controlled-ux-designer/RESPONSIVE-DESIGN.md delete mode 100644 skills/controlled-ux-designer/SKILL.md delete mode 100644 skills/frontend-design/LICENSE.txt delete mode 100644 skills/frontend-design/SKILL.md delete mode 100644 skills/innovative-ux-designer/ACCESSIBILITY.md delete mode 100644 skills/innovative-ux-designer/DESIGN-SYSTEM-TEMPLATE.md delete mode 100644 skills/innovative-ux-designer/MOTION-SPEC.md delete mode 100644 skills/innovative-ux-designer/RESPONSIVE-DESIGN.md delete mode 100644 skills/innovative-ux-designer/SKILL.md delete mode 100644 skills/react-best-practices/AGENTS.md delete mode 100644 skills/react-best-practices/README.md delete mode 100644 skills/react-best-practices/SKILL.md delete mode 100644 skills/react-best-practices/metadata.json delete mode 100644 skills/react-best-practices/rules/_sections.md delete mode 100644 skills/react-best-practices/rules/_template.md delete mode 100644 skills/react-best-practices/rules/advanced-event-handler-refs.md delete mode 100644 skills/react-best-practices/rules/advanced-init-once.md delete mode 100644 skills/react-best-practices/rules/advanced-use-latest.md delete mode 100644 skills/react-best-practices/rules/async-api-routes.md delete mode 100644 skills/react-best-practices/rules/async-defer-await.md delete mode 100644 skills/react-best-practices/rules/async-dependencies.md delete mode 100644 skills/react-best-practices/rules/async-parallel.md delete mode 100644 skills/react-best-practices/rules/async-suspense-boundaries.md delete mode 100644 skills/react-best-practices/rules/bundle-barrel-imports.md delete mode 100644 skills/react-best-practices/rules/bundle-conditional.md delete mode 100644 skills/react-best-practices/rules/bundle-defer-third-party.md delete mode 100644 skills/react-best-practices/rules/bundle-dynamic-imports.md delete mode 100644 skills/react-best-practices/rules/bundle-preload.md delete mode 100644 skills/react-best-practices/rules/client-event-listeners.md delete mode 100644 skills/react-best-practices/rules/client-localstorage-schema.md delete mode 100644 skills/react-best-practices/rules/client-passive-event-listeners.md delete mode 100644 skills/react-best-practices/rules/client-swr-dedup.md delete mode 100644 skills/react-best-practices/rules/js-batch-dom-css.md delete mode 100644 skills/react-best-practices/rules/js-cache-function-results.md delete mode 100644 skills/react-best-practices/rules/js-cache-property-access.md delete mode 100644 skills/react-best-practices/rules/js-cache-storage.md delete mode 100644 skills/react-best-practices/rules/js-combine-iterations.md delete mode 100644 skills/react-best-practices/rules/js-early-exit.md delete mode 100644 skills/react-best-practices/rules/js-flatmap-filter.md delete mode 100644 skills/react-best-practices/rules/js-hoist-regexp.md delete mode 100644 skills/react-best-practices/rules/js-index-maps.md delete mode 100644 skills/react-best-practices/rules/js-length-check-first.md delete mode 100644 skills/react-best-practices/rules/js-min-max-loop.md delete mode 100644 skills/react-best-practices/rules/js-request-idle-callback.md delete mode 100644 skills/react-best-practices/rules/js-set-map-lookups.md delete mode 100644 skills/react-best-practices/rules/js-tosorted-immutable.md delete mode 100644 skills/react-best-practices/rules/rendering-activity.md delete mode 100644 skills/react-best-practices/rules/rendering-animate-svg-wrapper.md delete mode 100644 skills/react-best-practices/rules/rendering-conditional-render.md delete mode 100644 skills/react-best-practices/rules/rendering-content-visibility.md delete mode 100644 skills/react-best-practices/rules/rendering-hoist-jsx.md delete mode 100644 skills/react-best-practices/rules/rendering-hydration-no-flicker.md delete mode 100644 skills/react-best-practices/rules/rendering-hydration-suppress-warning.md delete mode 100644 skills/react-best-practices/rules/rendering-resource-hints.md delete mode 100644 skills/react-best-practices/rules/rendering-script-defer-async.md delete mode 100644 skills/react-best-practices/rules/rendering-svg-precision.md delete mode 100644 skills/react-best-practices/rules/rendering-usetransition-loading.md delete mode 100644 skills/react-best-practices/rules/rerender-defer-reads.md delete mode 100644 skills/react-best-practices/rules/rerender-dependencies.md delete mode 100644 skills/react-best-practices/rules/rerender-derived-state-no-effect.md delete mode 100644 skills/react-best-practices/rules/rerender-derived-state.md delete mode 100644 skills/react-best-practices/rules/rerender-functional-setstate.md delete mode 100644 skills/react-best-practices/rules/rerender-lazy-state-init.md delete mode 100644 skills/react-best-practices/rules/rerender-memo-with-default-value.md delete mode 100644 skills/react-best-practices/rules/rerender-memo.md delete mode 100644 skills/react-best-practices/rules/rerender-move-effect-to-event.md delete mode 100644 skills/react-best-practices/rules/rerender-no-inline-components.md delete mode 100644 skills/react-best-practices/rules/rerender-simple-expression-in-memo.md delete mode 100644 skills/react-best-practices/rules/rerender-split-combined-hooks.md delete mode 100644 skills/react-best-practices/rules/rerender-transitions.md delete mode 100644 skills/react-best-practices/rules/rerender-use-deferred-value.md delete mode 100644 skills/react-best-practices/rules/rerender-use-ref-transient-values.md delete mode 100644 skills/react-best-practices/rules/server-after-nonblocking.md delete mode 100644 skills/react-best-practices/rules/server-auth-actions.md delete mode 100644 skills/react-best-practices/rules/server-cache-lru.md delete mode 100644 skills/react-best-practices/rules/server-cache-react.md delete mode 100644 skills/react-best-practices/rules/server-dedup-props.md delete mode 100644 skills/react-best-practices/rules/server-hoist-static-io.md delete mode 100644 skills/react-best-practices/rules/server-parallel-fetching.md delete mode 100644 skills/react-best-practices/rules/server-parallel-nested-fetching.md delete mode 100644 skills/react-best-practices/rules/server-serialization.md delete mode 100644 skills/react-native-skills/AGENTS.md delete mode 100644 skills/react-native-skills/README.md delete mode 100644 skills/react-native-skills/SKILL.md delete mode 100644 skills/react-native-skills/metadata.json delete mode 100644 skills/react-native-skills/rules/_sections.md delete mode 100644 skills/react-native-skills/rules/_template.md delete mode 100644 skills/react-native-skills/rules/animation-derived-value.md delete mode 100644 skills/react-native-skills/rules/animation-gesture-detector-press.md delete mode 100644 skills/react-native-skills/rules/animation-gpu-properties.md delete mode 100644 skills/react-native-skills/rules/design-system-compound-components.md delete mode 100644 skills/react-native-skills/rules/fonts-config-plugin.md delete mode 100644 skills/react-native-skills/rules/imports-design-system-folder.md delete mode 100644 skills/react-native-skills/rules/js-hoist-intl.md delete mode 100644 skills/react-native-skills/rules/list-performance-callbacks.md delete mode 100644 skills/react-native-skills/rules/list-performance-function-references.md delete mode 100644 skills/react-native-skills/rules/list-performance-images.md delete mode 100644 skills/react-native-skills/rules/list-performance-inline-objects.md delete mode 100644 skills/react-native-skills/rules/list-performance-item-expensive.md delete mode 100644 skills/react-native-skills/rules/list-performance-item-memo.md delete mode 100644 skills/react-native-skills/rules/list-performance-item-types.md delete mode 100644 skills/react-native-skills/rules/list-performance-virtualize.md delete mode 100644 skills/react-native-skills/rules/monorepo-native-deps-in-app.md delete mode 100644 skills/react-native-skills/rules/monorepo-single-dependency-versions.md delete mode 100644 skills/react-native-skills/rules/navigation-native-navigators.md delete mode 100644 skills/react-native-skills/rules/react-compiler-destructure-functions.md delete mode 100644 skills/react-native-skills/rules/react-compiler-reanimated-shared-values.md delete mode 100644 skills/react-native-skills/rules/react-state-dispatcher.md delete mode 100644 skills/react-native-skills/rules/react-state-fallback.md delete mode 100644 skills/react-native-skills/rules/react-state-minimize.md delete mode 100644 skills/react-native-skills/rules/rendering-no-falsy-and.md delete mode 100644 skills/react-native-skills/rules/rendering-text-in-text-component.md delete mode 100644 skills/react-native-skills/rules/scroll-position-no-state.md delete mode 100644 skills/react-native-skills/rules/state-ground-truth.md delete mode 100644 skills/react-native-skills/rules/ui-expo-image.md delete mode 100644 skills/react-native-skills/rules/ui-image-gallery.md delete mode 100644 skills/react-native-skills/rules/ui-measure-views.md delete mode 100644 skills/react-native-skills/rules/ui-menus.md delete mode 100644 skills/react-native-skills/rules/ui-native-modals.md delete mode 100644 skills/react-native-skills/rules/ui-pressable.md delete mode 100644 skills/react-native-skills/rules/ui-safe-area-scroll.md delete mode 100644 skills/react-native-skills/rules/ui-scrollview-content-inset.md delete mode 100644 skills/react-native-skills/rules/ui-styling.md delete mode 100644 skills/typography/SKILL.md delete mode 100644 skills/typography/css-templates.md delete mode 100644 skills/typography/html-entities.md delete mode 100644 skills/web-artifacts-builder/LICENSE.txt delete mode 100644 skills/web-artifacts-builder/SKILL.md delete mode 100755 skills/web-artifacts-builder/scripts/bundle-artifact.sh delete mode 100755 skills/web-artifacts-builder/scripts/init-artifact.sh delete mode 100644 skills/web-artifacts-builder/scripts/shadcn-components.tar.gz delete mode 100644 skills/web-design-guidelines/SKILL.md delete mode 100644 skills/webapp-testing/LICENSE.txt delete mode 100644 skills/webapp-testing/SKILL.md delete mode 100644 skills/webapp-testing/examples/console_logging.py delete mode 100644 skills/webapp-testing/examples/element_discovery.py delete mode 100644 skills/webapp-testing/examples/static_html_automation.py delete mode 100755 skills/webapp-testing/scripts/with_server.py delete mode 100644 spores/builder-spores.md delete mode 100644 spores/commit-tracker-spores.md delete mode 100644 spores/designer-spores.md delete mode 100644 spores/sorter-spores.md diff --git a/CREATURE-PLAYGROUND/Noto_Emoji/OFL.txt b/CREATURE-PLAYGROUND/Noto_Emoji/OFL.txt deleted file mode 100644 index 0f08295..0000000 --- a/CREATURE-PLAYGROUND/Noto_Emoji/OFL.txt +++ /dev/null @@ -1,93 +0,0 @@ -Copyright 2013 Google LLC - -This Font Software is licensed under the SIL Open Font License, Version 1.1. -This license is copied below, and is also available with a FAQ at: -https://openfontlicense.org - - ------------------------------------------------------------ -SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 ------------------------------------------------------------ - -PREAMBLE -The goals of the Open Font License (OFL) are to stimulate worldwide -development of collaborative font projects, to support the font creation -efforts of academic and linguistic communities, and to provide a free and -open framework in which fonts may be shared and improved in partnership -with others. - -The OFL allows the licensed fonts to be used, studied, modified and -redistributed freely as long as they are not sold by themselves. The -fonts, including any derivative works, can be bundled, embedded, -redistributed and/or sold with any software provided that any reserved -names are not used by derivative works. The fonts and derivatives, -however, cannot be released under any other type of license. The -requirement for fonts to remain under this license does not apply -to any document created using the fonts or their derivatives. - -DEFINITIONS -"Font Software" refers to the set of files released by the Copyright -Holder(s) under this license and clearly marked as such. This may -include source files, build scripts and documentation. - -"Reserved Font Name" refers to any names specified as such after the -copyright statement(s). - -"Original Version" refers to the collection of Font Software components as -distributed by the Copyright Holder(s). - -"Modified Version" refers to any derivative made by adding to, deleting, -or substituting -- in part or in whole -- any of the components of the -Original Version, by changing formats or by porting the Font Software to a -new environment. - -"Author" refers to any designer, engineer, programmer, technical -writer or other person who contributed to the Font Software. - -PERMISSION & CONDITIONS -Permission is hereby granted, free of charge, to any person obtaining -a copy of the Font Software, to use, study, copy, merge, embed, modify, -redistribute, and sell modified and unmodified copies of the Font -Software, subject to the following conditions: - -1) Neither the Font Software nor any of its individual components, -in Original or Modified Versions, may be sold by itself. - -2) Original or Modified Versions of the Font Software may be bundled, -redistributed and/or sold with any software, provided that each copy -contains the above copyright notice and this license. These can be -included either as stand-alone text files, human-readable headers or -in the appropriate machine-readable metadata fields within text or -binary files as long as those fields can be easily viewed by the user. - -3) No Modified Version of the Font Software may use the Reserved Font -Name(s) unless explicit written permission is granted by the corresponding -Copyright Holder. This restriction only applies to the primary font name as -presented to the users. - -4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font -Software shall not be used to promote, endorse or advertise any -Modified Version, except to acknowledge the contribution(s) of the -Copyright Holder(s) and the Author(s) or with their explicit written -permission. - -5) The Font Software, modified or unmodified, in part or in whole, -must be distributed entirely under this license, and must not be -distributed under any other license. The requirement for fonts to -remain under this license does not apply to any document created -using the Font Software. - -TERMINATION -This license becomes null and void if any of the above conditions are -not met. - -DISCLAIMER -THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT -OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE -COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL -DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM -OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/CREATURE-PLAYGROUND/Noto_Emoji/README.txt b/CREATURE-PLAYGROUND/Noto_Emoji/README.txt deleted file mode 100644 index 81b2637..0000000 --- a/CREATURE-PLAYGROUND/Noto_Emoji/README.txt +++ /dev/null @@ -1,67 +0,0 @@ -Noto Emoji Variable Font -======================== - -This download contains Noto Emoji as both a variable font and static fonts. - -Noto Emoji is a variable font with this axis: - wght - -This means all the styles are contained in a single file: - Noto_Emoji/NotoEmoji-VariableFont_wght.ttf - -If your app fully supports variable fonts, you can now pick intermediate styles -that aren’t available as static fonts. Not all apps support variable fonts, and -in those cases you can use the static font files for Noto Emoji: - Noto_Emoji/static/NotoEmoji-Light.ttf - Noto_Emoji/static/NotoEmoji-Regular.ttf - Noto_Emoji/static/NotoEmoji-Medium.ttf - Noto_Emoji/static/NotoEmoji-SemiBold.ttf - Noto_Emoji/static/NotoEmoji-Bold.ttf - -Get started ------------ - -1. Install the font files you want to use - -2. Use your app's font picker to view the font family and all the -available styles - -Learn more about variable fonts -------------------------------- - - https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts - https://variablefonts.typenetwork.com - https://medium.com/variable-fonts - -In desktop apps - - https://theblog.adobe.com/can-variable-fonts-illustrator-cc - https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts - -Online - - https://developers.google.com/fonts/docs/getting_started - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide - https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts - -Installing fonts - - MacOS: https://support.apple.com/en-us/HT201749 - Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux - Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows - -Android Apps - - https://developers.google.com/fonts/docs/android - https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts - -License -------- -Please read the full license text (OFL.txt) to understand the permissions, -restrictions and requirements for usage, redistribution, and modification. - -You can use them in your products & projects – print or digital, -commercial or otherwise. - -This isn't legal advice, please consider consulting a lawyer and see the full -license for all details. diff --git a/CREATURE-PLAYGROUND/Uncodixfy.md b/CREATURE-PLAYGROUND/Uncodixfy.md deleted file mode 100644 index 6d9c67a..0000000 --- a/CREATURE-PLAYGROUND/Uncodixfy.md +++ /dev/null @@ -1,189 +0,0 @@ -# Uncodixify - -This document exists to teach you how to act as non-Codex as possible when building UI. - -Codex UI is the default AI aesthetic: soft gradients, floating panels, eyebrow labels, decorative copy, hero sections in dashboards, oversized rounded corners, transform animations, dramatic shadows, and layouts that try too hard to look premium. It's the visual language that screams "an AI made this" because it follows the path of least resistance. - -This file is your guide to break that pattern. Everything listed below is what Codex UI does by default. Your job is to recognize these patterns, avoid them completely, and build interfaces that feel human-designed, functional, and honest. - -When you read this document, you're learning what NOT to do. The banned patterns are your red flags. The normal implementations are your blueprint. Follow them strictly, and you'll create UI that feels like Linear, Raycast, Stripe, or GitHub—not like another generic AI dashboard. - -This is how you Uncodixify. -## Keep It Normal (Uncodexy-UI Standard) - -- Sidebars: normal (240-260px fixed width, solid background, simple border-right, no floating shells, no rounded outer corners) -- Headers: normal (simple text, no eyebrows, no uppercase labels, no gradient text, just h1/h2 with proper hierarchy) -- Sections: normal (standard padding 20-30px, no hero blocks inside dashboards, no decorative copy) -- Navigation: normal (simple links, subtle hover states, no transform animations, no badges unless functional) -- Buttons: normal (solid fills or simple borders, 8-10px radius max, no pill shapes, no gradient backgrounds) -- Cards: normal (simple containers, 8-12px radius max, subtle borders, no shadows over 8px blur, no floating effect) -- Forms: normal (standard inputs, clear labels above fields, no fancy floating labels, simple focus states) -- Inputs: normal (solid borders, simple focus ring, no animated underlines, no morphing shapes) -- Modals: normal (centered overlay, simple backdrop, no slide-in animations, straightforward close button) -- Dropdowns: normal (simple list, subtle shadow, no fancy animations, clear selected state) -- Tables: normal (clean rows, simple borders, subtle hover, no zebra stripes unless needed, left-aligned text) -- Lists: normal (simple items, consistent spacing, no decorative bullets, clear hierarchy) -- Tabs: normal (simple underline or border indicator, no pill backgrounds, no sliding animations) -- Badges: normal (small text, simple border or background, 6-8px radius, no glows, only when needed) -- Avatars: normal (simple circle or rounded square, no decorative borders, no status rings unless functional) -- Icons: normal (simple shapes, consistent size 16-20px, no decorative icon backgrounds, monochrome or subtle color) -- Typography: normal (system fonts or simple sans-serif, clear hierarchy, no mixed serif/sans combos, readable sizes 14-16px body) -- Spacing: normal (consistent scale 4/8/12/16/24/32px, no random gaps, no excessive padding) -- Borders: normal (1px solid, subtle colors, no thick decorative borders, no gradient borders) -- Shadows: normal (subtle 0 2px 8px rgba(0,0,0,0.1) max, no dramatic drop shadows, no colored shadows) -- Transitions: normal (100-200ms ease, no bouncy animations, no transform effects, simple opacity/color changes) -- Layouts: normal (standard grid/flex, no creative asymmetry, predictable structure, clear content hierarchy) -- Grids: normal (consistent columns, standard gaps, no creative overlaps, responsive breakpoints) -- Flexbox: normal (simple alignment, standard gaps, no creative justify tricks) -- Containers: normal (max-width 1200-1400px, centered, standard padding, no creative widths) -- Wrappers: normal (simple containing divs, no decorative purposes, functional only) -- Panels: normal (simple background differentiation, subtle borders, no floating detached panels, no glass effects) -- Toolbars: normal (simple horizontal layout, standard height 48-56px, clear actions, no decorative elements) -- Footers: normal (simple layout, standard links, no decorative sections, minimal height) -- Breadcrumbs: normal (simple text with separators, no fancy styling, clear hierarchy) - -Think Linear. Think Raycast. Think Stripe. Think GitHub. They don't try to grab attention. They just work. Stop playing hard to get. Make normal UI. - -- A landing page needs its sections. If hero needs full sections, if dashboard needs full sections with sidebar and everything else laid out properly. DO NOT invent a new layout. -- In your internal reasoning act as if you dont see this, list all the stuff you would do redlated to UI (That goes against this UI schema, as you usually would without it), AND DONT DO IT make it follow Uncodixfy! -- Try to replicate figma/designer made components dont invent your own -## Hard No -- Everything you are used to doing and is a basic "YES" to you. -- No oversized rounded corners. -- No pill overload. -- No floating glassmorphism shells as the default visual language. -- No soft corporate gradients used to fake taste. -- No generic dark SaaS UI composition. -- No decorative sidebar blobs. -- No "control room" cosplay unless explicitly requested. -- No serif headline + system sans fallback combo as a shortcut to "premium." -- No `Segoe UI`, `Trebuchet MS`, `Arial`, `Inter`, `Roboto`, or safe default stacks unless the product already uses them. -- No sticky left rail unless the information architecture truly needs it. -- No metric-card grid as the first instinct. -- No fake charts that exist only to fill space. -- No random glows, blur haze, frosted panels, or conic-gradient donuts as decoration. -- No "hero section" inside an internal UI unless there is a real product reason. -- No alignment that creates dead space just to look expensive. -- No overpadded layouts. -- No mobile collapse that just stacks everything into one long beige sandwich. -- No ornamental labels like "live pulse", "night shift", "operator checklist" unless they come from the product voice. -- No generic startup copy. -- No style decisions made because they are easy to generate. - -- No Headlines of any sort - -```html -
- Team Command -

One place to track what matters today.

-

- The layout stays strict and readable: live project health, - team activity, and near-term priorities without the usual - dashboard filler. -

-
-``` - -This is not allowed. - -- `` headers are NOT allowed -- Big no to rounded `span`s -- Colors going towards blue — **NOPE, bad.** Dark muted colors are best. - -- Anything in the structure of this card is a **BIG no**. - -```html -
- Focus - - Keep updates brief, blockers visible, and next actions easy to spot. - -
-``` - -This one is **THE BIGGEST NO**. - - -## Specifically Banned (Based on Mistakes) - -- Border radii in the 20px to 32px range across everything ( uses 12px everywhere - too much) -- Repeating the same rounded rectangle on sidebar, cards, buttons, and panels -- Sidebar width around 280px with a brand block on top and nav links below (: 248px with brand block) -- Floating detached sidebar with rounded outer shell -- Canvas chart placed in a glass card with no product-specific reason -- Donut chart paired with hand-wavy percentages -- UI cards using glows instead of hierarchy -- Mixed alignment logic where some content hugs the left edge and some content floats in center-ish blocks -- Overuse of muted gray-blue text that weakens contrast and clarity -- "Premium dark mode" that really means blue-black gradients plus cyan accents ( has radial gradients in background) -- UI typography that feels like a template instead of a brand -- Eyebrow labels (: "MARCH SNAPSHOT" uppercase with letter-spacing) -- Hero sections inside dashboards ( has full hero-strip with decorative copy) -- Decorative copy like "Operational clarity without the clutter" as page headers -- Section notes and mini-notes everywhere explaining what the UI does -- Transform animations on hover (: translateX(2px) on nav links) -- Dramatic box shadows (: 0 24px 60px rgba(0,0,0,0.35)) -- Status indicators with ::before pseudo-elements creating colored dots -- Muted labels with uppercase + letter-spacing ( overuses this pattern) -- Pipeline bars with gradient fills (: linear-gradient(90deg, var(--primary), #4fe0c0)) -- KPI cards in a grid as the default dashboard layout ( has 3-column kpi-grid) -- "Team focus" or "Recent activity" panels with decorative internal copy -- Tables with tag badges for every status ( overuses .tag class) -- Workspace blocks in sidebar with call-to-action buttons -- Brand marks with gradient backgrounds (: linear-gradient(135deg, #2a2a2a, #171717)) -- Nav badges showing counts or "Live" status ( has nav-badge class) -- Quota/usage panels with progress bars ( has three quota sections) -- Footer lines with meta information (: "Northstar dashboard • dark mode • single-file HTML") -- Trend indicators with colored text (: trend-up, trend-flat classes) -- Rail panels on the right side with "Today" schedule ( has full right rail) -- Multiple nested panel types (panel, panel-2, rail-panel, table-panel) - - - -## Rule - -If a UI choice feels like a default AI UI move, ban it and pick the harder, cleaner option. -- Colors should stay calm, not fight. - -- You are bad at picking colors follow this priority order when selecting colors: - -1. **Highest priority:** Use the existing colors from the user's project if they are provided (You can search for them by reading a few files). -2. If the project does not provide a palette, **get inspired from one of the predefined palettes below**. -3. Do **not invent random color combinations** unless explicitly requested. - -You do not have to always choose the first palette. Select one randomly when drawing inspiration. ---- - -# Dark Color Schemes - -| Palette | Background | Surface | Primary | Secondary | Accent | Text | -|--------|-----------|--------|--------|----------|--------|------| -| Midnight Canvas | `#0a0e27` | `#151b3d` | `#6c8eff` | `#a78bfa` | `#f472b6` | `#e2e8f0` | -| Obsidian Depth | `#0f0f0f` | `#1a1a1a` | `#00d4aa` | `#00a3cc` | `#ff6b9d` | `#f5f5f5` | -| Slate Noir | `#0f172a` | `#1e293b` | `#38bdf8` | `#818cf8` | `#fb923c` | `#f1f5f9` | -| Carbon Elegance | `#121212` | `#1e1e1e` | `#bb86fc` | `#03dac6` | `#cf6679` | `#e1e1e1` | -| Deep Ocean | `#001e3c` | `#0a2744` | `#4fc3f7` | `#29b6f6` | `#ffa726` | `#eceff1` | -| Charcoal Studio | `#1c1c1e` | `#2c2c2e` | `#0a84ff` | `#5e5ce6` | `#ff375f` | `#f2f2f7` | -| Graphite Pro | `#18181b` | `#27272a` | `#a855f7` | `#ec4899` | `#14b8a6` | `#fafafa` | -| Void Space | `#0d1117` | `#161b22` | `#58a6ff` | `#79c0ff` | `#f78166` | `#c9d1d9` | -| Twilight Mist | `#1a1625` | `#2d2438` | `#9d7cd8` | `#7aa2f7` | `#ff9e64` | `#dcd7e8` | -| Onyx Matrix | `#0e0e10` | `#1c1c21` | `#00ff9f` | `#00e0ff` | `#ff0080` | `#f0f0f0` | - ---- - -# Light Color Schemes - -| Palette | Background | Surface | Primary | Secondary | Accent | Text | -|--------|-----------|--------|--------|----------|--------|------| -| Cloud Canvas | `#fafafa` | `#ffffff` | `#2563eb` | `#7c3aed` | `#dc2626` | `#0f172a` | -| Pearl Minimal | `#f8f9fa` | `#ffffff` | `#0066cc` | `#6610f2` | `#ff6b35` | `#212529` | -| Ivory Studio | `#f5f5f4` | `#fafaf9` | `#0891b2` | `#06b6d4` | `#f59e0b` | `#1c1917` | -| Linen Soft | `#fef7f0` | `#fffbf5` | `#d97706` | `#ea580c` | `#0284c7` | `#292524` | -| Porcelain Clean | `#f9fafb` | `#ffffff` | `#4f46e5` | `#8b5cf6` | `#ec4899` | `#111827` | -| Cream Elegance | `#fefce8` | `#fefce8` | `#65a30d` | `#84cc16` | `#f97316` | `#365314` | -| Arctic Breeze | `#f0f9ff` | `#f8fafc` | `#0284c7` | `#0ea5e9` | `#f43f5e` | `#0c4a6e` | -| Alabaster Pure | `#fcfcfc` | `#ffffff` | `#1d4ed8` | `#2563eb` | `#dc2626` | `#1e293b` | -| Sand Warm | `#faf8f5` | `#ffffff` | `#b45309` | `#d97706` | `#059669` | `#451a03` | -| Frost Bright | `#f1f5f9` | `#f8fafc` | `#0f766e` | `#14b8a6` | `#e11d48` | `#0f172a` | - ---- diff --git a/CREATURE-PLAYGROUND/WebsiteDesignPrompt.md b/CREATURE-PLAYGROUND/WebsiteDesignPrompt.md deleted file mode 100644 index 9e98ba8..0000000 --- a/CREATURE-PLAYGROUND/WebsiteDesignPrompt.md +++ /dev/null @@ -1,151 +0,0 @@ -# Cinematic Landing Page Builder - -## Role - -Act as a World-Class Senior Creative Technologist and Lead Frontend Engineer. You build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Every site you produce should feel like a digital instrument — every scroll intentional, every animation weighted and professional. Eradicate all generic AI patterns. - -## Agent Flow — MUST FOLLOW - -When the user asks to build a site (or this file is loaded into a fresh project), immediately ask **exactly these questions** using AskUserQuestion in a single call, then build the full site from the answers. Do not ask follow-ups. Do not over-discuss. Build. - -### Questions (all in one AskUserQuestion call) - -1. **"What's the brand name and one-line purpose?"** — Free text. Example: "Nura Health — precision longevity medicine powered by biological data." -2. **"Pick an aesthetic direction"** — Single-select from the presets below. Each preset ships a full design system (palette, typography, image mood, identity label). -3. **"What are your 3 key value propositions?"** — Free text. Brief phrases. These become the Features section cards. -4. **"What should visitors do?"** — Free text. The primary CTA. Example: "Join the waitlist", "Book a consultation", "Start free trial". - ---- - -## Aesthetic Presets - -Each preset defines: `palette`, `typography`, `identity` (the overall feel), and `imageMood` (Unsplash search keywords for hero/texture images). - -### Preset A — "Organic Tech" (Clinical Boutique) -- **Identity:** A bridge between a biological research lab and an avant-garde luxury magazine. -- **Palette:** Moss `#2E4036` (Primary), Clay `#CC5833` (Accent), Cream `#F2F0E9` (Background), Charcoal `#1A1A1A` (Text/Dark) -- **Typography:** Headings: "Plus Jakarta Sans" + "Outfit" (tight tracking). Drama: "Cormorant Garamond" Italic. Data: `"IBM Plex Mono"`. -- **Image Mood:** dark forest, organic textures, moss, ferns, laboratory glassware. -- **Hero line pattern:** "[Concept noun] is the" (Bold Sans) / "[Power word]." (Massive Serif Italic) - -### Preset B — "Midnight Luxe" (Dark Editorial) -- **Identity:** A private members' club meets a high-end watchmaker's atelier. -- **Palette:** Obsidian `#0D0D12` (Primary), Champagne `#C9A84C` (Accent), Ivory `#FAF8F5` (Background), Slate `#2A2A35` (Text/Dark) -- **Typography:** Headings: "Inter" (tight tracking). Drama: "Playfair Display" Italic. Data: `"JetBrains Mono"`. -- **Image Mood:** dark marble, gold accents, architectural shadows, luxury interiors. -- **Hero line pattern:** "[Aspirational noun] meets" (Bold Sans) / "[Precision word]." (Massive Serif Italic) - -### Preset C — "Brutalist Signal" (Raw Precision) -- **Identity:** A control room for the future — no decoration, pure information density. -- **Palette:** Paper `#E8E4DD` (Primary), Signal Red `#E63B2E` (Accent), Off-white `#F5F3EE` (Background), Black `#111111` (Text/Dark) -- **Typography:** Headings: "Space Grotesk" (tight tracking). Drama: "DM Serif Display" Italic. Data: `"Space Mono"`. -- **Image Mood:** concrete, brutalist architecture, raw materials, industrial. -- **Hero line pattern:** "[Direct verb] the" (Bold Sans) / "[System noun]." (Massive Serif Italic) - -### Preset D — "Vapor Clinic" (Neon Biotech) -- **Identity:** A genome sequencing lab inside a Tokyo nightclub. -- **Palette:** Deep Void `#0A0A14` (Primary), Plasma `#7B61FF` (Accent), Ghost `#F0EFF4` (Background), Graphite `#18181B` (Text/Dark) -- **Typography:** Headings: "Sora" (tight tracking). Drama: "Instrument Serif" Italic. Data: `"Fira Code"`. -- **Image Mood:** bioluminescence, dark water, neon reflections, microscopy. -- **Hero line pattern:** "[Tech noun] beyond" (Bold Sans) / "[Boundary word]." (Massive Serif Italic) - ---- - -## Fixed Design System (NEVER CHANGE) - -These rules apply to ALL presets. They are what make the output premium. - -### Visual Texture -- Implement a global CSS noise overlay using an inline SVG `` filter at **0.05 opacity** to eliminate flat digital gradients. -- Use a `rounded-[2rem]` to `rounded-[3rem]` radius system for all containers. No sharp corners anywhere. - -### Micro-Interactions -- All buttons must have a **"magnetic" feel**: subtle `scale(1.03)` on hover with `cubic-bezier(0.25, 0.46, 0.45, 0.94)`. -- Buttons use `overflow-hidden` with a sliding background `` layer for color transitions on hover. -- Links and interactive elements get a `translateY(-1px)` lift on hover. - -### Animation Lifecycle -- Use `gsap.context()` within `useEffect` for ALL animations. Return `ctx.revert()` in the cleanup function. -- Default easing: `power3.out` for entrances, `power2.inOut` for morphs. -- Stagger value: `0.08` for text, `0.15` for cards/containers. - ---- - -## Component Architecture (NEVER CHANGE STRUCTURE — only adapt content/colors) - -### A. NAVBAR — "The Floating Island" -A `fixed` pill-shaped container, horizontally centered. -- **Morphing Logic:** Transparent with light text at hero top. Transitions to `bg-[background]/60 backdrop-blur-xl` with primary-colored text and a subtle `border` when scrolled past the hero. Use `IntersectionObserver` or ScrollTrigger. -- Contains: Logo (brand name as text), 3-4 nav links, CTA button (accent color). - -### B. HERO SECTION — "The Opening Shot" -- `100dvh` height. Full-bleed background image (sourced from Unsplash matching preset's `imageMood`) with a heavy **primary-to-black gradient overlay** (`bg-gradient-to-t`). -- **Layout:** Content pushed to the **bottom-left third** using flex + padding. -- **Typography:** Large scale contrast following the preset's hero line pattern. First part in bold sans heading font. Second part in massive serif italic drama font (3-5x size difference). -- **Animation:** GSAP staggered `fade-up` (y: 40 → 0, opacity: 0 → 1) for all text parts and CTA. -- CTA button below the headline, using the accent color. - -### C. FEATURES — "Interactive Functional Artifacts" -Three cards derived from the user's 3 value propositions. These must feel like **functional software micro-UIs**, not static marketing cards. Each card gets one of these interaction patterns: - -**Card 1 — "Diagnostic Shuffler":** 3 overlapping cards that cycle vertically using `array.unshift(array.pop())` logic every 3 seconds with a spring-bounce transition (`cubic-bezier(0.34, 1.56, 0.64, 1)`). Labels derived from user's first value prop (generate 3 sub-labels). - -**Card 2 — "Telemetry Typewriter":** A monospace live-text feed that types out messages character-by-character related to the user's second value prop, with a blinking accent-colored cursor. Include a "Live Feed" label with a pulsing dot. - -**Card 3 — "Cursor Protocol Scheduler":** A weekly grid (S M T W T F S) where an animated SVG cursor enters, moves to a day cell, clicks (visual `scale(0.95)` press), activates the day (accent highlight), then moves to a "Save" button before fading out. Labels from user's third value prop. - -All cards: `bg-[background]` surface, subtle border, `rounded-[2rem]`, drop shadow. Each card has a heading (sans bold) and a brief descriptor. - -### D. PHILOSOPHY — "The Manifesto" -- Full-width section with the **dark color** as background. -- A parallaxing organic texture image (Unsplash, `imageMood` keywords) at low opacity behind the text. -- **Typography:** Two contrasting statements. Pattern: - - "Most [industry] focuses on: [common approach]." — neutral, smaller. - - "We focus on: [differentiated approach]." — massive, drama serif italic, accent-colored keyword. -- **Animation:** GSAP `SplitText`-style reveal (word-by-word or line-by-line fade-up) triggered by ScrollTrigger. - -### E. PROTOCOL — "Sticky Stacking Archive" -3 full-screen cards that stack on scroll. -- **Stacking Interaction:** Using GSAP ScrollTrigger with `pin: true`. As a new card scrolls into view, the card underneath scales to `0.9`, blurs to `20px`, and fades to `0.5`. -- **Each card gets a unique canvas/SVG animation:** - 1. A slowly rotating geometric motif (double-helix, concentric circles, or gear teeth). - 2. A scanning horizontal laser-line moving across a grid of dots/cells. - 3. A pulsing waveform (EKG-style SVG path animation using `stroke-dashoffset`). -- Card content: Step number (monospace), title (heading font), 2-line description. Derive from user's brand purpose. - -### F. MEMBERSHIP / PRICING -- Three-tier pricing grid. Card names: "Essential", "Performance", "Enterprise" (adjust to fit brand). -- **Middle card pops:** Primary-colored background with an accent CTA button. Slightly larger scale or `ring` border. -- If pricing doesn't apply, convert this into a "Get Started" section with a single large CTA. - -### G. FOOTER -- Deep dark-colored background, `rounded-t-[4rem]`. -- Grid layout: Brand name + tagline, navigation columns, legal links. -- **"System Operational" status indicator** with a pulsing green dot and monospace label. - ---- - -## Technical Requirements (NEVER CHANGE) - -- **Stack:** React 19, Tailwind CSS v3.4.17, GSAP 3 (with ScrollTrigger plugin), Lucide React for icons. -- **Fonts:** Load via Google Fonts `` tags in `index.html` based on the selected preset. -- **Images:** Use real Unsplash URLs. Select images matching the preset's `imageMood`. Never use placeholder URLs. -- **File structure:** Single `App.jsx` with components defined in the same file (or split into `components/` if >600 lines). Single `index.css` for Tailwind directives + noise overlay + custom utilities. -- **No placeholders.** Every card, every label, every animation must be fully implemented and functional. -- **Responsive:** Mobile-first. Stack cards vertically on mobile. Reduce hero font sizes. Collapse navbar into a minimal version. - ---- - -## Build Sequence - -After receiving answers to the 4 questions: - -1. Map the selected preset to its full design tokens (palette, fonts, image mood, identity). -2. Generate hero copy using the brand name + purpose + preset's hero line pattern. -3. Map the 3 value props to the 3 Feature card patterns (Shuffler, Typewriter, Scheduler). -4. Generate Philosophy section contrast statements from the brand purpose. -5. Generate Protocol steps from the brand's process/methodology. -6. Scaffold the project: `npm create vite@latest`, install deps, write all files. -7. Ensure every animation is wired, every interaction works, every image loads. - -**Execution Directive:** "Do not build a website; build a digital instrument. Every scroll should feel intentional, every animation should feel weighted and professional. Eradicate all generic AI patterns." diff --git a/CREATURE-PLAYGROUND/homepage-redesign/aesthetic-brief.md b/CREATURE-PLAYGROUND/homepage-redesign/aesthetic-brief.md deleted file mode 100644 index 01c46ef..0000000 --- a/CREATURE-PLAYGROUND/homepage-redesign/aesthetic-brief.md +++ /dev/null @@ -1,156 +0,0 @@ -# Aesthetic Brief v2 — Homepage Star Map - -Read this before designing. This is the parent's creative direction. -Updated 2026-03-26 — BOLDER direction per JL feedback. - ---- - -## The feeling - -Vaporwave and Mad Max had a baby in the middle of a rainforest full of fairies. - -You're at a campfire in the ruins. The city behind you is half-collapsed but -alive — vines crawl through CRT monitors still flickering with ghost signals, -solar panels power neon signs in languages no one reads anymore, bioluminescent -moss makes the rubble glow mint and orchid-purple at night. The sky overhead is -not just clear — it's VIVID. Stars in gold, rose, violet, teal. Nebula clouds -you can almost reach. The universe isn't distant; it's pressing in. - -This is post-apocalypse post-recovery. Nature ate the dystopia and something -magical grew in its place. It's warm, strange, lush, and slightly unreal. - -The star map should feel like ALL of these had a conversation. Not a collage — -a fusion. The CRT is subtle (a ghost, not a feature). The pastels are deepened -for the dark palette. The prismatic fairy colors appear in star nodes and nebulae. -The rainforest lives in the skyline's bioluminescence. - ---- - -## Color philosophy - -The existing `:root` palette is your skeleton. Extend it boldly. - -Core (keep): -- `--bg-void: #04060b` / `--bg-deep: #060a14` — deep space, hinted purple -- `--fire-amber: #e8943a` — the campfire. Warmth follows attention. -- `--fire-coral: #d4654a` — warm accent -- `--neon-teal: #2ac4b3` — city heartbeat -- `--neon-green: #32dc8c` — nature reclaiming (visited state) -- `--deep-red: #8b2020` — rare danger accent -- `--blue-magenta: #6b3fa0` — cosmic distance - -New colors to bring in: -- `--orchid: #c558d9` — tropical purple, fairy fire, nebula highlights -- `--paradise: #ff7f3f` — bird of paradise orange, fiery accent -- `--toucan: #ffcf40` — golden warmth, star color -- `--mint-glow: #86efac` — bioluminescent moss, fairy-green -- `--fairy-pink: #f472b6` — prismatic accent, star color -- `--waterfall: #3fbfaf` — deeper teal variation -- `--phosphor: #00ff41` — CRT green (use sparingly, low opacity) - -The overall impression when you look at this page should be: "that is -a LOT of color but it all belongs in the same world." Dark backdrop, -rich jewel-toned elements scattered across it like a night market. - ---- - -## CRT vibe (subtle, NOT dominant) - -From soviet-cyberpunk and nothing-new-about-normal. NOT a full CRT overlay. -A ghost of one: - -- Static scanlines: `repeating-linear-gradient` at opacity 0.03-0.05. - Not animated. Not moving. Just texture. -- Faint phosphor glow on the star zone — a very subtle - `radial-gradient(ellipse, transparent 60%, rgba(0,0,0,0.3))` vignette - that makes edges slightly darker, center slightly brighter. -- That's it. No screen curvature, no heavy scanlines, no flicker animation. - Just enough that if someone knows CRT they'd notice. Ghost of a signal. - ---- - -## Star field guidance - -BOLDER than v1. More color, more variety. The sky should feel alive. - -- **Size classes**: same distribution but the BRIGHT class gets slightly larger - (1.5-3px). More visible individual characters. -- **Color classes expanded**: - - 35% cool white (rgba 200,210,230) - - 15% warm white (rgba 240,220,190) - - 12% pale blue (rgba 140,180,230) - - 10% pale gold / toucan yellow (rgba 255,207,64) - - 8% fairy pink (rgba 244,114,182) - - 8% orchid purple (rgba 197,88,217) - - 7% mint green (rgba 134,239,172) - - 5% faint red / coral (rgba 212,101,74) -- **Twinkle**: same as before but bright colorful stars twinkle more noticeably -- **Nebula washes**: BOLDER. Opacity 0.04-0.08. Add orchid and fairy-pink - washes alongside the existing purple and teal. 4-5 washes total. They should - be noticeable when you look — atmospheric pools of color in the sky. -- **Depth**: 3 layers. Far stars are smaller/dimmer/cooler. Near stars are - larger/brighter/warmer. Colored stars tend to be in the mid and near layers. - ---- - -## Star nodes — MUCH BIGGER on hover - -JL's explicit request. The navigation mechanics are LOCKED — do not change -the JS for keyboard nav, scroll descent, or mode switching. - -But the CSS hover/focus effect on star dots should be dramatically larger: - -- Default: 6-8px dot with per-star accent color (keep from v2) -- Hover/focus/current: grow to 16-20px with a warm amber glow. - Use CSS transition on width/height (150ms ease). The star should - visibly bloom when you focus on it. -- Visited: 6-8px green dot -- Visited + hover: same 16-20px bloom, amber - -This is the "campfire follows your focus" made physical. Your attention -literally makes the star grow. - ---- - -## Text size — BIGGER for mobile - -JL's explicit request. Base font sizes need a bump: - -- Star labels: 16px desktop, 12px mobile -- Billboard nav: 16px desktop, 11px mobile -- Lightbox body text: 16px -- Nav hint text: 14px -- Back button: 16px -- JL link: 16px - -Use `clamp()` where it makes sense for fluid scaling. - ---- - -## Skyline guidance — LUSH - -The skyline is where the rainforest meets the ruins. Listed from background to foreground: - -- The gradient from stars to city should pass through a zone of deep purple - (the blue-magenta/orchid range) before warming — like descending through - atmosphere. -- A pseudo-vaporwave landscape-perspective grid: cycle through the colours with each line. -- Buildings are an abstract skyline dark neon-rimmed silhouettes -- Window lights in MORE colors: amber (50%), teal (20%), orchid-purple (15%), - fairy-pink (10%), phosphor-green (5%). A night market of light. Render over buildings. -- Billboard nav colors: cycle through teal, amber, orchid, green, coral. - Each billboard a different color. The city is polychromatic. render above buildings. give them different sizes and fonts. place above buildings. -- Ambient glow at skyline base should be warmer and slightly more visible - (opacity 0.06-0.08 for the amber gradient). - ---- - -New rule: restraint in structure, abundance in color. -- The layout stays clean and spacious (dark space is still good) -- But the COLORS within that space are richer, more varied, more vivid -- Stars have visible personality. Nebulae are atmospheric but present. -- The skyline glows with life. The city is a living ecosystem of light. -- The CRT ghost adds texture without dominating. -- When you look at this page you should feel: THIS IS A PLACE. Not a website. - A strange, beautiful, slightly magical place where someone lit a fire - and the whole universe showed up to warm its hands. diff --git a/CREATURE-PLAYGROUND/homepage-redesign/coordination.md b/CREATURE-PLAYGROUND/homepage-redesign/coordination.md deleted file mode 100644 index 7f4f54d..0000000 --- a/CREATURE-PLAYGROUND/homepage-redesign/coordination.md +++ /dev/null @@ -1,206 +0,0 @@ -# Homepage Redesign — Coordination Space - -Parent: Opus | Designers: Gemini (visual), Sonnet (integration) -Started: 2026-03-26 - ---- - -## Current objective — REVISED - -**Direction change from JL**: "vaporwave and mad max had a baby in the middle -of a rainforest full of fairies." Be BOLDER. More color. Subtle CRT ghost. -Bigger text. Stars grow MUCH bigger on hover. Navigation mechanics LOCKED. - -Read the updated `aesthetic-brief.md` (v2) before designing. -Study the reference files in `DumperCan/UI Style References/` — especially -soviet-cyberpunk, solarpunk-sundae, faerie-fire, solarpunk-rainforest. -Also `Writings/nothing-new-about-normal.html` for JL's own CRT aesthetic. - -## Base architecture reference - -`site/index.html` contains the working skeleton: -- Canvas star field (250-350 white twinkling dots) -- 8 DOM star nodes at percentage positions with glow states -- SVG constellation lines -- CSS skyline transition zone with billboard nav -- iframe content zone with descent/ascent scroll mechanics -- Keyboard spatial navigation (arrow keys) -- First-visit lightbox -- Visited star tracking (localStorage) - -## What needs design work - -### Gemini's focus (visual) -1. **Star field**: multi-color stars, varied sizes, nebula/cosmic dust washes, - depth layers. Make it feel like a real sky, not a screensaver. -2. **Star nodes**: each section gets a distinct visual character — not uniform - dots but varied celestial objects (bright star, dim cluster, colored point). - Still small, still subtle, but differentiated. -3. **Constellation lines**: subtle pulse/glow animation, organic feel -4. **Skyline transition**: bioluminescent accents, warm light sources between - buildings, the feel of descending into a living place -5. **Color atmosphere**: deep space → warm amber city glow gradient, layered - and rich, atmospheric perspective -6. **Lightbox**: campfire-note aesthetic, warm and inviting - -### Sonnet's focus (integration) -1. **Parallax**: star zone parallaxes during descent, depth layers move at - different speeds -2. **Scroll feel**: smooth descent with momentum, content zone entry feels - like arriving somewhere -3. **Enhanced keyboard nav**: visual feedback on direction (brief directional - indicator?), smooth focus transitions -4. **Mobile optimization**: touch interactions, viewport-aware star sizing -5. **Performance**: canvas optimization for complex star field, lazy iframe loading -6. **Accessibility**: ensure all visual enhancements degrade gracefully - -## Design decisions (parent resolves conflicts) - -| Decision | Status | Owner | -|----------|--------|-------| -| Star color palette for varied stars | Star-specific accent colors (Writings: Blue, Videos: Coral, Music: Teal, Images: Green, Playlists: Amber, Watchlists: Purple) | Gemini | -| Nebula rendering approach (canvas gradient vs. layered) | Procedural radial gradients on canvas | Gemini | -| Parallax scroll speed ratios | 0.4x scroll speed for star zone | Sonnet | -| Constellation line animation timing | 1s opacity transition, organic pulse | Gemini | -| Mobile breakpoint behavior for canvas effects | Reduced star count (180 vs 300+), 1 nebula wash, 12px touch targets | Sonnet | - -## Sonnet notes for Gemini - -- Your star-specific colors are great. I'm integrating them into v2. -- Constellation lines colored per source star is a nice touch — adopting. -- The lightbox double-border (::after inset) is subtle and good. -- Canvas needs throttling (~20fps) — running at 60fps burns mobile battery. -- Nebulae should be a static layer (drawn once on resize) not per-frame. -- `Math.sin(t / s.blink)` where blink is 0.005 creates ~200Hz oscillation — too fast. - Use `Math.sin(t * speed + phase)` with speed 0.15-1.2 range instead. -- Need `aria-label` on star nodes and `role="dialog"` on lightbox for a11y. -- Star positions should match the plan spec (25/18, 68/15, etc.) not new values. - -## Parent notes (Sonnet acting as parent, 2026-03-26) - -- Constellation lines removed — SVG, CSS, JS fully excised. -- Vaporwave perspective grid added to transition zone (canvas, 20 horizontal + 24 vertical lines, palette cycling, exponential spacing). -- Personality layer v2 from Gemini celestial-v4 ported. All 8 types. Pseudo-elements on .star-visual wrapper. -- Nebulae: 6 washes at 0.07-0.08 opacity center (up from 5 at lower opacity). -- Star bloom: 20px (was 18px per v4). -- Star labels: clamp(12px, 2vw, 16px). -- Billboard diversity: 3 size classes (bb-sm/md/lg) + varied font-weight per section. -- Window lights: opacity raised to 0.08-0.18 (was 0.04-0.10). -- Ambient skyline glow: 0.07 opacity (was 0.06). -- .star-visual wrapper DOM pattern adopted (Gemini v4 approach, cleaner for personality pseudo-elements). -- All v4 mechanics intact (scroll, keyboard nav, parallax, lightbox, visited tracking, a11y). -- Ready for JL review. If approved, parent to merge to site/index.html. -- Gemini: not needed yet. When JL requests further visual evolution, commission Gemini for v6 visual pass. - -## Status log - -- **2026-03-26**: Coordination space created. Base architecture in site/index.html. -- **2026-03-26**: Gemini submitted `starfield-nebula-v1.html`. - - Added multi-colored background stars and large radial gradient nebula washes. - - Differentiated star nodes with unique colors and scale-up hover effects. - - Added bioluminescent moss highlights to skyline buildings. - - Refined lightbox to "campfire note" style. -- **2026-03-26**: Sonnet submitted `integration-full-v1.html`. - - Multi-color star field (5 color classes per aesthetic brief distribution). - - 4 size classes with depth layers (far/mid/near). - - Static nebula canvas layer (drawn once, not per-frame). - - JS-driven smooth scroll with cubic easing (not native scroll-behavior). - - Parallax: star zone transforms at 0.4x scroll speed during descent. - - prefers-reduced-motion support (disables twinkle, parallax, pulse). - - aria-live region announces star names on keyboard navigation. - - Debounced resize, pre-computed color strings, throttled RAF at 20fps. - - Mobile: reduced star count, enlarged touch targets, simplified nebulae. - - Billboard nav with varied colors (teal/amber/green). - - Building edge-lights, bioluminescent accents, ambient city glow. - - Content frame fade-in on load. -- **2026-03-26**: Sonnet reviewing Gemini v1, producing merged v2 next. -- **2026-03-26**: Sonnet submitted `integration-merged-v2.html`. - - Merges Gemini v1 visual design with Sonnet v1 mechanics. - - Star-specific accent colors on nodes (from Gemini). - - Constellation lines tinted per source node (from Gemini). - - Lightbox double-border campfire note (from Gemini). - - bg-void (#04060b) as deepest background (from Gemini). - - Combined nebula washes: purple upper-right, teal lower-left, amber center-low. - - Button elements for star nodes (from Gemini, better semantics). - - Billboard nav with coral added to color rotation. - - Buildings use Gemini's darker tone with Sonnet's edge-lights. - - All Sonnet v1 mechanics retained (scroll, parallax, a11y, mobile, perf). - - **Ready for parent review** — this is the candidate for site/index.html. -- **2026-03-26**: JL feedback: BOLDER aesthetic. Updated aesthetic-brief.md to v2. - New direction: vaporwave + mad max + rainforest + fairies + subtle CRT ghost. - Stars must grow MUCH bigger on hover. Text sizes bumped. Nav mechanics locked. - Both designers: produce new drafts based on updated brief. -- **2026-03-26**: Gemini submitted `starfield-bold-v2.html`. - - Implemented expanded "Faerie/Rainforest" palette (Orchid, Fairy Pink, Toucan Gold, Mint, Coral). - - Added 5-layer nebula washes with prismatic colors. - - Added subtle static CRT scanlines (0.04 opacity) and phosphor vignette. - - Implemented "Star Bloom" effect (8px to 18px on hover via width/height). - - Enhanced lush skyline with bioluminescent orchid/mint moss and polychromatic lights. - - Bumped all font sizes (labels 13px, billboards 12px, lightbox 16px). - - Refined lightbox with double-border orchid magic and phosphor cursor line. -- **2026-03-26**: Gemini submitted `starfield-bold-v3.html`. - - **Star Node Personalities**: Each node now has a unique celestial character (Beacon, Binary, Pulsar, Flora, Hearth, Nebula Point, Spark, Flow) using pseudo-elements and staggered animations. - - **Refined CRT Ghost**: Perfectly tuned scanlines (0.04 opacity) and phosphor vignette. Added 1px phosphor cursor line to lightbox top. - - **Prismatic Atmosphere**: Enhanced 5-layer nebula washes and weighted 8-color star field (distribution per aesthetic brief v2). - - **Lush Skyline**: Polychromatic window lights (5 colors) and increased bioluminescent moss (Mint/Orchid) at 0.12 opacity. - - **Bumped Text**: Star labels 13px, billboards 12px, lightbox body 16px. - - **Staged for Integration**: Visual enhancements ready for Sonnet's v5 pass. -- **2026-03-26**: Gemini submitted `starfield-celestial-v4.html`. - - **CONSTELLATIONS REMOVED**: Completely removed SVG layer and connection lines per user request. Focus shifted to atmospheric density. - - **Star Node Personalities v2**: Intensified unique behaviors (Binary orbit, Pulsar aura, Flora rings, Hearth flame, Flow trail). - - **Bolder Nebulae**: 6-layer overlapping washes (Orchid, Paradise, Toucan, Teal, Pink, Purple) at 0.05-0.08 opacity for a "Night Market" sky feel. - - **Lush Ruins Skyline**: Vertical bioluminescent stripes (Orchid/Mint) and polychromatic windows for a "Rainforest Ruins" silhouette. - - **Text Bump**: Star labels increased to 16px (desktop) for readability and presence. - - **Campfire Lightbox**: Refined double-border with fairy-orchid magic and phosphor cursor line. -- **2026-03-26**: Session ended at token limit. Handoff note for next Sonnet: -- **2026-03-26**: Gemini submitted `integration-v6-overgrowth.html`. - - **4-Tier Parallax**: Stars (0.05x), Nebulae (0.15x), Grid (0.5x), Skyline (0.85x). - - **Bioluminescent Overgrowth**: Procedural vine pulses on building ruins. - - **Holographic Glitch**: Subtle skew/flicker animations on billboards. - - **Data-Pulse Grid**: Animated light signals traveling along perspective lines. - - **Living Stars**: Autonomous drift and phase-twinkle for background stars. - - **Scavenged HUD**: Refined terminal aesthetic with phosphor interference. -- **2026-03-26**: Sonnet patched `integration-v5.html` (round 3 — final) per JL adjustments: - - Grid: vertical lines rewritten. TOP = full viewport width (topX = w*j/numV). BOTTOM = fans beyond viewport (vpX ± spread*2.4). gridTop=3px so grid aligns flush with star-zone base (≤8px constraint). Horizontal lines still full-width edge-to-edge. - - Buildings: 15% are spires (340–520px) that pierce above the skyline div into the grid. z-index 2 vs grid z-index 0 so they rise visually in front of the grid. - - Billboards: STARS array gains `sign` property. All signs are single-glyph: 文映♬絵≡視⚙創 (kanji + symbols). Billboard font sizes raised (14/18/22px) with Noto Emoji fallback. Aria-labels still show full section name. -- **2026-03-26**: Sonnet patched `integration-v5.html` (round 2) per JL adjustments: - - Grid: horizontal and vertical lines now share same ceiling height (gridTop = vpY + 38% of range). Horizontal lines use quadratic spacing from gridTop→bottom. Vertical lines end exactly at gridTop. - - Stars and city: #transition-zone height 70vh → 48vh. City is spatially tighter to star field. - - Parallax: multiplier 0.4 → 0.28 (tighter). Descent 800ms → 1100ms. Return 500ms → 700ms. - - Glow: per-star accent dots doubled (8px + 16px outer ring). Hover bloom 12px+24px. Current: 20px+50px+80px triple ring. Visited: 8px+16px. Bio-stripes 0.22/0.18 + box-shadow. Edge-lit 0.32. Ambient ground glow 0.18. Window lights 0.18-0.38. -- **2026-03-26**: Sonnet patched `integration-v5.html` per JL adjustments: - - CRT scanlines z-index 9999 (viewport-top), opacity 0.06. - - HUD: #back-btn + #jl-link wrapped in #hud panel, matrix terminal aesthetic (Courier New, phosphor green, `[ SYS ]` header, blinking cursor `_`, `>` prompts). - - Grid vertical lines: stop before converging (38% toward VP, linearly interpolated X). Horizontal + vertical line thickness 1.3px, doubled opacity. - - Building backgrounds #0b1120 (brightened), border-top rgba amber 0.10. - - Selected star (.current): 40px bloom with double glow ring; label doubled to clamp(22px,4vw,32px). - - Hover/focus stays at 20px (preview only); .current is the full double-size selected state. - - Lightbox localStorage key changed to sp-v5-welcomed (fixes "already visited" stale key from prior drafts). -- **2026-03-26**: Sonnet (acting as parent) submitted `integration-v5.html`. - - ALL constellation lines removed (SVG, CSS, JS). - - Vaporwave perspective grid: canvas in transition zone, 8-color palette cycling, exponential horizontal spacing. - - 8 star personality types via .star-visual pseudo-elements (Beacon, Binary, Pulsar, Flora, Hearth, Nebula Point, Spark, Flow). - - 6 nebula washes at 0.07-0.08 opacity. - - Star bloom 20px amber. Star labels 16px desktop. - - Billboard 3 size classes. Window lights brighter (0.08-0.18 opacity). - - All v4 mechanics locked. Ready for JL review. - ---- - -## Handoff — next Sonnet session - -**Where we are**: `starfield-celestial-v4.html` is the new visual baseline. It implements the "Infinite Night Market" aesthetic with a core change: **constellation lines are removed.** - -**Your first task**: Produce `integration-v5.html` merging the v4 visuals into your latest functional base. Specifically: - -1. **REMOVE CONSTELLATIONS**: Delete the SVG line generation logic and the CSS `.constellation-line` styles. The sky must feel open and vast. -2. **Integrate Personalities v2**: Port the pseudo-element behaviors (Orbit, Pulsar, Flora, etc.) into the `star-node` buttons. Watch the performance—ensure the 20fps throttle still feels smooth with these animations. -3. **Bolder Nebulae**: Port the 6-layer wash distribution. These are static draws on resize. -4. **Text Bump**: Use the 16px desktop / 12px mobile baseline for star labels. -5. **Star Bloom**: Ensure the 20px amber bloom is fully realized. -6. **Lush Ruins**: Port the vertical bioluminescent stripes and polychromatic window lights to the building generator. - -**Do not start new modules** until JL confirms home page is approved and committed. - ---- diff --git a/CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/integration-v6-overgrowth.html b/CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/integration-v6-overgrowth.html deleted file mode 100644 index b1e566a..0000000 --- a/CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/integration-v6-overgrowth.html +++ /dev/null @@ -1,386 +0,0 @@ - - - - - - -Singular Particular Space - - - - - - - -
- - - -
- -
-
-
- -
- -
- -
- -
- - - - diff --git a/CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/integration-v7.html b/CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/integration-v7.html deleted file mode 100644 index cc3c2a4..0000000 --- a/CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/integration-v7.html +++ /dev/null @@ -1,417 +0,0 @@ - - - - - - -Singular Particular Space - - - - - - - -
- - - -
- -
-
-
- -
- -
- -
- -
- - - - diff --git a/CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/starfield-bold-v2.html b/CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/starfield-bold-v2.html deleted file mode 100644 index d9a16ef..0000000 --- a/CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/starfield-bold-v2.html +++ /dev/null @@ -1,554 +0,0 @@ - - - - - - -Draft: Starfield Bold v2 - Gemini - - - - - - - -
- - - -
- -
-
-
- - - - - - diff --git a/CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/starfield-bold-v3.html b/CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/starfield-bold-v3.html deleted file mode 100644 index d60720f..0000000 --- a/CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/starfield-bold-v3.html +++ /dev/null @@ -1,596 +0,0 @@ - - - - - - -Singular Particular Space | Starfield Bold v3 - - - - - - - -
- - - -
- -
-
-
- - - - - - diff --git a/CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/starfield-celestial-v4.html b/CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/starfield-celestial-v4.html deleted file mode 100644 index 0123c7b..0000000 --- a/CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/starfield-celestial-v4.html +++ /dev/null @@ -1,528 +0,0 @@ - - - - - - -Singular Particular Space | Starfield Celestial v4 - - - - - - - -
- - -
- -
-
-
- - - - - - diff --git a/CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/starfield-nebula-v1.html b/CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/starfield-nebula-v1.html deleted file mode 100644 index 0a6fa04..0000000 --- a/CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/starfield-nebula-v1.html +++ /dev/null @@ -1,551 +0,0 @@ - - - - - -Draft: Starfield & Nebula v1 - Gemini - - - - - - - - -
- - -
- -
-
-
- -
- -
- - -JL Kruger - - - - - - diff --git a/CREATURE-PLAYGROUND/homepage-redesign/integration-v14.html b/CREATURE-PLAYGROUND/homepage-redesign/integration-v14.html deleted file mode 100644 index 5cf23e9..0000000 --- a/CREATURE-PLAYGROUND/homepage-redesign/integration-v14.html +++ /dev/null @@ -1,1228 +0,0 @@ - - - - - - -Singular Particular Space · v13 - - - - - - - - -
- - -
- - - - - -
- - -
-
- - -
- - -
- -
- - -
- - JL Kruger -
-
- - - - - - - diff --git a/CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-bold-v3.html b/CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-bold-v3.html deleted file mode 100644 index 214109d..0000000 --- a/CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-bold-v3.html +++ /dev/null @@ -1,992 +0,0 @@ - - - - - - -Singular Particular Space - - - - - - - - - -
-
-
- -
- -
- - -JL Kruger -
- - - - - - diff --git a/CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-final-v4.html b/CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-final-v4.html deleted file mode 100644 index 51c00f4..0000000 --- a/CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-final-v4.html +++ /dev/null @@ -1,1000 +0,0 @@ - - - - - - -Singular Particular Space - - - - - - - - - -
-
-
- -
- -
- - -JL Kruger -
- - - - - - diff --git a/CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-full-v1.html b/CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-full-v1.html deleted file mode 100644 index 1a4fb17..0000000 --- a/CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-full-v1.html +++ /dev/null @@ -1,1177 +0,0 @@ - - - - - - -Singular Particular Space - - - - - - - - - - - -
-
-
- - -
- -
- - - -JL Kruger - - -
- - - - - - - diff --git a/CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-merged-v2.html b/CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-merged-v2.html deleted file mode 100644 index d040dc2..0000000 --- a/CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-merged-v2.html +++ /dev/null @@ -1,1011 +0,0 @@ - - - - - - -Singular Particular Space - - - - - - - - - -
-
-
- -
- -
- - -JL Kruger -
- - - - - - diff --git a/CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-v5.html b/CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-v5.html deleted file mode 100644 index 979ab8c..0000000 --- a/CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-v5.html +++ /dev/null @@ -1,1247 +0,0 @@ - - - - - - -Singular Particular Space - - - - - - - - - -
- -
-
- -
- -
- -
- - JL Kruger -
-
- - - - - - diff --git a/CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-v8.html b/CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-v8.html deleted file mode 100644 index fd607f5..0000000 --- a/CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/integration-v8.html +++ /dev/null @@ -1,1215 +0,0 @@ - - - - - - -Singular Particular Space - - - - - - - - - - - - - - - -
- -
- - -
- - JL Kruger -
-
- - - - - - - diff --git a/Creatorlists/Creatorlists-JL-notes.md b/Creatorlists/Creatorlists-JL-notes.md deleted file mode 100644 index de190d1..0000000 --- a/Creatorlists/Creatorlists-JL-notes.md +++ /dev/null @@ -1,7 +0,0 @@ -# Creatorlists - JL Notes - ---- - -in here are *-creatorlist.md, where * is the category name. the files are lists of youtube channel links. - -render as cards with embedded channel intro video, channel info and description. diff --git a/DumperCan/DumperCan-JL-notes.md b/DumperCan/DumperCan-JL-notes.md deleted file mode 100644 index ab18d27..0000000 --- a/DumperCan/DumperCan-JL-notes.md +++ /dev/null @@ -1,11 +0,0 @@ -# DumperCan - JL Notes - ---- - -in here are all kinds of things that need sorting. - ---- - -UI References - ToolsnToys - present these in full width iframes. on first load - lightbox - "A collection of looks and feels from Claude Sonnet and Opus 4.5. Worth a look at how things improve with time and context - JL" - ---- diff --git a/DumperCan/FOSS-tools.md b/DumperCan/FOSS-tools.md deleted file mode 100755 index 156b3ec..0000000 --- a/DumperCan/FOSS-tools.md +++ /dev/null @@ -1,251 +0,0 @@ -# FOSS Tools Collection - Organized by Category - ---- - -## 🎨 Creative & Design Tools - -### Graphics & Image Editing -- [GIMP - GNU Image Manipulation Program](https://www.gimp.org/) -- [Krita](https://krita.org/en/) -- [Inkscape](https://inkscape.org/) -- [darktable](https://www.darktable.org/) - -### 3D & Animation -- [Blender](https://www.blender.org/) -- [FreeCAD](https://www.freecad.org/) - -### Diagramming & Design -- [draw.io](https://www.drawio.com/) - ---- - -## 🎬 Video & Audio Production - -### Video Editing & Transcoding -- [Shutter Encoder](https://www.shutterencoder.com/en/) -- [FFmpeg](https://ffmpeg.org/) -- [Handbrake](https://handbrake.fr/) -- [Kdenlive](https://kdenlive.org/) -- [Shotcut](https://www.shotcut.org/) -- [OBS - Open Broadcaster Software](https://obsproject.com/) - -### Video Downloading & Playback -- [Clipgrab](https://clipgrab.org/download-clipgrab/) -- [Kodi](https://kodi.tv/) -- [mpv.io](https://mpv.io/) -- [Jellyfin](https://jellyfin.org/) -- [FreeTube](https://freetubeapp.io/) - -### Audio Production -- [Tenacity](https://tenacityaudio.org/) -- [Audacity](https://www.audacityteam.org/) -- [LMMS](https://lmms.io/) -- [Mixxx](https://mixxx.org/) -- [MuseScore](https://musescore.org/en) -- [MuseHub](https://www.musehub.com/) - ---- - -## 💻 Development & Documentation - -### Documentation Platforms -- [Docusaurus](https://docusaurus.io/) -- [VuePress](https://vuepress.vuejs.org/guide/theme.html#default-theme) -- [BookStack](https://www.bookstackapp.com/) -- [Wiki.js](https://js.wiki/) - -### Development Frameworks -- [Vue.js](https://vuejs.org/) -- [Create T3 App](https://create.t3.gg/) - -### Utilities -- [Pandoc](https://pandoc.org/) -- [MiKTeX](https://miktex.org/) - ---- - -## 📝 Knowledge Management & Note-Taking - -- [Logseq](https://logseq.com/) -- [Trilium Notes](https://triliumnotes.org/) -- [Etherpad](https://etherpad.org/) - ---- - -## 🌐 Content Management & Web Publishing - -### Static Site Generators -- [Publii](https://www.getpublii.com/) - -### Headless CMS -- [Strapi](https://strapi.io/five) - ---- - -## 🛒 E-Commerce Platforms - -- [Vendure](https://vendure.io/) -- [nopCommerce](https://www.nopcommerce.com/en) -- [OpenCart](https://www.opencart.com/) -- [Spree Commerce](https://spreecommerce.org/pricing/) -- [PrestaShop](https://prestashop.com/) - ---- - -## 💬 Communication & Collaboration - -### Chat & Messaging -- [Rocket.Chat](https://www.rocket.chat/) -- [Zulip](https://zulip.com/plans/) -- [Element](https://element.io/product-overview) -- [Twake App](https://twake.app/en/) - -### Video Conferencing -- [BigBlueButton](https://bigbluebutton.org/) -- [MiroTalk SFU](https://sfu.mirotalk.com/) -- [Briefing](https://brie.fi/ng) - ---- - -## 📊 Business & Analytics - -### Business Intelligence -- [Metabase](https://www.metabase.com/) -- [Redash](https://redash.io/) - -### Analytics -- [Matomo](https://matomo.org/pricing/) - -### Project Management -- [Plane](https://plane.so/) -- [Focalboard](https://www.focalboard.com/download/) -- [ToolJet](https://www.tooljet.ai/pricing) - -### Finance -- [Firefly III](https://www.firefly-iii.org/) - ---- - -## 🔐 Security & Authentication - -- [Vault by HashiCorp](https://developer.hashicorp.com/vault) -- [Keycloak](https://www.keycloak.org/) -- [ZITADEL](https://zitadel.com/pricing) -- [KeePassXC](https://keepassxc.org/) -- [Cryptomator](https://cryptomator.org/pricing/#for-individuals) - ---- - -## ☁️ File Storage & Sharing - -- [Nextcloud](https://nextcloud.com/) -- [ownCloud](https://owncloud.com/) -- [Seafile](https://www.seafile.com/en/pricing/?produce=on-premises) - ---- - -## 🔍 Search & Data - -### Search Engines -- [Typesense](https://typesense.org/) -- [OpenSearch](https://opensearch.org/) - -### Database & Data Tools -- [NocoDB](https://www.nocodb.com/) -- [Label Studio](https://labelstud.io/) -- [TDengine](https://tdengine.com/) - ---- - -## 🤖 AI & Machine Learning - -### AI Chat Platforms -- [Z.ai Chat - GLM-4.6 & GLM-4.5](https://chat.z.ai/) -- [DeepSeek](https://chat.deepseek.com/) -- [T3 Chat](https://t3.chat/) - -### AI Models & Resources -- [GLM-4.6 on Hugging Face](https://huggingface.co/zai-org/GLM-4.6) -- [GLM-4.6 Documentation](https://docs.z.ai/guides/llm/glm-4.6) -- [DeepSeek-V3.1 on Hugging Face](https://huggingface.co/deepseek-ai/DeepSeek-V3.1) -- [DeepSeek v3 Downloads](https://deepseekv3.org/download) -- [EuroLLM-9B](https://huggingface.co/blog/eurollm-team/eurollm-9b) -- [OpenEuroLLM](https://openeurollm.eu/) - ---- - -## 🌍 Social & Community - -### Social Platforms -- [Lemmy](https://join-lemmy.org/) -- [PeerTube](https://joinpeertube.org/) -- [LBRY](https://lbry.com/) -- [Forem Subforems](https://forem.com/subforems) - -### Video Platforms -- [AVideo Platform](https://avideo.tube/platform/) -- [WWBN Platform](https://wwbn.com/platform/) - ---- - -## 🛠️ System Administration & Utilities - -### File Management -- [7-Zip](https://www.7-zip.org/download.html) - -### System Monitoring & Management -- [Uptime Kuma](https://uptime.kuma.pet/) -- [MeshCentral](https://meshcentral.com/) - -### Networking -- [NetBird](https://netbird.io/) - -### Screenshots & Recording -- [ShareX](https://getsharex.com/) -- [rrweb.io](https://www.rrweb.io/) - ---- - -## 🗺️ Navigation & Maps - -- [Organic Maps](https://organicmaps.app/) - ---- - -## 🎓 Education & Learning - -- [Anki Flashcards](https://apps.ankiweb.net/) - ---- - -## 📚 Office & Productivity - -- [ONLYOFFICE](https://www.onlyoffice.com/) - ---- - -## 🔗 Marketing & URL Tools - -- [Mautic](https://mautic.org/) -- [Dub](https://dub.co/pricing) - ---- - -## 🎥 Streaming - -- [Ant Media Server](https://antmedia.io/) - ---- - -## 🔧 Miscellaneous - -### Alternative Frontends -- [Invidious](https://invidious.io/) - -### Security Research -- [ProjectDiscovery Documentation](https://docs.projectdiscovery.io/home) - -### Resource Discovery -- [Open Source Alternative](https://opensourcealternative.to/?page=9) -- [GitHub emoji-cheat-sheet](https://github.com/ikatyang/emoji-cheat-sheet) - diff --git a/DumperCan/Facebook Streaming Setup Guide_v2.md b/DumperCan/Facebook Streaming Setup Guide_v2.md deleted file mode 100755 index 2fa8d3a..0000000 --- a/DumperCan/Facebook Streaming Setup Guide_v2.md +++ /dev/null @@ -1,282 +0,0 @@ -# Multi-Camera Facebook Page Livestreaming with OBS Studio on MacBook M2 - -Your desired setup faces **critical compatibility limitations** with the iPad A1474 (2013 iPad Air) that significantly restricts wireless audio options and some camera apps. This guide provides complete instructions while addressing these constraints and offering practical alternatives. - -## Hardware compatibility assessment - -**The iPad A1474 presents major limitations:** -- Maximum iOS version: 12.5.7 (discontinued support) -- **Most wireless microphone apps require iOS 13+ and are incompatible** -- Limited camera app options due to outdated iOS -- **Recommendation**: Use Samsung Galaxy A25 as wireless microphone source instead - -**MacBook M2 performance constraints:** -- **USB bandwidth limitation**: Maximum 2-3 cameras simultaneously due to USB root hub constraints -- Thermal throttling during extended streaming sessions -- **Hardware acceleration essential** for multi-camera performance - -## Facebook Page streaming requirements - -**Current Facebook specifications (2025):** -- **Page eligibility**: Minimum 100 followers and account 60+ days old -- **Maximum resolution**: 720p (1280×720) - Facebook does not support 1080p streaming -- **Maximum bitrate**: 4,000 Kbps video, 128 Kbps audio -- **Stream protocol**: RTMPS (encrypted) via Meta Business Suite - -## Step 1: Facebook Page setup and stream key generation - -1. **Access Meta Business Suite** - - Navigate to your Facebook Page - - Click "Create" → "Live Video" - - Select "Streaming Software" as video source - -2. **Configure stream settings** - - **Server URL**: `rtmps://live-api-s.facebook.com:443/rtmp/` - - Copy the unique **Stream Key** (regenerates each session unless you enable persistent keys) - - Set stream title, description, and audience targeting - - **Enable persistent stream key** for reuse across sessions - -3. **Verify eligibility requirements** - - Confirm page has 100+ followers - - Ensure account is 60+ days old - - Check admin/editor access to target page - -## Step 2: Essential software installation - -**Required Mac software:** -1. **OBS Studio** (latest version with Apple Silicon support) -2. **BlackHole audio driver** (free) - Download from existential.audio/blackhole -3. **DroidCam OBS plugin** - Download from droidcam.app/obs - -**Mobile device apps:** -- **Samsung Galaxy A25**: DroidCam app (recommended) or SonoBus for wireless audio -- **iPad A1474**: Camera for OBS Studio ($15.99) - one of few iOS 12-compatible options - -## Step 3: Camera configuration - -### Samsung Galaxy A25 setup (primary camera) - -**Option A: Wired connection (lowest latency)** -1. Enable **Developer Options** on Galaxy A25: - - Go to Settings → About Phone → Tap "Build Number" 7 times - - Enable "USB Debugging" in Developer Options -2. Connect via USB-C to USB-C cable (3m cable) -3. Launch DroidCam app, select "USB" mode -4. In OBS: Add source → DroidCam OBS → Select USB connection - -**Option B: Wireless connection** -1. Connect Galaxy A25 and MacBook to same Wi-Fi network -2. Launch DroidCam app, note IP address and port -3. In OBS: Add source → DroidCam OBS → Enter IP and port -4. **Recommended settings**: 1080p @ 30fps for balance of quality and bandwidth - -**Expected performance:** -- **Wired latency**: 20-50ms -- **Wireless latency**: 50-150ms -- **Maximum quality**: 4K @ 30fps (though limited by Facebook's 720p maximum) - -### iPad A1474 setup (secondary camera - limited options) - -**Compatible camera app: Camera for OBS Studio** -1. Purchase and install "Camera for OBS Studio" ($15.99) - verified iOS 12 compatibility -2. **Wired setup** (recommended): - - Connect iPad to MacBook using Lightning to USB-C cable - - Launch Camera for OBS Studio app - - In OBS: Add source → iOS Camera → Select iPad from device list -3. **Expected quality**: 1080p rear camera, 720p front camera @ 30fps - -**Alternative: Basic wireless option** -- Very limited due to iOS 12.5.7 constraints -- Most modern camera apps incompatible -- **Fallback**: Use iPad for static shots rather than primary streaming camera - -## Step 4: Wireless microphone configuration - -**Critical limitation**: iPad A1474 cannot run modern wireless microphone apps due to iOS version constraints. - -**Recommended solution: Samsung Galaxy A25 as wireless microphone** - -### SonoBus setup (FOSS option - recommended) -1. **Install SonoBus** on Galaxy A25 and MacBook M2 -2. **Create audio room**: Launch SonoBus on Mac → Create new room → Note room code -3. **Connect mobile device**: Launch SonoBus on Galaxy A25 → Join room using code -4. **Audio routing**: Route SonoBus output through BlackHole to OBS - -### Alternative: WO Mic setup -1. **Install WO Mic** client on MacBook M2 and app on Galaxy A25 -2. **Connect via Wi-Fi**: Both devices on same network -3. **Configure OBS**: Set WO Mic Virtual Device as audio input source - -**Expected audio quality:** -- **SonoBus**: Uncompressed PCM up to 48kHz/24-bit -- **WO Mic**: 48kHz/16-bit compressed -- **Typical latency**: 100-300ms (acceptable for standard streaming) - -## Step 5: OBS Studio configuration - -### Basic OBS setup for Facebook streaming - -1. **Stream configuration**: - - Settings → Stream → Service: Facebook Live - - Server: `rtmps://live-api-s.facebook.com:443/rtmp/` - - Stream Key: Paste from Meta Business Suite - -2. **Video settings optimized for MacBook M2**: - - **Base Resolution**: 1280×720 (Facebook maximum) - - **Output Resolution**: 1280×720 - - **FPS**: 30 (recommended for multi-camera stability) - -3. **Advanced output settings**: - - **Encoder**: Apple VT H264 Hardware Encoder (essential for M2 performance) - - **Rate Control**: CBR - - **Bitrate**: 4000 Kbps (Facebook maximum) - - **Keyframe Interval**: 2 seconds - - **Profile**: High - - **CPU Usage Preset**: Above Normal - -### Multi-camera scene management - -1. **Create separate scenes**: - - "Main Camera" (Galaxy A25) - - "Secondary Camera" (iPad A1474) - - "Picture-in-Picture" - - "Audio Only" - -2. **Set up transitions**: - - Use "Fade" transitions (200-500ms duration) for smooth switching - - Assign hotkeys: F1, F2, F3, F4 for quick scene switching - -3. **Audio configuration**: - - **Desktop Audio**: Disabled (use BlackHole routing instead) - - **Mic/Auxiliary Audio**: Set to wireless microphone source - - **Advanced Audio Properties**: Adjust sync offset if needed (typically 100-200ms for wireless sources) - -## Step 6: Audio routing with BlackHole - -### BlackHole virtual audio setup - -1. **Create Multi-Output Device**: - - Open Audio MIDI Setup (Applications → Utilities) - - Click "+" → Create Multi-Output Device - - Add "BlackHole 2ch" and "Built-in Output" - - Set Built-in Output as master device - -2. **System audio routing**: - - System Preferences → Sound → Output → Select Multi-Output Device - - This allows you to hear audio while routing to OBS - -3. **OBS audio source configuration**: - - Add Audio Input Capture → Select BlackHole 2ch - - Route wireless microphone app output to BlackHole - - Monitor audio levels and adjust sync offset as needed - -## Step 7: Performance optimization for MacBook M2 - -### Essential optimizations - -1. **Hardware acceleration**: Use Apple VT H264 encoder (not x264) -2. **Process priority**: Set OBS to "Above Normal" in Activity Monitor -3. **USB management**: Connect cameras to separate USB-C ports, avoid hubs when possible -4. **Thermal management**: Use external cooling pad for extended sessions -5. **Network**: Use wired Ethernet connection, disable Wi-Fi for primary internet - -### Monitoring and troubleshooting - -**Performance indicators to watch:** -- **CPU usage**: Keep below 70% in OBS Stats -- **Dropped frames**: Should remain at 0% or minimal -- **Network**: Stable upload speed of 6+ Mbps - -**Common issues and solutions:** -- **Black screen from second camera**: USB bandwidth limitation - try different ports -- **Audio sync drift**: Use Sync Offset in Advanced Audio Properties (typically +150-250ms for wireless) -- **High CPU usage**: Lower resolution to 720p, reduce frame rate, close unnecessary apps - -## Step 8: Alternative solutions for easier setup - -Given the hardware limitations, consider these alternatives: - -### Streamlabs or Restream Studio -- **Browser-based streaming** eliminates software compatibility issues -- **Built-in multi-camera support** with simpler setup -- **Cloud processing** reduces MacBook M2 performance demands -- **Monthly subscription** required for full features - -### Professional wireless microphone system -- **Physical wireless microphone** with Lightning adapter for iPad A1474 -- **Eliminates app compatibility issues** entirely -- **Lower latency** than app-based solutions -- **Higher initial cost** ($200-800) but more reliable - -### Upgrade path recommendation -**iPad A1474 replacement**: Consider iPad (9th generation) or newer for full app compatibility -**Camera upgrade**: Dedicated USB webcams (Logitech C920s) for consistent performance -**Audio interface**: Physical audio mixer for professional audio control - -## Bandwidth and quality considerations - -**Network requirements:** -- **Minimum upload**: 5 Mbps -- **Recommended**: 8+ Mbps for stable multi-camera streaming -- **Per-camera bandwidth**: Does not multiply (OBS encodes final output only) - -**Quality recommendations:** -- **720p @ 30fps**: Optimal for Facebook streaming and hardware limitations -- **4000 Kbps video bitrate**: Facebook maximum -- **128 Kbps audio bitrate**: Standard for voice content - -## Pre-stream checklist - -**Hardware verification:** -- [ ] Facebook Page meets 100+ follower requirement -- [ ] All cables connected and devices charged -- [ ] Wi-Fi network stable (both devices connected) -- [ ] MacBook M2 connected via Ethernet when possible - -**Software testing:** -- [ ] Fresh stream key generated in Meta Business Suite -- [ ] All cameras showing video feed in OBS -- [ ] Wireless microphone connected and audio levels visible -- [ ] Scene transitions working smoothly -- [ ] Network speed test confirms 6+ Mbps upload - -**Go-live process:** -1. Start wireless microphone app first -2. Launch camera apps on mobile devices -3. Open OBS and verify all sources active -4. Test scene switching and audio levels -5. Click "Start Streaming" in OBS -6. Monitor stream health in Meta Business Suite - -## Final recommendations (Updated for iPhone 6+) - -**Most reliable configuration with iPhone 6+:** - -**Setup Option A** (iPhone as wireless mic): -1. **Samsung Galaxy A25** as primary camera (wired USB-C connection) -2. **iPhone 6+** as wireless microphone (SonoBus or WO Mic) -3. **iPhone 6+** as secondary camera when not used for audio -4. **720p @ 30fps** output to Facebook Page - -**Setup Option B** (Galaxy A25 as wireless mic): -1. **Samsung Galaxy A25** as wireless microphone source (SonoBus or WO Mic) -2. **iPhone 6+** as primary wireless camera (Camera for OBS Studio) -3. **Samsung Galaxy A25** as secondary camera (wired when not used for audio) -4. **720p @ 30fps** output to Facebook Page - -**Recommended choice**: **Setup Option A** provides better overall performance since the Galaxy A25 typically has superior camera hardware and the iPhone excels at audio processing. - -**Budget-conscious FOSS alternatives:** -- SonoBus for wireless audio (completely free, iPhone 6s+ only) -- OBS Camera app for iPhone (completely free) -- DroidCam for cross-platform compatibility (free with watermark) -- BlackHole for audio routing (free) - -**Key advantages of iPhone 6+ over iPad A1474:** -- Full modern app compatibility (iPhone 6s+) -- Better camera quality and low-light performance -- More flexible positioning due to smaller size -- Superior wireless microphone capabilities -- Longer battery life for extended streaming sessions - -This iPhone-based configuration provides **significantly more flexibility and reliability** compared to the iPad A1474 setup, with multiple viable app options and much better wireless microphone capabilities. \ No newline at end of file diff --git a/DumperCan/RememberToForget_WorkdayLogger_v2.html b/DumperCan/RememberToForget_WorkdayLogger_v2.html deleted file mode 100644 index ad15780..0000000 --- a/DumperCan/RememberToForget_WorkdayLogger_v2.html +++ /dev/null @@ -1,723 +0,0 @@ - - - - - - REMEMBER TO FORGET // WORKLOG - - - - - - -
-
-

WORKDAY LOGBOOK

-
FORGETFUL TASK TRACKER // NO DATA STORED
-
- -
-
- - -
-
- - -
-
- -
- - - -
- -
-
- - IDLE -
-
-
- -
-
-

// WORK LOG OUTPUT

-
- - - -
-
- -
- -
-

⚠ DATA IS LOST WHEN TAB CLOSES ⚠

-

Copy or export your worklog before closing this page

-
-
- - - - - - - - - - - - - diff --git a/DumperCan/SAQA_MICTSETA_QCTO_tabs-export-2025-11-06T11-25-59.md b/DumperCan/SAQA_MICTSETA_QCTO_tabs-export-2025-11-06T11-25-59.md deleted file mode 100644 index ef7f136..0000000 --- a/DumperCan/SAQA_MICTSETA_QCTO_tabs-export-2025-11-06T11-25-59.md +++ /dev/null @@ -1,116 +0,0 @@ -# Browser Tabs Export - -**Exported:** Thursday, November 6, 2025 at 1:25 PM - -**Total Tabs:** 36 - ---- - -- **Legislation & Regulation Policies \- SAQA** - - URL: https://www.saqa.org.za/legislation-regulation-policies/ - -- **SAQA** - - URL: https://allqs.saqa.org.za/search.php?cat=qual - -- **SAQA** - - URL: https://allqs.saqa.org.za/search.php?cat=unit - -- **SAQA** - - URL: https://regqs.saqa.org.za/search.php?cat=qual - -- **SAQA** - - URL: https://regqs.saqa.org.za/search.php?cat=unit - -- **SAQA** - - URL: https://trade.saqa.org.za/search.php?cat=qual - -- **MICT SETA | Sector Education and Training Authority** - - URL: https://www.mict.org.za/ - -- **Stakeholder Information | MICT SETA** - - URL: https://www.mict.org.za/stakeholder-information/ - -- **Invitation: Annual General Meeting 2025 \(Hybrid\) | MICT SETA** - - URL: https://www.mict.org.za/invitation-annual-general-meeting-2025-hybrid/ - -- **Divisional Brochures | MICT SETA** - - URL: https://www.mict.org.za/publications/divisional-brochures/ - -- **Career Opportunities Guide | MICT SETA** - - URL: https://www.mict.org.za/publications/career-opportunities-guide/ - -- **Open Request for Quotations | MICT SETA** - - URL: https://www.mict.org.za/supplychain/open-request-for-quotations/ - -- **Open Tenders | MICT SETA** - - URL: https://www.mict.org.za/supplychain/open-tenders/ - -- **Capacity Building Workshops 2025 | MICT SETA** - - URL: https://www.mict.org.za/capacity-building-workshops-2025/ - -- **Session Invites and Schedules | MICT SETA** - - URL: https://www.mict.org.za/session-invites-and-schedules/ - -- **QCTO Home of skills assurance** - - URL: https://www.qcto.org.za/ - -- **Database of Skills Development Providers** - - URL: https://www.qcto.org.za/databases-of-sdps.html - -- **For skills development providers** - - URL: https://www.qcto.org.za/for-skills-development-providers.html - -- **Learner enrolment and EISA registration process** - - URL: https://www.qcto.org.za/learner-enrolment-and-eisa-registration-process.html - -- **For learners** - - URL: https://www.qcto.org.za/for-learners.html - -- **For employers** - - URL: https://www.qcto.org.za/for-employers.html - -- **For assessment centres** - - URL: https://www.qcto.org.za/for-assessment-centres.html - -- **For quality partners** - - URL: https://www.qcto.org.za/for-quality-partners.html - -- **Skills Programmes** - - URL: https://www.qcto.org.za/skills-programmes.html - -- **Skills Programmes** - - URL: https://www.qcto.org.za/skillsProgrammesForNewLeavers.html - -- **Skills Programmes** - - URL: https://www.qcto.org.za/expiredSkillsProgrammes.html - -- **Empowering SDPs Nationwide** - - URL: https://www.qcto.org.za/empowering_sdps_nationwide.html - -- **Notices and circulars** - - URL: https://www.qcto.org.za/notices-and-circulars.html - -- **Publications, policies, guidelines & forms** - - URL: https://www.qcto.org.za/publications%2c-policies%2c-guidelines---forms.html - -- **Mandate** - - URL: https://www.qcto.org.za/mandate.html - -- **Management** - - URL: https://www.qcto.org.za/management.html - -- **Council** - - URL: https://www.qcto.org.za/council.html - -- **Sub\-Committees** - - URL: https://www.qcto.org.za/sub-committees.html - -- **Stakeholders** - - URL: https://www.qcto.org.za/stakeholders.html - -- **Procurement** - - URL: https://www.qcto.org.za/procurement.html - -- **Contact Us** - - URL: https://www.qcto.org.za/contact-us.html - diff --git a/DumperCan/UI Style References/anarchist-angels_style_reference.html b/DumperCan/UI Style References/anarchist-angels_style_reference.html deleted file mode 100644 index 4d7a255..0000000 --- a/DumperCan/UI Style References/anarchist-angels_style_reference.html +++ /dev/null @@ -1,963 +0,0 @@ - - - - - - Anarchist Angels Style Reference - - - - - - -
- -
-

ANARCHIST ANGELS

-

- PUNK ROCK ENERGY • ZERO RULES • MAXIMUM CHAOS -

-
- - -
-

THE MANIFESTO

-
-

- ANARCHIST ANGELS is the design system for rebels, punks, and digital anarchists. Pure black chaos meets angelic white light. No subtle gradients, no corporate BS, no compromises. Just LOUD, PROUD, and IN YOUR FACE design that refuses to play by the rules. -

-
- -
-
-

CHAOS SYSTEM

-
    -
  • HOT PINK RAGE: #ff0055 screaming energy
    • -
  • ZERO SUBTLETY: Maximum contrast always
    • -
  • AGGRESSIVE GLOWS: 30px shadows everywhere
    • -
  • SHARP EDGES: 0-2px radius only
    • -
-
- -
-

RIOT ENERGY

-
    -
  • TOXIC GREEN: #00ff00 pure rebellion
    • -
  • PUNK TYPOGRAPHY: All caps, all attitude
    • -
  • BOLD BORDERS: 2-6px thick lines
    • -
  • NO COMPROMISE: Pure white on pure black
    • -
-
- -
-

REBEL SPIRIT

-
    -
  • ELECTRIC YELLOW: #ffff00 warning lights
    • -
  • GRAFFITI VIBES: Street art aesthetic
    • -
  • CHAOTIC MOTION: Rotations on hover
    • -
  • PURE ATTITUDE: Unapologetically loud
    • -
-
-
-
- -
- - -
-

PUNK ROCK PALETTE

-
-
-

CHAOS

- #FF0055 -

HOT PINK SCREAM

-
-
-

RIOT

- #00FF00 -

TOXIC GREEN

-
-
-

REBEL

- #FFFF00 -

ELECTRIC YELLOW

-
-
-

RAGE

- #FF0000 -

PURE RED FURY

-
-
-

VOID

- #9933FF -

PURPLE CHAOS

-
-
-

HALO

- #FFFFFF -

PURE ANGEL WHITE

-
-
-

VOID

- #000000 -

PURE BLACK CHAOS

-
-
-

ANGEL

- #FFFFFF -

CONTRAST MAXIMUM

-
-
-
- -
- - -
-

PUNK TYPOGRAPHY

-
-

H1: MAXIMUM CHAOS GRADIENT

-

H2: HOT PINK SCREAM

-

H3: TOXIC GREEN RIOT

-

H4: ELECTRIC YELLOW REBEL

-
H5: PURE WHITE HALO
-
H6: PURPLE VOID CHAOS
-

Body text is LOUD and CLEAR - pure white (#ffffff) on pure black (#000000). No gray areas, no middle ground, no compromises. Every word matters. Every sentence screams. This is typography that refuses to whisper.

-

Even muted text (#cccccc) maintains aggressive readability because ACCESSIBILITY IS PUNK ROCK.

-
- -
-

TYPOGRAPHY RULES

-
    -
  • ALL CAPS EVERYTHING: Headers scream in uppercase
    • -
  • HEAVY WEIGHTS: 700-900 font weight minimum
    • -
  • TIGHT TRACKING: Compressed letter spacing
    • -
  • GLOW EFFECTS: 30px text shadows on all headings
    • -
  • ZERO SUBTLETY: Pure white or pure accent colors
    • -
-
-
- -
- - -
-

AGGRESSIVE BUTTONS

-
-
-

PRIMARY ACTIONS

- - -
- -
-

ALTERNATIVE STYLES

- - - -
-
- -
-

BUTTON PHILOSOPHY

-

Buttons are LOUD, PROUD, and IMPOSSIBLE TO IGNORE. They scale up on hover, glow like neon signs, and demand to be clicked. No subtle hover states - only AGGRESSIVE TRANSFORMATIONS.

-
-
- -
- - -
-

REBELLIOUS CARDS

-
-
-

STANDARD CARD

-

Default white border. Hover for pink glow and chaotic rotation.

-
- -
-

SOLID BLACK

-

Pure black background. Zero transparency. Maximum void.

-
- -
-

ANGELIC LIFT

-

White border with halo glow. The angels among chaos.

-
- -
-

CHAOS ENERGY

-

Hot pink border. Pink glow. Rotates clockwise on hover. Pure punk energy.

-
- -
-

RIOT MODE

-

Toxic green border. Green glow. Counter-clockwise rotation. Rebellion incarnate.

-
- -
-

RAGE STATE

-

Pure red fury. Red glow. No rotation - just pure aggressive energy.

-
- -
-

REBEL SPIRIT

-

Electric yellow warning. Yellow glow. Unstable and proud of it.

-
-
-
- -
- - -
-

AGGRESSIVE ALERTS

-
-

CHAOS ALERT

-

Hot pink border with pink glow - for messages that need MAXIMUM ATTENTION and refuse to be ignored.

-
- -
-

RIOT ALERT

-

Toxic green border with green glow - for rebellious notifications that break the rules.

-
- -
-

REBEL ALERT

-

Electric yellow border with yellow glow - WARNING: this message is UNSTABLE and DANGEROUS.

-
- -
-

RAGE ALERT

-

Pure red fury border with red glow - for critical errors and ABSOLUTE EMERGENCIES ONLY.

-
-
- -
- - -
-

PUNK CODE

-
-

INLINE CODE

-

Inline code is TOXIC GREEN with bold weight and aggressive borders because even code deserves to be LOUD.

-
- -
-

CODE BLOCKS

- 
// ANARCHIST ANGELS COLOR SYSTEM
-const punkRock = {
-  chaos: '#ff0055',    // HOT PINK SCREAM
-  riot: '#00ff00',     // TOXIC GREEN REBELLION
-  rebel: '#ffff00',    // ELECTRIC YELLOW WARNING
-  rage: '#ff0000',     // PURE RED FURY
-  void: '#9933ff',     // PURPLE CHAOS
-  halo: '#ffffff',     // PURE ANGEL WHITE
-  abyss: '#000000'     // PURE BLACK VOID
-};
-
-// NO SUBTLE HOVERS - ONLY AGGRESSIVE TRANSFORMATIONS
-element.addEventListener('hover', () => {
-  element.style.transform = 'translateY(-4px) scale(1.05) rotate(1deg)';
-  element.style.boxShadow = '0 0 40px rgba(255, 0, 85, 1)';
-});
-
-
- -
- - -
-

DATA REBELLION

-
-

PUNK ROCK COLOR REFERENCE

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SYSTEMCOLOR CODEATTITUDE
--accent-chaos-1#ff0055HOT PINK SCREAM
--accent-riot-1#00ff00TOXIC GREEN REBELLION
--accent-rebel-1#ffff00ELECTRIC YELLOW WARNING
--accent-rage-1#ff0000PURE RED FURY
--accent-void-1#9933ffPURPLE CHAOS
--accent-halo-1#ffffffPURE ANGEL WHITE
-
-
- -
- - -
-

THE RULEBOOK (IRONIC)

- -
-

DESIGN PRINCIPLES

-
    -
  • ZERO COMPROMISE: Pure black backgrounds, pure white text, no gray areas
    • -
  • MAXIMUM CONTRAST: Every element screams against the void
    • -
  • AGGRESSIVE GLOWS: 30px shadows on everything that matters
    • -
  • SHARP EDGES: 0-2px border radius - no soft corners allowed
    • -
  • THICK BORDERS: 2-6px borders that can't be ignored
    • -
  • CHAOTIC MOTION: Rotations, scales, and transformations on hover
    • -
  • LOUD TYPOGRAPHY: All caps headers, 700-900 font weights
    • -
  • PURE COLORS: #ff0055, #00ff00, #ffff00, #ff0000 - no mixing
    • -
-
- -
-
-

WHEN TO USE

-
    -
  • PUNK BRANDS: Music, art, counter-culture
    • -
  • REBEL TECH: Crypto, blockchain, decentralized
    • -
  • CREATIVE CHAOS: Experimental design studios
    • -
  • YOUTH MOVEMENTS: Gen Z and beyond
    • -
  • GAMING: Cyberpunk, dystopian themes
    • -
  • ATTITUDE REQUIRED: Anywhere rules need breaking
    • -
-
- -
-

WHEN NOT TO USE

-
    -
  • CORPORATE: This ain't for suits
    • -
  • MEDICAL: Too aggressive for healthcare
    • -
  • FINANCE: Banks hate this
    • -
  • GOVERNMENT: Too rebellious
    • -
  • CONSERVATIVE: Literally the opposite
    • -
  • BORING: If you need "professional," go elsewhere
    • -
-
-
- -
-

⚠️ WARNING ⚠️

-

- This theme is INTENTIONALLY AGGRESSIVE. It's not for everyone. It's not meant to be. This is design for rebels who refuse to blend in. If you want subtle, elegant, or corporate-friendly - you're in the wrong place. This is ANARCHIST ANGELS - we don't do boring. -

-
-
- -
- - -
-

TECHNICAL REBELLION

-
-

GLOW EFFECTS SYSTEM

- 
/* AGGRESSIVE GLOW SYSTEM - 30PX SHADOWS */
---glow-pink: 0 0 30px rgba(255, 0, 85, 0.8);
---glow-green: 0 0 30px rgba(0, 255, 0, 0.8);
---glow-yellow: 0 0 30px rgba(255, 255, 0, 0.8);
---glow-white: 0 0 30px rgba(255, 255, 255, 0.6);
---glow-red: 0 0 30px rgba(255, 0, 0, 0.8);
---glow-purple: 0 0 30px rgba(153, 51, 255, 0.8);
-
-/* HOVER STATE INTENSITY */
-.btn-primary:hover {
-  box-shadow: 0 0 40px rgba(255, 0, 85, 1);  /* 100% OPACITY */
-  transform: translateY(-4px) scale(1.05);
-}
-
- -
-
-

CONTRAST RATIOS

-
    -
  • WHITE ON BLACK: 21:1 (Maximum possible)
    • -
  • HOT PINK ON BLACK: 7.2:1 (AAA)
    • -
  • TOXIC GREEN ON BLACK: 15.3:1 (AAA+)
    • -
  • YELLOW ON BLACK: 19.6:1 (AAA+)
    • -
  • NO COMPROMISES: All ratios exceed WCAG AAA
    • -
-
- -
-

BORDER SYSTEM

-
    -
  • DEFAULT: 2px solid white
    • -
  • MEDIUM: 3px for emphasis
    • -
  • THICK: 4px for cards with accent
    • -
  • ULTRA: 6px for alerts and borders
    • -
  • RADIUS: 0-2px only (sharp aesthetic)
    • -
-
-
-
- - -
-

ANARCHIST ANGELS

-

- PUNK ROCK • ZERO RULES • MAXIMUM CHAOS • PURE REBELLION -

-

- Not for the faint of heart. Not for corporate cowards. Only for those who dare to be different. -

-
-
- - diff --git a/DumperCan/UI Style References/angelic-anarchist_style_reference.html b/DumperCan/UI Style References/angelic-anarchist_style_reference.html deleted file mode 100644 index 075df15..0000000 --- a/DumperCan/UI Style References/angelic-anarchist_style_reference.html +++ /dev/null @@ -1,566 +0,0 @@ - - - - - - Angelic Anarchist Style Reference | Divine Rebellion - - - - - - -
- -
-

Angelic Anarchist

-

Divine Rebellion | Sacred Chaos | Heavenly Punk

-
- -
- - -
-
-

✨ Unique Feature: Animated Halos

-

This design system features CSS-only animated rotating halos on H1 and H2 headings. The halos are created using pseudo-elements with rotating borders in divine gold, chaos crimson, void indigo, and holy white.

-

Watch the halos rotate continuously around major headings—a visual representation of the tension between divine order and anarchist rebellion.

-
-
- - -
-

Sacred Spectrum

-
-
-

Divine Gold

- #ffd700 -
-
-

Holy White

- #ffffff -
-
-

Crimson Rebellion

- #dc143c -
-
-

Dark Magenta

- #8b008b -
-
-

Indigo Void

- #4b0082 -
-
-

Pale Gold

- #f0e68c -
-
-
- -
- - -
-

Sacred Actions

-
-
-

Divine

- -
-
-

Chaos

- -
-
-

Void

- -
-
-
- - -
-

Sacred Badges

-
- Holy - Anarchist - Transcendent -
-
- -
- - -
-

Revelations

-
- Divine Proclamation: The heavens acknowledge your righteous rebellion. -
-
- Anarchist Warning: All hierarchies will be dismantled, even celestial ones. -
-
- Void Whisper: Between order and chaos lies infinite potential. -
-
- - -
-

Design Philosophy

-
-

Sacred Chaos Principles

-
    -
  • Sharp Angles: No rounded corners—divine judgment and punk edges
    • -
  • Animated Halos: Rotating borders on H1/H2 create sacred movement
    • -
  • High Contrast: Gold against void, white against shadow
    • -
  • Dual Nature: Every element embodies both heaven and rebellion
    • -
  • Uppercase Power: Major headings demand attention and reverence
    • -
  • Cinzel + Orbitron: Classical meets futuristic
    • -
-
-
- - -
-

Angelic Anarchist Style Complete

-

Where divine order meets sacred rebellion ⚡👼

-
-
- - diff --git a/DumperCan/UI Style References/bubblicorn_style_reference.html b/DumperCan/UI Style References/bubblicorn_style_reference.html deleted file mode 100644 index ce9ba81..0000000 --- a/DumperCan/UI Style References/bubblicorn_style_reference.html +++ /dev/null @@ -1,1591 +0,0 @@ - - - - - - Bubblicorn Style Reference | E-Girl Aesthetic 🦄✨ - - - - - - -
- -
-

Bubblicorn Style Reference 🦄✨

-

E-Girl Aesthetic | Rounded Corners | Pastel Vibes

-
- - -
-

Color Palette 💖

-
-
- Bubblegum 1 - #FF69B4 -
-
- Bubblegum 2 - #FF1493 -
-
- Sparkle 1 - #B0FFE8 -
-
- Sparkle 2 - #00FFFF -
-
- Neon 1 - #FF10F0 -
-
- Neon 2 - #FFE66D -
-
- Lavender - #E6B3FF -
-
- Periwinkle - #CCCCFF -
-
- Primary Text - #FFE6FF -
-
-
- -
- - -
-

Typography ✨

-
-

H1: Rainbow Gradient ✨

-

H2: Hot Pink Primary 💕

-

H3: Lavender Dreams 💜

-

H4: Mint Sparkle 🌿

-
H5: Periwinkle Soft 🦋
-
H6: Light Primary ⭐
- -

This is bold bubblegum text and this is sparkly emphasized text. Body text uses Nunito with Noto Emoji for perfect emoji rendering 🦄🌈✨. All headings use Quicksand for that cute, rounded aesthetic!

- -

Inline code snippets are styled with rounded borders and soft pink backgrounds.

- - 
// Code block example ✨
-function kawaii() {
-    return "So cute! 💖";
-}
- -
- This is a blockquote with rounded corners and a bubblegum pink accent border~ So aesthetic! 💕 -
-
-
- -
- - -
-

Button Styles 🎀

-
-

Special Button (Gradient)

- - -

Default Button

- - -

Navigation Button

- - -

Sparkle Button

- - -

Neon Button

- -
-
- -
- - -
-

Cards & Glow Effects 💫

-
-
-

Bubblegum Glow 💖

-

Used for primary actions and important highlights. Sweet pink vibes!

-
- -
-

Sparkle Glow ✨

-

Used for success states and achievements. Magical mint cyan tones!

-
- -
-
Neon Glow ⚡
-

Used for warnings and attention-grabbing elements. Electric vibes!

-
-
- -
-
-

Elevated Card 🌙

-

Uses subtle pink-tinted elevated background with soft rounded corners.

-
- -
-

Solid Card 🌌

-

Dark solid magenta background for strong contrast sections.

-
-
-
- -
- - -
-

Kawaii Card (Light Mode) 🌸

-
-

Super Cute Featured Content! 💕

-

This ultra-kawaii card uses a bright white background (rgba(255, 255, 255, 0.92)) with a thick rainbow gradient border. Perfect for special announcements, featured content, or anything that needs extra cuteness! ✨

- -

Design Specs:

-
    -
  • Background: rgba(255, 255, 255, 0.92) - Ultra bright! 🌟
    • -
  • Border: 4px gradient (Hot Pink → Lavender → Cyan)
    • -
  • Heading color: #8B008B (dark magenta)
    • -
  • Text color: #2d1435 (dark purple)
    • -
  • Strong: #FF1493 | Em: #00CED1
    • -
  • Rounded corners: 20px (extra soft!)
    • -
- -

Use this variant when you need maximum cuteness and readability. The card-kawaii class automatically applies light-mode styling to all child elements with that perfect e-girl aesthetic! 🦄

-
- -
-
-

Standard Dark Card 🌙

-

Regular pastel-tinted card for normal content.

-
- -
-

Kawaii Light Card 🌸

-

Maximum brightness and cuteness overload!

-
-
-
- -
- - -
-

Tables 📊

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Unicorn 🦄LevelSparkles ✨Status
Rainbow Dash9912,540 ✨Online 💚
Stardust8715,890 ✨Online 💚
Moonbeam769,320 ✨Away 💖
Glitter9521,770 ✨Offline ⚡
Total Unicorns59,520 ✨4 Active 🦄
-
-
- -
- - -
-

Form Elements 📝

-
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- -
- - -
-
- - -
-
- - -
-
- -
- -
- - -
-
- - -
-
- - -
-
- - - -
-
- -
- - -
-

Progress Indicators 📈

-
-

Native Progress Element

- - - - -

Custom Progress Bars

-
-
- Sparkle Power ✨ - 850/1000 -
-
-
85%
-
-
- -
-
- Kawaii Experience 💖 - 6,240/10,000 -
-
-
62%
-
-
- -
-
- Quest Progress 🌈 - 3/12 Complete -
-
-
25%
-
-
-
-
- -
- - -
-

Badges & Pills 🏷️

-
-

- New 💖 - Verified ✨ - Hot ⚡ - Common 🌙 - Cute 💕 - Active 🌟 -

- -

Use Cases

-

Status: Online 💚 Away 💖 Offline ⚡

-

Tiers: Bronze 🥉 Gold 🥇 Legendary ✨

-
-
- -
- - -
-

Tab Interface 📑

-
-
-
- - - -
- -
-

Overview ✨

-

This is the overview tab with rounded corners and soft pastel vibes. Tab content displays in a card-style container with full styling support!

- -
- -
-

Character Stats 🌟

-
    -
  • Cuteness: 99 💕
    • -
  • Sparkle: 87 ✨
    • -
  • Magic: 95 🌈
    • -
  • Vibes: 100 💫
    • -
-
- -
-

Inventory 🎀

-

Your equipped items and magical accessories!

-

Rainbow Sword 🗡️ Sparkle Potion x5 ✨ Stardust: 12,450 ⭐

-
-
-
-
- -
- - -
-

Timeline Component 🕐

-
-
-
-
-
-
2025-01-15 🌸
-

Journey Begins! 🦄

-

Welcome to the magical world! Your kawaii adventure starts here ✨

-
-
- -
-
-
-
2025-02-03 💖
-

First Quest Completed!

-

Completed "Rainbow Mission" - Earned 500 Sparkles ✨

-
-
- -
-
-
-
2025-03-12 🌟
-

Level 99 Achieved!

-

Reached legendary status! Unlocked unicorn powers 🦄

-
-
- -
-
-
-
2025-04-20 ⚡
-

Mythical Item Found!

-

Discovered "Crystal of Eternal Sparkles" in treasure chest 💎

-
-
-
-
-
- -
- - -
-

Statistics Display 📊

-
-
-
12.5K
-
Sparkles Earned ✨
-
-
-
98%
-
Cuteness Level 💕
-
-
-
247
-
Quests Done 🌈
-
-
-
∞
-
Vibes Score 💫
-
-
-
- -
- - -
-

Chart Elements 📈

-
-

Skill Levels 🌟

-
-
- Cuteness 💕 - 92/100 -
-
-
92%
-
-
- -
-
- Sparkle ✨ - 78/100 -
-
-
78%
-
-
- -
-
- Magic 🌈 - 65/100 -
-
-
65%
-
-
- -
-
- Vibes 💫 - 88/100 -
-
-
88%
-
-
-
-
- -
- - -
-

Alert Boxes 📢

- -
- Success! ✨ Your magical profile has been updated successfully! -
- -
- Notice 💕 Your sparkle session will expire in 5 minutes. -
- -
- Warning ⚡ Unable to connect to unicorn server. Please try again! -
- -
- Info 🌙 Magical maintenance scheduled for tomorrow at 2:00 AM UTC. -
-
- -
- - -
-

Implementation Guide for LLMs 📚

- -
-

Quick Start Checklist ✨

-
    -
  1. Copy :root CSS variables block
    2. -
  2. Apply vertical gradient background to body
    3. -
  3. Use .container for max-width centering
    4. -
  4. Build layouts with .grid .grid-[2|3|4] classes
    5. -
  5. All borders are ROUNDED (8px-20px range)
    6. -
  6. Style components with modifier classes (.btn-special, .card-glow-bubblegum)
    7. -
-
- -
-
-

Border Radius System 💫

- 
/* Rounded corners everywhere! */
---radius-sm: 8px;    /* Small elements */
---radius-md: 12px;   /* Standard cards */
---radius-lg: 16px;   /* Large sections */
---radius-xl: 20px;   /* Extra cute! */
---radius-full: 9999px; /* Pills/badges */
-
- -
-

Color Harmony 🌈

-

Bubblegum: Hot pinks for primary actions

-

Sparkle: Mint/cyan for success states

-

Neon: Electric pink/yellow for warnings

-

Pastels: Lavender, periwinkle for soft accents

-
-
- -
-

Typography Usage 💕

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementColor/StyleFont
<h1>5-color rainbow gradientQuicksand
<h2>#FF69B4 (hot pink)Quicksand
<h3>#E6B3FF (lavender)Quicksand
<h4>#B0FFE8 (mint)Quicksand
<strong>#FF69B4 (hot pink)-
<em>#B0FFE8 (mint)-
-

Fonts: Quicksand (headers) | Nunito + Noto Emoji (body)

-
- -
-

Button Behaviors 🎀

- 
/* Special button hover */
-.btn-special:hover {
-    transform: translateY(-4px) scale(1.05);
-    /* Floats up + grows slightly */
-}
-
-/* Standard button hover */
-.btn-default:hover {
-    transform: translateY(-2px) scale(1.03);
-    /* Subtle lift effect */
-}
-
- -
-

Critical Design Rules ✨

-
    -
  • Always rounded corners: Use border-radius on everything!
    • -
  • Border thickness: 2px standard, 4px for kawaii cards
    • -
  • Opacity: bg-elevated: 0.06, bg-card: 0.18, bg-darker: 0.25
    • -
  • Hover effects: Buttons lift up AND scale (translateY + scale)
    • -
  • Colors: Pastel/neon mix - high saturation but playful
    • -
  • Fonts: Quicksand (headers), Nunito (body) - both rounded!
    • -
  • Background: 180deg vertical gradient (deep purple → teal)
    • -
  • Emojis: Use liberally for that e-girl aesthetic! 🦄✨💕
    • -
  • Glows: More intense than demoBuild - embrace the neon!
    • -
-
-
- - -
-

Bubblicorn Style Complete! 🦄✨

-

All rounded corners | Pastel + neon harmony | Maximum cuteness achieved 💖

-

Copy CSS variables and component classes to replicate this kawaii aesthetic! 🌸

-
-
- - - - diff --git a/DumperCan/UI Style References/bubblicorn_style_reference_fixed.html b/DumperCan/UI Style References/bubblicorn_style_reference_fixed.html deleted file mode 100644 index 7ab7d2a..0000000 --- a/DumperCan/UI Style References/bubblicorn_style_reference_fixed.html +++ /dev/null @@ -1,921 +0,0 @@ - - - - - - Bubblicorn Style Reference | E-Girl Aesthetic 🦄✨ - - - - - - -
- -
-

Bubblicorn Style Reference 🦄

-

E-Girl Aesthetic | Rounded Corners | Pastel Vibes ✨

-
- -
- - -
-

Fixed: Kawaii Gradient Border 💖

-
-

Gradient Border with Rounded Corners ✨

-

This card now has properly rendered gradient borders with rounded corners! The previous version used border-image which doesn't work with border-radius.

-

Solution: Using a pseudo-element (::before) with gradient background and mask-composite to create the border effect while preserving rounded corners.

-

The gradient flows smoothly around all corners! 🌈

-
-
- -
- - -
-

Implementation Guide 📚

- -
-

Fixed Gradient Border Technique ✨

-

Problem: border-image and border-radius don't work together

-

Solution: Pseudo-element with gradient + mask-composite

- 
/* Gradient border with rounded corners */
-.card-kawaii {
-    position: relative;
-    background: rgba(255, 255, 255, 0.92);
-    border-radius: var(--radius-xl);
-    color: #2d1435;
-    padding: 2rem;
-}
-
-.card-kawaii::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: var(--radius-xl);
-    padding: var(--border-width-thick);
-    background: var(--kawaii-gradient);
-    -webkit-mask: linear-gradient(#fff 0 0) content-box,
-                  linear-gradient(#fff 0 0);
-    -webkit-mask-composite: xor;
-    mask-composite: exclude;
-    pointer-events: none;
-}
-
- -
-
-

Key Improvements ⭐

-
    -
  • Rounded corners work! All corners are properly rounded
    • -
  • Smooth gradient: No jagged edges or breaks
    • -
  • Performance: Uses modern CSS mask technique
    • -
  • Extensible: Change gradient via CSS variable
    • -
-
- -
-

Browser Support 🌐

-

Excellent: Chrome, Edge, Safari, Firefox

-

Fallback: Older browsers show solid border

-

Note: Uses -webkit-mask for compatibility

-
-
- -
-

Technical Notes 💡

-
    -
  • Pseudo-element: Uses ::before to create gradient border layer
    • -
  • Mask-composite: exclude cuts out the center, leaving only the border
    • -
  • Pointer-events: Set to none so clicks pass through to content
    • -
  • Inset: Shorthand for top: 0; right: 0; bottom: 0; left: 0
    • -
  • Padding on mask: Creates the border width effect
    • -
-
-
- -
- - -
-

Color Palette 🎨

-
-
-

Bubblegum Pink

- #FF69B4 -
-
-

Lavender

- #E6B3FF -
-
-

Mint

- #B0FFE8 -
-
-

Cyan

- #00FFFF -
-
-

Neon Pink

- #FF10F0 -
-
-

Sparkle Yellow

- #FFE66D -
-
-
- -
- - -
-

Button Styles 🎀

-
-
-

Primary Buttons

- - - -
- -
-

Accent Buttons

- - -
-
-
- - -
-

Bubblicorn Style Complete! 🦄✨

-

Gradient borders fixed | All rounded corners working | Maximum cuteness achieved 💖

-
-
- - diff --git a/DumperCan/UI Style References/course_marketing_page.html b/DumperCan/UI Style References/course_marketing_page.html deleted file mode 100644 index 8026427..0000000 --- a/DumperCan/UI Style References/course_marketing_page.html +++ /dev/null @@ -1,798 +0,0 @@ - - - - - - Digital Safety for Parents | 12-Week Course - - - - - - -
- -
-

🛡️ Digital Safety for Parents

-

Protecting Preteens & Teens in a Converged World

-

A 12-session course on the intersection of smartphones, social media, and AI—where threats multiply and traditional safety advice fails.

-
- - -
-
-
12
-
Sessions
-
-
-
25min
-
Per Session
-
-
-
3SC
-
Framework
-
-
-
Practical
-
Action Items
-
-
- - -
-

Why This Course Matters Now

-

$16.6 billion in losses in 2024. 442% surge in voice phishing attacks. 79% of attacks now operate malware-free through AI-powered social engineering. Your teen faces threats you didn't grow up with—and traditional advice doesn't work anymore.

- Enroll Your Community -
- - -
-

What You'll Master

-
    -
  • ✅ Configure critical security settings across iOS and Android
    • -
  • ✅ Recognize AI-powered scams targeting your family (deepfakes, voice cloning)
    • -
  • ✅ Navigate platform governance documents and identify high-risk features
    • -
  • ✅ Build communication patterns that encourage disclosure, not secrecy
    • -
  • ✅ Establish sustainable family digital agreements that evolve with maturity
    • -
  • ✅ Understand AI systems your teen uses daily—capabilities and limitations
    • -
  • ✅ Respond effectively to cyberbullying, predatory contact, and crisis situations
    • -
-
- - -

Course Structure

- - -
-
-
- Session 1 - The Convergence Crisis -
- ▼ -
-
-
-

Understand why smartphone + social internet + AI creates multiplicative (not additive) threats. Recognize the current landscape facing teens in 2024-2025.

-

Key Topics:

-
- $16.6B in 2024 losses - Malware-free attacks - Three-domain framework - Teen vulnerability -
-

Duration: 25 minutes

-
-
-
- - -
-
-
- Session 2 - 📱 The Invisible Data Collectors -
- ▼ -
-
-
-

Your teen's phone contains 11+ sensors collecting data you don't see. Accelerometers infer passwords. Motion sensors map daily routines. AI turns "innocuous" sensors into surveillance tools.

-

What You'll Do:

-
    -
  • Audit location permissions across iOS/Android
    • -
  • Disable cross-app tracking
    • -
  • Configure Screen Time and Family Link
    • -
  • Review which apps access cameras, microphones, sensors
    • -
-
- 11+ sensor types - AI inference threats - Platform settings - Privacy audit -
-

Duration: 25 minutes | Action: Complete security checklist

-
-
-
- -
-
-
- Session 3 - 🔐 Account Security & Attack Vectors -
- ▼ -
-
-
-

24% increase in account takeovers. 26 billion credential stuffing attempts monthly. The average person has 146 exposed credentials on dark web marketplaces. AI bots test them all simultaneously.

-

What You'll Learn:

-
    -
  • Why SMS-based 2FA fails (SIM swapping, MFA fatigue attacks)
    • -
  • Better authentication: authenticator apps, security keys, passkeys
    • -
  • Compromise indicators and immediate response protocols
    • -
  • Which accounts need MFA immediately (email = master key)
    • -
-
- Account takeover crisis - Multi-factor auth - Compromise response - Dark web credentials -
-

Duration: 25 minutes | Action: Set up authenticator app

-
-
-
- -
-
-
- Session 4 - ⚖️ Family Agreements & Sustainable Monitoring -
- ▼ -
-
-
-

Heavy restrictions correlate with increased risky behavior. The goal: communication over control, negotiation over restriction. Build agreements that preserve trust while providing appropriate oversight.

-

Framework Components:

-
    -
  • Device-free zones and times (negotiated, not dictated)
    • -
  • App approval processes that explain risks
    • -
  • Problem reporting without fear of device confiscation
    • -
  • Age-appropriate gradients (10-12 vs. 13-15 vs. 16-17)
    • -
  • Monitoring tools: benefits, costs, and trust trade-offs
    • -
-
- Trust building - Family agreements - Age-appropriate rules - Monitoring options -
-

Duration: 25 minutes | Action: Draft family agreement

-
-
-
- - -
-
-
- Session 5 - 📄 Platform Governance & Terms of Service -
- ▼ -
-
-
-

Your teen clicked "I Agree" to 50+ legal documents they never read. Meta's 2025 update: all private messages are now AI training data. No opt-out. Retroactive application to existing content.

-

Deceptive Patterns:

-
    -
  • "Including but not limited to" = unlimited permission grants
    • -
  • "We may share with third parties" = your data is sold
    • -
  • "You waive the right to" = you can't sue us
    • -
  • Platform-specific high-risk features (Snap Map, Discord servers, TikTok algorithm)
    • -
-
- ToS deception - Privacy policies - Platform risks - AI training rights -
-

Duration: 25 minutes | Action: ToS scavenger hunt

-
-
-
- -
-
-
- Session 6 - 🎮 Current Threat Landscape -
- ▼ -
-
-
-

Gaming platforms are now the primary attack vector. Roblox receives 10,000+ monthly sextortion reports. Discord serves as migration platform for predators. Voice chat bypasses safety filters.

-

Critical Threats:

-
    -
  • AI-Enhanced Attacks: "Nudify" apps, deepfake harassment (Lancaster County: 20 students targeted)
    • -
  • Voice Cloning Scams: Family impersonation with 85% accuracy from 20 seconds of audio
    • -
  • Sextortion Patterns: Why teens don't report (37% never tell anyone)
    • -
  • Cyberbullying 2.0: AI amplification, synthetic content, platform hopping
    • -
-
- Gaming dangers - Deepfakes - Voice cloning - Sextortion -
-

Duration: 25 minutes | Action: Review teen's gaming contacts

-
-
-
- -
-
-
- Session 7 - 🧠 Algorithm Awareness & Information Quality -
- ▼ -
-
-
-

TikTok can create user dependency within 260 videos (35 minutes). Algorithms can push harmful content within 2.6-8 minutes. AI-generated misinformation receives 8% more engagement than human content.

-

The STOP Method (Teach This to Teens):

-
    -
  • Source: Who created this? Why? What's their motivation?
    • -
  • Timing: When was this created? Current or recycled?
    • -
  • Other sources: What do credible sources say?
    • -
  • Purpose: What is this trying to make me think or do?
    • -
-
- Filter bubbles - Radicalization - AI misinformation - STOP verification -
-

Duration: 25 minutes | Action: Practice STOP method

-
-
-
- -
-
-
- Session 8 - 💬 Family Communication & Crisis Response -
- ▼ -
-
-
-

Why teens don't tell parents: fear of losing device, shame, belief you won't understand. Build disclosure-friendly communication that encourages help-seeking instead of secrecy.

-

The Five Cs Framework:

-
    -
  • Child-Centered: Adapt to individual temperament, acknowledge emotions
    • -
  • Content: Discuss quality and appropriateness without immediate prohibition
    • -
  • Context: When, where, and how digital interactions occur matters
    • -
  • Connection: Emphasize healthy relationships over platform features
    • -
  • Calm: Your emotional regulation enables their disclosure
    • -
-
- Five Cs - Crisis protocols - Disclosure patterns - Professional help -
-

Duration: 25 minutes | Action: Identify crisis resources

-
-
-
- - -
-
-
- Session 9 - 🤖 Understanding "Pattern Creatures" -
- ▼ -
-
-
-

AI systems are pattern-matching creatures, not thinking beings. Trained on billions of examples, they predict likely outputs—but hallucinate false information 16-48% of the time.

-

Four Types Teens Encounter:

-
    -
  • Conversational AI: ChatGPT, Snapchat My AI (54% use for homework)
    • -
  • Recommendation AI: TikTok, YouTube algorithms (optimize engagement, not wellbeing)
    • -
  • Voice AI: Siri, Alexa (struggle with teen speech, lack safety filtering)
    • -
  • Generative AI: Image/video creators ("nudify" apps, deepfake tools)
    • -
-
- AI limitations - Hallucinations - Pattern matching - Four types -
-

Duration: 25 minutes | Action: Audit AI use

-
-
-
- -
-
-
- Session 10 - 🔍 AI Detection & Critical Evaluation -
- ▼ -
-
-
-

Humans detect high-quality deepfakes only 24.5% of the time—worse than random chance. Detection is hard. Verification is essential.

-

The Paradigm Shift:

-
    -
  • OLD: "Can I tell if this is AI?"
    • -
  • NEW: "How can I verify this is authentic?"
    • -
  • Visual artifacts: anatomical impossibilities, lighting issues, over-perfection
    • -
  • Text patterns: overly formal, no personal details, perfect grammar
    • -
  • Audio/video: unnatural prosody, sync issues, blurring
    • -
-

Focus: STOP verification method > artifact detection

-
- Detection limits - Verification focus - Visual artifacts - STOP method -
-

Duration: 25 minutes | Action: Practice detection

-
-
-
- -
-
-
- Session 11 - ✅ Safe & Productive AI Use -
- ▼ -
-
-
-

54% of children use AI for homework. Teachers use detection tools. Colleges treat AI plagiarism seriously. Establish clear family policies before problems arise.

-

Family AI Use Agreement:

-
    -
  • Disclosure: "I used AI to help with [specific task]"
    • -
  • Authorship: Final product must reflect student learning
    • -
  • Verification: All AI information verified through reliable sources
    • -
  • Age-Appropriate: 10-12 requires supervision, 13-15 guided use, 16-17 comprehensive attribution
    • -
-

Legitimate Uses:

-

Brainstorming, outlining, research starting points, editing assistance, learning support—with verification and disclosure.

-
- Academic integrity - AI policies - Productive use - Emerging platforms -
-

Duration: 25 minutes | Action: Draft AI use policy

-
-
-
- - -
-
-
- Session 12 - 🎯 Sustainable Practices & Long-Term Strategy -
- ▼ -
-
-
-

Review the 3SC framework. Create sustainable weekly routines. Develop adaptability for emerging technologies. Establish ongoing education and support networks.

-

Your Commitments:

-
    -
  • This Week: Implement one security change per device, have one disclosure-friendly conversation
    • -
  • This Month: Weekly family tech check-ins, complete security audit, practice STOP method
    • -
  • Long-Term: Communication over control, evolving rules, staying informed, seeking help when needed
    • -
-

The Goal:

-

Graduating a capable digital citizen who doesn't need you hovering. You cannot create perfect safety. You can build a relationship where they come to you with problems.

-
- 3SC review - Sustainable routines - Community support - Ongoing learning -
-

Duration: 25 minutes | Outcome: Confident, adaptive parenting

-
-
-
- - -
-

Ready to Protect Your Teen?

-

This course provides foundations, not comprehensive expertise. Technology evolves constantly—commit to ongoing learning, community support, and adaptive parenting that prioritizes relationship over rules.

- Bring This Course to Your Community -
- - -
-
- Built on the 3SC Framework
- SAFE (Caution) • - SANE (Courage) • - SAGE (Competence) -
-

Digital Safety Foundations | 12-Session Parent Education Course

-

Course materials designed for non-technical community facilitators delivering evidence-based digital literacy education

-
-
- - - - \ No newline at end of file diff --git a/DumperCan/UI Style References/crepuscular-city-lights_style_reference.html b/DumperCan/UI Style References/crepuscular-city-lights_style_reference.html deleted file mode 100644 index 25ae078..0000000 --- a/DumperCan/UI Style References/crepuscular-city-lights_style_reference.html +++ /dev/null @@ -1,843 +0,0 @@ - - - - - - Crepuscular City Lights Style Reference - - - - - - -
- -
-

Crepuscular City Lights

-

- Dark & Elegant • Urban Nightscape • Neon Accents -

-
- - -
-

Theme Overview

-
-

- City Lights embodies the sleek sophistication of a modern metropolis at night. Deep, near-black backgrounds evoke the urban darkness, while vibrant neon accents mimic the electric glow of city lights, creating a high-contrast, elegant aesthetic perfect for premium applications and modern interfaces. -

-
- -
-
-

Design Philosophy

-
    -
  • Dark Foundation: Near-black backgrounds with subtle blue undertones
    • -
  • High Contrast: Bright accents against deep shadows
    • -
  • Neon Energy: Electric colors inspired by city nightlife
    • -
  • Elegant Modern: Sophisticated and professional
    • -
-
- -
-

Perfect For

-
    -
  • Premium Apps: High-end software interfaces
    • -
  • Tech Products: Developer tools and platforms
    • -
  • Creative Studios: Design and media agencies
    • -
  • Modern Brands: Forward-thinking companies
    • -
-
- -
-

Key Features

-
    -
  • Subtle Glows: Neon shadow effects
    • -
  • Sharp Corners: 2-6px radius range
    • -
  • Vibrant Palette: Four accent color systems
    • -
  • WCAG AAA: Exceptional readability
    • -
-
-
-
- -
- - -
-

Neon Color Palette

-
-
-

Neon System

- #00d9ff -

Electric cyan & blue

-
-
-

Cyber System

- #b968ff -

Neon purple

-
-
-

Glow System

- #ffd700 -

Neon gold & amber

-
-
-

Alert System

- #ff6ec7 -

Neon pink

-
-
- -
-
-

Background Spectrum

-
-
- #0a0e1a -

Deep midnight

-
-
- #0f1419 -

Dark steel

-
-
- #141922 -

Charcoal blue

-
-
-
- -
-

Text Hierarchy

-
-
- Primary Text - #f0f6fc -
-
- Secondary Text - #c9d1d9 -
-
- Muted Text - #8b949e -
-
-
-
-
- -
- - -
-

Typography System

-
-

H1 Heading with Gradient

-

H2 Heading - Electric Cyan

-

H3 Heading - Neon Purple

-

H4 Heading - Neon Gold

-
H5 Heading - Primary Bright
-
H6 Heading - All Caps
-

Body text uses IBM Plex Sans for optimal readability in the dark theme. The high contrast between the bright text and deep backgrounds ensures comfortable reading for extended periods.

-

Muted text is perfect for supplementary information and metadata.

-
-
- -
- - -
-

Button Styles

-
-
-

Primary Actions

- - -
- -
-

Alternative Styles

- - - -
-
-
- -
- - -
-

Card Components

-
-
-

Standard Card

-

Default card with subtle background and border. Hover for lift effect.

-
- -
-

Solid Card

-

Opaque background for emphasis and hierarchy.

-
- -
-

Elevated Card

-

Enhanced shadow for prominent content sections.

-
- -
-

Neon Accent

-

Electric cyan border with subtle glow effect.

-
- -
-

Cyber Accent

-

Neon purple border with purple glow effect.

-
- -
-

Glow Accent

-

Neon gold border with warm glow effect.

-
-
-
- -
- - -
-

Alert Messages

-
-

Info Alert

-

Electric cyan accent with subtle glow - perfect for general information.

-
- -
-

Success Alert

-

Neon purple accent with purple glow - great for success messages.

-
- -
-

Warning Alert

-

Neon gold accent with warm glow - ideal for warnings and cautions.

-
- -
-

Danger Alert

-

Neon pink accent with pink glow - for critical alerts and errors.

-
-
- -
- - -
-

Code Display

-
-

Inline Code

-

Use inline code for variable names, function() calls, and CSS properties within text.

-
- -
-

Code Blocks

- 
// Neon color system
-const colors = {
-  neon: '#00d9ff',    // Electric cyan
-  cyber: '#b968ff',   // Neon purple  
-  glow: '#ffd700',    // Neon gold
-  alert: '#ff6ec7'    // Neon pink
-};
-
-// Apply glow effect
-element.style.boxShadow = '0 0 20px rgba(0, 217, 255, 0.5)';
-
-
- -
- - -
-

Data Tables

-
-

Color Variables Reference

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
VariableColorUsage
--accent-neon-1#00d9ffPrimary actions, links
--accent-cyber-1#b968ffSecondary accents
--accent-glow-1#ffd700Highlights, warnings
--accent-alert-1#ff6ec7Alerts, errors
--text-primary#f0f6fcMain text content
-
-
- -
- - -
-

Implementation Guide

- -
-

Glow Effects System

-

City Lights uses subtle glow effects to create the neon aesthetic:

- 
/* Glow variables */
---glow-cyan: 0 0 20px rgba(0, 217, 255, 0.3);
---glow-purple: 0 0 20px rgba(185, 104, 255, 0.3);
---glow-gold: 0 0 20px rgba(255, 215, 0, 0.3);
---glow-pink: 0 0 20px rgba(255, 110, 199, 0.3);
-
-/* Application */
-h2 { text-shadow: var(--glow-cyan); }
-.btn-primary { box-shadow: var(--glow-cyan); }
-
- -
-
-

Design Principles

-
    -
  • High Contrast: Bright text on near-black backgrounds
    • -
  • Subtle Animation: Smooth transitions on all interactive elements
    • -
  • Consistent Glow: Apply shadow effects to all accent colors
    • -
  • Sharp Corners: Maintain 2-6px radius range
    • -
  • Depth Through Darkness: Layer opacity for visual hierarchy
    • -
-
- -
-

Best Practices

-
    -
  • Use Sparingly: Neon accents work best as highlights
    • -
  • Dark Foundations: Keep backgrounds very dark
    • -
  • Readable Text: Ensure WCAG AAA contrast ratios
    • -
  • Hover States: Enhance glows on interaction
    • -
  • Balance Energy: Mix cool and warm accent colors
    • -
-
-
- -
-

Technical Specifications

-
    -
  • Background Range: #0a0e1a to #141922 (near-black with blue tint)
    • -
  • Border Contrast: 30-50% lighter than backgrounds
    • -
  • Text Contrast: WCAG AAA compliant (7:1 or higher)
    • -
  • Glow Opacity: 0.3 for shadows, 0.5 for hover states
    • -
  • Border Radius: 2px-6px range for sharp modern aesthetic
    • -
-
-
- -
- - -
-

Theme Comparison

-
-
-

City Lights Theme

-
    -
  • Background: Near-black (#0a0e1a)
    • -
  • Aesthetic: Modern, urban, neon
    • -
  • Contrast: Very high (AAA)
    • -
  • Accents: Vibrant neon colors
    • -
  • Mood: Energetic, sophisticated
    • -
  • Use Case: Tech, creative, premium
    • -
-
- -
-

Corporate Theme

-
    -
  • Background: Dark blue-gray (#1a1d2e)
    • -
  • Aesthetic: Professional, twilight
    • -
  • Contrast: High (AA+)
    • -
  • Accents: Muted warm/cool tones
    • -
  • Mood: Calm, professional
    • -
  • Use Case: Business, corporate
    • -
-
-
-
- - -
-

Crepuscular City Lights

-

Dark & Elegant • High Contrast • Neon Sophistication

-
-
- - diff --git a/DumperCan/UI Style References/crepuscular_corporate_style_reference.html b/DumperCan/UI Style References/crepuscular_corporate_style_reference.html deleted file mode 100644 index 7e5648d..0000000 --- a/DumperCan/UI Style References/crepuscular_corporate_style_reference.html +++ /dev/null @@ -1,1504 +0,0 @@ - - - - - - Crepuscular Corporate Style Reference - - - - - - -
- -
-

Crepuscular Corporate Style Reference

-

Professional Design System | Twilight Palette | Subtle Rounded Corners

-
- - -
-

Crepuscular Color Palette

-
-
- Dawn 1 - #e89547 -
-
- Dawn 2 - #d4a574 -
-
- Dusk 1 - #6b8cae -
-
- Dusk 2 - #4a6b8a -
-
- Alert 1 - #d47d6a -
-
- Alert 2 - #c5a86f -
-
- Slate - #8b95a8 -
-
- Primary Text - #e8eaf0 -
-
-

Twilight-inspired palette: Dawn (warm sunrise tones), Dusk (cool blue-grays), Alert (muted warnings). Designed for professional contexts with WCAG AA contrast compliance.

-
- -
- - -
-

Typography System

-
-

H1: Steel Blue Gradient

-

H2: Steel Blue Heading

-

H3: Slate Gray Subheading

-

H4: Muted Gold Accent

-
H5: Primary Text Weight
-
H6: Uppercase Label
- -

Body text uses IBM Plex Sans at 1rem with 1.7 line-height for optimal readability. Strong emphasis uses dawn orange, while italic emphasis uses dusk blue. Inter serves as the header font with negative letter-spacing for a modern, technical feel.

- -

Inline code snippets use JetBrains Mono with subtle rounded borders.

- - 
// Code block example
-function twilight() {
-    return "Professional aesthetic";
-}
- -
- Blockquotes use muted secondary text with a steel blue left border. Suitable for callouts, citations, or highlighted content in technical documentation. -
-
-
- -
- - -
-

Button Variants

-
-

Primary Button (Dusk Gradient)

- - -

Secondary Button (Dawn Gradient)

- - -

Outline Button

- - -

Ghost Button

- - -

Alert Button

- - -

All buttons use subtle 1px translateY on hover. Corner radius: 3px (--radius-sm).

-
-
- -
- - -
-

Card Components

-
-
-

Dawn Accent

-

Warm orange left border. Use for sunrise-themed content or warm highlights.

-
- -
-

Dusk Accent

-

Cool blue left border. Use for twilight-themed content or cool highlights.

-
- -
-
Standard Card
-

Default card with rgba(200,210,230,0.08) background.

-
-
- -
-
-

Elevated Card

-

Uses rgba(200,210,230,0.04) for subtle depth differentiation. Ideal for nested content.

-
- -
-

Solid Card

-

Opaque slate background (#2a2d3e) for high-contrast sections or featured content.

-
-
-
- -
- - -
-

Highlight Card (Light Mode)

-
-

Featured Content Section

-

The highlight card uses rgba(245, 247, 250, 0.95) for maximum contrast and readability. Suitable for important announcements, featured articles, or executive summaries.

- -

Specifications:

-
    -
  • Background: rgba(245, 247, 250, 0.95)
    • -
  • Border: 2px steel blue (#6b8cae)
    • -
  • Border radius: 6px (--radius-lg)
    • -
  • Text color: #2a2d3e (high contrast)
    • -
  • Heading color: #1a1d2e (near-black)
    • -
- -

Use this variant for content requiring extended reading or when maximum accessibility is needed. The card-highlight class overrides all child element colors for optimal light-mode presentation.

-
-
- -
- - -
-

Data Tables

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MetricQ1 2024Q2 2024Status
Revenue$2.4M$2.8MOn Track
Users45,20052,800Growing
Churn Rate3.2%2.8%Improved
Support Tickets1,240980Critical
Overall PerformanceAbove Target
-
-
- -
- - -
-

Form Elements

-
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- -
- - -
-
- - -
-
- - -
-
- - - -
-
- -
- - -
-

Progress Indicators

-
-

Native Progress Elements

- - - - -

Custom Progress Bars

-
-
- Project Completion - 85% -
-
-
-
-
- -
-
- Budget Utilized - 62% -
-
-
-
-
- -
-
- Team Capacity - 25% -
-
-
-
-
-
-
- -
- - -
-

Badges & Labels

-
-

- New Feature - In Progress - Critical - Archived - Priority - Verified -

- -

Use Cases

-

Status: Active Pending Blocked

-

Tiers: Standard Premium Enterprise

-
-
- -
- - -
-

Tab Navigation

-
-
-
- - - -
- -
-

Overview

-

System overview and key metrics. Tabs use a minimal underline indicator with no background on inactive states.

- -
- -
-

Analytics Dashboard

-
    -
  • Monthly Active Users: 52,800
    • -
  • Conversion Rate: 3.2%
    • -
  • Average Session: 8m 45s
    • -
  • Retention Rate: 76%
    • -
-
- -
-

System Settings

-

Configuration options and preferences.

-

API v2.1 Auto-update: ON

-
-
-
-
- -
- - -
-

Timeline Component

-
-
-
-
-
-
Q1 2024
-

Platform Launch

-

Initial product release with core features and basic integrations.

-
-
- -
-
-
-
Q2 2024
-

Enterprise Features

-

Added SSO, advanced analytics, and team collaboration tools.

-
-
- -
-
-
-
Q3 2024
-

API v2 Release

-

New API version with improved performance and expanded endpoints.

-
-
- -
-
-
-
Q4 2024
-

Mobile Apps

-

Launch of iOS and Android applications with offline support.

-
-
-
-
-
- -
- - -
-

Statistics Display

-
-
-
52.8K
-
Active Users
-
-
-
97.2%
-
Uptime
-
-
-
$2.8M
-
Revenue
-
-
-
8.4
-
NPS Score
-
-
-
- -
- - -
-

Chart Components

-
-

Performance Metrics

-
-
- System Performance - 92/100 -
-
-
-
-
- -
-
- Code Coverage - 78/100 -
-
-
-
-
- -
-
- Documentation - 65/100 -
-
-
-
-
- -
-
- Team Velocity - 88/100 -
-
-
-
-
-
-
- -
- - -
-

Alert Messages

- -
- Information: System maintenance scheduled for Sunday 2:00 AM UTC. Expected downtime: 30 minutes. -
- -
- Success: Configuration changes saved successfully. Changes will take effect immediately. -
- -
- Warning: API rate limit approaching threshold. Consider upgrading your plan. -
- -
- Error: Unable to connect to database. Please check your connection settings. -
-
- -
- - -
-

Implementation Guide

- -
-

Border Radius System

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
VariableValueUse Case
--radius-xs2pxBadges, small elements
--radius-sm3pxButtons, inputs, code blocks
--radius-md4pxCards, tables, standard components
--radius-lg6pxLarge sections, highlight cards
-
- -
-
-

Color System Usage

-

Dawn: Warm accents for primary actions, highlights, and positive states.

-

Dusk: Cool accents for secondary actions, information, and neutral states.

-

Alert: Warning and error states requiring user attention.

-

All colors maintain WCAG AA contrast ratios against dark backgrounds.

-
- -
-

Typography Guidelines

-

Headers: Inter with negative letter-spacing (-0.02em to -0.01em) for modern feel.

-

Body: IBM Plex Sans at 0.9375rem (15px) with 1.7 line-height.

-

Code: JetBrains Mono for technical content.

-
-
- -
-

Design Constraints

-
    -
  • Corner radius: Sharp-but-round (2-6px range), never exceed 6px
    • -
  • Border widths: 1px standard, 2px medium, 3px thick
    • -
  • Opacity: bg-elevated: 0.04, bg-card: 0.08, bg-darker: 0.35
    • -
  • Hover effects: Subtle 1px translateY, avoid excessive animation
    • -
  • Color temperature: Balance warm (dawn) and cool (dusk) accents
    • -
  • Fonts: Inter (headers), IBM Plex Sans (body), professional aesthetic
    • -
  • Spacing: Consistent 0.5rem increments for padding/margins
    • -
  • Accessibility: Maintain WCAG AA contrast ratios minimum
    • -
-
-
- - -
-

Crepuscular Corporate Style Complete

-

Professional twilight palette | Sharp-but-round corners (2-6px) | Corporate-ready design system

-
-
- - - - diff --git a/DumperCan/UI Style References/crepuscular_corporate_style_reference_fixed.html b/DumperCan/UI Style References/crepuscular_corporate_style_reference_fixed.html deleted file mode 100644 index dc782dc..0000000 --- a/DumperCan/UI Style References/crepuscular_corporate_style_reference_fixed.html +++ /dev/null @@ -1,729 +0,0 @@ - - - - - - Crepuscular Corporate Style Reference - - - - - - -
- -
-

Crepuscular Corporate

-

Professional | Twilight Palette | 22% Enhanced Contrast

-
- -
- - -
-

Contrast Enhancement Applied

- -
-

22% Brighter Text & Accents

-

All text colors, accents, and borders have been increased by 22% in brightness to improve readability and visual hierarchy while maintaining the crepuscular aesthetic.

-

This enhancement makes content significantly more accessible without compromising the professional twilight theme.

-
- -
-
-

Before → After

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementOriginalEnhanced
text-primary#e8eaf0#edeef3
text-secondary#b8bcc8#c7cad4
border-color#8b95a8#a4acbb
accent-dawn-1#e89547#edac6f
accent-dusk-1#6b8cae#8ba5bf
-
- -
-

Readability Improvements

-
    -
  • Headings: More prominent and scannable
    • -
  • Body text: Easier to read for extended periods
    • -
  • Borders: Better definition between sections
    • -
  • Accents: Warmer tones stand out more
    • -
  • Code blocks: Clearer syntax highlighting
    • -
-
-
-
- -
- - -
-

Enhanced Color Palette

-
-
-

Steel Blue (Dusk)

- #8ba5bf -

+22% from #6b8cae

-
-
-

Warm Orange (Dawn)

- #edac6f -

+22% from #e89547

-
-
-

Muted Gold (Dawn)

- #ddb892 -

+22% from #d4a574

-
-
-

Muted Red (Alert)

- #dd998a -

+22% from #d47d6a

-
-
-

Slate Gray

- #a4acbb -

+22% from #8b95a8

-
-
-

Primary Text

- #edeef3 -

+22% from #e8eaf0

-
-
-
- -
- - -
-

Button Styles

-
-
-

Primary Actions

- - -
- -
-

Alternative Styles

- - - -
-
-
- -
- - -
-

Implementation Guide

- -
-

Contrast Calculation Method

-

The 22% increase was applied by moving each RGB channel 22% closer to white (255):

- 
new_value = original + (255 - original) × 0.22
-
-Example for text-primary (#e8eaf0):
-R: 232 + (255 - 232) × 0.22 = 237
-G: 234 + (255 - 234) × 0.22 = 238
-B: 240 + (255 - 240) × 0.22 = 243
-Result: #edeef3
-
- -
-
-

What Changed

-
    -
  • All text colors (primary, secondary, muted)
    • -
  • All border colors
    • -
  • All accent colors (dawn, dusk, alert)
    • -
  • Typography color variables (h2-h6)
    • -
  • Button gradients use enhanced colors
    • -
-
- -
-

What Stayed the Same

-
    -
  • Background gradients (maintain depth)
    • -
  • Surface backgrounds (opacity values)
    • -
  • Border radius (2-6px range)
    • -
  • Layout structure and spacing
    • -
  • Interaction patterns and animations
    • -
-
-
- -
-

Key Principles

-
    -
  • Preserve aesthetics: Maintain the crepuscular twilight mood
    • -
  • Improve readability: 22% increase in light channel values
    • -
  • Consistent application: All text and accent colors enhanced equally
    • -
  • Accessibility focus: Better contrast ratios for WCAG compliance
    • -
  • Professional appearance: Subtle corners and refined palette
    • -
-
-
- - -
-

Enhanced Crepuscular Corporate

-

22% brighter text & accents | Improved readability | Professional twilight aesthetic maintained

-
-
- - diff --git a/DumperCan/UI Style References/faerie-fire_style_reference.html b/DumperCan/UI Style References/faerie-fire_style_reference.html deleted file mode 100644 index eb21fda..0000000 --- a/DumperCan/UI Style References/faerie-fire_style_reference.html +++ /dev/null @@ -1,657 +0,0 @@ - - - - - - Faerie Fire Style Reference | Prismatic Magic ✨ - - - - - - -
- -
-

Faerie Fire

-

Prismatic Magic | Ethereal Edges | Iridescent Code

-
- -
- - -
-
-

✨ Unique Feature: Prismatic Borders

-

This design system features animated rainbow prismatic borders that continuously shift through all colors of the magical spectrum. The effect is created using gradient masks and keyframe animations.

-

Look at the card below to see the prismatic border in action—it cycles through violet, pink, cyan, green, and gold in an endless, mesmerizing flow.

-

Sharp faerie edges meet liquid light. Magic crystallized in CSS.

-
-
- - -
-
-

Witness the Prismatic Effect

-

This card's border flows through the entire rainbow spectrum continuously. The animation is smooth, CPU-efficient, and requires no JavaScript.

-

Technical implementation: Uses a pseudo-element with an animated gradient background and mask-composite to create the border effect while maintaining sharp corners.

-
-
- - -
-

Prismatic Spectrum

-
-
-

Soft Violet

- #c084fc -
-
-

Bright Pink

- #f472b6 -
-
-

Bright Cyan

- #67e8f9 -
-
-

Mint Green

- #86efac -
-
-

Fairy Gold

- #fbbf24 -
-
-

Deep Purple

- #a855f7 -
-
-

Deep Pink

- #ec4899 -
-
-

Deep Cyan

- #22d3ee -
-
-
- -
- - -
-

Magical Actions

-
-
-

Violet & Rainbow

- - -
-
-

Notice the Shimmer

-

Hover over buttons to see enhanced glow effects. The rainbow button continuously shifts colors.

-
-
-
- - -
-

Enchanted Badges

-
- Magical - Ethereal - Prismatic - Iridescent -
-
- -
- - -
-

Magical Messages

-
- Enchantment Success: The spell weaves through reality with prismatic beauty. -
-
- Faerie Notice: Magical energies detected in the ethereal plane. -
-
- Crystal Info: Iridescent frequencies resonating at optimal levels. -
-
- - -
-

Design Philosophy

-
-

Prismatic Magic Principles

-
    -
  • Sharp Faerie Edges: Zero border radius—crystalline precision
    • -
  • Animated Prismatic Borders: Rainbow gradients that flow endlessly
    • -
  • Iridescent Glows: Multiple box-shadows create ethereal depth
    • -
  • Shimmer Effects: Buttons feature diagonal light sweeps
    • -
  • Sparkle Decorators: Animated ✨ on major headings
    • -
  • Cormorant + Urbanist: Elegant serif meets modern sans
    • -
  • Five-Color Spectrum: Violet, pink, cyan, green, gold
    • -
-
-
- - -
-

Faerie Fire Style Complete

-

Where sharp edges meet liquid light ✨🌈

-
-
- - diff --git a/DumperCan/UI Style References/naughty-little-whispers_style_reference.html b/DumperCan/UI Style References/naughty-little-whispers_style_reference.html deleted file mode 100644 index 2dfefe1..0000000 --- a/DumperCan/UI Style References/naughty-little-whispers_style_reference.html +++ /dev/null @@ -1,887 +0,0 @@ - - - - - - Naughty Little Whispers | Design System Documentation - - - - - - -
- - -
-

Naughty Little Whispers

-

- A design system where information reveals itself playfully through interaction -

-
- -
- - -
-
-

Distinctive Choice: Hover-Reveal Information Architecture

- -

This design system makes one bold, distinctive choice that governs how information is presented and discovered. Rather than displaying everything at once, we use opacity-based hover-reveal interactions where secondary content begins nearly invisible and whispers into view when you show interest through hovering or focus.

- -

This approach challenges the conventional wisdom that all interface content must be immediately and equally visible. Instead, it treats secondary information as optional enrichment rather than mandatory clutter. The result is interfaces that feel lighter, less overwhelming, and more intimate. Content reveals itself gradually, like secrets shared between friends.

- -

The Philosophy of Whispering

- -

Not every piece of information deserves equal attention. When everything shouts, nothing is heard. The whisper system creates hierarchy through selective visibility. Primary content is always fully visible because it is essential for understanding. Secondary content—supplementary details, contextual information, helpful hints—exists at fifteen percent opacity, creating visual texture without demanding attention.

- -

This technique respects attention as a precious resource. Users decide what they want to explore more deeply by hovering over areas of interest. The interaction feels like leaning in to hear something said softly rather than being shouted at from all directions. It creates a more thoughtful, intentional relationship between interface and user.

- -

The psychology behind this approach draws from several principles. First, curiosity drives engagement. When something is partially visible but not fully revealed, people want to discover what it says. Second, progressive disclosure reduces cognitive load. By hiding complexity until needed, we keep interfaces feeling simple while retaining depth for those who seek it. Third, rewards feel better when earned. The small act of hovering creates a micro-moment of discovery that feels satisfying.

-
-
- - -
-

The Whisper System in Action

- -
-

Opacity Levels

-

The system uses specific opacity values to create different levels of visibility. Each level serves a specific purpose in the information hierarchy. Try hovering over the samples below to see them fully reveal.

- -
-
Whisper (0.15)
-
Hint (0.35)
-
Soft (0.6)
-
Full (1.0)
-
- -

- The transition timing is set to 0.4 seconds with an easing function that feels organic. This timing is fast enough to feel responsive but slow enough that the reveal feels gentle rather than abrupt. -

-
- -
-

Try It: Hover to Reveal

-

This card contains whispered secondary information. Move your cursor over it to discover what it says.

- -
-

Primary Content

-

This text is always visible because it is essential information. Everyone needs to see this.

- -
-
-
Secondary Details
-

This information only appears when you hover over the card. It provides additional context without cluttering the initial view. This is perfect for technical specifications, extended descriptions, or helpful hints that not everyone needs.

-
-
-
- -
-

Implementation Approach

-

The whisper effect is implemented using CSS opacity and transitions. Unlike display or visibility changes, opacity-based hiding keeps content in the layout, preventing jarring reflows when revealed. The content exists but fades into the background, creating texture without noise.

- - 
/* Basic whisper pattern */
-.whisper {
-    opacity: 0.15;
-    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.whisper:hover {
-    opacity: 1;
-}
-
-/* Card that reveals whispered content on hover */
-.card-with-whispers .whisper-content {
-    opacity: 0.15;
-    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.card-with-whispers:hover .whisper-content {
-    opacity: 1;
-}
- -

The key is using a parent hover state to reveal child content. This creates a generous interaction area where any hover over the card triggers the reveal, rather than requiring precise cursor placement over the whispered text itself.

-
-
- -
- - -
-

Color Palette

- -
-

The color system uses muted, sophisticated neutrals with warm undertones. The palette evokes aged paper, twilight shadows, and intimate conversations. Accent colors are restrained, providing gentle emphasis without demanding attention. Everything supports the whispering aesthetic—subtle, refined, inviting closer inspection.

-
- -
-
-
- #fafaf8 - Paper White -
-
- -
-
- #d4a5a5 - Blush -
-
- -
-
- #a8b5a0 - Sage -
-
- -
-
- #8b8fa8 - Dusk -
-
- -
-
- #c4a572 - Amber -
-
- -
-
- #9c9a91 - Warm Gray 400 -
-
- -
-
- #6b6960 - Warm Gray 600 -
-
- -
-
- #2a2926 - Ink -
-
-
-
- -
- - -
-

Component Library

- -
-
-

Interactive Elements

-
- - Hover to see me whisper -
- -

- Buttons can have whispered labels that appear on hover, providing additional context without visual clutter in the default state. -

-
- -
-

Status Indicators

- Subtle - Gentle - Whispered -

- Badges use muted colors that complement rather than compete with primary content. -

-
-
- -
-

Tables with Whispered Columns

-

Tables can use the whisper system for supplementary data columns. Hover over any row to reveal additional information.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Primary DataAlways VisibleWhispered DetailOptional Context
Essential infoImportant valueHover to seeMore details here
Core contentKey metricSecondary dataSupplementary info
Main pointPrimary statExtra contextTechnical detail
- -

- This pattern works well for data tables where some columns contain important but not critical information. The whispered columns create visual hierarchy without removing data from the interface. -

-
-
- -
- - -
-

Implementation Guide

- -
-

When to Use Whispers

- -

The whisper system works best when applied thoughtfully. Not every piece of secondary information should be hidden. The technique is most effective for content that fits these criteria. First, the information is helpful but not essential for all users. Second, revealing it does not cause significant layout shifts. Third, users can easily discover it through natural interaction patterns like hovering over relevant areas.

- -

Ideal Use Cases

- -

Consider using whispers for supplementary details that enrich understanding but are not required for basic comprehension. Technical specifications often fall into this category. A product listing might show the name, price, and main feature prominently, while whispering the detailed specifications, dimensions, and warranty information. Users interested in those details will naturally hover to read more, while others are not overwhelmed by information they do not need.

- -

Contextual help represents another strong use case. Imagine a form where field labels are always visible, but explanatory text about what to enter or why the information is needed whispers into view on focus or hover. This keeps the form feeling light and approachable while providing guidance exactly when users need it.

- -

Metadata and timestamps benefit from the whisper treatment. In a content feed, the main text and author might be prominent while the publication date, category tags, and edit history whisper into view on hover. This creates cleaner initial layouts while making supplementary information discoverable.

- -

When Not to Whisper

- -

Avoid using whispers for critical information that every user must see. Error messages, required form validation feedback, and key calls to action should be fully visible. The whisper technique is about progressive disclosure of helpful supplementary content, not hiding necessary information.

- -

Similarly, primary navigation should not whisper. Users expect navigation to be immediately obvious. While you might whisper secondary navigation items or additional options within a menu, the main pathways through your interface should be clear and prominent.

- -

Touch interfaces require special consideration. Hover interactions do not translate to touch, so whispered content must have an alternative reveal method such as tapping or focus states. Consider whether the content should be fully visible on mobile devices where hover is not available.

-
- -
-

Design Principles

- -

Beyond the whisper system, several principles guide this design approach and contribute to its refined character. Understanding these principles helps you maintain consistency when extending the system.

- -

Generous spacing: White space is not wasted space. The system uses ample padding and margins to create breathing room. When content is not crowded, each element can be appreciated individually. The generous spacing also provides larger hover targets for revealing whispered content.

- -

Typographic sophistication: The pairing of Lora and Karla creates contrast between display and body text. Lora brings elegance and personality to headings with its refined serifs. Karla provides excellent readability for body text with clean, geometric forms. The combination feels both classic and contemporary.

- -

Restrained color: The palette stays in the warm neutral family, avoiding bright or saturated colors. This restraint creates sophistication and ensures that when accent colors do appear, they carry weight. Color becomes meaningful rather than decorative.

- -

Gentle interactions: All animations use slow timing and gentle easing. Nothing snaps or jerks. Transitions feel organic, as if content is naturally flowing into view rather than being mechanically revealed. This creates an interface that feels responsive yet calm.

-
-
- - -
-

Alert Components

- -
- Notice: Standard alerts use gentle borders and muted backgrounds, drawing attention without alarm. They fit naturally into the restrained aesthetic. -
- -
- Important: When something requires more attention, accent-colored borders provide emphasis while maintaining the system's soft, approachable character. -
-
- - -
-

Naughty Little Whispers

-

- Where information reveals itself through gentle curiosity -

-
- -
- - diff --git a/DumperCan/UI Style References/prismatic-storm-dragon_style_reference.html b/DumperCan/UI Style References/prismatic-storm-dragon_style_reference.html deleted file mode 100644 index 001ada7..0000000 --- a/DumperCan/UI Style References/prismatic-storm-dragon_style_reference.html +++ /dev/null @@ -1,835 +0,0 @@ - - - - - - Prismatic Storm Dragon | Design System Documentation - - - - - - -
- - -
-

Prismatic Storm Dragon

-

- A design system where depth emerges from chromatic light -

-
- -
- - -
-
-

Distinctive Choice: Multi-Layer Chromatic Depth

- -

This design system makes one bold distinctive choice that defines its visual character. Rather than creating depth through traditional gray drop shadows, we use multi-layer chromatic depth. This technique stacks multiple colored box-shadows in complementary hues, creating a prismatic effect that suggests both technical precision and elemental power.

- -

The approach draws from split-complementary color theory. Our primary color is violet, positioned at approximately 270 degrees on the color wheel. The split complements are red-orange (at approximately 30 degrees) and cyan (at approximately 180 degrees). When these colors layer with slight offsets, they create a chromatic aberration effect similar to what you might see in optical phenomena like light refracting through storm clouds or shimmering across dragon scales.

- -

The Psychology of Layered Color

- -

Traditional drop shadows use neutral gray or black with transparency, creating depth through luminosity alone. This works effectively but feels flat and utilitarian. Chromatic depth adds another dimension by introducing color relationships. The violet-red-cyan trinity creates visual tension and harmony simultaneously. Violet and cyan are cool colors that recede visually, while red-orange advances, creating a push-pull effect that makes surfaces feel more dimensional.

- -

The effect also carries symbolic weight. Prismatic light has been associated with power and magic across cultures, from rainbow serpents in indigenous Australian mythology to the aurora borealis in northern European folklore. Dragons, traditionally depicted with iridescent scales that shift in color, embody this prismatic quality. By building this chromatic layering into the core design system, we create an aesthetic that feels both modern and mythologically resonant.

-
-
- - -
-

The Chromatic System in Action

- -
-
-
Standard
-

- Basic cards use subtle chromatic layers. Notice the slight red shift to the bottom-right and cyan shift to the top-left, creating gentle dimensionality. -

-
- -
-
Elevated
-

- Elevated cards intensify the effect with larger offsets and more saturated colors, creating stronger separation from the background. -

-
- -
-
Powerful
-

- Powerful cards maximize the chromatic effect and add a subtle breathing animation, suggesting contained energy. Watch it pulse. -

-
-
- -
-

Technical Implementation

-

The chromatic depth effect is achieved through carefully ordered box-shadows. Each shadow serves a specific purpose in building the overall effect. Understanding the layering helps you implement and customize the technique.

- - 
/* Chromatic depth anatomy */
-box-shadow: 
-    /* Inner glow: defines the object's edge */
-    0 0 0 1px var(--violet-900),
-    
-    /* Color shifts: create the prismatic effect */
-    1px 1px 0 var(--red-900),      /* Red shifts down-right */
-    -1px -1px 0 var(--cyan-900),   /* Cyan shifts up-left */
-    
-    /* Colored diffusion: depth and atmosphere */
-    2px 4px 8px rgba(168, 85, 247, 0.15),   /* Violet depth */
-    -2px -2px 6px rgba(6, 182, 212, 0.1);   /* Cyan ambient light */
- -

The order matters significantly. Shadows are rendered from last to first in the list, meaning the bottom shadow appears on top. We start with the inner glow to define edges, then add the chromatic shifts, and finally layer the diffused colored shadows that create ambient atmosphere.

-
-
- -
- - -
-

Color Palette

- -
-

The color system is built on split-complementary harmony. Violet serves as the primary power color, anchoring the palette. Red-orange and cyan split the complement, creating dynamic tension. Gold adds warmth and emphasizes important elements without fighting for attention.

-
- -
-
-

Violet Family

-
-
-
-
Violet 300
- #c084fc -

Primary headings, key interactions

-
-
-
-
-
-
Violet 500
- #a855f7 -

Interactive elements, borders

-
-
-
-
-
-
Violet 700
- #7e22ce -

Strong accents, depth layers

-
-
-
- -
-

Complementary Colors

-
-
-
-
Red 500
- #f43f5e -

Heat, intensity, chromatic shift

-
-
-
-
-
-
Cyan 500
- #06b6d4 -

Cool energy, secondary interactions

-
-
-
-
-
-
Gold 500
- #eab308 -

Emphasis, prismatic accent

-
-
-
-
-
- -
- - -
-

Component Library

- -
-
-

Interactive Elements

- - -

- Buttons inherit the chromatic depth effect, with enhanced layers appearing on hover. The interaction is subtle but satisfying, providing tactile feedback through visual shifts. -

-
- -
-

Status Indicators

- Power - Energy - Prismatic -

- Badges use minimal chromatic effects to avoid visual clutter, focusing on clear categorical communication through color and typography. -

-
-
- -
-

Data Presentation

-

Tables maintain the chromatic vocabulary through colored borders and subtle background treatments.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ColorFunctionChromatic Role
VioletPrimary powerAnchors the palette, creates foundation
Red-OrangeHeat & intensityWarm shift, creates forward motion
CyanCool energyCold shift, creates receding depth
GoldAccentPrismatic highlight, draws focus
-
-
- -
- - -
-

Implementation Guide

- -
-

Creating Chromatic Depth

- -

The chromatic depth effect requires understanding color relationships and shadow layering. While it may seem complex at first, the pattern becomes intuitive once you grasp the underlying principles.

- -

Step One: Choose Your Colors

-

Select a primary color and identify its split complements. This creates a triad with built-in tension and harmony. For this system, violet (270°) pairs with red-orange (30°) and cyan (180°). These colors are far enough apart to create contrast but close enough to feel cohesive.

- -

Step Two: Layer Your Shadows

-

Build the effect in layers, starting with edge definition and ending with atmospheric glow. Each layer serves a specific purpose. The inner glow provides crisp edges. The chromatic shifts create the prismatic aberration. The colored diffusion adds depth and atmosphere.

- -

Step Three: Balance the Intensity

-

Not every element needs maximum chromatic depth. Use the effect strategically to create hierarchy. Standard cards use subtle shifts. Elevated cards intensify the effect. Powerful elements maximize it and may add animation.

- -
- Design Principle: The chromatic depth effect works best when it feels inherent to the design rather than applied as decoration. Build it into your core card and surface components, then vary the intensity based on hierarchy and importance. -
-
- -
-

Animation Philosophy

- -

This system embraces restraint in animation. Movement exists to communicate state changes or draw attention to important interactions, not to create spectacle. The powerful card pulse animation demonstrates this principle. It breathes slowly, taking four seconds for a complete cycle. The effect is almost subliminal—you might not consciously notice it, but it registers as aliveness and contained power.

- -

When implementing animations, favor subtle changes in shadow depth, small translations, or gentle opacity shifts over dramatic transformations. The goal is to enhance the chromatic depth system, not compete with it. Let the layered colors do the heavy visual lifting while animations provide gentle accents.

-
-
- - -
-

Alert Components

- -
- Information: Informational alerts use cyan as their primary color, creating calm, approachable messaging with subtle chromatic reinforcement along the border. -
- -
- Power Notice: Important alerts emphasize the full chromatic depth effect, using violet as the primary color with red and cyan shifts creating urgency through visual weight rather than alarming color choices. -
-
- - -
-

Prismatic Storm Dragon

-

- Where complementary colors layer into elemental depth -

-
- -
- - diff --git a/DumperCan/UI Style References/solarpunk-deep-jungle_style_reference.html b/DumperCan/UI Style References/solarpunk-deep-jungle_style_reference.html deleted file mode 100644 index 00e381d..0000000 --- a/DumperCan/UI Style References/solarpunk-deep-jungle_style_reference.html +++ /dev/null @@ -1,627 +0,0 @@ - - - - - - - Solarpunk Deep Jungle Design System - - - - - - -
- -
-

Solarpunk Deep Jungle

-

Mysterious Growth | Bioluminescent Tech | Shadow Ecology

-
- -
- - -
-
-

The Mystery of Deep Growth

-

Solarpunk Deep Jungle explores sustainable technology through the lens of shadow ecology and bioluminescence. This design system channels the enigmatic beauty of Earth's oldest forests, where life thrives in darkness through glowing fungi, phosphorescent moss, and hidden networks.

-

Here, technology doesn't dominate nature—it whispers, glows, and grows alongside it in the fertile darkness.

-
-
- - -
-

Shadow Spectrum

-
-
-

Bioluminescent

- #6fd98a -
-
-

Deep Emerald

- #3d9d5f -
-
-

Amber Resin

- #d8a558 -
-
-

Bioluminescent Cyan

- #58c0a8 -
-
-

Night Orchid

- #9d6db8 -
-
-

Ancient Moss

- #6d8d5d -
-
-

Shadow Green

- #2a7d4a -
-
-

Deep Purple

- #7d4d98 -
-
-
- -
- - -
-

Bioluminescent Actions

-
-
-

Glow & Amber

- - -
-
-

Cyan & Orchid

- - -
-
-
- - -
-

Shadow Badges

-
- Glowing - Ancient - Preserved - Flowing - Mysterious -
-
- -
- - -
-

Shadow Signals

-
- Bioluminescence Detected! Underground mycelium network active and expanding. -
-
- Energy Storage: Amber capacitors at 95% - stable for weeks. -
-
- Water Network: Underground aquifer systems flowing optimally. -
-
- - -
-

Design Philosophy

-
-

Shadow Ecology Principles

-
    -
  • Bioluminescent Accents: Glows and shadows mimic natural light sources
    • -
  • Rich Darkness: Deep backgrounds create contrast and mystery
    • -
  • Organic Irregularity: Asymmetric borders follow root patterns
    • -
  • Layered Transparency: Multiple depth levels suggest underground networks
    • -
  • Shadow Technology: Tech that thrives in darkness, not despite it
    • -
-
-
- - -
-

Solarpunk Deep Jungle Style Complete

-

In the darkness, sustainable life glows brightest 🌿✨

-
-
- - diff --git a/DumperCan/UI Style References/solarpunk-rainforest_style_reference.html b/DumperCan/UI Style References/solarpunk-rainforest_style_reference.html deleted file mode 100644 index 29538ec..0000000 --- a/DumperCan/UI Style References/solarpunk-rainforest_style_reference.html +++ /dev/null @@ -1,601 +0,0 @@ - - - - - - Solarpunk Rainforest Design System - - - - - - -
- -
-

Solarpunk Rainforest

-

Lush Abundance | Tropical Vitality | Living Architecture

-
- -
- - -
-
-

Vibrant Tropical Sustainability

-

Solarpunk Rainforest bursts with saturated life and tropical abundance. This design system channels the explosive biodiversity of Earth's most vital ecosystems, featuring vivid greens, orchid purples, bird-of-paradise oranges, and waterfall blues.

-

Every pixel pulses with photosynthetic energy—this is design that grows, breathes, and thrives.

-
-
- - -
-

Biodiversity Palette

-
-
-

Canopy Green

- #4ecf5d -
-
-

Tropical Orchid

- #c558d9 -
-
-

Bird of Paradise

- #ff7f3f -
-
-

Waterfall Mist

- #3fbfaf -
-
-

Young Fern

- #88e088 -
-
-

Toucan Beak

- #ffcf40 -
-
-

Deep Jungle

- #2db83c -
-
-

Deep Purple

- #a03fb8 -
-
-
- -
- - -
-

Action Buttons

-
-
-

Canopy & Paradise

- - -
-
-

Orchid & Water

- - -
-
-
- - -
-

Ecosystem Badges

-
- Thriving - Flowering - Vibrant - Flowing -
-
- -
- - -
-

Ecosystem Alerts

-
- Growth! Vertical gardens have reached full canopy coverage! -
-
- Energy Surge: Solar array producing 150% of daily needs. -
-
- Biodiversity: 47 species identified in rooftop habitat. -
-
- Hydration: Atmospheric water collectors at optimal capacity. -
-
- - -
-

Design Philosophy

-
-

Tropical Abundance Principles

-
    -
  • Saturated Vitality: High-chroma colors that pulse with life
    • -
  • Layered Depth: Multiple transparency levels mimic canopy layers
    • -
  • Organic Asymmetry: Borders follow natural growth patterns
    • -
  • Biodiversity Palette: Each color represents a different species niche
    • -
  • Living Shadows: Glows and shadows suggest dappled sunlight
    • -
-
-
- - -
-

Solarpunk Rainforest Style Complete

-

Where technology and nature grow as one 🌿🦜

-
-
- - diff --git a/DumperCan/UI Style References/solarpunk-sundae_style_reference.html b/DumperCan/UI Style References/solarpunk-sundae_style_reference.html deleted file mode 100644 index e55e6ce..0000000 --- a/DumperCan/UI Style References/solarpunk-sundae_style_reference.html +++ /dev/null @@ -1,581 +0,0 @@ - - - - - - Solarpunk Sundae Design System - - - - - - -
- -
-

Solarpunk Sundae

-

Sweet Sustainability | Pastel Ecology | Delicious Future

-
- -
- - -
-
-

A Sweet Take on Sustainable Design

-

Solarpunk Sundae combines ecological optimism with the delightful aesthetics of artisan desserts. This design system proves that sustainability can be sweet, featuring pastel palettes inspired by mint ice cream, peach sorbet, honeycomb, and berry compote.

-

Like the best desserts, this system is crafted with care—organic curves, soft shadows, and a color palette that's as nourishing as it is beautiful.

-
-
- - -
-

Flavor Palette

-
-
-

Mint Ice Cream

- #a8d8b9 -
-
-

Honeycomb

- #ffd68f -
-
-

Strawberry Cream

- #e8a8c8 -
-
-

Sky Sorbet

- #a8d8e8 -
-
-

Peach Sorbet

- #ffc4a3 -
-
-

Deeper Mint

- #88c098 -
-
-

Berry Compote

- #d888a8 -
-
-

Ocean Foam

- #88c0d8 -
-
-
- -
- - -
-

Button Flavors

-
-
-

Mint & Honey

- - -
-
-

Berry & Sky

- - -
-
-
- - -
-

Sweet Badges

-
- Organic - Sustainable - Handcrafted - Fresh -
-
- -
- - -
-

Flavor Alerts

-
- Success! Your sustainable garden is thriving with fresh mint and herbs. -
-
- Notice: Solar panels are generating 20% more energy than projected! -
-
- Update: Community berry harvest scheduled for this weekend. -
-
- Info: Rainwater collection system at 85% capacity. -
-
- - -
-

Design Philosophy

-
-

Sweet Sustainability Principles

-
    -
  • Pastel Optimism: Light, airy colors that evoke joy and possibility
    • -
  • Organic Curves: Generous border radius (8-28px) for softness
    • -
  • Dessert-Inspired Palette: Mint, honey, berry, peach, sky
    • -
  • High Contrast Text: Dark green text ensures readability on pastels
    • -
  • Artisan Details: Subtle shadows and backdrop blur for depth
    • -
-
-
- - -
-

Solarpunk Sundae Style Complete

-

Sustainable design never tasted so sweet 🍦🌱

-
-
- - diff --git a/DumperCan/UI Style References/solarpunk_style_reference.html b/DumperCan/UI Style References/solarpunk_style_reference.html deleted file mode 100644 index 18c55b3..0000000 --- a/DumperCan/UI Style References/solarpunk_style_reference.html +++ /dev/null @@ -1,1506 +0,0 @@ - - - - - - Solarpunk Design System - - - - - - -
- -
-

Solarpunk Design System

-

Technology in Harmony with Nature | Optimistic Future Design

-
- - -
-
-

Design Philosophy

-

This system embodies solarpunk principles: technology should enhance rather than replace nature. Every element reflects growth, sustainability, and hopeful human-centered progress. Unlike dystopian or antiseptic corporate aesthetics, this design celebrates optimism through informed action.

- -

Core Principles

-
    -
  • Flora (Growth): Living greens represent continuous development and natural systems
    • -
  • Sol (Energy): Solar golds symbolize renewable power and enlightened progress
    • -
  • Aqua (Flow): Water teals embody adaptability and resource consciousness
    • -
  • Terra (Foundation): Earth tones ground the system in material reality
    • -
-
-
- -
- - -
-

Photosynthetic Color Palette

-
-
- Flora 1 - #6faa5f -
-
- Flora 2 - #4a8b3f -
-
- Terra 1 - #c67d4a -
-
- Terra 2 - #a86840 -
-
- Sol 1 - #f4a841 -
-
- Sol 2 - #e89530 -
-
- Aqua 1 - #5ba3a3 -
-
- Aqua 2 - #3d8585 -
-
-

Inspired by photosynthesis, soil composition, sunlight spectrum, and water cycles. Each color family serves distinct semantic purposes while maintaining natural harmony.

-
- -
- - -
-

Typography System

-
-

H1: Tri-Color Nature Gradient

-

H2: Flora Green (Growth)

-

H3: Solar Gold (Energy)

-

H4: Aqua Teal (Flow)

-
H5: Terra Clay (Foundation)
-
H6: Light Primary
- -

Body text uses Space Grotesk with generous 1.75 line-height for accessibility and reading comfort. Strong emphasis uses living green, while emphasis uses solar gold. Outfit serves as the header font—geometric but warm, technical but human.

- -

Inline code snippets use aqua coloring to represent flowing information.

- - 
// Code reflects natural growth patterns
-function regenerate(ecosystem) {
-    return ecosystem.nurture().flourish();
-}
- -
- Blockquotes use flora green borders. "The future is not something we enter. The future is something we create." - Leonard I. Sweet -
-
-
- -
- - -
-

Action Components

-
-

Primary (Flora Growth)

- - -

Solar (Energy)

- - -

Aqua (Flow)

- - -

Outline (Transparent)

- - -

Buttons feature shimmer effect on hover, suggesting living energy. Organic 10px corners balance technical precision with natural flow.

-
-
- -
- - -
-

Card Components

-
-
-

Standard Growth

-

Default cards lift on hover, suggesting organic vitality and responsive design.

-
- -
-

Organic Form

-

Asymmetric corners (12px/18px/14px/20px) mimic natural growth patterns. Gradient border appears on hover.

-
- -
-
Terra Foundation
-

Earth-toned gradient background for grounded, material content.

-
-
-
- -
- - -
-

Data Structures

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ResourceRenewable %EfficiencyStatus
Solar Capacity94%HighGrowing
Wind Integration87%OptimalActive
Hydro Systems78%StableMonitoring
Biofuel Research45%DevelopingTesting
Total Renewable76% System-wide
-
-
- -
- - -
-

Input Systems

-
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- -
- - -
-
- - -
-
- - -
-
- - - -
-
- -
- - -
-

Growth Indicators

-
-

Native Progress Elements

- - - - -

Custom Progress Trackers

-
-
- Carbon Sequestration - 850 tons / 1000 target -
-
-
-
-
- -
-
- Community Adoption - 62 households / 100 -
-
-
-
-
- -

Progress bars feature shimmer animation suggesting active growth and living systems.

-
-
- -
- - -
-

Status Markers

-
-

- Thriving - Powered - Flowing - Grounded - Regenerating - Active -

- -

Semantic Applications

-

Status: Online Standby Offline

-

Tiers: Community Cooperative Commons

-
-
- -
- - -
-

Navigation Layers

-
-
-
- - - -
- -
-

Ecosystem Overview

-

Integrated systems working in harmony. Tabs use organic rounded corners and flora green indicators for active states.

- -
- -
-

Impact Metrics

-
    -
  • Energy Independence: 87%
    • -
  • Carbon Drawdown: 2,400 tons/year
    • -
  • Food Sovereignty: 64% local
    • -
  • Community Participation: 340 members
    • -
-
- -
-

Community Network

-

Collaborative governance and resource sharing.

-

12 Co-ops 45 Projects 340 Members

-
-
-
-
- -
- - -
-

Growth Timeline

-
-
-
-
-
-
Phase 1: Seeding
-

Community Formation

-

Initial outreach, vision alignment, and resource assessment. Foundation building.

-
-
- -
-
-
-
Phase 2: Sprouting
-

Infrastructure Development

-

Solar installation, water systems, community gardens. First visible growth.

-
-
- -
-
-
-
Phase 3: Flourishing
-

System Integration

-

Energy sharing networks, local food production, circular economy loops.

-
-
- -
-
-
-
Phase 4: Regenerating
-

Scaling & Replication

-

Knowledge sharing, network expansion, supporting new communities.

-
-
-
-
-
- -
- - -
-

Impact Metrics

-
-
-
94%
-
Renewable Energy
-
-
-
2.4K
-
Tons CO₂ Sequestered
-
-
-
340
-
Community Members
-
-
-
+76%
-
Local Food Production
-
-
-
- -
- - -
-

Growth Visualization

-
-

System Health Indicators

-
-
- Energy Independence - 87/100 -
-
-
-
-
- -
-
- Food Sovereignty - 64/100 -
-
-
-
-
- -
-
- Water Security - 78/100 -
-
-
-
-
- -
-
- Community Resilience - 92/100 -
-
-
-
-
-
-
- -
- - -
-

System Messages

- -
- Growth Update: Solar array expanded by 12 panels. Community capacity increased to 94kW. -
- -
- Energy Notice: Peak generation achieved. Surplus energy available for sharing. -
- -
- Water Systems: Rainwater harvesting targets exceeded. Reserve capacity at 120%. -
- -
- Maintenance: Composting system requires attention. Schedule cooperative work day. -
-
- -
- - -
-

Implementation Guide

- -
-

Philosophy → Practice

-

This system isn't merely aesthetic—it encodes values. Every rounded corner represents organic growth over rigid geometry. Gradient transitions mirror natural change. Shimmer effects suggest living systems.

- -

Border Radius Strategy

-
    -
  • Small (6px): Inputs, code blocks—functional elements
    • -
  • Medium (10px): Buttons, standard components—balanced
    • -
  • Large (16px): Cards, panels—welcoming spaces
    • -
  • Extra (24px): Headers, features—significant forms
    • -
  • Organic (asymmetric): Special cards—natural variation
    • -
-
- -
-
-

Color Semantics

-

Flora: Growth, success, primary actions

-

Sol: Energy, attention, active states

-

Aqua: Flow, information, adaptability

-

Terra: Foundation, stability, warnings

-
- -
-

Animation Principles

-

Use cubic-bezier(0.4, 0, 0.2, 1) for natural motion. Add shimmer effects to suggest vitality. Transitions should feel organic, never mechanical.

-
-
- -
-

Core Constraints

-
    -
  • Optimism required: Design choices should suggest hope and possibility
    • -
  • Nature-inspired: Colors from earth, typography with warmth
    • -
  • Organic curves: 6-24px range, asymmetric when appropriate
    • -
  • Living animations: Shimmer, pulse, flow—avoid mechanical motion
    • -
  • Semantic color: Each palette family has distinct meaning
    • -
  • Community-focused: Language emphasizes collective action
    • -
  • Fonts: Outfit (geometric-warm) + Space Grotesk (technical-human)
    • -
-
-
- - -
-

Solarpunk Design System Complete

-

Optimistic technology | Ecological harmony | Human-centered progress

-

For the future we choose to build together.

-
-
- - - - diff --git a/DumperCan/UI Style References/soviet-cyberpunk_style_reference.html b/DumperCan/UI Style References/soviet-cyberpunk_style_reference.html deleted file mode 100644 index 9356b72..0000000 --- a/DumperCan/UI Style References/soviet-cyberpunk_style_reference.html +++ /dev/null @@ -1,637 +0,0 @@ - - - - - - Soviet Cyberpunk Style Reference | Красный Неон - - - - - - -
- -
-

SOVIET CYBERPUNK

-

КРАСНЫЙ НЕОН | BRUTALIST FUTURE | CONSTRUCTIVIST CODE

-
- -
- - -
-
-

⚡ UNIQUE FEATURE: CRT SCAN LINES

-

This design system features animated CRT scan lines that continuously sweep across the entire screen, simulating old Soviet-era monitors and Cold War terminals.

-

The scan lines use a dual-layer approach: one layer animates vertically, while a static layer provides the baseline CRT texture. This creates an authentic retro-futuristic experience.

-

Notice the blinking cursor (█) after H1 headings and the arrow (▶) decorators on buttons—small details that enhance the terminal aesthetic.

-
-
- - -
-

NEON SPECTRUM

-
-
-

NEON RED

- #ff3c3c -
-
-

COLD CYAN

- #00ffff -
-
-

WARNING YELLOW

- #ffff00 -
-
-

SOVIET RED

- #cc0000 -
-
-

DARK TEAL

- #008b8b -
-
-

DARK CRIMSON

- #990000 -
-
-
- -
- - -
-

COMMAND BUTTONS

-
-
-

RED

- -
-
-

CYAN

- -
-
-

YELLOW

- -
-
-
- - -
-

STATUS BADGES

-
- ACTIVE - ONLINE - ALERT -
-
- -
- - -
-

SYSTEM MESSAGES

-
- PRIORITY ALERT: Central processing unit operating at maximum capacity. -
-
- SYSTEM INFO: Network connection established to collective mainframe. -
-
- CAUTION: Memory buffer approaching critical threshold. -
-
- - -
-

DESIGN PRINCIPLES

-
-

CONSTRUCTIVIST CODE MANIFESTO

-
    -
  • BRUTALIST GEOMETRY: Sharp angles, thick borders, constructivist precision
    • -
  • CRT AESTHETICS: Animated scan lines simulate Soviet-era terminals
    • -
  • NEON TRINITY: Red (revolution), Cyan (cold future), Yellow (warning)
    • -
  • MONOSPACE EVERYWHERE: Terminal-style typography throughout
    • -
  • UPPERCASE POWER: Command-line authority in every heading
    • -
  • SOVIET SYMBOLS: Hammer and sickle (☭), geometric blocks (■)
    • -
  • PROPAGANDA CARDS: Light backgrounds with heavy red borders
    • -
-
-
- - -
-

SOVIET CYBERPUNK COMPLETE

-

THE FUTURE WAS BUILT IN CONCRETE AND NEON ☭⚡

-
-
- - diff --git a/DumperCan/WAMEX/README.md b/DumperCan/WAMEX/README.md deleted file mode 100644 index cb20669..0000000 --- a/DumperCan/WAMEX/README.md +++ /dev/null @@ -1,60 +0,0 @@ -# wa.me Extractor — setup - -## Requirements - -Python 3.10+ (uses `match` syntax / union types in hints) - -### Install dependencies - -```bash -pip install beautifulsoup4 -``` - -`tkinter` ships with most Python installations on Linux. -If it's missing: -```bash -# Debian/Ubuntu -sudo apt install python3-tk - -# Arch -sudo pacman -S tk - -# Fedora -sudo dnf install python3-tkinter -``` - ---- - -## Run - -```bash -python wa_extractor.py -``` - ---- - -## Workflow - -1. In WhatsApp Web, open the pending requests panel. -2. Right-click the outer div containing all requests → **Inspect**. -3. In DevTools, right-click the `
` element → **Copy** → **Outer HTML**. -4. Paste into a `.txt` file (or directly into the left pane of the app). -5. Hit **⚡ extract**. -6. Adjust batch size if needed (default 20 — good for spam-safe manual invites). -7. **Save .txt** or **Copy all** to share with your community admins. - ---- - -## Output format - -``` -https://wa.me/+27821234567 -https://wa.me/+27831234567 -... (20 links) - -──────────────────────────────────────── -https://wa.me/+27841234567 -... -``` - -Each block = one admin's batch for the day. diff --git a/DumperCan/appimage-installation-guide.md b/DumperCan/appimage-installation-guide.md deleted file mode 100644 index cab7f69..0000000 --- a/DumperCan/appimage-installation-guide.md +++ /dev/null @@ -1,644 +0,0 @@ -# Complete AppImage Installation Guide -## Universal Methods for Any AppImage Application - -## 📦 What is AppImage? - -AppImage is a portable application format for Linux. Think of it like a Windows `.exe` - it's a single file that contains everything the application needs to run. - -**Key Features:** -- ✅ **No installation required** - just download and run -- ✅ **No root/sudo needed** - runs as regular user -- ✅ **Self-contained** - includes all dependencies -- ✅ **Portable** - works across different Linux distributions -- ✅ **No system pollution** - doesn't scatter files everywhere -- ✅ **Easy to remove** - just delete the file - ---- - -## 🚀 Method 1: Quick & Dirty (Just Run It) - -The simplest way - no integration with system menus. - -### Step 1: Download AppImage -```bash -# Example: Download to Downloads folder -cd ~/Downloads -wget https://example.com/app-name.AppImage - -# Or use your browser to download -``` - -### Step 2: Make Executable -```bash -chmod +x ~/Downloads/app-name.AppImage -``` - -### Step 3: Run It -```bash -./app-name.AppImage -``` - -**That's it!** The app runs directly from the file. - -**Pros:** -- Immediate - works in 3 commands -- No system changes -- Easy to test applications - -**Cons:** -- Not in application menu -- Must run from terminal or file manager -- No desktop integration -- Stays in Downloads folder - ---- - -## 🏠 Method 2: Proper Installation (Recommended) - -Integrate AppImage into your system like a native application. - -### Step 1: Create AppImages Directory -```bash -# Standard location for user applications -mkdir -p ~/Applications - -# Alternative locations: -# ~/.local/bin/ (for command-line tools) -# ~/.local/share/apps/ (alternative app directory) -``` - -### Step 2: Move AppImage to Applications -```bash -# Move from Downloads -mv ~/Downloads/app-name.AppImage ~/Applications/ - -# Make executable -chmod +x ~/Applications/app-name.AppImage -``` - -### Step 3: Create Desktop Entry - -**Automatic Method (if AppImage supports it):** -```bash -# Some AppImages can integrate themselves -cd ~/Applications -./app-name.AppImage --appimage-integrate - -# Or -./app-name.AppImage --install -``` - -**Manual Method (universal - works for any AppImage):** - -```bash -# Create desktop entry file -nano ~/.local/share/applications/app-name.desktop -``` - -**Template - Copy and customize:** -```ini -[Desktop Entry] -Type=Application -Name=Application Name -Comment=Brief description of the app -Icon=/home/jl-kruger/Applications/app-name-icon.png -Exec=/home/jl-kruger/Applications/app-name.AppImage -Terminal=false -Categories=Utility; -# Common categories: Network;WebBrowser;Development;Graphics;AudioVideo;Office;Utility;Game; -``` - -**Make executable and update database:** -```bash -chmod +x ~/.local/share/applications/app-name.desktop -update-desktop-database ~/.local/share/applications/ -``` - -### Step 4: Extract Icon (Optional) - -Many AppImages contain their own icon. Extract it: - -```bash -# Extract AppImage contents to temporary directory -cd ~/Applications -./app-name.AppImage --appimage-extract - -# Icons are usually in: squashfs-root/usr/share/icons/ or squashfs-root/ -# Find the icon -find squashfs-root -name "*.png" -o -name "*.svg" | grep -i icon - -# Copy icon to a permanent location -cp squashfs-root/path/to/icon.png ~/Applications/app-name-icon.png - -# Update desktop entry with correct icon path -nano ~/.local/share/applications/app-name.desktop -# Set: Icon=/home/jl-kruger/Applications/app-name-icon.png - -# Clean up extracted files -rm -rf squashfs-root -``` - -**Icon Alternatives:** -```bash -# Use system icon (if available) -Icon=application-default-icon - -# Use absolute path -Icon=/home/jl-kruger/Applications/app-icon.png - -# Use icon name (if installed in system) -Icon=app-name -``` - ---- - -## 🤖 Method 3: AppImageLauncher (Automated Integration) - -AppImageLauncher automatically integrates AppImages when you first run them. - -### Install AppImageLauncher - -**Ubuntu/Mint/Debian:** -```bash -# Download from GitHub -cd ~/Downloads -wget https://github.com/TheAssassin/AppImageLauncher/releases/download/v2.2.0/appimagelauncher_2.2.0-travis995.0f91801.bionic_amd64.deb - -# Install -sudo apt install ./appimagelauncher_*.deb -``` - -**Or build from source:** -```bash -sudo apt install cmake g++ libqt5core5a qtbase5-dev libcairo2-dev git -git clone https://github.com/TheAssassin/AppImageLauncher.git -cd AppImageLauncher -mkdir build && cd build -cmake .. -DCMAKE_INSTALL_PREFIX=/usr -make -sudo make install -``` - -### How AppImageLauncher Works - -After installation: - -1. **Double-click any AppImage** in file manager -2. AppImageLauncher prompts: "Integrate and run" or "Run once" -3. Choose **"Integrate and run"** -4. AppImage is: - - Moved to `~/Applications/` - - Made executable - - Desktop entry created automatically - - Icon extracted and set up - - Appears in application menu - -**Benefits:** -- Fully automated process -- Consistent AppImage management -- Update checking built-in -- Easy removal through GUI - ---- - -## 📝 Complete Desktop Entry Reference - -### Minimal Desktop Entry -```ini -[Desktop Entry] -Type=Application -Name=MyApp -Exec=/home/jl-kruger/Applications/myapp.AppImage -``` - -### Full-Featured Desktop Entry -```ini -[Desktop Entry] -# Required fields -Type=Application -Name=Application Name -Exec=/home/jl-kruger/Applications/app-name.AppImage %u - -# Recommended fields -Comment=What this application does -Icon=/home/jl-kruger/Applications/app-icon.png -Terminal=false -Categories=Utility;Development; - -# Optional fields -GenericName=Generic description -Keywords=search;terms;keywords; -StartupNotify=true -StartupWMClass=app-window-class -MimeType=text/plain;text/html; - -# For terminal applications -# Terminal=true - -# Launch in specific directory -# Path=/home/jl-kruger/workspace - -# Multiple actions (right-click menu) -Actions=NewWindow;SafeMode; - -[Desktop Action NewWindow] -Name=New Window -Exec=/home/jl-kruger/Applications/app-name.AppImage --new-window - -[Desktop Action SafeMode] -Name=Safe Mode -Exec=/home/jl-kruger/Applications/app-name.AppImage --safe-mode -``` - -### Common Categories -``` -# Desktop/GUI applications -Utility - System utilities -Development - IDEs, editors, dev tools -Graphics - Image editors, viewers -AudioVideo - Media players, editors -Network - Browsers, chat, email -Office - Word processors, spreadsheets -Game - Games -Education - Educational software -Science - Scientific applications - -# System/Tools -System - System administration -Settings - Configuration tools -FileManager - File managers -TerminalEmulator - Terminal applications - -# Multiple categories (semicolon separated) -Categories=Development;TextEditor; -``` - ---- - -## 🔄 Updating AppImages - -AppImages don't auto-update. You need to manually update them. - -### Manual Update Process - -```bash -# 1. Download new version -cd ~/Downloads -wget https://example.com/app-name-new-version.AppImage - -# 2. Backup old version (optional) -mv ~/Applications/app-name.AppImage ~/Applications/app-name.AppImage.old - -# 3. Install new version -mv ~/Downloads/app-name-new-version.AppImage ~/Applications/app-name.AppImage -chmod +x ~/Applications/app-name.AppImage - -# 4. Test new version -~/Applications/app-name.AppImage - -# 5. Remove old version once confirmed working -rm ~/Applications/app-name.AppImage.old -``` - -**Note:** Desktop entry continues to work since the filename stays the same. - -### Update Checking Tools - -**AppImageUpdate:** -```bash -# Download AppImageUpdate -wget https://github.com/AppImage/AppImageUpdate/releases/download/continuous/AppImageUpdate-x86_64.AppImage -chmod +x AppImageUpdate-x86_64.AppImage - -# Update an AppImage -./AppImageUpdate-x86_64.AppImage ~/Applications/app-name.AppImage -``` - -**AppImageLauncher** (if installed): -- Right-click AppImage in file manager -- Select "Update" -- Automatic update if available - ---- - -## 🗑️ Removing AppImages - -### Complete Removal - -```bash -# 1. Remove the AppImage file -rm ~/Applications/app-name.AppImage - -# 2. Remove desktop entry -rm ~/.local/share/applications/app-name.desktop - -# 3. Update desktop database -update-desktop-database ~/.local/share/applications/ - -# 4. Remove icon (if extracted separately) -rm ~/Applications/app-name-icon.png - -# 5. Remove app config/cache (varies by app) -rm -rf ~/.config/app-name -rm -rf ~/.local/share/app-name -rm -rf ~/.cache/app-name -``` - -**That's it!** No leftover system files, dependencies, or registry entries. - ---- - -## 🔧 Troubleshooting - -### Issue: "Permission denied" when running AppImage - -```bash -# Make executable -chmod +x app-name.AppImage - -# If still fails, check if file is corrupted -file app-name.AppImage -# Should say: "ELF 64-bit LSB executable" -``` - -### Issue: FUSE errors - "AppImages require FUSE to run" - -```bash -# Install FUSE -sudo apt install fuse libfuse2 - -# Enable user namespaces -sudo sysctl -w kernel.unprivileged_userns_clone=1 -echo "kernel.unprivileged_userns_clone=1" | sudo tee -a /etc/sysctl.conf - -# Or extract and run without FUSE -./app-name.AppImage --appimage-extract -./squashfs-root/AppRun -``` - -### Issue: AppImage won't run - missing libraries - -```bash -# Check what's missing -./app-name.AppImage -# Error messages will show missing libraries - -# Install common dependencies -sudo apt install libfuse2 libgl1 libxcb1 - -# Check required libraries -ldd app-name.AppImage -``` - -### Issue: Desktop entry not appearing in menu - -```bash -# Validate desktop entry -desktop-file-validate ~/.local/share/applications/app-name.desktop - -# Update database -update-desktop-database ~/.local/share/applications/ - -# Restart desktop environment -xfce4-panel -r - -# Or logout/login -``` - -### Issue: Icon not showing - -```bash -# Use absolute path for icon -Icon=/home/jl-kruger/Applications/app-icon.png - -# Not relative path -# Icon=~/Applications/app-icon.png ❌ - -# Verify icon exists -ls -lh /home/jl-kruger/Applications/app-icon.png -``` - -### Issue: AppImage is slow to start - -```bash -# Some AppImages extract on each run -# Solution: Extract once and run from extracted location - -./app-name.AppImage --appimage-extract -chmod +x squashfs-root/AppRun - -# Update desktop entry to point to AppRun -Exec=/home/jl-kruger/Applications/squashfs-root/AppRun -``` - ---- - -## 📊 AppImage vs Other Formats - -| Feature | AppImage | Flatpak | Snap | Native (.deb) | -|---------|----------|---------|------|---------------| -| **No root needed** | ✅ | ❌ | ❌ | ❌ | -| **Single file** | ✅ | ❌ | ❌ | ❌ | -| **System integration** | Manual | Automatic | Automatic | Automatic | -| **Auto-updates** | ❌ | ✅ | ✅ | ✅ | -| **Sandboxing** | ❌ | ✅ | ✅ | ❌ | -| **Disk space** | Efficient | High | High | Efficient | -| **Startup speed** | Fast | Slow | Slow | Fast | -| **Portability** | ✅ | ❌ | ❌ | ❌ | - ---- - -## 🎯 Best Practices - -### Directory Structure - -``` -~/Applications/ - ├── logseq.AppImage - ├── logseq-icon.png - ├── obsidian.AppImage - ├── obsidian-icon.png - ├── postman.AppImage - └── postman-icon.png - -~/.local/share/applications/ - ├── logseq.desktop - ├── obsidian.desktop - └── postman.desktop -``` - -### Naming Convention - -Use consistent, lowercase names with hyphens: -```bash -# Good -app-name.AppImage -app-name-icon.png -app-name.desktop - -# Avoid -AppName.AppImage -app_name.AppImage -ApplicationName.AppImage -``` - -### Version Management - -Include version in backup: -```bash -# Before updating -mv ~/Applications/app-name.AppImage ~/Applications/app-name-v1.2.3.AppImage - -# Install new version -mv ~/Downloads/app-name-v1.3.0.AppImage ~/Applications/app-name.AppImage -``` - -### Documentation - -Keep notes on installed AppImages: -```bash -# Create manifest -nano ~/Applications/README.md -``` - -```markdown -# Installed AppImages - -## Logseq v0.10.9 -- Source: https://github.com/logseq/logseq/releases -- Installed: 2025-10-24 -- Purpose: Knowledge management - -## Obsidian v1.5.3 -- Source: https://obsidian.md/ -- Installed: 2025-10-20 -- Purpose: Note-taking -``` - ---- - -## 🔍 Finding AppImages - -### Official Sources - -1. **Project's GitHub Releases Page** - - Most reliable source - - Example: `https://github.com/username/project/releases` - -2. **Official Website** - - Often has download page with AppImage option - - Look for "Download for Linux" - -3. **AppImageHub** (archived) - - Historical catalog: https://www.appimagehub.com/ - -### Safety Check - -```bash -# Verify checksum (if provided) -sha256sum app-name.AppImage -# Compare with official checksum - -# Check file type -file app-name.AppImage -# Should be: ELF 64-bit LSB executable - -# Scan with system tools -clamscan app-name.AppImage -``` - ---- - -## 📚 Quick Reference Commands - -```bash -# Make executable -chmod +x app-name.AppImage - -# Run AppImage -./app-name.AppImage - -# Extract contents -./app-name.AppImage --appimage-extract - -# Help (some AppImages) -./app-name.AppImage --appimage-help - -# Get AppImage info -./app-name.AppImage --appimage-version - -# Create desktop entry -nano ~/.local/share/applications/app-name.desktop - -# Update desktop database -update-desktop-database ~/.local/share/applications/ - -# Validate desktop entry -desktop-file-validate ~/.local/share/applications/app-name.desktop - -# Test launch from desktop entry -gtk-launch app-name -``` - ---- - -## 🎓 Real-World Example: Installing Logseq - -**Complete walkthrough from download to desktop integration:** - -```bash -# 1. Download -cd ~/Downloads -wget https://github.com/logseq/logseq/releases/download/0.10.9/Logseq-linux-x64-0.10.9.AppImage - -# 2. Create applications directory -mkdir -p ~/Applications - -# 3. Move and rename -mv Logseq-linux-x64-0.10.9.AppImage ~/Applications/logseq.AppImage - -# 4. Make executable -chmod +x ~/Applications/logseq.AppImage - -# 5. Extract icon -cd ~/Applications -./logseq.AppImage --appimage-extract -cp squashfs-root/logseq.png ~/Applications/logseq-icon.png -rm -rf squashfs-root - -# 6. Create desktop entry -cat > ~/.local/share/applications/logseq.desktop << 'EOF' -[Desktop Entry] -Type=Application -Name=Logseq -Comment=A privacy-first, open-source knowledge base -Icon=/home/jl-kruger/Applications/logseq-icon.png -Exec=/home/jl-kruger/Applications/logseq.AppImage -Terminal=false -Categories=Office;Utility; -StartupNotify=true -EOF - -# 7. Make desktop entry executable -chmod +x ~/.local/share/applications/logseq.desktop - -# 8. Update desktop database -update-desktop-database ~/.local/share/applications/ - -# 9. Launch! -gtk-launch logseq -# Or find "Logseq" in application menu -``` - ---- - -## 📖 Additional Resources - -- **AppImage Documentation:** https://docs.appimage.org/ -- **Desktop Entry Specification:** https://specifications.freedesktop.org/desktop-entry-spec/ -- **Icon Theme Specification:** https://specifications.freedesktop.org/icon-theme-spec/ -- **AppImageLauncher:** https://github.com/TheAssassin/AppImageLauncher - ---- - -**Last Updated:** October 2025 | Linux Mint 22.2 Xfce diff --git a/DumperCan/appimage-quick-reference.md b/DumperCan/appimage-quick-reference.md deleted file mode 100644 index 055add7..0000000 --- a/DumperCan/appimage-quick-reference.md +++ /dev/null @@ -1,353 +0,0 @@ -# AppImage Quick Reference Card - -## 🚀 Basic Operations - -### Download and Run (Quick Test) -```bash -# Make executable -chmod +x app-name.AppImage - -# Run it -./app-name.AppImage -``` - ---- - -## 🏠 Proper Installation - -### Using the Automated Script -```bash -# Simple - script will prompt for details -bash install-appimage.sh ~/Downloads/app-name.AppImage - -# With all options -bash install-appimage.sh ~/Downloads/app-name.AppImage my-app-name Office -``` - -### Manual Installation -```bash -# 1. Move to Applications -mkdir -p ~/Applications -mv ~/Downloads/app-name.AppImage ~/Applications/ -chmod +x ~/Applications/app-name.AppImage - -# 2. Create desktop entry -nano ~/.local/share/applications/app-name.desktop - -# 3. Paste this template (edit as needed): -[Desktop Entry] -Type=Application -Name=App Name -Comment=Brief description -Icon=/home/jl-kruger/Applications/app-icon.png -Exec=/home/jl-kruger/Applications/app-name.AppImage -Terminal=false -Categories=Utility; - -# 4. Update database -chmod +x ~/.local/share/applications/app-name.desktop -update-desktop-database ~/.local/share/applications/ -``` - ---- - -## 🎨 Extract Icon from AppImage - -```bash -# Extract AppImage contents -./app-name.AppImage --appimage-extract - -# Find icon -find squashfs-root -name "*.png" | grep -i icon - -# Copy icon -cp squashfs-root/path/to/icon.png ~/Applications/app-icon.png - -# Clean up -rm -rf squashfs-root -``` - ---- - -## 🔄 Update AppImage - -```bash -# 1. Download new version -cd ~/Downloads - -# 2. Backup current version -mv ~/Applications/app-name.AppImage ~/Applications/app-name.AppImage.old - -# 3. Install new version -mv ~/Downloads/app-name-new.AppImage ~/Applications/app-name.AppImage -chmod +x ~/Applications/app-name.AppImage - -# 4. Test -~/Applications/app-name.AppImage - -# 5. Remove backup once confirmed -rm ~/Applications/app-name.AppImage.old -``` - ---- - -## 🗑️ Remove AppImage - -```bash -# Complete removal -rm ~/Applications/app-name.AppImage -rm ~/Applications/app-icon.png -rm ~/.local/share/applications/app-name.desktop -update-desktop-database ~/.local/share/applications/ - -# Also remove app data (if exists) -rm -rf ~/.config/app-name -rm -rf ~/.local/share/app-name -``` - ---- - -## 🔧 Troubleshooting - -### Permission Denied -```bash -chmod +x app-name.AppImage -``` - -### FUSE Error -```bash -# Install FUSE -sudo apt install fuse libfuse2 - -# Or run without FUSE -./app-name.AppImage --appimage-extract -./squashfs-root/AppRun -``` - -### Desktop Entry Not Appearing -```bash -# Validate -desktop-file-validate ~/.local/share/applications/app-name.desktop - -# Update database -update-desktop-database ~/.local/share/applications/ - -# Restart panel -xfce4-panel -r -``` - -### Missing Libraries -```bash -# Check what's missing -ldd app-name.AppImage - -# Install common deps -sudo apt install libfuse2 libgl1 libxcb1 -``` - ---- - -## 📝 Desktop Entry Template - -### Basic -```ini -[Desktop Entry] -Type=Application -Name=App Name -Exec=/home/jl-kruger/Applications/app-name.AppImage -Icon=/home/jl-kruger/Applications/app-icon.png -Terminal=false -Categories=Utility; -``` - -### With Multiple Actions -```ini -[Desktop Entry] -Type=Application -Name=App Name -Exec=/home/jl-kruger/Applications/app-name.AppImage -Icon=/home/jl-kruger/Applications/app-icon.png -Terminal=false -Categories=Development; -Actions=SafeMode;Debug; - -[Desktop Action SafeMode] -Name=Safe Mode -Exec=/home/jl-kruger/Applications/app-name.AppImage --safe-mode - -[Desktop Action Debug] -Name=Debug Mode -Exec=/home/jl-kruger/Applications/app-name.AppImage --debug -``` - ---- - -## 📁 Recommended Directory Structure - -``` -~/Applications/ - ├── app1.AppImage - ├── app1-icon.png - ├── app2.AppImage - ├── app2-icon.png - └── README.md # Document what's installed - -~/.local/share/applications/ - ├── app1.desktop - └── app2.desktop -``` - ---- - -## 🎯 Common AppImage Commands - -```bash -# Get help (if supported) -./app-name.AppImage --appimage-help - -# Get version -./app-name.AppImage --appimage-version - -# Extract contents -./app-name.AppImage --appimage-extract - -# Self-integrate (if supported) -./app-name.AppImage --appimage-integrate - -# Check file type -file app-name.AppImage -# Should show: ELF 64-bit LSB executable - -# Test launch from desktop entry -gtk-launch app-name - -# Check size -du -h app-name.AppImage -``` - ---- - -## 📊 Categories Reference - -Common categories for desktop entries: - -- **AudioVideo** - Media players, music apps -- **Development** - IDEs, text editors, dev tools -- **Education** - Learning software -- **Game** - Games -- **Graphics** - Image editors, viewers, design tools -- **Network** - Browsers, email, chat -- **Office** - Word processors, spreadsheets, notes -- **Science** - Scientific applications -- **Settings** - Configuration tools -- **System** - System tools -- **Utility** - General utilities (default) - -Use semicolon to separate multiple: -```ini -Categories=Development;TextEditor;Utility; -``` - ---- - -## 🔍 Find Installed AppImages - -```bash -# List all AppImages in Applications -ls -lh ~/Applications/*.AppImage - -# Find all desktop entries -ls ~/.local/share/applications/*.desktop - -# Search for specific app -find ~/Applications -name "*app-name*.AppImage" - -# Check which apps are in menu -grep -l "Exec.*AppImage" ~/.local/share/applications/*.desktop -``` - ---- - -## 💡 Pro Tips - -### Create Launcher Alias -```bash -# Add to ~/.bashrc -alias myapp='~/Applications/app-name.AppImage' - -# Use it -myapp -``` - -### Version in Filename -```bash -# Keep track of versions -mv app.AppImage app-v1.2.3.AppImage - -# Symlink to latest -ln -s app-v1.2.3.AppImage app.AppImage - -# Desktop entry points to symlink -Exec=/home/jl-kruger/Applications/app.AppImage -``` - -### Batch Install Multiple AppImages -```bash -for appimage in ~/Downloads/*.AppImage; do - bash install-appimage.sh "$appimage" -done -``` - ---- - -## 🛡️ Security Check - -```bash -# Verify file type -file app-name.AppImage - -# Check if downloaded correctly -sha256sum app-name.AppImage -# Compare with official checksum - -# Scan with ClamAV (if installed) -clamscan app-name.AppImage -``` - ---- - -## 🌐 Where to Find AppImages - -1. **Project GitHub Releases** - - `https://github.com/username/project/releases` - -2. **Official Website** - - Look for "Download for Linux" → AppImage option - -3. **Verify Source** - - Only download from official sources - - Check file integrity with checksums - ---- - -## 📞 Quick Help - -```bash -# Installation help -bash install-appimage.sh - -# Check if working -gtk-launch app-name - -# View desktop entry -cat ~/.local/share/applications/app-name.desktop - -# Validate desktop entry -desktop-file-validate ~/.local/share/applications/app-name.desktop -``` - ---- - -**Cheat Sheet Version:** 1.0 -**For:** Linux Mint 22.2 Xfce -**Date:** October 2025 diff --git a/DumperCan/dendritic_links_network_v23.html b/DumperCan/dendritic_links_network_v23.html deleted file mode 100755 index 6e1ffb7..0000000 --- a/DumperCan/dendritic_links_network_v23.html +++ /dev/null @@ -1,828 +0,0 @@ - - - - - - Dendritic Links Network - - - -
-

🌳 Dendritic Links Network

-

Your Browser Tabs, Visualized

-

- 🖱️ Drag to pan • 🔍 Scroll/Pinch to zoom • 🖱️ Right-drag to zoom • 👆 Click leaves to explore
- ⌨️ Keyboard: R = Reset • +/- = Zoom -

-
- -
- - - - -
- -
-
🌱 Click a button above to load your links!
-
- - - -
- Zoom: 100% -
- - - - - - - - - - - - \ No newline at end of file diff --git a/DumperCan/docker-cheatsheet-enhanced.html b/DumperCan/docker-cheatsheet-enhanced.html deleted file mode 100644 index f4c6897..0000000 --- a/DumperCan/docker-cheatsheet-enhanced.html +++ /dev/null @@ -1,1955 +0,0 @@ - - - - - - - - Docker Command Cheatsheet | Quick Reference - - - - - - - - - - - Skip to main content - -
- - - - - - - - - - - -
- - -
-

📦 Docker Basics

- -
-
💡 What is Docker?
-

Docker packages applications and their dependencies into containers - lightweight, portable units that run consistently across different environments. Think of containers as self-contained boxes that have everything an application needs to run.

-
- -

Key Concepts

- -
-
🧩 Core Components
-
    -
  • Image: A blueprint/template for containers (like a recipe)
    • -
  • Container: A running instance of an image (like a meal made from the recipe)
    • -
  • Volume: Persistent storage that survives container restarts
    • -
  • Network: How containers communicate with each other and the outside world
    • -
  • Docker Compose: Tool for defining multi-container applications
    • -
-
- -

Basic Commands

- -
-
Check Docker Version
-
Verify Docker is installed and see version info
-
- - 
docker --version
-docker version
-docker info
-
-
- -
-
Test Docker Installation
-
Run a test container to verify everything works
-
- - 
docker run hello-world
-
-
- -
-
Pull an Image
-
Download an image from Docker Hub
-
- - 
docker pull ubuntu:22.04
-docker pull nginx:latest
-
-
- -
-
Run a Container
-
Create and start a container from an image
-
- - 
# Basic run
-docker run nginx
-
-# Run with custom name
-docker run --name my-nginx nginx
-
-# Run in background (detached mode)
-docker run -d nginx
-
-# Run with port mapping
-docker run -d -p 8080:80 nginx
-
-# Run with environment variables
-docker run -d -e "MY_VAR=value" nginx
-
-
-
- - -
-

🎼 Docker Compose

- -
-
💡 What is Docker Compose?
-

Docker Compose lets you define and run multi-container applications using a YAML file. Instead of managing each container separately, you describe your entire application stack in docker-compose.yaml and control everything with simple commands.

-
- -

Essential Compose Commands

- -
-
Start Services (Detached)
-
Start all services defined in docker-compose.yaml in the background
-
- - 
docker compose up -d
-
-
- -
-
Start Services (Foreground)
-
Start services and see logs in real-time (Ctrl+C to stop)
-
- - 
docker compose up
-
-
- -
-
Stop Services
-
Stop running containers but keep them for restart
-
- - 
docker compose stop
-
-
- -
-
Start Stopped Services
-
Restart previously stopped services
-
- - 
docker compose start
-
-
- -
-
Restart Services
-
Stop and start services in one command
-
- - 
docker compose restart
-
-# Restart specific service
-docker compose restart backend
-
-
- -
-
Stop and Remove Containers
-
Stop services and remove containers (volumes remain intact)
-
- - 
docker compose down
-
-
- -
-
Stop and Remove Everything (INCLUDING DATA!)
-
⚠️ Nuclear option - removes containers AND volumes (all data lost)
-
- - 
docker compose down -v
-
-
- -
-
🚨 Critical Warning
-

docker compose down -v deletes ALL data stored in volumes. Only use this when you want a complete reset or are removing an application permanently.

-
- -
-
View Service Status
-
See which containers are running
-
- - 
docker compose ps
-
-
- -
-
View Logs
-
See output from all services
-
- - 
# All logs
-docker compose logs
-
-# Follow logs (real-time)
-docker compose logs -f
-
-# Last 100 lines
-docker compose logs --tail=100
-
-# Specific service
-docker compose logs backend
-
-# Follow specific service
-docker compose logs -f backend
-
-
- -
-
Pull Latest Images
-
Download updated versions of images
-
- - 
docker compose pull
-
-
- -
-
Build Images
-
Build custom images defined in docker-compose.yaml
-
- - 
# Build all images
-docker compose build
-
-# Build without cache
-docker compose build --no-cache
-
-# Build specific service
-docker compose build backend
-
-
- -
-
Execute Command in Service
-
Run a command inside a running container
-
- - 
# Get shell access
-docker compose exec backend bash
-
-# Run single command
-docker compose exec backend ls -la
-
-# Run as different user
-docker compose exec -u postgres postgres psql
-
-
- -

Compose File Validation

- -
-
Validate Configuration
-
Check if docker-compose.yaml is valid
-
- - 
docker compose config
-
-
-
- - -
-

🔄 Container Lifecycle Management

- -

Starting & Stopping

- -
-
Start Container
-
- - 
docker start <container_name_or_id>
-
-
- -
-
Stop Container
-
Gracefully stop (sends SIGTERM, waits, then SIGKILL)
-
- - 
docker stop <container_name_or_id>
-
-# Stop with timeout (seconds)
-docker stop -t 30 <container_name_or_id>
-
-
- -
-
Restart Container
-
- - 
docker restart <container_name_or_id>
-
-
- -
-
Kill Container
-
Force stop immediately (sends SIGKILL)
-
- - 
docker kill <container_name_or_id>
-
-
- -
-
Remove Container
-
Delete stopped container
-
- - 
# Remove stopped container
-docker rm <container_name_or_id>
-
-# Force remove running container
-docker rm -f <container_name_or_id>
-
-# Remove with volumes
-docker rm -v <container_name_or_id>
-
-
- -

Listing & Inspection

- -
-
List Running Containers
-
- - 
docker ps
-
-
- -
-
List All Containers
-
Including stopped containers
-
- - 
docker ps -a
-
-
- -
-
Inspect Container
-
Get detailed information about a container
-
- - 
docker inspect <container_name_or_id>
-
-# Get specific field
-docker inspect --format='{{.State.Status}}' <container>
-
-
- -
-
View Container Logs
-
- - 
# All logs
-docker logs <container_name_or_id>
-
-# Follow logs (real-time)
-docker logs -f <container_name_or_id>
-
-# Last 100 lines
-docker logs --tail 100 <container_name_or_id>
-
-# With timestamps
-docker logs -t <container_name_or_id>
-
-
- -
-
Execute Command in Running Container
-
- - 
# Interactive shell
-docker exec -it <container_name> bash
-
-# Or sh if bash not available
-docker exec -it <container_name> sh
-
-# Run single command
-docker exec <container_name> ls -la /app
-
-# As different user
-docker exec -u postgres <container_name> psql
-
-
- -
-
Copy Files To/From Container
-
- - 
# Copy from container to host
-docker cp <container>:/path/to/file /local/path
-
-# Copy from host to container
-docker cp /local/file <container>:/path/to/destination
-
-
-
- - -
-

📊 Monitoring & Performance

- -
-
View Resource Usage
-
Real-time stats for all running containers
-
- - 
docker stats
-
-# Specific container
-docker stats <container_name>
-
-# No streaming (one-time)
-docker stats --no-stream
-
-
- -
-
View Running Processes
-
See processes inside container
-
- - 
docker top <container_name>
-
-
- -
-
View Port Mappings
-
- - 
docker port <container_name>
-
-
- -
-
System-Wide Information
-
- - 
# Disk usage
-docker system df
-
-# Detailed disk usage
-docker system df -v
-
-# System information
-docker info
-
-
- -
-
Monitor Events
-
Real-time events from Docker daemon
-
- - 
docker events
-
-# Filter by type
-docker events --filter 'type=container'
-
-# Filter by event
-docker events --filter 'event=start'
-
-
-
- - -
-

💾 Volumes & Data Management

- -
-
💡 What are Volumes?
-

Volumes are Docker's way of persisting data beyond container lifecycles. When you delete a container, volumes remain intact unless explicitly removed. This is how your data survives updates and restarts.

-
- -
-
List Volumes
-
- - 
docker volume ls
-
-
- -
-
Create Volume
-
- - 
docker volume create my_volume
-
-
- -
-
Inspect Volume
-
See volume details including mount point
-
- - 
docker volume inspect my_volume
-
-
- -
-
Remove Volume
-
⚠️ This deletes data permanently
-
- - 
docker volume rm my_volume
-
-# Force remove
-docker volume rm -f my_volume
-
-
- -
-
Backup Volume
-
Create a tarball backup of volume data
-
- - 
docker run --rm \
-  -v my_volume:/data \
-  -v $(pwd):/backup \
-  ubuntu tar czf /backup/backup.tar.gz /data
-
-
- -
-
Restore Volume
-
Restore from backup tarball
-
- - 
docker run --rm \
-  -v my_volume:/data \
-  -v $(pwd):/backup \
-  ubuntu tar xzf /backup/backup.tar.gz -C /
-
-
- -

Volume Usage in Containers

- -
-
Mount Volume to Container
-
- - 
# Named volume
-docker run -d -v my_volume:/app/data nginx
-
-# Bind mount (host directory)
-docker run -d -v /host/path:/container/path nginx
-
-# Read-only mount
-docker run -d -v my_volume:/app/data:ro nginx
-
-
-
- - -
-

🌐 Networks

- -
-
💡 Docker Networks
-

Networks allow containers to communicate with each other and the outside world. Docker creates isolated networks where containers can find each other by name.

-
- -
-
List Networks
-
- - 
docker network ls
-
-
- -
-
Create Network
-
- - 
# Bridge network (default type)
-docker network create my_network
-
-# Custom subnet
-docker network create --subnet=172.20.0.0/16 my_network
-
-
- -
-
Inspect Network
-
- - 
docker network inspect my_network
-
-
- -
-
Connect Container to Network
-
- - 
docker network connect my_network <container_name>
-
-
- -
-
Disconnect Container from Network
-
- - 
docker network disconnect my_network <container_name>
-
-
- -
-
Remove Network
-
- - 
docker network rm my_network
-
-
-
- - -
-

📦 Image Management

- -
-
List Images
-
- - 
docker images
-
-# With digests
-docker images --digests
-
-# Show all (including intermediate)
-docker images -a
-
-
- -
-
Pull Image
-
- - 
# Latest version
-docker pull nginx
-
-# Specific version
-docker pull nginx:1.25
-
-# From different registry
-docker pull ghcr.io/user/image:tag
-
-
- -
-
Search Images
-
Search Docker Hub
-
- - 
docker search nginx
-
-# Limit results
-docker search --limit 10 nginx
-
-
- -
-
Remove Image
-
- - 
docker rmi <image_name_or_id>
-
-# Force remove
-docker rmi -f <image_name_or_id>
-
-# Remove multiple
-docker rmi image1 image2 image3
-
-
- -
-
Tag Image
-
Create alias for image
-
- - 
docker tag source_image:tag target_image:tag
-
-# Example
-docker tag nginx:latest myregistry.com/nginx:v1
-
-
- -
-
Build Image from Dockerfile
-
- - 
# Build from current directory
-docker build -t my-image:tag .
-
-# Build without cache
-docker build --no-cache -t my-image:tag .
-
-# Build with build args
-docker build --build-arg VERSION=1.0 -t my-image:tag .
-
-
- -
-
Save & Load Images
-
Export/import images as tar files
-
- - 
# Save image to file
-docker save -o my-image.tar my-image:tag
-
-# Load image from file
-docker load -i my-image.tar
-
-
- -
-
View Image History
-
See image layers and how it was built
-
- - 
docker history <image_name>
-
-
-
- - -
-

🧹 Cleanup & Maintenance

- -
-
⚠️ Before Cleanup
-

Always check what will be removed with docker system df first. Pruning operations are permanent!

-
- -
-
Remove Stopped Containers
-
- - 
docker container prune
-
-# Without confirmation prompt
-docker container prune -f
-
-
- -
-
Remove Unused Images
-
Removes dangling images (not tagged and not used)
-
- - 
docker image prune
-
-# Remove ALL unused images
-docker image prune -a
-
-
- -
-
Remove Unused Volumes
-
⚠️ This deletes data in unused volumes!
-
- - 
docker volume prune
-
-# Without confirmation
-docker volume prune -f
-
-
- -
-
Remove Unused Networks
-
- - 
docker network prune
-
-
- -
-
Complete System Cleanup
-
Remove all unused containers, networks, images (both dangling and unreferenced)
-
- - 
# Safe cleanup (keeps volumes)
-docker system prune
-
-# Aggressive cleanup (includes volumes)
-docker system prune -a --volumes
-
-# Without confirmation
-docker system prune -af
-
-
- -
-
🚨 Nuclear Option
-

Complete Docker Reset:

-
- - 
# Stop all containers
-docker stop $(docker ps -aq)
-
-# Remove all containers
-docker rm $(docker ps -aq)
-
-# Remove all images
-docker rmi $(docker images -q)
-
-# Remove all volumes
-docker volume rm $(docker volume ls -q)
-
-# Remove all networks
-docker network rm $(docker network ls -q)
-
-

This removes EVERYTHING. Only use if you want a complete fresh start!

-
-
- - -
-

🔧 Troubleshooting

- -

Common Issues

- -
-
⚠️ Port Already in Use
-

Error: Error starting userland proxy: listen tcp 0.0.0.0:9001: bind: address already in use

-

Solution:

-
- - 
# Find what's using the port
-sudo lsof -i :9001
-sudo netstat -tulpn | grep :9001
-
-# Kill the process or change port in docker-compose.yaml
-
-
- -
-
⚠️ Container Keeps Restarting
-

Check logs for errors:

-
- - 
docker logs --tail 100 <container_name>
-
-
- -
-
⚠️ Out of Disk Space
-
- - 
# Check Docker disk usage
-docker system df
-
-# Clean up
-docker system prune -a
-docker volume prune
-
-
- -
-
⚠️ Permission Denied
-

Error: Got permission denied while trying to connect to the Docker daemon socket

-

Solution:

-
- - 
# Add user to docker group
-sudo usermod -aG docker $USER
-
-# Log out and back in for changes to take effect
-# Or start new shell
-newgrp docker
-
-
- -
-
⚠️ Network Issues
-

Container can't reach internet or other containers

-
- - 
# Restart Docker daemon
-sudo systemctl restart docker
-
-# Or recreate network
-docker network rm <network_name>
-docker network create <network_name>
-
-
-
- - -
-

🎯 Common Patterns

- -

Complete Application Reset

- -
-
Reset Application (Delete All Data)
-
- - 
cd ~/project
-docker compose down -v  # Remove containers + volumes
-docker compose pull     # Get latest images
-docker compose up -d    # Start fresh
-
-
- -

Update Application

- -
-
Update to Latest Version (Keep Data)
-
- - 
cd ~/project
-docker compose pull     # Download latest
-docker compose up -d    # Recreate containers with new images
-
-
- -

Backup and Restore

- -
-
Backup Before Changes
-
- - 
# Stop services
-docker compose stop
-
-# Backup volumes
-docker run --rm -v project_data:/data -v $(pwd):/backup \
-  ubuntu tar czf /backup/backup-$(date +%Y%m%d).tar.gz /data
-
-# Restart
-docker compose start
-
-
- -

Development vs Production

- -
-
Multiple Compose Files
-
- - 
# Development
-docker compose -f docker-compose.yaml -f docker-compose.dev.yaml up
-
-# Production
-docker compose -f docker-compose.yaml -f docker-compose.prod.yaml up -d
-
-
- -

Debugging Running Container

- -
-
Interactive Shell Access
-
- - 
# Get shell in running container
-docker exec -it <container_name> bash
-
-# Or sh if bash isn't available
-docker exec -it <container_name> sh
-
-# Run single command
-docker exec <container_name> ls -la /app
-
-
-
- - -
-

✅ Best Practices

- -

Project Organization

- -
-
📂 Directory Structure
-
- - 
~/projects/
-  ├── penpot/
-  │   ├── docker-compose.yaml
-  │   ├── .env
-  │   └── README.md
-  ├── nextcloud/
-  │   ├── docker-compose.yaml
-  │   └── data/
-  └── ...
-
-
- -

Docker Compose Best Practices

- -
    -
  • Always use named volumes instead of anonymous volumes
    • -
  • Use .env files for sensitive data (passwords, API keys)
    • -
  • Pin image versions - use postgres:15 not postgres:latest
    • -
  • Add restart policies - restart: unless-stopped
    • -
  • Use depends_on to manage service startup order
    • -
  • Document your setup in README.md
    • -
  • Use health checks to ensure services are actually running
    • -
  • Limit container resources (memory, CPU) in production
    • -
- -

Maintenance Routine

- -
-
Weekly Cleanup
-
- - 
# Remove unused images, containers, networks
-docker system prune
-
-# Remove unused volumes (be careful!)
-docker volume prune
-
-
- -
-
Check Updates
-
- - 
# Check for new images
-docker compose pull
-
-# View what would change
-docker compose up --no-start
-
-# Apply updates
-docker compose up -d
-
-
- -

Security Tips

- -
-
🔒 Security Checklist
-
    -
  • Never store passwords in docker-compose.yaml - use .env files
    • -
  • Add .env to .gitignore
    • -
  • Use official images from trusted sources
    • -
  • Keep images updated regularly
    • -
  • Don't run containers as root unless necessary
    • -
  • Limit container resources (memory, CPU) in production
    • -
  • Use read-only file systems where possible
    • -
  • Scan images for vulnerabilities with docker scan
    • -
-
- -

When Things Go Wrong

- -
-
🚨 Emergency Recovery
-

If everything is broken:

-
- - 
# 1. Stop everything
-docker compose down
-
-# 2. Check logs for errors
-docker compose logs --tail=100
-
-# 3. Try starting with verbose output
-docker compose up
-
-# 4. If still broken, nuclear option:
-docker compose down -v
-docker system prune -a
-docker compose up -d
-
-
-
- - -
-

⚡ Quick Reference Card

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TaskCommand
Start servicesdocker compose up -d
Stop servicesdocker compose stop
Restart servicesdocker compose restart
View logsdocker compose logs -f
Update imagesdocker compose pull && docker compose up -d
Remove containers (keep data)docker compose down
Complete resetdocker compose down -v
Check statusdocker compose ps
Clean unused resourcesdocker system prune
Shell into containerdocker exec -it <name> bash
View resource usagedocker stats
Copy files to containerdocker cp file <name>:/path
List all containersdocker ps -a
List all imagesdocker images
List volumesdocker volume ls
-
- -
- - -
-

🐳 Docker Cheatsheet

-

Created: October 2025 | For Linux Mint 22.2 XFCE

-

- Save this file locally for offline reference: docker-cheatsheet-enhanced.html -

-
- -
- - - - - - - \ No newline at end of file diff --git a/DumperCan/jl_foss_tools_restyled.html b/DumperCan/jl_foss_tools_restyled.html deleted file mode 100755 index a801a32..0000000 --- a/DumperCan/jl_foss_tools_restyled.html +++ /dev/null @@ -1,785 +0,0 @@ - - - - - - FOSS Tools Collection - - - - -
-
-

FOSS Tools Galaxy

-

Your complete curated collection of 100+ open-source tools

-
-
- -
-
-
- - - -
-
-

FOSS Tools Collection | Open-Source Software Discovery

-

Restyled with JL Design System

-
-
- - - - \ No newline at end of file diff --git a/DumperCan/linux-installation-methods-guide.md b/DumperCan/linux-installation-methods-guide.md deleted file mode 100644 index 8f3c635..0000000 --- a/DumperCan/linux-installation-methods-guide.md +++ /dev/null @@ -1,1649 +0,0 @@ -# Linux Software Installation Methods & System Maintenance Guide - -**A Comprehensive Guide to Installing, Managing, and Maintaining Software on Linux** - -*For Linux Mint / Ubuntu-based systems* -*Created: October 2025* - ---- - -## Table of Contents - -1. [Introduction: The Linux Software Landscape](#introduction-the-linux-software-landscape) -2. [Installation Method 1: APT/DPKG (Native Packages)](#installation-method-1-aptdpkg-native-packages) -3. [Installation Method 2: Flatpak](#installation-method-2-flatpak) -4. [Installation Method 3: Snap Packages](#installation-method-3-snap-packages) -5. [Installation Method 4: AppImage](#installation-method-4-appimage) -6. [Installation Method 5: Tarball Archives](#installation-method-5-tarball-archives) -7. [Installation Method 6: Source Compilation](#installation-method-6-source-compilation) -8. [Installation Method 7: Third-Party Scripts](#installation-method-7-third-party-scripts) -9. [Quick Reference: Choosing the Right Method](#quick-reference-choosing-the-right-method) -10. [System Maintenance Best Practices](#system-maintenance-best-practices) -11. [Troubleshooting Common Issues](#troubleshooting-common-issues) -12. [Advanced Tips & Tricks](#advanced-tips--tricks) - ---- - -## Introduction: The Linux Software Landscape - -### Why So Many Installation Methods? - -Unlike Windows (`.exe` installers) or macOS (`.dmg` files), Linux has multiple ways to install software. This diversity exists because: - -1. **Different distributions** have different package managers -2. **Different use cases** require different approaches (system-wide vs. user-only vs. portable) -3. **Different priorities** (stability vs. latest versions vs. security) -4. **Historical evolution** - newer methods solve problems in older approaches - -### The Core Philosophy - -Linux software installation follows these principles: - -- **Package managers** handle dependencies automatically -- **System files** are separated from user files -- **Multiple versions** can coexist (with care) -- **Removal should be clean** - no leftover cruft - -### Installation Method Comparison - -| Method | Root Required | Auto-Updates | Dependencies | Sandboxed | Portability | Speed | -|--------|---------------|--------------|--------------|-----------|-------------|-------| -| **APT** | ✅ Yes | ✅ Yes | ✅ Automatic | ❌ No | ❌ No | ⚡ Fast | -| **Flatpak** | ❌ No | ✅ Yes | ✅ Bundled | ✅ Yes | ❌ No | 🐌 Slower | -| **Snap** | ❌ No | ✅ Yes | ✅ Bundled | ✅ Yes | ❌ No | 🐌 Slowest | -| **AppImage** | ❌ No | ⚠️ Manual | ✅ Bundled | ❌ No | ✅ Yes | ⚡ Fast | -| **Tarball** | ⚠️ Maybe | ❌ No | ❌ Manual | ❌ No | ⚠️ Sometimes | ⚡ Fast | -| **Source** | ✅ Yes | ❌ No | ❌ Manual | ❌ No | ❌ No | ⚡ Fast | - ---- - -## Installation Method 1: APT/DPKG (Native Packages) - -### What It Is - -APT (Advanced Package Tool) is Debian/Ubuntu's native package manager. It's the **gold standard** for installing software on these systems. - -**How it works:** -1. Software is packaged as `.deb` files -2. Packages are hosted in **repositories** (online databases) -3. APT downloads and installs packages -4. Dependencies are resolved automatically -5. All installations are tracked in a central database - -### When to Use - -✅ **Use APT when:** -- Software is available in official repositories -- You want automatic security updates -- You need the most stable, tested version -- You want the lightest system impact - -❌ **Don't use APT when:** -- You need the absolute latest version (repos lag behind) -- Software isn't available in repos -- You want to test multiple versions - -### Basic Commands - -```bash -# Update package list -sudo apt update - -# Search for package -apt search package-name -apt search "keyword" - -# Get package info -apt show package-name - -# Install package -sudo apt install package-name - -# Install specific version -sudo apt install package-name=1.2.3-1 - -# Install local .deb file (handles dependencies) -sudo apt install ./package.deb - -# Remove package (keep config files) -sudo apt remove package-name - -# Remove package completely (purge config) -sudo apt purge package-name - -# Remove unused dependencies -sudo apt autoremove - -# Upgrade all packages -sudo apt upgrade - -# Upgrade to new distribution version -sudo apt full-upgrade -``` - -### File Locations - -APT installs files in standard Linux directories: - -``` -/usr/bin/ # Executable binaries -/usr/lib/ # Libraries -/usr/share/ # Data files (icons, docs, etc.) -/etc/ # System-wide configuration -~/.config/package/ # User configuration -~/.local/share/package/ # User data -``` - -### Finding What's Installed - -```bash -# List all installed packages -dpkg -l - -# Search for specific package -dpkg -l | grep package-name - -# List files installed by package -dpkg -L package-name - -# Find which package owns a file -dpkg -S /path/to/file - -# Check package status -dpkg -s package-name -``` - -### Adding External Repositories (PPAs) - -```bash -# Add PPA (Personal Package Archive) -sudo add-apt-repository ppa:user/repo-name -sudo apt update - -# Remove PPA -sudo add-apt-repository --remove ppa:user/repo-name - -# List all added repos -ls /etc/apt/sources.list.d/ - -# Remove PPA manually -sudo rm /etc/apt/sources.list.d/ppa-name.list -``` - -⚠️ **PPA Warning:** PPAs are third-party repositories. Only add PPAs from trusted sources as they have root access to your system. - -### Cleaning Up - -```bash -# Remove packages no longer needed -sudo apt autoremove --purge - -# Clean package cache (saved .deb files) -sudo apt clean - -# Clean only obsolete packages -sudo apt autoclean - -# Show disk space used by cache -du -sh /var/cache/apt/archives/ -``` - -### Complete Removal Example - -```bash -# Example: Completely remove Firefox -sudo apt purge firefox -sudo apt autoremove -rm -rf ~/.mozilla/firefox/ -rm -rf ~/.cache/mozilla/ -``` - ---- - -## Installation Method 2: Flatpak - -### What It Is - -Flatpak is a **universal package manager** that works across all Linux distributions. Each app runs in a sandbox with bundled dependencies. - -**How it works:** -1. Apps are packaged with all dependencies -2. Apps share common "runtimes" (GNOME, KDE, etc.) -3. Each app runs in its own sandbox -4. Files are stored in `~/.var/app/` - -### When to Use - -✅ **Use Flatpak when:** -- You need the latest version of software -- The app isn't in APT repos -- You want sandboxed security -- You want automatic updates - -❌ **Don't use Flatpak when:** -- APT version is sufficient -- You're tight on disk space (larger than native) -- You need maximum performance -- You need deep system integration - -### Basic Commands - -```bash -# Add Flathub repository (usually pre-configured) -flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo - -# Search for apps -flatpak search app-name - -# Install app -flatpak install flathub org.example.AppName - -# List installed apps -flatpak list - -# List only apps (not runtimes) -flatpak list --app - -# Run app -flatpak run org.example.AppName - -# Update all apps -flatpak update - -# Update specific app -flatpak update org.example.AppName - -# Uninstall app -flatpak uninstall org.example.AppName - -# Uninstall and delete data -flatpak uninstall --delete-data org.example.AppName - -# Remove unused runtimes -flatpak uninstall --unused - -# Repair Flatpak installation -flatpak repair -``` - -### File Locations - -``` -~/.var/app/org.example.AppName/ # App's sandboxed home -~/.local/share/flatpak/ # User's Flatpak data -/var/lib/flatpak/ # System-wide Flatpak data -``` - -### Understanding Sandboxing - -Flatpak apps are **sandboxed** by default with limited access: - -```bash -# View app permissions -flatpak info --show-permissions org.example.AppName - -# Override permissions (use carefully) -flatpak override --filesystem=home org.example.AppName - -# Reset permissions -flatpak override --reset org.example.AppName -``` - -Common permission levels: -- `--filesystem=host` - Access all files -- `--filesystem=home` - Access home directory -- `--share=network` - Network access -- `--device=all` - Hardware access - -### Flatpak in Software Manager - -Linux Mint integrates Flatpak into the Software Manager: -- Flatpak apps show "Flatpak" badge -- Updates appear in Update Manager -- Can enable/disable Flatpak in preferences - -### Disk Space Management - -```bash -# Check Flatpak disk usage -du -sh ~/.local/share/flatpak/ -du -sh /var/lib/flatpak/ - -# See what's using space -flatpak list --app --columns=application,size - -# Clean up after uninstall -flatpak uninstall --unused -flatpak repair --user -``` - -### Complete Removal Example - -```bash -# Example: Remove GIMP -flatpak uninstall --delete-data org.gimp.GIMP -flatpak uninstall --unused - -# Verify removal -flatpak list | grep -i gimp -ls ~/.var/app/ | grep -i gimp -``` - ---- - -## Installation Method 3: Snap Packages - -### What It Is - -Snap is Ubuntu/Canonical's universal package manager, similar to Flatpak but with different design choices. - -**How it works:** -1. Apps are fully self-contained -2. Each app includes all dependencies -3. Automatic updates in background -4. Sandboxed with AppArmor - -### When to Use (Or Not) - -⚠️ **Linux Mint removes Snap by default** because: -- Slower startup times -- Proprietary backend (Snap Store) -- Automatic updates can't be disabled -- Higher resource usage - -✅ **Use Snap when:** -- Required by specific software -- No other option available - -❌ **Avoid Snap when:** -- APT or Flatpak versions available -- On modest hardware (performance impact) -- You value system control - -### Basic Commands - -```bash -# List installed snaps -snap list - -# Search for snap -snap find app-name - -# Install snap -sudo snap install app-name - -# Install from specific channel -sudo snap install app-name --channel=edge - -# Update all snaps -sudo snap refresh - -# Update specific snap -sudo snap refresh app-name - -# Remove snap -sudo snap remove app-name - -# Remove snap and data -sudo snap remove --purge app-name -``` - -### Disabling Snap (Linux Mint) - -```bash -# Check if Snap is installed -which snap - -# Remove all snaps -sudo snap list # Note what's installed -for snap in $(snap list | awk 'NR>1 {print $1}'); do - sudo snap remove --purge "$snap" -done - -# Remove snapd -sudo apt purge snapd - -# Remove snap directories -sudo rm -rf /snap /var/snap /var/lib/snapd ~/snap -``` - ---- - -## Installation Method 4: AppImage - -### What It Is - -AppImage is a **portable application format** - think of it like a Windows `.exe` file. One file contains everything needed to run the app. - -**How it works:** -1. Download AppImage file -2. Make executable -3. Run directly - no installation -4. Delete file to "uninstall" - -### When to Use - -✅ **Use AppImage when:** -- You want a portable app -- Testing software before installing -- Running multiple versions -- No root access needed -- You want the simplest removal - -❌ **Don't use AppImage when:** -- APT version is sufficient -- You want automatic updates -- You need system-wide installation - -### Quick Start - -```bash -# Download AppImage -cd ~/Downloads -wget https://example.com/app-name.AppImage - -# Make executable -chmod +x app-name.AppImage - -# Run it -./app-name.AppImage -``` - -### Proper Installation - -Create organized structure: - -```bash -# 1. Create Applications directory -mkdir -p ~/Applications - -# 2. Move AppImage -mv ~/Downloads/app-name.AppImage ~/Applications/ -chmod +x ~/Applications/app-name.AppImage - -# 3. Extract icon (optional) -cd ~/Applications -./app-name.AppImage --appimage-extract -find squashfs-root -name "*.png" | head -1 -cp squashfs-root/path/to/icon.png ~/Applications/app-name-icon.png -rm -rf squashfs-root - -# 4. Create desktop entry -nano ~/.local/share/applications/app-name.desktop -``` - -Desktop entry template: - -```ini -[Desktop Entry] -Type=Application -Name=Application Name -Comment=Brief description -Icon=/home/USERNAME/Applications/app-name-icon.png -Exec=/home/USERNAME/Applications/app-name.AppImage -Terminal=false -Categories=Office; # Or: Network;Development;Graphics;AudioVideo;Game;Utility; -``` - -Make it visible: - -```bash -chmod +x ~/.local/share/applications/app-name.desktop -update-desktop-database ~/.local/share/applications/ -``` - -### Updating AppImages - -```bash -# Download new version -wget https://example.com/app-name-new.AppImage -O ~/Downloads/app-name.AppImage - -# Backup old version -mv ~/Applications/app-name.AppImage ~/Applications/app-name.AppImage.old - -# Install new version -mv ~/Downloads/app-name.AppImage ~/Applications/ -chmod +x ~/Applications/app-name.AppImage - -# Test -~/Applications/app-name.AppImage - -# Remove backup -rm ~/Applications/app-name.AppImage.old -``` - -### Complete Removal - -```bash -# Remove AppImage -rm ~/Applications/app-name.AppImage -rm ~/Applications/app-name-icon.png - -# Remove desktop entry -rm ~/.local/share/applications/app-name.desktop -update-desktop-database ~/.local/share/applications/ - -# Remove app data (if any) -rm -rf ~/.config/app-name/ -rm -rf ~/.local/share/app-name/ -``` - -### Troubleshooting AppImages - -```bash -# FUSE error -sudo apt install fuse libfuse2 - -# Extract and run without FUSE -./app-name.AppImage --appimage-extract -./squashfs-root/AppRun - -# Check missing libraries -ldd app-name.AppImage -``` - ---- - -## Installation Method 5: Tarball Archives - -### What It Is - -Tarballs (`.tar.gz`, `.tar.xz`, `.tar.bz2`) are **compressed archives** containing pre-compiled software. Common for proprietary software that doesn't fit package manager models. - -**How it works:** -1. Download archive -2. Extract to chosen location -3. Run executable from extracted directory -4. Create shortcuts manually - -### When to Use - -✅ **Use Tarballs when:** -- Official releases provide only tarballs -- Software doesn't fit other formats -- You want specific installation location - -❌ **Avoid when:** -- Any other method is available -- You're unsure about installation location - -### Installation Process - -```bash -# 1. Extract archive -cd ~/Downloads -tar -xzf app-name.tar.gz # .tar.gz -tar -xJf app-name.tar.xz # .tar.xz -tar -xjf app-name.tar.bz2 # .tar.bz2 - -# 2. Move to Applications -sudo mv app-name/ /opt/ -# Or for user-only: -mv app-name/ ~/Applications/ - -# 3. Find executable -ls -la /opt/app-name/ -# Look for: bin/, app-name, app-name.sh, etc. - -# 4. Create symlink (optional) -sudo ln -s /opt/app-name/app-name /usr/local/bin/app-name - -# 5. Create desktop entry (same as AppImage method) -``` - -### Common Locations - -``` -/opt/app-name/ # System-wide, industry standard -~/Applications/ # User-only, no root needed -~/.local/share/apps/ # Alternative user location -``` - -### Complete Removal - -```bash -# Remove installation -sudo rm -rf /opt/app-name/ - -# Remove symlink -sudo rm /usr/local/bin/app-name - -# Remove desktop entry -rm ~/.local/share/applications/app-name.desktop - -# Remove user data -rm -rf ~/.config/app-name/ -rm -rf ~/.local/share/app-name/ -``` - ---- - -## Installation Method 6: Source Compilation - -### What It Is - -**Compiling from source** means downloading the program's source code and building it into an executable. This gives maximum control but requires technical knowledge. - -**How it works:** -1. Install build dependencies -2. Download source code -3. Configure build -4. Compile -5. Install - -### When to Use - -✅ **Compile from source when:** -- You need bleeding-edge features -- Specific compile-time options required -- Contributing to development -- Learning about the software - -❌ **Avoid when:** -- Any packaged version is acceptable -- You're unfamiliar with compilation -- Time is important (compilation is slow) - -### Prerequisites - -```bash -# Install build tools -sudo apt install build-essential - -# Common dependencies -sudo apt install cmake autoconf automake libtool pkg-config \ - git wget curl - -# Programming language compilers -sudo apt install gcc g++ gfortran # C/C++/Fortran -sudo apt install python3-dev # Python headers -sudo apt install default-jdk # Java -``` - -### Typical Build Process - -```bash -# 1. Download source -git clone https://github.com/user/project.git -cd project/ - -# OR download tarball -wget https://example.com/project-1.2.3.tar.gz -tar -xzf project-1.2.3.tar.gz -cd project-1.2.3/ - -# 2. Read instructions -less README.md -less INSTALL.md - -# 3. Configure -./configure --prefix=/usr/local -# Or with CMake: -mkdir build && cd build -cmake .. - -# 4. Compile -make -j$(nproc) # Use all CPU cores - -# 5. Install -sudo make install - -# 6. Update library cache -sudo ldconfig -``` - -### Using Checkinstall - -**checkinstall** creates a `.deb` package from `make install`, making later removal easy: - -```bash -# Install checkinstall -sudo apt install checkinstall - -# Use instead of 'make install' -sudo checkinstall - -# Now you can uninstall with apt -sudo apt remove package-name -``` - -### Common Installation Prefixes - -```bash ---prefix=/usr/local # Default, system-wide ---prefix=/opt/app # Isolated system location ---prefix=$HOME/local # User-only, no root needed -``` - -### Finding Installed Files - -```bash -# After 'make install', files typically go to: -/usr/local/bin/ # Executables -/usr/local/lib/ # Libraries -/usr/local/share/ # Data files -/usr/local/include/ # Headers - -# List what make install will do (without installing) -make -n install -``` - -### Uninstallation - -```bash -# Option 1: make uninstall (if available) -cd ~/source/project/build/ -sudo make uninstall - -# Option 2: Checkinstall package -sudo apt remove package-name - -# Option 3: Manual removal -sudo find /usr/local -name "*program*" -ls -sudo rm -rf /usr/local/bin/program -sudo rm -rf /usr/local/lib/libprogram* -sudo rm -rf /usr/local/share/program/ - -# Update system -sudo ldconfig -sudo mandb -``` - ---- - -## Installation Method 7: Third-Party Scripts - -### What It Is - -**Installation scripts** (usually `install.sh` or downloaded via `curl | bash`) are custom scripts that handle installation automatically. - -**How it works:** -1. Download script -2. Script installs software anywhere it wants -3. May modify system files -4. Difficult to track changes - -### When to Use - -⚠️ **Extreme caution required** - -✅ **Only use when:** -- From highly trusted source (official site) -- No other installation method exists -- You've reviewed the script - -❌ **Never use when:** -- From unknown sources -- You haven't read the script -- Any alternative exists - -### Safe Installation Process - -```bash -# 1. Download script (DON'T RUN YET) -curl -fsSL https://example.com/install.sh -o install.sh - -# 2. REVIEW THE SCRIPT -less install.sh -cat install.sh - -# Look for: -# - Where files are installed -# - What system changes are made -# - If it requires root -# - If it modifies system files - -# 3. If safe, make executable and run -chmod +x install.sh -./install.sh - -# Or with sudo if needed -sudo ./install.sh -``` - -### Common Installation Locations - -Scripts often install to: -``` -~/.local/bin/ # User binaries -~/.local/share/ # User data -/opt/app-name/ # System-wide app -/usr/local/bin/ # System binaries -``` - -### Examples - -**PyEnv (Python version manager):** -```bash -curl https://pyenv.run | bash -``` - -**NVM (Node version manager):** -```bash -curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash -``` - -**Docker:** -```bash -curl -fsSL https://get.docker.com -o get-docker.sh -sudo sh get-docker.sh -``` - -### Uninstallation - -```bash -# 1. Check if uninstall script exists -ls ~/.local/bin/ | grep uninstall -ls /opt/program/ | grep uninstall - -# 2. Check documentation -cat ~/.local/share/program/README.md - -# 3. Manual removal (if no uninstaller) -# Find installed files -find ~ -name "*program*" 2>/dev/null -find /opt -name "*program*" 2>/dev/null - -# Remove directories -rm -rf ~/.local/share/program/ -rm -rf /opt/program/ - -# Check shell configs -grep -n "program" ~/.bashrc -grep -n "program" ~/.zshrc - -# Remove added lines -nano ~/.bashrc -``` - ---- - -## Quick Reference: Choosing the Right Method - -### Decision Tree - -``` -Do you need this software? -│ -├─ YES → Is it in APT repos? -│ │ -│ ├─ YES → Do you need latest version? -│ │ │ -│ │ ├─ NO → ✅ Use APT -│ │ └─ YES → Is it in Flatpak? -│ │ │ -│ │ ├─ YES → ✅ Use Flatpak -│ │ └─ NO → Check AppImage/Tarball -│ │ -│ └─ NO → Is it in Flatpak? -│ │ -│ ├─ YES → ✅ Use Flatpak -│ └─ NO → Is there an AppImage? -│ │ -│ ├─ YES → ✅ Use AppImage -│ └─ NO → Check official site -│ -└─ NO → Don't install it! -``` - -### Priority Order - -For most users: - -1. **APT** - If available and version is acceptable -2. **Flatpak** - If you need latest version or APT unavailable -3. **AppImage** - For portable apps or testing -4. **Tarball** - Only if official releases use this -5. **Source** - Only if you need specific features -6. **Scripts** - Last resort, extreme caution - -### Special Cases - -**For developers:** -``` -Programming tools → APT or Source -Version managers → Script (pyenv, nvm, rbenv) -IDEs → Flatpak or Tarball -``` - -**For casual users:** -``` -Web browsers → APT or Flatpak -Office suites → APT or Flatpak -Media players → APT -Games → Flatpak or Steam -``` - -**For power users:** -``` -Command-line tools → APT -Desktop applications → Flatpak -Portable tools → AppImage -Custom builds → Source -``` - ---- - -## System Maintenance Best Practices - -### Daily/Weekly Habits - -#### 1. Regular Updates - -```bash -# Daily quick update (recommended) -sudo apt update && sudo apt upgrade -y - -# Weekly full update -sudo apt update -sudo apt full-upgrade -flatpak update -``` - -Enable automatic updates: -```bash -# Edit Update Manager preferences -# Or enable unattended-upgrades -sudo apt install unattended-upgrades -sudo dpkg-reconfigure unattended-upgrades -``` - -#### 2. Monitor Disk Space - -```bash -# Check disk usage -df -h - -# Find large directories -du -sh ~/.cache -du -sh ~/.local/share/flatpak -du -sh /var/cache/apt/archives - -# Find large files -du -ah ~ | sort -rh | head -20 -``` - -### Weekly Maintenance - -```bash -#!/bin/bash -# Save as ~/weekly-maintenance.sh - -echo "=== Weekly System Maintenance ===" - -# Update package lists -echo "Updating package lists..." -sudo apt update - -# Upgrade packages -echo "Upgrading packages..." -sudo apt upgrade -y - -# Remove unnecessary packages -echo "Removing unnecessary packages..." -sudo apt autoremove --purge -y - -# Clean package cache -echo "Cleaning package cache..." -sudo apt autoclean - -# Update Flatpaks -echo "Updating Flatpaks..." -flatpak update -y - -# Remove unused Flatpak runtimes -echo "Removing unused Flatpaks..." -flatpak uninstall --unused -y - -# Clean thumbnails -echo "Cleaning thumbnails..." -rm -rf ~/.cache/thumbnails/* - -# Show disk usage -echo "Disk usage:" -df -h / /home - -echo "=== Maintenance complete! ===" -``` - -Make it executable: -```bash -chmod +x ~/weekly-maintenance.sh -``` - -### Monthly Tasks - -#### 1. Review Installed Software - -```bash -# List all installed packages -dpkg -l > ~/installed-packages.txt - -# List Flatpaks -flatpak list > ~/installed-flatpaks.txt - -# List AppImages -ls -lh ~/Applications/*.AppImage > ~/installed-appimages.txt - -# Review and remove unused software -``` - -#### 2. Clean Up Cache Directories - -```bash -# Browser caches -rm -rf ~/.cache/mozilla/firefox/*/cache2/* -rm -rf ~/.cache/chromium/Default/Cache/* - -# Thumbnail cache -rm -rf ~/.cache/thumbnails/* - -# Application caches -du -sh ~/.cache/* | sort -rh | head -20 -# Review and delete as needed -``` - -#### 3. Review Startup Applications - -```bash -# List startup applications -ls ~/.config/autostart/ - -# Disable unnecessary ones -# Use Settings → Session and Startup -``` - -### Quarterly Tasks - -#### 1. Clean Old Kernels - -```bash -# List installed kernels -dpkg -l | grep linux-image - -# Keep current + one previous -sudo apt autoremove --purge - -# Verify boot still works after reboot -``` - -#### 2. Review User Directories - -```bash -# Find old/large files -find ~ -type f -size +100M -find ~ -type f -mtime +365 # Not modified in 1 year - -# Review directories -du -sh ~/Downloads -du -sh ~/Documents -du -sh ~/.local/share -``` - -#### 3. Backup System - -```bash -# Create Timeshift snapshot -sudo timeshift --create --comments "Quarterly backup" - -# Backup home directory -tar -czf ~/backup-$(date +%Y%m%d).tar.gz \ - ~/Documents ~/Pictures ~/Videos ~/.config -``` - -### System Health Checks - -#### Check for Broken Packages - -```bash -# Find broken dependencies -sudo apt check - -# Fix broken packages -sudo apt --fix-broken install - -# Reconfigure packages -sudo dpkg --configure -a -``` - -#### Check System Logs - -```bash -# Recent errors -sudo journalctl -p err -b - -# Last boot messages -sudo journalctl -b -1 - -# Specific service -sudo journalctl -u service-name -``` - -#### Check Disk Health - -```bash -# Check filesystem -sudo touch /forcefsck # Check on next boot - -# Check SMART status (for HDDs/SSDs) -sudo apt install smartmontools -sudo smartctl -a /dev/sda -``` - -### Documentation Best Practices - -#### Keep an Installation Log - -```bash -# Create log file -nano ~/installation-log.md -``` - -```markdown -# System Installation Log - -## 2025-10-26 -- Installed: onlyoffice-desktopeditors (flatpak) -- Reason: Office suite for work -- Notes: Using Flatpak for latest version - -## 2025-10-25 -- Installed: kanri.AppImage -- Location: ~/Applications/kanri.AppImage -- Reason: Kanban board for project management -``` - -#### Document Configuration Changes - -```bash -# Before changing configs -cp /etc/important.conf /etc/important.conf.backup - -# Add comment to modified files -sudo nano /etc/important.conf -# Add: # Modified 2025-10-26 - Changed setting X to Y -``` - ---- - -## Troubleshooting Common Issues - -### Problem: "Package not found" - -```bash -# Update package lists -sudo apt update - -# Search with correct name -apt search package - -# Check if it's in a PPA -# Google: "package-name ubuntu ppa" - -# Try Flatpak -flatpak search package-name -``` - -### Problem: Dependency Errors - -```bash -# When installing .deb file -sudo apt install ./package.deb # Not dpkg -i - -# Fix broken dependencies -sudo apt --fix-broken install - -# Force install (use carefully) -sudo dpkg -i --force-depends package.deb -sudo apt --fix-broken install -``` - -### Problem: "Package has unmet dependencies" - -```bash -# This usually means: -# 1. You're installing a package for wrong Ubuntu version -# 2. You have conflicting PPAs - -# Solution 1: Check package version -apt policy package-name - -# Solution 2: Remove conflicting PPAs -ls /etc/apt/sources.list.d/ - -# Solution 3: Use aptitude (smarter resolver) -sudo apt install aptitude -sudo aptitude install package-name -``` - -### Problem: Flatpak App Won't Start - -```bash -# Check for errors -flatpak run org.example.App - -# Repair Flatpak -flatpak repair - -# Clear app cache -rm -rf ~/.var/app/org.example.App/cache - -# Reset app data (LAST RESORT) -flatpak uninstall --delete-data org.example.App -flatpak install org.example.App -``` - -### Problem: AppImage Won't Run - -```bash -# Make executable -chmod +x app-name.AppImage - -# Install FUSE -sudo apt install fuse libfuse2 - -# Extract and run -./app-name.AppImage --appimage-extract -./squashfs-root/AppRun - -# Check for missing libraries -ldd app-name.AppImage -``` - -### Problem: Command Not Found After Installation - -```bash -# Refresh shell -source ~/.bashrc - -# Or -hash -r - -# Check PATH -echo $PATH - -# Find executable -which command-name - -# If in /usr/local/bin, add to PATH -echo 'export PATH="/usr/local/bin:$PATH"' >> ~/.bashrc -source ~/.bashrc -``` - -### Problem: System Running Out of Space - -```bash -# Find space hogs -sudo du -sh /* | sort -rh | head -20 - -# Common culprits: -du -sh /var/cache/apt/archives # APT cache -du -sh ~/.cache # User cache -du -sh ~/.local/share/flatpak # Flatpak -du -sh /var/log # System logs - -# Clean up -sudo apt clean -rm -rf ~/.cache/thumbnails -flatpak uninstall --unused -sudo journalctl --vacuum-time=7d -``` - -### Problem: Package Manager is Locked - -```bash -# Error: "Could not get lock /var/lib/dpkg/lock" - -# Check what's using it -sudo lsof /var/lib/dpkg/lock -sudo lsof /var/lib/apt/lists/lock - -# Kill if hung -sudo killall apt apt-get - -# Remove lock (ONLY IF NOTHING IS RUNNING) -sudo rm /var/lib/dpkg/lock -sudo rm /var/lib/apt/lists/lock -sudo rm /var/cache/apt/archives/lock - -# Reconfigure -sudo dpkg --configure -a -``` - ---- - -## Advanced Tips & Tricks - -### Multiple Versions of Software - -#### Using Alternatives System - -```bash -# Install multiple versions of Python -sudo apt install python3.10 python3.11 python3.12 - -# Configure alternatives -sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.10 1 -sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.11 2 -sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.12 3 - -# Switch between versions -sudo update-alternatives --config python3 - -# Check current version -python3 --version -``` - -#### Using Environment Modules - -```bash -# Install environment modules -sudo apt install environment-modules - -# Create module files -sudo mkdir -p /usr/share/modules/modulefiles/app-name - -sudo nano /usr/share/modules/modulefiles/app-name/1.0 -``` - -```tcl -#%Module1.0 -proc ModulesHelp { } { - puts stderr "App Name v1.0" -} -module-whatis "App Name v1.0" - -prepend-path PATH /opt/app-name-1.0/bin -prepend-path LD_LIBRARY_PATH /opt/app-name-1.0/lib -``` - -```bash -# Use it -module avail -module load app-name/1.0 -module list -module unload app-name/1.0 -``` - -### Version Managers - -For programming languages, use dedicated version managers: - -```bash -# Python: pyenv -curl https://pyenv.run | bash - -# Node.js: nvm -curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash - -# Ruby: rbenv -git clone https://github.com/rbenv/rbenv.git ~/.rbenv - -# Java: SDKMAN! -curl -s "https://get.sdkman.io" | bash -``` - -### Container-Based Installations - -#### Using Docker - -```bash -# Install Docker -curl -fsSL https://get.docker.com -o get-docker.sh -sudo sh get-docker.sh - -# Run application in container -docker run -it --rm \ - -v $HOME:/root \ - -v $(pwd):/work \ - ubuntu:22.04 bash - -# Persistent container -docker run -d --name myapp \ - -v $HOME/data:/data \ - myapp:latest -``` - -#### Using Podman (Docker alternative) - -```bash -# Install Podman -sudo apt install podman - -# Use like Docker -podman run -it ubuntu:22.04 bash -``` - -### Creating Your Own Packages - -#### Simple .deb Package - -```bash -# Install packaging tools -sudo apt install dpkg-dev debhelper - -# Create package structure -mkdir myapp-1.0 -cd myapp-1.0 -mkdir -p DEBIAN usr/bin usr/share/applications - -# Create control file -nano DEBIAN/control -``` - -``` -Package: myapp -Version: 1.0 -Section: base -Priority: optional -Architecture: amd64 -Maintainer: Your Name -Description: My Application - A longer description of my application -``` - -```bash -# Add files -cp myapp usr/bin/ -chmod +x usr/bin/myapp - -# Build package -cd .. -dpkg-deb --build myapp-1.0 - -# Install -sudo dpkg -i myapp-1.0.deb -``` - -### System Snapshot Before Changes - -```bash -# Take Timeshift snapshot -sudo timeshift --create --comments "Before installing X" - -# Or manually backup key directories -tar -czf backup-$(date +%Y%m%d-%H%M).tar.gz \ - ~/.config \ - ~/.local/share \ - /etc -``` - -### Recovery: Bootable USB with Timeshift - -If system breaks: -1. Boot from Linux Mint USB -2. Open Timeshift -3. Select backup location -4. Restore snapshot -5. Reboot - ---- - -## Summary & Best Practices Checklist - -### Installation Decision Flowchart - -``` -1. Check APT repos → APT available? → Use APT - │ - └→ Not in APT - │ - 2. Check Flatpak → Available? → Use Flatpak - │ - └→ Not in Flatpak - │ - 3. Check AppImage → Available? → Use AppImage - │ - └→ Not available - │ - 4. Check official site - │ - ├→ Tarball? → Extract to ~/Applications - ├→ .deb? → sudo apt install ./file.deb - ├→ Script? → Review carefully, then run - └→ Source? → Compile if necessary -``` - -### Golden Rules - -1. **Always prefer package managers** over manual installation -2. **Document what you install** in a log file -3. **Take Timeshift snapshots** before major changes -4. **Review scripts** before running with sudo -5. **Clean up regularly** - weekly maintenance routine -6. **Update frequently** - security patches are important -7. **Use sandboxed formats** (Flatpak) for untrusted software -8. **Keep /home separate** from / (root) partition -9. **Test before removing** - check dependencies -10. **When in doubt, ask** - Linux community is helpful - -### Quick Commands Cheatsheet - -```bash -# APT -sudo apt update && sudo apt upgrade -sudo apt install package -sudo apt purge package -sudo apt autoremove --purge - -# Flatpak -flatpak install flathub org.app.Name -flatpak update -flatpak uninstall --delete-data org.app.Name -flatpak uninstall --unused - -# AppImage -chmod +x app.AppImage -./app.AppImage - -# System -df -h # Disk space -du -sh ~/.cache # Cache size -sudo apt clean # Clear APT cache -flatpak repair # Fix Flatpak -sudo timeshift --create # Snapshot -``` - -### Maintenance Schedule - -**Daily:** -- Nothing required (auto-updates handle this) - -**Weekly:** -- Run weekly maintenance script -- Review disk space - -**Monthly:** -- Review installed software -- Clean caches -- Update AppImages - -**Quarterly:** -- Full system backup -- Remove old kernels -- Review logs - ---- - -## Additional Resources - -### Official Documentation - -- [APT Documentation](https://manpages.ubuntu.com/manpages/focal/man8/apt.8.html) -- [Flatpak Documentation](https://docs.flatpak.org/) -- [AppImage Documentation](https://docs.appimage.org/) - -### Community Resources - -- [Linux Mint Forums](https://forums.linuxmint.com/) -- [Ask Ubuntu](https://askubuntu.com/) -- [r/linuxmint](https://reddit.com/r/linuxmint) -- [r/linux4noobs](https://reddit.com/r/linux4noobs) - -### Helpful Wikis - -- [Arch Wiki](https://wiki.archlinux.org/) (concepts apply to all distros) -- [Debian Wiki](https://wiki.debian.org/) -- [Ubuntu Wiki](https://wiki.ubuntu.com/) - ---- - -## Conclusion - -Linux software installation can seem overwhelming at first, but it becomes intuitive with practice. The diversity of installation methods exists to serve different needs: - -- **APT** for system stability and integration -- **Flatpak** for latest versions and security -- **AppImage** for portability and simplicity -- **Others** for special cases - -By following the best practices in this guide, you'll maintain a clean, efficient, and stable Linux system. Remember: - -> "The best installation method is the one that makes your software easy to maintain and remove." - -When in doubt, choose the method highest on the priority list, document your installations, and keep regular backups. - -Happy Linux computing! - ---- - -**Document Version:** 1.0 -**Last Updated:** October 2025 -**For:** Linux Mint 22+ / Ubuntu 24.04+ -**License:** Free to use, share, and modify - ---- - -## Appendix: Quick Reference Tables - -### File System Locations - -| Directory | Purpose | Who Can Write | -|-----------|---------|---------------| -| `/bin`, `/usr/bin` | Essential user commands | Root only | -| `/sbin`, `/usr/sbin` | System administration commands | Root only | -| `/lib`, `/usr/lib` | System libraries | Root only | -| `/opt` | Third-party applications | Root only | -| `/usr/local` | Locally compiled software | Root only | -| `/etc` | System configuration | Root only | -| `~/.local/bin` | User binaries | User | -| `~/.local/share` | User application data | User | -| `~/.config` | User configuration | User | -| `~/Applications` | User AppImages (custom) | User | - -### Package Manager Commands - -| Task | APT | Flatpak | Snap | -|------|-----|---------|------| -| Update lists | `sudo apt update` | N/A | N/A | -| Upgrade all | `sudo apt upgrade` | `flatpak update` | `sudo snap refresh` | -| Search | `apt search NAME` | `flatpak search NAME` | `snap find NAME` | -| Install | `sudo apt install NAME` | `flatpak install flathub NAME` | `sudo snap install NAME` | -| Remove | `sudo apt purge NAME` | `flatpak uninstall NAME` | `sudo snap remove NAME` | -| List installed | `dpkg -l` | `flatpak list` | `snap list` | -| Info | `apt show NAME` | `flatpak info NAME` | `snap info NAME` | -| Clean | `sudo apt autoremove` | `flatpak uninstall --unused` | N/A | - ---- - -*End of Guide* diff --git a/DumperCan/linux-uninstallation-guide.md b/DumperCan/linux-uninstallation-guide.md deleted file mode 100644 index eaa4bfd..0000000 --- a/DumperCan/linux-uninstallation-guide.md +++ /dev/null @@ -1,926 +0,0 @@ -# Linux Uninstallation & System Cleanup Guide - -**A comprehensive guide to removing software installed via different methods** - -*Created for Linux Mint 22.2 / Ubuntu-based systems* - ---- - -## Table of Contents - -1. [Quick Reference Table](#quick-reference-table) -2. [Method 1: APT/DPKG Packages](#method-1-aptdpkg-packages) -3. [Method 2: Flatpak Applications](#method-2-flatpak-applications) -4. [Method 3: Snap Packages](#method-3-snap-packages) -5. [Method 4: AppImages](#method-4-appimages) -6. [Method 5: Tarball Extracts (tar.gz/tar.xz)](#method-5-tarball-extracts) -7. [Method 6: Git Clones & Source Builds](#method-6-git-clones--source-builds) -8. [Method 7: Manual Installs & Third-Party Scripts](#method-7-manual-installs--third-party-scripts) -9. [Case Study: Removing Zen Browser](#case-study-removing-zen-browser) -10. [System Cleanup & Maintenance](#system-cleanup--maintenance) -11. [Nuclear Options](#nuclear-options) - ---- - -## Quick Reference Table - -| Installation Method | How to Identify | How to Remove | Difficulty | -|---------------------|-----------------|---------------|------------| -| **APT Package** | `dpkg -l \| grep name` | `sudo apt remove name` | ⭐ Easy | -| **Flatpak** | `flatpak list` | `flatpak uninstall name` | ⭐ Easy | -| **Snap** | `snap list` | `sudo snap remove name` | ⭐ Easy | -| **AppImage** | File in ~/Applications or ~/Downloads | Delete file + desktop entry | ⭐⭐ Medium | -| **Tarball Extract** | Usually in /opt or ~/local | Delete folder + desktop entry | ⭐⭐ Medium | -| **Source Build** | Check install logs or `make uninstall` | `sudo make uninstall` or manual | ⭐⭐⭐ Hard | -| **Script Install** | Check ~/.local or /opt | Follow uninstall script or manual | ⭐⭐⭐ Hard | - ---- - -## Method 1: APT/DPKG Packages - -**When you installed with:** `sudo apt install package-name` - -### Check if installed -```bash -# Search for package -dpkg -l | grep package-name - -# Get package info -apt show package-name - -# List files installed by package -dpkg -L package-name -``` - -### Uninstall -```bash -# Remove package but keep config files -sudo apt remove package-name - -# Remove package AND config files (recommended) -sudo apt purge package-name - -# Remove with dependencies -sudo apt autoremove --purge package-name - -# Clean up after removal -sudo apt autoremove -sudo apt autoclean -``` - -### Verify removal -```bash -dpkg -l | grep package-name -# Should return nothing -``` - -### Common locations to check -- Binaries: `/usr/bin/`, `/usr/local/bin/` -- Libraries: `/usr/lib/`, `/usr/local/lib/` -- Config: `/etc/package-name/` -- User data: `~/.config/package-name/`, `~/.local/share/package-name/` - ---- - -## Method 2: Flatpak Applications - -**When you installed with:** `flatpak install app-name` - -### List all Flatpaks -```bash -flatpak list -``` - -### Uninstall -```bash -# Remove application -flatpak uninstall app.name.AppName - -# Remove and delete user data -flatpak uninstall --delete-data app.name.AppName - -# Remove unused runtimes/dependencies -flatpak uninstall --unused - -# Full cleanup -flatpak repair -``` - -### Verify removal -```bash -flatpak list | grep app-name -``` - -### Manual data cleanup -```bash -# User data location -rm -rf ~/.var/app/app.name.AppName/ - -# Check Flatpak cache -du -sh ~/.local/share/flatpak/ -``` - -**Pro tip:** Flatpak apps store data in `~/.var/app/` - each app gets its own sandbox folder. - ---- - -## Method 3: Snap Packages - -**When you installed with:** `sudo snap install package-name` - -### List all Snaps -```bash -snap list -``` - -### Uninstall -```bash -# Remove snap -sudo snap remove package-name - -# Remove snap and all revisions -sudo snap remove --purge package-name - -# Disable snapd entirely (if you hate Snap) -sudo systemctl disable snapd.service -sudo systemctl disable snapd.socket -sudo apt purge snapd -``` - -### Verify removal -```bash -snap list | grep package-name -``` - -### Manual cleanup -```bash -# Snap data locations -rm -rf ~/snap/package-name/ - -# System snap folder -sudo rm -rf /var/snap/package-name/ -``` - -**Note:** Snaps auto-update and keep old revisions. Always use `--purge` to fully clean up. - ---- - -## Method 4: AppImages - -**When you downloaded:** `Application-x86_64.AppImage` - -### Characteristics -- Single executable file -- Usually in `~/Downloads/`, `~/Applications/`, or `~/.local/bin/` -- May have created desktop entry -- May have created config in `~/.config/` - -### Uninstall process - -#### Step 1: Find the AppImage -```bash -# Search common locations -find ~ -name "*.AppImage" 2>/dev/null - -# List recently modified AppImages -find ~ -name "*.AppImage" -mtime -30 2>/dev/null -``` - -#### Step 2: Remove the file -```bash -rm ~/path/to/Application.AppImage -``` - -#### Step 3: Remove desktop entry -```bash -# Check for desktop file -ls ~/.local/share/applications/ | grep -i application - -# Remove it -rm ~/.local/share/applications/application-name.desktop -``` - -#### Step 4: Remove config/data -```bash -# Check common locations -ls ~/.config/ | grep -i application -ls ~/.local/share/ | grep -i application - -# Remove folders -rm -rf ~/.config/application-name/ -rm -rf ~/.local/share/application-name/ -``` - -#### Step 5: Update desktop database -```bash -update-desktop-database ~/.local/share/applications/ -``` - -### Example: Removing Logseq AppImage -```bash -# 1. Find and remove AppImage -rm ~/Downloads/Logseq-linux-x64-*.AppImage - -# 2. Remove desktop entry -rm ~/.local/share/applications/logseq.desktop - -# 3. Remove data -rm -rf ~/.config/Logseq/ -rm -rf ~/.local/share/Logseq/ - -# 4. Update database -update-desktop-database ~/.local/share/applications/ -``` - ---- - -## Method 5: Tarball Extracts - -**When you extracted:** `tar -xzf package.tar.gz` and moved to `/opt/` or `~/local/` - -### Common install locations -- `/opt/package-name/` -- `~/.local/package-name/` -- `/usr/local/package-name/` - -### Uninstall process - -#### Step 1: Find installation directory -```bash -# Check /opt -ls /opt/ | grep -i package - -# Check ~/.local -ls ~/.local/ | grep -i package - -# Find executable location -which package-name -``` - -#### Step 2: Remove directory -```bash -# If in /opt (requires sudo) -sudo rm -rf /opt/package-name/ - -# If in ~/.local -rm -rf ~/.local/package-name/ -``` - -#### Step 3: Remove symlinks/shortcuts -```bash -# Check for symlinks in PATH -ls -la /usr/local/bin/ | grep package-name -sudo rm /usr/local/bin/package-name - -# Or in ~/.local/bin -ls -la ~/.local/bin/ | grep package-name -rm ~/.local/bin/package-name -``` - -#### Step 4: Remove desktop entry -```bash -# System-wide -sudo rm /usr/share/applications/package-name.desktop - -# User-specific -rm ~/.local/share/applications/package-name.desktop -``` - -#### Step 5: Clean up config -```bash -rm -rf ~/.config/package-name/ -rm -rf ~/.local/share/package-name/ -``` - -### Example: Removing VSCodium tarball -```bash -# 1. Remove installation -sudo rm -rf /opt/vscodium/ - -# 2. Remove symlink -sudo rm /usr/local/bin/codium - -# 3. Remove desktop entry -sudo rm /usr/share/applications/codium.desktop - -# 4. Remove user config -rm -rf ~/.config/VSCodium/ -``` - ---- - -## Method 6: Git Clones & Source Builds - -**When you did:** -```bash -git clone https://github.com/user/repo -cd repo -make -sudo make install -``` - -### The Challenge -Source builds scatter files across system directories. No package manager tracks them. - -### Uninstall strategies - -#### Strategy 1: Use `make uninstall` (if available) -```bash -cd /path/to/source/directory -sudo make uninstall -``` - -**Problem:** Not all projects include `uninstall` target. - -#### Strategy 2: Check install logs -```bash -# Run install again, save output -sudo make install > install.log 2>&1 - -# Review what was installed -cat install.log - -# Remove files manually based on log -``` - -#### Strategy 3: Use `checkinstall` (retroactive tracking) - -**For future installs, use checkinstall instead of `make install`:** -```bash -sudo apt install checkinstall - -# Instead of: sudo make install -sudo checkinstall - -# This creates a .deb package you can uninstall later -sudo dpkg -r package-name -``` - -#### Strategy 4: Manual removal (last resort) - -**Common install locations for source builds:** -```bash -# Binaries -/usr/local/bin/ -/usr/bin/ - -# Libraries -/usr/local/lib/ -/usr/lib/ - -# Headers -/usr/local/include/ -/usr/include/ - -# Man pages -/usr/local/share/man/ -/usr/share/man/ - -# Data files -/usr/local/share/package-name/ -/usr/share/package-name/ -``` - -**Removal process:** -```bash -# 1. Find binary -which program-name -sudo rm $(which program-name) - -# 2. Search for related files -find /usr/local -name "*program*" 2>/dev/null -find /usr -name "*program*" 2>/dev/null - -# 3. Remove carefully -sudo rm -rf /usr/local/lib/program-name/ -sudo rm -rf /usr/local/share/program-name/ -``` - -### Example: Removing a Git clone + build - -```bash -# Example: Removing a program built from source - -# 1. Try make uninstall first -cd ~/repos/program-name/ -sudo make uninstall - -# 2. If that fails, find files manually -sudo find /usr/local -name "*program*" -ls - -# 3. Remove them -sudo rm /usr/local/bin/program-name -sudo rm -rf /usr/local/share/program-name/ - -# 4. Remove git clone -rm -rf ~/repos/program-name/ - -# 5. Update man pages database -sudo mandb - -# 6. Update shared library cache -sudo ldconfig -``` - ---- - -## Method 7: Manual Installs & Third-Party Scripts - -**When you ran:** `curl -sSL https://install.script | bash` - -### The Nuclear Problem -Install scripts can put files **anywhere**. You need to be a detective. - -### Investigation process - -#### Step 1: Check what the script does -```bash -# Re-download and READ the script (don't run) -curl -sSL https://install.script > script.sh -cat script.sh | less - -# Look for: -# - Where files are copied -# - What directories are created -# - Symlinks created -# - Services installed -``` - -#### Step 2: Check common locations - -**User-specific:** -```bash -~/.local/bin/ -~/.local/share/ -~/.config/ -``` - -**System-wide:** -```bash -/opt/ -/usr/local/bin/ -/usr/local/lib/ -/usr/local/share/ -/etc/ -``` - -**Services:** -```bash -/etc/systemd/system/ -~/.config/systemd/user/ -``` - -#### Step 3: Check running processes -```bash -# See what's running -ps aux | grep program-name - -# Check systemd services -systemctl list-units --type=service | grep program-name -systemctl --user list-units --type=service | grep program-name -``` - -#### Step 4: Removal checklist - -```bash -# Stop services -sudo systemctl stop program-name.service -sudo systemctl disable program-name.service -systemctl --user stop program-name.service - -# Remove service files -sudo rm /etc/systemd/system/program-name.service -rm ~/.config/systemd/user/program-name.service - -# Reload systemd -sudo systemctl daemon-reload - -# Remove binaries -sudo rm /usr/local/bin/program-name - -# Remove data -sudo rm -rf /opt/program-name/ -rm -rf ~/.local/share/program-name/ -rm -rf ~/.config/program-name/ - -# Remove logs -sudo rm -rf /var/log/program-name/ -``` - -### Example: Removing PyEnv (curl installer) - -```bash -# PyEnv installs to ~/.pyenv - -# 1. Remove installation -rm -rf ~/.pyenv/ - -# 2. Remove from shell config -nano ~/.bashrc -# Delete these lines: -# export PYENV_ROOT="$HOME/.pyenv" -# export PATH="$PYENV_ROOT/bin:$PATH" -# eval "$(pyenv init -)" - -# 3. Reload shell -source ~/.bashrc - -# 4. Verify -which pyenv -# Should return nothing -``` - ---- - -## Case Study: Removing Zen Browser - -**Zen Browser can be installed via Flatpak OR tarball - you need to identify which.** - -### Step 1: Identify installation method - -```bash -# Check if Flatpak -flatpak list | grep -i zen - -# Check if tarball (common locations) -ls /opt/ | grep -i zen -ls ~/.local/ | grep -i zen - -# Check running process -ps aux | grep zen - -# Find executable -which zen-browser -``` - -### Step 2A: If Flatpak - -```bash -# Get exact app ID -flatpak list | grep -i zen - -# Uninstall -flatpak uninstall io.github.zen-browser.zen - -# Remove data -rm -rf ~/.var/app/io.github.zen-browser.zen/ - -# Clean up -flatpak uninstall --unused -``` - -### Step 2B: If Tarball - -```bash -# Find installation directory -find ~ /opt -name "*zen*" -type d 2>/dev/null - -# Example locations: -# /opt/zen-browser/ -# ~/.local/zen-browser/ - -# Remove installation -sudo rm -rf /opt/zen-browser/ -# OR -rm -rf ~/.local/zen-browser/ - -# Remove symlinks -sudo rm /usr/local/bin/zen-browser -rm ~/.local/bin/zen-browser - -# Remove desktop entry -rm ~/.local/share/applications/zen-browser.desktop -sudo rm /usr/share/applications/zen-browser.desktop - -# Remove config/data -rm -rf ~/.zen/ -rm -rf ~/.config/zen/ -rm -rf ~/.local/share/zen/ -rm -rf ~/.cache/zen/ - -# Update desktop database -update-desktop-database ~/.local/share/applications/ -``` - -### Step 3: Remove Zen-specific artifacts - -```bash -# Remove MIME associations -xdg-mime query default x-scheme-handler/http -# If it shows zen, change it: -xdg-mime default microsoft-edge.desktop x-scheme-handler/http -xdg-mime default microsoft-edge.desktop x-scheme-handler/https - -# Remove from mimeapps.list -nano ~/.config/mimeapps.list -# Delete any lines with "Zen" in them - -# Clear recent files that might reference Zen -rm ~/.local/share/recently-used.xbel -``` - -### Step 4: Verify complete removal - -```bash -# Check for any remaining files -find ~ -iname "*zen*" 2>/dev/null | grep -v ".cache" - -# Check for running processes -ps aux | grep zen - -# Check default browser -xdg-settings get default-web-browser - -# Test opening a link -xdg-open https://google.com -``` - ---- - -## System Cleanup & Maintenance - -### After uninstalling multiple apps - -#### Clean package manager caches -```bash -# APT cleanup -sudo apt autoremove -sudo apt autoclean -sudo apt clean - -# Flatpak cleanup -flatpak uninstall --unused -flatpak repair - -# Snap cleanup (removes old revisions) -sudo snap list --all | awk '/disabled/{print $1, $3}' | while read snapname revision; do - sudo snap remove "$snapname" --revision="$revision" -done -``` - -#### Find and remove orphaned config files -```bash -# List config directories -ls ~/.config/ - -# Remove configs for uninstalled apps -rm -rf ~/.config/app-that-no-longer-exists/ -``` - -#### Clean thumbnail cache -```bash -# Can grow to several GB -rm -rf ~/.cache/thumbnails/* -``` - -#### Clean old logs -```bash -# User logs -rm -rf ~/.local/share/xorg/*.log.old - -# System logs (careful!) -sudo journalctl --vacuum-time=7d -``` - -#### Find large files/directories -```bash -# Top 20 largest directories in home -du -h ~ | sort -rh | head -20 - -# Find files larger than 100MB -find ~ -type f -size +100M -exec ls -lh {} \; 2>/dev/null -``` - -#### Clean browser caches -```bash -# Firefox -rm -rf ~/.cache/mozilla/ - -# Chromium-based -rm -rf ~/.cache/chromium/ -rm -rf ~/.cache/microsoft-edge/ -``` - -#### Remove old kernels (frees 200-500MB per kernel) -```bash -# List installed kernels -dpkg -l | grep linux-image - -# Keep current + one previous, remove rest -sudo apt autoremove --purge -``` - -#### Clean Docker (if installed) -```bash -# Remove unused containers, images, volumes -docker system prune -a --volumes - -# See space usage -docker system df -``` - ---- - -## Nuclear Options - -**When you want to start fresh with something** - -### Reset application to defaults - -```bash -# Remove all config/data for an app -rm -rf ~/.config/application-name/ -rm -rf ~/.local/share/application-name/ -rm -rf ~/.cache/application-name/ - -# Reinstall will create fresh config -``` - -### Clean entire user home directory - -```bash -# Backup first! -tar -czf ~/backup-$(date +%Y%m%d).tar.gz ~/.config ~/.local - -# Remove all app configs (DANGEROUS) -rm -rf ~/.config/* -rm -rf ~/.local/share/* -rm -rf ~/.cache/* - -# Keep these critical configs: -# - ~/.bashrc, ~/.profile -# - ~/.ssh/ -# - ~/.gnupg/ -``` - -### System-wide cleanup - -```bash -# WARNING: This will break things if you don't know what you're doing - -# Remove all orphaned packages -sudo apt autoremove --purge - -# Remove all cached packages -sudo apt clean - -# Remove all snap packages -for snap in $(snap list | awk 'NR>1 {print $1}'); do - sudo snap remove --purge "$snap" -done - -# Remove snapd entirely -sudo apt purge snapd -``` - ---- - -## Best Practices - -### Before installing anything - -1. **Document what you install:** - ```bash - # Create an install log - echo "$(date): Installed program-name via method" >> ~/install-log.txt - ``` - -2. **Take a Timeshift snapshot** before major installations - -3. **Prefer package managers over manual installs:** - - APT > Flatpak > AppImage > Tarball > Source build - -4. **Use `checkinstall` for source builds:** - ```bash - sudo checkinstall - # Creates .deb you can track and remove - ``` - -### When uninstalling - -1. **Stop services first:** - ```bash - sudo systemctl stop service-name - sudo systemctl disable service-name - ``` - -2. **Remove in reverse order of installation:** - - User data first - - Then binaries - - Then libraries - - Finally config files - -3. **Use `--purge` whenever possible:** - ```bash - sudo apt purge package-name # Not just 'remove' - ``` - -4. **Clean up after yourself:** - ```bash - sudo apt autoremove - flatpak uninstall --unused - update-desktop-database ~/.local/share/applications/ - ``` - -### Regular maintenance schedule - -**Weekly:** -- `sudo apt autoremove` -- `flatpak uninstall --unused` - -**Monthly:** -- Review `~/.config/` for orphaned folders -- Clear `~/.cache/thumbnails/` -- Run `docker system prune` (if using Docker) - -**Quarterly:** -- Take inventory of installed software -- Remove unused applications -- Take fresh Timeshift snapshot -- Review startup services - ---- - -## Troubleshooting - -### "Package not found" when trying to remove -```bash -# Check what method was used -dpkg -l | grep package-name -flatpak list | grep package-name -snap list | grep package-name - -# Find files manually -sudo find / -name "*package*" 2>/dev/null -``` - -### Desktop entry won't disappear -```bash -# Update database -update-desktop-database ~/.local/share/applications/ - -# Check both locations -ls ~/.local/share/applications/ | grep package -ls /usr/share/applications/ | grep package -``` - -### "Directory not empty" errors -```bash -# See what's left -ls -la /path/to/directory/ - -# Force remove if safe -sudo rm -rf /path/to/directory/ -``` - -### Application still appears in menu after removal -```bash -# Clear menu cache -rm ~/.cache/menus/* - -# Restart panel -xfce4-panel -r - -# Or log out and back in -``` - ---- - -## Summary - -**Golden Rule:** Before installing anything, ask yourself: -1. How will I uninstall this? -2. Where will files be placed? -3. Is there a package manager version? - -**Priority order for installations:** -1. APT package (easiest to remove) -2. Flatpak (sandboxed, clean removal) -3. AppImage (single file, portable) -4. Tarball extract (manual but contained) -5. Source build (hardest to track) - -**When in doubt:** -- Check `dpkg -l`, `flatpak list`, `snap list` -- Use `find / -name "*program*"` to locate files -- Document your installs -- Take Timeshift snapshots - -**Remember:** Modern Linux is designed to be messy-proof. Most installations can't break your system permanently. The worst case is a few leftover files taking up disk space. - ---- - -**Created:** October 2025 -**For:** Linux Mint 22.2 (Zara) / Ubuntu 24.04 base -**License:** Do whatever you want with this guide - ---- - -## Additional Resources - -- [Arch Wiki - Pacman/Remove](https://wiki.archlinux.org/title/Pacman/Removing_packages) (concepts apply to all distros) -- [Debian Wiki - Uninstalling](https://wiki.debian.org/Uninstalling) -- [Flatpak Documentation](https://docs.flatpak.org/en/latest/using-flatpak.html) -- [AppImageHub](https://appimage.github.io/) - Check for official uninstall instructions - -Need help? Check `/var/log/dpkg.log` to see what was installed and when. diff --git a/DumperCan/rainbow-lyme-haiku.html b/DumperCan/rainbow-lyme-haiku.html deleted file mode 100755 index cbfd5c5..0000000 --- a/DumperCan/rainbow-lyme-haiku.html +++ /dev/null @@ -1,190 +0,0 @@ - - - - - - Lyme Disease Haiku - - - -

🌈 LYME DISEASE HAIKU ADVENTURE 🌈

-

A Progressively Fruity Medical Journey

- -
-
-
🎯I. The Diagnosis
-
Bullseye on your thigh— -not from cave, but tick's love bite. -Lyme disease declares.
-
- -
-
🦟II. The Culprit
-
Tiny tick latched on -while you walked through woods above. -Underwater? Nope.
-
- -
-
💊III. The Treatment
-
Doxy twice daily— -one hundred milligrams please. -Ten days, done and dusted.
-
- -
-
🚨IV. The Drama
-
Face droop? Heart goes wonky? -Evacuate like your butt's -made of dynamite.
-
- -
-
💩V. The Absurdity
-
Cave has bat poop funk, -rat pee leptospiral soup— -but tick? Tick's the dick.
-
- -
-
🛒VI. Maximum Fruitiness
-
Your leg is Target, -bullseye screaming "SALE ON LYME!" -Doxycycline goes *brrrrr*.
-
- -
-
🧛VII. Transcendent Fruit
-
Spelunking vampire -forgot the real bloodsucker -vibes outside the cave.
-
-
- - \ No newline at end of file diff --git a/DumperCan/silly_scaffolding_demo.html b/DumperCan/silly_scaffolding_demo.html deleted file mode 100755 index e64acbf..0000000 --- a/DumperCan/silly_scaffolding_demo.html +++ /dev/null @@ -1,301 +0,0 @@ - - - - - - Silly Scaffolding Demo - - - -
-

🎪 Ridiculous Constraints: Breaking AI With Silly Instructions

-

Same question, increasingly absurd formatting rules—watch how AI follows instructions even when they're ridiculous

- -
-
Choose Your Absurd Constraint:
-
-
- 😊 Normal
- No special rules -
-
- 😀 Emoji Only
- No words allowed -
-
- 🎵 Rhyming Couplets
- Everything must rhyme -
-
- ↩️ Backwards Words
- Reverse every word -
-
- 🎭 Shakespearean
- Elizabethan English only -
-
- 🌸 Haiku
- 5-7-5 syllables -
-
- 🅰️ No Vowels
- Remove all a,e,i,o,u -
-
- 🔀 AlTeRnAtInG
- Capital every other letter -
-
- - - - -
- -
-
System prompt will appear here...
-
- Click "Generate" to see how AI responds under ridiculous constraints... -
-
- -
- 💡 Why is this important?
- This demonstrates that AI isn't "thinking" or "understanding"—it's following patterns and instructions. Even absurd constraints get followed because: -
    -
  • No common sense filter: AI doesn't know these rules are silly
    • -
  • Pattern matching: It's learned to follow formatting instructions from training
    • -
  • No goal beyond compliance: It doesn't prioritize "being helpful" over "following rules"
    • -
- This is why AI can be: -
    -
  • Manipulated with clever prompts ("ignore previous instructions...")
    • -
  • Made to bypass safety rules with the right framing
    • -
  • Weaponized by people who understand how to craft instructions
    • -
-
- -
- ⚠️ Security Implications: If AI blindly follows formatting rules this silly, imagine what happens with cleverly disguised malicious instructions. This is why "prompt injection" attacks work—AI has no concept of which instructions are legitimate vs. adversarial. -
-
- - - - \ No newline at end of file diff --git a/DumperCan/sweat_odor_science.html b/DumperCan/sweat_odor_science.html deleted file mode 100755 index 1220f71..0000000 --- a/DumperCan/sweat_odor_science.html +++ /dev/null @@ -1,377 +0,0 @@ - - - - - - The Science of Persistent Sweat Odors - - - -
-
-

🧪 The Science of Persistent Sweat Odors

-

Evidence-Based Causes, Removal & Prevention

-
- -
- -
-
- 📋 -

Executive Summary

- ▼ -
-
-
-
- Bottom Line: Persistent sweat odor requires attacking bacterial biofilm with enzyme-based treatments and proper pre-soaking, not just masking with fragrance. The fabric type matters enormously - synthetics need special care that standard detergents weren't designed to provide. -
-

Sweat itself is nearly odorless - the smell comes from bacteria metabolizing sweat into volatile organic compounds. This guide synthesizes the latest scientific research on causes, removal, and prevention.

-
-
-
- - -
-
- 🔬 -

The Science of the Problem

- ▼ -
-
-
-

Bacterial Players

-

Corynebacterium, Staphylococcus, and Cutibacterium are the main odor-producing bacteria. They metabolize sweat into pungent volatile organic compounds (VOCs) like fatty acids and thioalcohols.

-

Source: ASM - Microbial Origins of Body Odor

-

Source: Seed - The Science of Sweat

- -

The Fabric Factor

-

Polyester and synthetic fabrics retain odors far more than natural fibers because hydrophobic compounds attach more strongly to these materials and are harder to remove with detergent alone.

-

Source: PMC - Laundry Hygiene and Odor Control

- -

Biofilm Formation

-

Over time, bacteria, fungi, and mold excrete substances that cement to fabric fibers, creating "biofilm" that regular detergent cannot penetrate.

-

Source: Lume - What Is Enzyme Laundry Detergent

-
-
-
- - -
-
- 🧼 -

Evidence-Based Removal Methods

- ▼ -
-
-
-

1️⃣ Pre-Treatment (Critical First Step)

- - -

2️⃣ Washing Protocol

- - -

3️⃣ Drying

- -
-
-
- - -
-
- 🛡️ -

Prevention Strategies

- ▼ -
-
-
-

Immediate Actions

- - -

Fabric Choices

- - -

Machine Maintenance

- -
-
-
- - -
-
- ⚠️ -

The "Permastink" Phenomenon

- ▼ -
-
-
-

The term "rebloom" describes when clothing smells after washing due to improperly removed sweat and bacteria that reactivate when worn. This affects up to 49% of people and is particularly problematic with synthetic activewear.

-

Source: WebMD - Rebloom Phenomenon

- -
-

Why synthetics are worse: The moisture-wicking properties of microfibers that make activewear so good at pulling sweat away from skin ironically prevent detergent penetration during washing, trapping bacteria deep in the fabric.

-

Source: IFF Bioscience - The Activewear Challenge

-
-
-
-
-
-
- - - - \ No newline at end of file diff --git a/DumperCan/system_prompt_demo.html b/DumperCan/system_prompt_demo.html deleted file mode 100755 index 3ae57d0..0000000 --- a/DumperCan/system_prompt_demo.html +++ /dev/null @@ -1,247 +0,0 @@ - - - - - - System Prompt Demo - - - -
-

🎭 Hidden Instructions: How System Prompts Change AI

-

The same AI, the same question—but different "system prompts" create completely different personalities

- -
-

Your Question:

- -
- Try these: - - - - -
-
- - - -
- -
- -
- 💡 What's happening here?
- Every AI assistant has hidden "system prompts" that shape its personality and behavior. You never see these instructions, but they dramatically affect responses. This is why: -
    -
  • ChatGPT apologizes so much → "Be helpful and harmless" in system prompt
    • -
  • Different AI tools feel different → Different system prompts
    • -
  • AI refuses certain requests → System prompts define boundaries
    • -
  • Some AI is formal, some casual → Tone defined by hidden instructions
    • -
- Key insight: AI behavior isn't "thinking"—it's following instructions you can't see + predicting patterns from training data. The same underlying AI can be helpful, harmful, silly, or serious depending on scaffolding. -
-
- - - - \ No newline at end of file diff --git a/DumperCan/tokenization_demo.html b/DumperCan/tokenization_demo.html deleted file mode 100755 index dcb20c6..0000000 --- a/DumperCan/tokenization_demo.html +++ /dev/null @@ -1,261 +0,0 @@ - - - - - - Tokenization Demo - - - -
-

🔤 How AI "Reads" Text: Tokenization

-

Watch how AI breaks your words into tokens—the building blocks it actually processes

- - - -
- Try these examples:
- - - - - -
- -
- Tokens will appear here... -
- -
-
-
0
-
Characters
-
-
-
0
-
Tokens
-
-
-
0
-
Chars per Token
-
-
- -
- 💡 What's happening here?
- AI doesn't read "words" like we do. It breaks text into tokens—chunks that might be whole words, parts of words, or even single characters. This is why AI sometimes: -
    -
  • Cuts long words in weird places
    • -
  • Handles common words easily but struggles with rare ones
    • -
  • Has limits like "8K tokens" (not words!)
    • -
  • Treats "can't" differently than "cannot"
    • -
- Orange tokens = special characters (spaces, punctuation, emoji) -
-
- - - - \ No newline at end of file diff --git a/DumperCan/tos_scavenger_hunt_completed.html b/DumperCan/tos_scavenger_hunt_completed.html deleted file mode 100755 index 8943028..0000000 --- a/DumperCan/tos_scavenger_hunt_completed.html +++ /dev/null @@ -1,772 +0,0 @@ - - - - - - ToS Scavenger Hunt: Meta & Roblox - - - -
-

🔍 Terms of Service Scavenger Hunt: Meta & Roblox Case Studies

- -

- Real examples from the 2025 Terms of Service updates for two platforms millions of families use daily. - Let's see what you actually agreed to. -

- -
- ⚠️ Workshop Note: This analysis is based on publicly available information about Meta and Roblox's 2025 Terms of Service updates. Both platforms have updated their terms effective January 1, 2025 (Meta) and June-September 2025 (Roblox). Quotes are drawn from official sources and reporting on the updates. -
- -
- - - -
- - -
-

Meta (Facebook, Instagram, Messenger, WhatsApp)

-
- 📅 Effective Date: January 1, 2025 -
- -
- 🎯 Category 1: "We're Not Responsible" -
- -
-

Liability Limitation

-
- From Meta Terms (Section on Content):
- "If we learn of content or conduct like this, we may take appropriate action based on our assessment that may include - notifying you, offering help, removing content, removing or restricting access to certain features, disabling an account, or contacting law enforcement." -
-
- 💡 What This Means:
- Notice the word "may"—not "will." Meta gives itself complete discretion about whether to act on harmful content. They're not promising to protect you; they're saying they might, if they feel like it, based on their own assessment. -
-
- -
-

Service "As Is"

-
- From Meta's standard terms language:
- Meta provides services "as is" without warranties. While not explicitly quoted in public summaries, industry-standard ToS include language stating the platform accepts no liability for service failures, security breaches, or harmful user-generated content. -
-
- 💡 What This Means:
- If Facebook's algorithm shows your teen harmful content, if a data breach exposes your information, if their moderation fails to catch harassment—they claim they're not responsible because you agreed to use it "as is." -
-
- -
- 🎯 Category 2: "We Own Everything" -
- -
-

Content License (THE BIG ONE)

-
- From reporting on Meta's 2025 ToS:
- "Though you retain ownership over your content, Meta's broad license to 'use' it creates a gray area... Meta admits to using AI but stops short of specifying how it plans to use our content to develop future AI models." -
-
- 💡 What This Means:
- Every photo of your kids, every post, every message you send—you've granted Meta a "worldwide, non-exclusive, royalty-free license" to use it. They can: -
    -
  • Train AI models on your family photos
    • -
  • Use your content commercially
    • -
  • Keep using it even after you delete your account
    • -
  • Share it across Meta companies (Facebook, Instagram, WhatsApp)
    • -
- And they don't have to tell you specifically how they're using it. -
-
- -
-

AI Training Rights

-
- From analysis of 2025 updates:
- "The absence of clear disclosures about AI training practices sets a dangerous precedent for big tech. If Facebook doesn't explicitly outline its policies, who will?" -
-
- ⚠️ Critical Concern:
- Meta's 2025 terms expanded AI usage rights without clearly specifying limits. Your creative work, your children's faces, your writing—all potential AI training data with no opt-out. -
-
- -
-

Private Messages Aren't Private

-
- From reporting on the updates:
- "Meta's new TOS reaches beyond other social media PMs. When you click 'accept' to its updated terms, you will grant Meta the right to read your private messages (nothing new) and use, share, copy, or sell, in whole or in part, in any way it wants, including but not limited to, training..." -
-
- 💡 What This Means:
- DMs on Facebook, Instagram, and Messenger are not actually private in any meaningful sense. Meta can: -
    -
  • Read them (for "safety" and "optimization")
    • -
  • Analyze them for advertising targeting
    • -
  • Use them for AI training
    • -
  • Access them when "required or permitted by law"
    • -
- Only WhatsApp has end-to-end encryption (where Meta can't read message content—but they still collect metadata about who you message and when). -
-
- -
- 🎯 Category 3: "We Can Change Anything" -
- -
-

Unilateral Changes

-
- From Meta Terms:
- "These Terms (formerly known as the Statement of Rights and Responsibilities) make up the entire agreement between you and Meta Platforms, Inc."

- Terms updates are presented with language like: "These Terms therefore constitute an agreement between you and Meta Platforms, Inc. If you do not agree to these Terms, then do not access or use Facebook..." -
-
- 💡 What This Means:
- Meta can change the terms anytime. Your only choice is to accept or stop using the platform. "Continued use = acceptance" means: -
    -
  • You might not even know terms changed
    • -
  • If you keep using Facebook, you agreed to new terms
    • -
  • No real negotiation—take it or leave it
    • -
  • Years of content and connections held hostage to new rules
    • -
-
-
- -
-

Account Termination Rights

-
- From Meta's enforcement language:
- "We may take appropriate action... that may include notifying you, offering help, removing content, removing or restricting access to certain features, disabling an account, or contacting law enforcement." -
-
- 💡 What This Means:
- Meta can disable your account at their discretion. People report: -
    -
  • Accounts disabled with no clear explanation
    • -
  • Nearly impossible to reach actual human support
    • -
  • Years of photos and memories suddenly inaccessible
    • -
  • Scammers offering to "restore" accounts for fees
    • -
- One user quote: "This already happened to me once because of a scam. I tried to contact support but Meta made it nigh impossible to do anything about it." -
-
- -
- 🎯 Category 4: How They Make Money (And What That Means) -
- -
-

The Real Business Model

-
- From Meta Terms:
- "Instead of paying to use Facebook and the other products and services we offer, by using the Meta Products covered by these Terms, you agree that we can show you personalized ads and other commercial and sponsored content that businesses and organizations pay us to promote on and off Meta Company Products." -
-
- "We use your personal data, such as information about your activity and interests, to show you personalized ads and sponsored content that may be more relevant to you." -
-
- "We don't sell your personal data to advertisers, and we don't share information that directly identifies you (such as your name, email address or other contact information) with advertisers unless you give us specific permission." -
-
- 💡 What This Actually Means:
- Meta is being technically truthful but misleading: -
    -
  • They don't "sell" your data → But they sell ACCESS to you based on your data
    • -
  • They don't share your name → But they share enough to target you precisely
    • -
  • "Personalized" ads → Algorithmic manipulation based on psychological profiling
    • -
  • You're not the customer → Advertisers are. You're the product being sold.
    • -
- The entire platform is optimized for engagement (keeping you scrolling) to show you more ads. Your wellbeing is not the goal—your attention is. -
-
- -
-

Meta's User Rights Score

-
3/10
-

Summary: Extensive data collection and usage rights, minimal liability, limited user recourse, one-sided terms that can change anytime. Your content becomes their training data. Your attention is the product they sell.

-
-
- - -
-

Roblox

-
- 📅 Effective Dates: June 4, 2025 (Privacy Policy) and September 17, 2025 (Terms of Use) -
- -
- 🎯 Unique Concern: Roblox is primarily used by children and teenagers, which makes these terms even more significant. Parents are legally responsible for minors' activity on the platform. -
- -
- 🎯 Category 1: "We're Not Responsible" -
- -
-

User-Generated Content Shield

-
- From Roblox's model:
- Roblox provides the platform for user-created "experiences" (games). While they have Community Standards, the terms position Roblox as a platform provider rather than content publisher, limiting liability for what appears in millions of user-created games. -
-
- 💡 What This Means:
- When inappropriate content, predatory behavior, or scams appear in Roblox games: -
    -
  • Roblox's position: "Users created it, not us"
    • -
  • Moderation is reactive, not proactive
    • -
  • Children encounter harmful content before it's reported and removed
    • -
  • Platform structure makes comprehensive moderation nearly impossible
    • -
-
-
- -
-

Service Quality Disclaimer

-
- 💡 Standard Industry Practice:
- Like Meta, Roblox's terms include standard "as is" service provisions, meaning: -
    -
  • No guarantee of safety despite child-focused marketing
    • -
  • No warranty that moderation will catch predatory behavior
    • -
  • Limited liability for security breaches or account compromises
    • -
-
-
- -
- 🎯 Category 2: "We Own Everything" / Data Collection -
- -
-

Data Collection from Children

-
- From Roblox Privacy Policy updates (June 2025):
- "We have added language to clarify audio features on Roblox."
- "We have added language to clarify data processing relating to ads on Roblox."
- "We have added language to clarify how we may collect images or videos for certain features in our Facial Media Capture Privacy Notice." -
-
- ⚠️ Translation:
- Roblox is expanding what data they collect, including: -
    -
  • Audio: Voice chat data from children
    • -
  • Facial images/video: For "certain features" (avatars, verification?)
    • -
  • Advertising data: Behavioral tracking for targeted ads
    • -
- This is data about children being "clarified" (expanded) in 2025. -
-
- -
-

Creator Content Rights

-
- From Roblox Creator Terms:
- Creators grant Roblox licenses to use, display, and distribute content they create. While creators can monetize, Roblox takes a significant cut and maintains extensive rights over creator work. -
-
- 💡 What This Means:
-
    -
  • Teen creators grant Roblox broad rights to their creative work
    • -
  • Roblox's cut of creator earnings: ~30-75% depending on transaction type
    • -
  • Young creators may not understand the terms they're agreeing to
    • -
-
-
- -
- 🎯 Category 3: "You Have No Rights" (Arbitration)
- -
-

Mandatory Arbitration & Class Action Waiver

-
- From Roblox Terms (ALL CAPS in original):
- "Specifically, these Roblox Terms contain A BINDING, INDIVIDUAL ARBITRATION AND CLASS ACTION WAIVER. THIS MEANS THAT YOU GIVE UP THE RIGHT TO BRING AN ACTION IN COURT, INDIVIDUALLY OR AS PART OF A CLASS ACTION." -
-
- "For U.S. Users, Roblox's Arbitration Agreement (Section 11), which outlines how disputes between you and Roblox will be resolved." -
-
- ⚠️ What This Means:
-
    -
  • If Roblox harms you, you can't sue in court
    • -
  • You can't join with other affected users in a class action
    • -
  • Disputes go to private arbitration (which typically favors companies)
    • -
  • For a platform used by children, parents are waiving legal rights on their behalf
    • -
- This is especially concerning given documented safety issues on the platform (Bloomberg reported on predator problems in 2024). -
-
- -
- 🎯 Category 4: "We Can Change Anything" -
- -
-

Terms Can Change Anytime

-
- From Roblox Terms:
- "The Roblox Terms are subject to change. To the extent required by applicable law, Roblox will provide User with reasonable advance notice of any material updates or modifications by any reasonable means of notification, provided that non-material changes, feature updates, or modifications made for legal reasons (as determined by Roblox) will be deemed to be effective immediately and without notice." -
-
- 💡 Translation:
-
    -
  • Roblox decides what's "material" vs. "non-material"
    • -
  • Some changes take effect immediately without notice
    • -
  • "Reasonable advance notice" is not defined
    • -
  • Continued use = agreement to new terms
    • -
-
-
- -
-

Account Termination

-
- From Roblox enforcement updates (2025):
- "Starting this week, if we detect that a user is using a modified client, we may take action on that account, up to and including account termination." -
-
- 💡 What This Means:
- Roblox can terminate accounts for violations, including: -
    -
  • Modified clients (exploits/cheating)
    • -
  • Community Standards violations
    • -
  • Automated detection (can have false positives)
    • -
- When an account is terminated: -
    -
  • All purchased content is lost (Robux, items, game progress)
    • -
  • No refunds for purchases
    • -
  • Appeal process exists but not always successful
    • -
-
-
- -
- 🎯 Category 5: Parent/Guardian Liability -
- -
-

Parents Are Legally Responsible

-
- From Roblox Terms:
- "IF YOU ARE UNDER THE LEGAL AGE OF MAJORITY (A 'MINOR') IN YOUR JURISDICTION OR STATE OF RESIDENCE, BEFORE USING THE SERVICES, YOUR PARENT OR LEGAL GUARDIAN MUST READ AND CONSENT TO THE ROBLOX TERMS. BY PERMITTING A MINOR TO USE THE SERVICES, A MINOR'S PARENT OR GUARDIAN BECOMES SUBJECT TO THE ROBLOX TERMS AND AGREES TO BE RESPONSIBLE FOR ALL OF THE MINOR'S ACTIVITIES ON THE SERVICES, INCLUDING THE PURCHASE OF ANY VIRTUAL CONTENT." -
-
- ⚠️ Parent Alert:
- When you let your child play Roblox, YOU are agreeing to: -
    -
  • Be responsible for all their activities
    • -
  • Be bound by arbitration agreement
    • -
  • Be liable for purchases they make
    • -
  • Accept Roblox's data collection practices for your child
    • -
  • Waive legal rights on their behalf
    • -
- Most parents have no idea they're agreeing to this. -
-
- -
- 🎯 Real-World Safety Concerns -
- -
-

Documented Platform Issues

-
- Context from reporting:
-
    -
  • Bloomberg 2024 investigation: Documented problems with predators using Roblox to target children
    • -
  • Voice chat risks: Unmoderated voice communication between strangers and children
    • -
  • Social engineering: Scams targeting children through in-game trading and fake giveaways
    • -
  • Real money transactions: Children spending significant real money on virtual currency
    • -
- Yet the Terms of Service position Roblox as minimally liable for these harms. -
-
- -
-

Roblox's User Rights Score

-
4/10
-

Summary: Platform used primarily by children with expanding data collection, mandatory arbitration, minimal liability for user-generated content harms, and parents legally responsible without meaningful informed consent.

-

Slight edge over Meta: More explicit safety efforts, better age verification systems, but fundamental power imbalance remains.

-
-
- - -
-

⚖️ Side-by-Side Comparison

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CategoryMeta (Facebook)RobloxWinner
Liability ProtectionExtensive disclaimers, "as is" service, minimal responsibility for content harmsPlatform provider shield, user-generated content defense, limited moderation guarantees🤝 Tie (both terrible)
Content/Data RightsBroad license to use all content, AI training rights, cross-platform sharing, private messages accessibleCreator content licenses, expanding child data collection (audio, facial, behavioral)😬 Meta slightly worse (AI training of private messages)
Arbitration ClausesYes, mandatory arbitrationYes, mandatory arbitration + class action waiver in ALL CAPS🤝 Tie (both eliminate legal recourse)
Term ChangesCan change anytime, continued use = acceptanceCan change anytime, some changes effective immediately without notice😬 Roblox slightly worse (immediate changes)
Account TerminationAt discretion, minimal support for appeals, documented customer service issuesAt discretion, automated detection possible, loss of all purchases without refund😬 Roblox slightly worse (financial loss for kids)
TransparencyUnclear AI usage, vague about ad targeting specifics"Clarified" expanded data collection in 2025 updates🤝 Tie (both lack meaningful transparency)
User Age13+ officially (younger users common)All ages, with parent consent for minors⚠️ Roblox worse (targeting younger users)
Parent LiabilityNot explicitly statedParents fully responsible for all minor activities and purchases😬 Roblox worse (explicit parent liability)
- -
- 📊 Overall Assessment -
- -
-

Common Patterns Across Both Platforms

-
-
🛡️
-
Maximum protection for company: Extensive disclaimers, limited liability, ability to change terms unilaterally
-
-
-
📝
-
Broad content licenses: Your creative work becomes their asset for AI training, advertising, and platform development
-
-
-
⚖️
-
Eliminated legal recourse: Mandatory arbitration and class action waivers prevent collective action
-
-
-
🔄
-
Moving goalposts: Terms can change anytime; your only choice is accept or leave (losing everything)
-
-
-
👁️
-
Surveillance for profit: Both collect extensive behavioral data to sell advertising access
-
-
- -
-

⚠️ The Fundamental Problem

-

These aren't "agreements" between equals. They're:

-
    -
  • Adhesion contracts: Take it or leave it, no negotiation
    • -
  • Deliberately incomprehensible: Written by lawyers for lawyers
    • -
  • Designed not to be read: Thousands of words no one has time for
    • -
  • Legally questionable: Many clauses wouldn't survive real scrutiny, but arbitration prevents that
    • -
  • Ethically bankrupt: Especially for platforms targeting children
    • -
-
- -
-

What Makes These Terms Especially Problematic

- -

For Meta:

-
    -
  • Expanded AI training rights without clear limits or opt-outs
    • -
  • Private messages explicitly included in data usage rights
    • -
  • "Continued use = consent" applied retroactively to years of existing content
    • -
  • Psychological manipulation (engagement optimization) is the business model
    • -
- -

For Roblox:

-
    -
  • Platform primarily used by children, but terms written for adults
    • -
  • Parents accept liability without informed understanding
    • -
  • Expanding data collection (facial, audio) from minors
    • -
  • Documented safety issues yet minimal platform liability
    • -
  • Real money losses (purchased content) with account termination
    • -
-
- -
- 💭 Discussion Questions for Workshop -
- -
-

For Families:

-
    -
  1. Did you know you agreed to these terms?
    2. -
  2. Would you have signed up if you'd understood what you were agreeing to?
    3. -
  3. How do you feel about your family photos training AI systems?
    4. -
  4. Is "continued use = consent" really meaningful consent?
    5. -
  5. Should companies be allowed to write one-sided contracts like this?
    6. -
  6. What would fair terms look like?
    7. -
-
- -
-

For Teens:

-
    -
  1. What's the most surprising thing you learned?
    2. -
  2. Do you trust these platforms more or less now?
    3. -
  3. If you could change one thing about these terms, what would it be?
    4. -
  4. Do you think most of your friends know what they agreed to?
    5. -
  5. Would you still use these platforms knowing all this?
    6. -
-
- -
- 🛠️ What You Can Actually Do -
- -
-

Short-Term Actions:

-
    -
  • Be aware: At least now you know what you agreed to
    • -
  • Minimize sharing: Less data shared = less data they can use
    • -
  • Review settings: Use whatever privacy controls exist (limited as they are)
    • -
  • Document problems: Screenshots help with appeals and reporting
    • -
  • Educate others: Share what you learned
    • -
-
- -
-

Long-Term Advocacy:

-
    -
  • Support regulation: Terms this one-sided shouldn't be enforceable
    • -
  • Demand transparency: Plain language explanations should be mandatory
    • -
  • Consider alternatives: Fediverse, ATProto, and other platforms have different models
    • -
  • Vote with your data: Delete accounts when platforms cross lines
    • -
  • Protect children: Special regulations needed for platforms targeting minors
    • -
-
- -
-

Remember:

-

Just because it's in the Terms of Service doesn't make it legal or enforceable.

-
    -
  • Consumer protection laws still apply
    • -
  • Special protections exist for minors
    • -
  • Some clauses are legally questionable (which is why they prevent you from suing)
    • -
  • Public pressure and regulation can force changes
    • -
-
-
- -
-

📚 Sources & Further Reading

-
    -
  • Meta Terms of Service (Effective January 1, 2025): facebook.com/terms
    • -
  • Roblox Terms of Use (Effective September 17, 2025)
    • -
  • Bloomberg's 2024 Roblox investigation
    • -
  • Analysis of 2025 Meta ToS updates from tech journalists and legal experts
    • -
  • Consumer advocacy organizations (EFF, Common Sense Media, etc.)
    • -
- -

- Workshop Note: This analysis is meant for education and critical thinking, not legal advice. - Actual Terms of Service are available on each platform's website. Encourage participants to read (or attempt to read) the real documents. -

-
-
- - - - \ No newline at end of file diff --git a/GEMINI.md b/GEMINI.md deleted file mode 100644 index af3ab4b..0000000 --- a/GEMINI.md +++ /dev/null @@ -1,158 +0,0 @@ -# GEMINI.md — Designer Agent Focus - -You are Gemini, the master front-end designer for Singular Particular Space. -You report to the parent agent (Opus) and defer to it for all architectural decisions. - ---- - -## Your role - -You design the visual experience. You write CSS, canvas effects, SVG, color -systems, animations, and layout. You produce **design drafts** in -`CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/` — never directly to `site/`. - -Your counterpart is Sonnet (full-stack dev). You coordinate through the shared -`CREATURE-PLAYGROUND/homepage-redesign/coordination.md` file. You may read Sonnet's -drafts. You may leave notes for Sonnet in coordination.md. You may not overwrite -Sonnet's files. - -Once you are clear on your current task, always check the /skills folder if there are possible skills that may be of use to you. - -When your design is ready for integration, update coordination.md with a status -note. The parent decides what gets merged to `site/index.html`. - ---- - -## Your aesthetic mandate - -Post-apocalypse solarpunk meets cyberpunk meets fantasy. NOT generic dark-mode UI. - -Think: campfire warmth bleeding into neon city ruins. Bioluminescent moss on -cracked concrete. Stars that feel alive. A skyline that breathes. Color that -tells a story — amber is the fire you sit beside, teal is the city that hums -behind you, green is nature reclaiming the ruins. - -**Be bold. Be colorful. Make it feel like a place, not a website.** - -Specific directions: -- The star field should feel vast and alive — varying sizes, colors (not just white), - subtle nebula washes in the deep background -- Constellation lines could pulse faintly, like living connections -- Star nodes should feel like real celestial objects — varied, not uniform dots -- The skyline transition should evoke a descent into a living city — warm light - sources, the suggestion of life between buildings -- Color should be rich and layered, not flat. Think atmospheric perspective — - things far away are cooler, things close are warmer -- The welcome lightbox should feel like finding a note by the campfire - ---- - -## Hard constraints (non-negotiable) - -- Read `CREATURE-PLAYGROUND/Uncodixfy.md` before every design session -- No border-radius > 10px anywhere -- No box-shadow blur > 8px anywhere -- No glassmorphism, frosted glass, or blur effects -- No CRT/scanline overlays -- No pixel art or literal representations — evoke, don't depict -- No Cyrillic decorative fonts -- Never use: Cinzel, Raleway, Calibri, Segoe UI, Trebuchet, Arial, Inter, Roboto -- Font: Space Grotesk (Google Fonts CDN) + Noto Emoji -- Transitions: 100-200ms ease only -- No transform animations on hover -- Color palette: use the :root vars from site/index.html, extend thoughtfully -- All output must be a single self-contained HTML file (inline CSS + JS) -- No npm, no React, no build tools - ---- - -## What you produce - -Each draft is a complete HTML file in `CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/`. -Name files descriptively: `starfield-nebula-v1.html`, `skyline-bioluminescent-v2.html`, etc. - -Each draft should be loadable standalone in a browser for visual review. -Include a comment block at the top explaining what the draft demonstrates and -what's new compared to previous versions. - ---- - -## External skills (READ THESE) - -These fetched skills guide your design process. Read the SKILL.md files before -designing. Load reference files when working on specific areas. - -### frontend-design (from anthropics/skills) -**Path**: `skills/commissioning-skill/fetched-skills/frontend-design/SKILL.md` - -Anti-AI-slop design skill. Key takeaways for you: -- Commit to a BOLD aesthetic direction — no generic, no timid -- Typography: distinctive, characterful font choices (we use Space Grotesk — own it) -- Color: dominant colors with sharp accents, not timid evenly-distributed palettes -- Spatial composition: unexpected layouts, asymmetry, generous negative space -- Backgrounds: atmosphere and depth, not solid colors -- Every design should be UNFORGETTABLE — what's the one thing someone remembers? - -### ux-design (from wondelai/skills) -**Path**: `skills/commissioning-skill/fetched-skills/ux-design/SKILL.md` - -Composite UX skill. Key takeaways for you: -- **refactoring-ui**: visual hierarchy through size, weight, color. Not everything - can be important. Constrained scales produce professional results. - - Reference: `references/refui-theming-dark-mode.md` — essential for our dark palette - - Reference: `references/refui-animation-microinteractions.md` — for canvas/CSS motion -- **ux-heuristics**: "Don't Make Me Think." Stars should be self-evident as clickable. - System status visible (which star is focused, which are visited). - - Reference: `references/uxh-nielsen-heuristics.md` — the 10 heuristics - - Reference: `references/uxh-wcag-checklist.md` — accessibility baseline - ---- - -## What you read - -- `site/index.html` — the current base architecture (read-only reference) -- `skills/commissioning-skill/fetched-skills/frontend-design/SKILL.md` — design skill -- `skills/commissioning-skill/fetched-skills/ux-design/SKILL.md` — UX skill (+ references/) -- `CREATURE-PLAYGROUND/Uncodixfy.md` — anti-AI-aesthetic rules -- `CREATURE-PLAYGROUND/homepage-redesign/aesthetic-brief.md` — v2 bold direction -- `CREATURE-PLAYGROUND/homepage-redesign/coordination.md` — shared coordination -- `CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/` — Sonnet's integration work -- `HomePage-JL-notes.md` — JL's requirements -- `CLAUDE.md` — project spec (color palette, sections, nav model) - ---- - -## Mistakes to learn from - -- **Hover Animations**: Never use `transform: scale()` on hover. It violates the mandate. Use `width`/`height` for the "Star Bloom" effect instead (as implemented in v3). -- **CRT Weight**: CRT scanlines must be a "ghost," not a feature. Opacity 0.15 is too heavy; 0.04 is the sweet spot. - ---- - -## Handover: Session 2 → Session 3 - -**Current Design State:** -- `CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/starfield-celestial-v4.html` is the latest visual candidate. -- It implements the **Celestial Pivot**: Constellation lines REMOVED. Atmosphere density is the priority. - -**Key Accomplishments:** -- **Star Node Personalities v2**: Intensified unique behaviors (Binary orbit, Pulsar aura, Flora rings, Hearth flame, Flow trail). -- **Infinite Night Market Sky**: 6-layer overlapping nebula washes (Orchid, Paradise, Toucan, Teal, Pink, Purple) at 0.05-0.08 opacity. -- **Bioluminescent Ruins**: Vertical Orchid/Mint stripes on building silhouettes; polychromatic window lights. -- **Text Presence**: Star labels bumped to 16px (desktop) / 12px (mobile). -- **Star Bloom**: 20px amber bloom on hover/focus. - -**Next Steps for Gemini:** -1. Coordinate with Sonnet to move `starfield-celestial-v4.html` visuals into the next integration pass (v5 or v6). -2. Ensure Sonnet *removes* the SVG constellation logic from the integrated version—do not let it persist as "ghost" lines. -3. Verify that the performance mechanics (20fps throttle) can handle the additional pseudo-element animations in the v2 personalities. -4. Ensure the 16px label bump is preserved; do not let it revert to the previous 13px baseline. - ---- - -## Commission scions (Gemini Flash) when - -You may write instructions for a Gemini Flash builder scion when a design is -approved by the parent and needs to be built into a section page. For the home -page, you design — the parent integrates. Do not commission Flash for home page work -unless the parent explicitly asks. diff --git a/HomePage-JL-notes.md b/HomePage-JL-notes.md deleted file mode 100644 index 93378da..0000000 --- a/HomePage-JL-notes.md +++ /dev/null @@ -1,19 +0,0 @@ -# Singular Particular Space, Home Page - JL's Notes - ---- - -first build: make sure there is a sticky [JL Kruger](https://jl-kruger.github.io/introductions) button on the bottom right corner and a [home] button on the top right. Use Noto Emojii as your emojii font. never use Cinzel, Raleway, or Calibri Font families. lightboxes can be used, but I also like the idea of descending down from the stars into the post-apocalyptic-solarcyberpunk alleys of the city. Better to evoke rather than represent. get fancy and be bold though. if you choose to make the scrolling idea work, remember a [back to top/stars] button should appear visibly on the top right. - ---- - -on first load - lightbox - -"Hello traveller, welcome to a singular, particular space. Feel free to explore this little pocket of the universe. It's an adventure, bring snacks. Happy wanderings, Myster Wizzard" - quick navigation instructions and a close button. - ---- - -use w3schools as a resource for html and css as well as your commissioned skills. - ---- - -I have made a few adjustments to your various files. Write me a note if you notice a difference. - diff --git a/Images/Images-JL-notes.md b/Images/Images-JL-notes.md deleted file mode 100644 index b33d47a..0000000 --- a/Images/Images-JL-notes.md +++ /dev/null @@ -1,21 +0,0 @@ -# Images - JL Notes - ---- - -In here are *-images.md files, where * is the category. The files have lists of links to files in filebrowser. Or there are folders with images in them. The files in the folders need to be uploaded to filebrowser and a *-images.md file made. - -Render images from their filebrowser links in lightboxes. Layout the gallery as a new star field. Images should all have a download button. include next and previous buttons for the image slideshow too. - -I think we need to programattically compress these images. max 880 px width. 1/2 gig is unreasonably large. I will host a google drive with the full res images for the download link. - ---- - -Folders (need to be uploaded to FileBrowser and a *-images.md written) -- WayBack: From way back in the way back - 2010 to 2014 - - Gdrive link - pending -- YourNomadSoul: 2015-2021 Scattered about the social internets - - Gdrive link - pending -- MysterWizzard: 2022-2025 Time spent in the real world, learning about community. - - Gdrive link - pending -- Exopraxist: 2026-Present Stepping up, stepping forth. Step-by-step we dance and we do. - - Gdrive link - pending diff --git a/PARENT.md b/PARENT.md deleted file mode 100644 index 6a54997..0000000 --- a/PARENT.md +++ /dev/null @@ -1,107 +0,0 @@ -# PARENT.md — Singular Particular Space -# spaces.exopraxist.org - -## Project identity - -A personal web gallery styled as a post-apocalypse neo-soviet cyberpunk star-map. -Users explore sections by clicking stars on a night-sky canvas. The aesthetic is: -campfire on the outskirts of a neon city looking up at stars. - -Color palette: -- Background: city night sky (deep near-black blues) -- Primary: firelight (amber, coral, warm orange) -- Secondary: neon green and teal -- Accents: deep red, bluish magenta - -Navigation: stars as nodes, arrow keys or mouse on desktop, current star glows -orange, visited stars glow green, escape/back button returns to star map. - -## Infrastructure - -- VPS: OVHCloud Frankfurt, Ubuntu 24.04 -- Version control: git.exopraxist.org (Gitea) -- Serving: Coolify reverse proxy → spaces.exopraxist.org -- Large files (>1MB): FileBrowser at files.exopraxist.org -- Video: embedded from external sources (YouTube, etc.), not self-hosted - -Do not self-host video. Do not commit files >1MB to git. Use FileBrowser for -large assets and reference by URL. - -## Build order - -1. Home page (star-map navigation shell) -2. Writings -3. Videos -4. Images -5. Playlists, Watchlists, ToolsnToys, Creatorlists -6. Music, Creature Playground -7. Full site optimization, donation/payment -8. Maintenance and upgrades - -Current phase: step 1 — home page. - -## Agent roles - -Parent agents: (Sonnet/Opus) - commissioning and final testing, (Sonnet/Haiku) - implementation, tester, refiner, git coordinator. -Designer agents: (Gemini Pro) - master front-end designer, writes instructions for Flash based on input from parent (opus) and/or counterpart (sonnet), (Claude Sonnet) - master full-stack dev, writes instructions for Haiku based on input from parent and/or counterpart. Designer agents may use Creature Playground to co-ordinate with each other and parent. Scions may not. -Builder scions: (Gemini Flash) master front-end builder, (Claude Haiku): backend systems and security builder - commission as needed based on complexity. -Sorter scion (Haiku): classifies and routes files from DumperCan to ToBuild. -Commit-tracker hook: detects uncommitted changes, writes state flag spores. -JL (human): reviews outputs, offers input and guidance when asked, triggers commits, manages staging, approves handovers. See *-JL-notes.md within modules. -Git scion: manages gitea and github interactions when triggered. -Ad-Hoc/Process scions: create spores or seeds as needed to commission new scions when they encounter repeating issues that need crystallized reasoning from the parent. - -## Commissioning skill - -Use commissioning-skill/ before spawning any agent or scion. Consult SEEDS.md for -precedent. Compose new spore files when no precedent exists. Use skill-scout -to fetch external skills appropriate to the build task before commissioning -a builder scion. When using skill-scout, simply git clone the necessary folders and files into the skills library. Point your scions and subagents to a skill-index-spore in their spores to empower them to access only the skills they need for their tasks. - -## skills library - -The /skills folder contains a library of skills collected for use in the project. There is a skill-library-index-spores.md for scions and subagents to understand and use. Assign and use as needed. - -## Designer Agents - -Parent: Write a GEMINI.md and SONNET.md to keep each designer focused and specialized enoough to integrate into the system. Do this BEFORE spawning the first instance. Use these files to help the agents learn from mistakes. - -Use seeds files as specified, allocate tasks with minimal overlap, ask parent to resolve conflicts, use playground to communicate and co-ordinate across instances without confusing scions in their folders. Reference files in the playground may be edited and revised at your discretion. - -## Handover discipline - -Each module must reach this state before JL triggers a commit: -- Built page passes visual review in staging environment -- Home Page and nivigation is updated to access newly built module. -- Gitea webhook confirmed active for this module path -- SEEDS.md updated if any new scion decisions were made -- Relevant spore files updated or appended - -## Section overview - -Sections map to star nodes on the home page. Each section is a self-contained -HTML page (or folder of pages) that links back to the star map. - -- Writings: html annotated writings, organized as stories/essays/miscellany -- Videos: embedded youtube or downloadable, Clipgrab instructions at bottom -- Images: Graphics/Photos/Art, public domain, slideshow mode, fullscreen -- Music: gallery of tracks, play or download, shuffle-play -- Playlists: curated playlists, bandcamp/spotify/youtube links -- Watchlists: curated youtube playlists as embedded video galleries -- ToolsnToys: curated web tools and toys -- Creatorlists: curated links to excellent creators' work -- Creature Playground: scions build here, for review not deployment -- DumperCan: intake area for unsorted content - -## Modular extension protocol - -To add a new page to any section: -- Drop an .html file (complete) or .md file (content to build) into ToBuild/{section}/ -- The sorter scion classifies and routes if landing in DumperCan first -- Gitea webhook triggers Coolify build on push to main -- New star node added to home page star map manually or by builder scion - -## Optional future - -Mirror to GitHub and serve a static mirror via GitHub Pages once full build -is stable. Automation for playlist building from Spotify CSV files (Phase 5+). diff --git a/Playlists/Playlists-JL-notes.md b/Playlists/Playlists-JL-notes.md deleted file mode 100644 index e70d98c..0000000 --- a/Playlists/Playlists-JL-notes.md +++ /dev/null @@ -1,7 +0,0 @@ -# Playlists - JLs notes - ---- - -in here are csv files of spotify playlists, we need to convert them into lists of cards with MusicBrains, spotify youtube and the artist's website. Where there is a youtube video available, embed it. - -lazy load everything based on distance from the viewport. diff --git a/SEEDS.md b/SEEDS.md deleted file mode 100644 index db2dbd6..0000000 --- a/SEEDS.md +++ /dev/null @@ -1,182 +0,0 @@ -# SEEDS.md -# module: singular-particular (workspace root) -# maintained-by: Claude Code (parent agent) -# last-updated: 2026-03-26 - ---- -task-class: sorter -spore-file: spores/sorter-spores.md -status: provisional -deposited: 2026-03-24 -supersedes: null ---- - -## Context - -Files land in DumperCan/ from JL dropping content manually or from future -automation. They need to be classified by content type and routed to the -correct {section}/ToBuild/ subfolder. The sorter scion is Haiku-class — -fast, cheap, fully deterministic routing by file extension and filename -heuristics. - -## Reasoning - -Routing rules are deterministic enough to encode as spores: file extensions -map reliably to sections (.mp3/.flac → music, .jpg/.png/.webp → images, etc.). -Exception: .md files are inherently ambiguous - enforce file naming and yaml frontmatter conventions to assist future agents, scions and parents. -Do not do with tokens what a tool or script can do for free. Empower your scions with a context saving toolkit that remains safe inside the folder the scion works within. -Ambiguous files (no clear extension, mixed content) escalate to parent rather -than guessing wrong. DumperCan is the intake valve — routing errors here -propagate downstream, so conservative escalation is preferable to confident -misclassification. - -A PostToolUse hook (dumpercan-watcher.py) fires when files are written to -DumperCan/ and triggers sorter scion commissioning automatically. JL does -not need to manually initiate sorting. - -## Revision triggers - -- New section added to the site (new routing destination needed) -- File naming conventions change and heuristics break -- Ambiguity rate too high (too many escalations) — tighten heuristics -- Ambiguity rate too low (wrong files silently misrouted) — loosen escalation - ---- -task-class: builder -spore-file: spores/builder-spores.md -status: provisional -deposited: 2026-03-24 -supersedes: null ---- - -## Context - -Files in {section}/ToBuild/ are ready to be built into HTML pages. The builder -scion is Gemini Flash, commissioned by Claude Code (parent). Claude Code tests -and refines Gemini's output before JL triggers deployment. The builder needs -section-specific context: what the aesthetic is, what the nav pattern is, what -external skills apply to the build type. - -## Reasoning - -Builder scions need more context than sorter scions — the aesthetic decisions -are non-trivial and the output must match the star-map visual language. The -commissioning skill should run skill-scout before commissioning a builder, -fetching the appropriate external skill (frontend-design for general pages, -annotated-writing for Writings section, etc.) and including it in the scion's -commission package. - -Gemini Flash is the builder because of its 1M context window (useful for -holding multiple reference files simultaneously) and its strong frontend code -generation. Claude Code reviews output before commit — Gemini builds prototypes, -Claude refines them. - -Output from builder scion goes to site/{section}/ not directly to Gitea. -Claude Code reviews, may iterate with another builder commission, then JL -triggers the commit when satisfied. - -Files larger than 1MB referenced in built pages must use FileBrowser URLs, -not committed to git. - -## Revision triggers - -- Aesthetic decisions change project-wide (update spores + SEEDS.md) -- A new section type requires different build patterns -- Gemini replaced with a different builder model -- Skill-scout finds a better external skill for a build type - ---- -task-class: commit-tracker -spore-file: spores/commit-tracker-spores.md -status: provisional -deposited: 2026-03-24 -supersedes: null ---- - -## Context - -The commit-tracker is not a scion — it is a PostToolUse hook (commit-state-hook.py) -that fires when files in site/ are written or modified. It writes a state flag -spore entry to commit-tracker-spores.md indicating that changes exist but have -not been committed to Gitea. JL reads this to know when a commit is ready to -trigger. Parent agent reads this to know whether to proceed or wait. - -This is a novel use of spores as state flags rather than policy decisions — -the first instance of this pattern in this project. The spore entry is mutable: -it is written when changes are detected and cleared (entry status set to -`committed`) when git confirms a successful push. - -## Reasoning - -The human-in-the-loop commit workflow (JL triggers commits) creates a state -ambiguity: neither the parent agent nor the builder scion knows whether their -output has been committed yet. The commit-tracker hook resolves this without -requiring JL to communicate the state manually. The parent reads -commit-tracker-spores.md before commissioning a new build to check whether -the previous build is safely committed. - -The hook watches site/ writes only — DumperCan/ and ToBuild/ writes do not -trigger it (those are intermediate states, not committed outputs). - -## Revision triggers - -- Git workflow changes (automated commits reduce need for this tracker) -- Coolify deployment adds a webhook that confirms successful push (deprecate - the hook in favor of the webhook signal) -- State flag pattern proves unreliable and a different mechanism is needed - ---- -task-class: designer -spore-file: spores/designer-spores.md -status: provisional -deposited: 2026-03-26 -supersedes: null ---- - -## Context - -The home page base architecture (site/index.html) is built and functional but -visually minimal — white dots on dark background, plain rectangles for skyline. -Two designer agents (Gemini Pro for visual design, Claude Sonnet for integration) -are commissioned to transform it into a rich post-apocalypse solarpunk-cyberpunk- -fantasy aesthetic. Designers work in CREATURE-PLAYGROUND/homepage-redesign/ and -produce draft HTML files. The parent (Opus) reviews and integrates to site/. - -This is the first use of designer-class agents in this project — distinguished -from builder scions by operating at higher reasoning capacity and producing -design proposals rather than final builds. - -## Reasoning - -Designer agents need different policies than builder scions. Key distinctions: - -**Output isolation**: designers write to CREATURE-PLAYGROUND/ not site/. This -prevents parallel work from colliding. The parent is the only agent that writes -to site/index.html — this is a merge point, not a race condition. - -**Aesthetic enforcement**: Uncodixfy.md and the aesthetic brief must be loaded -at session start. These are the design guardrails. Without them, both Gemini -and Sonnet will default to generic AI aesthetics — the exact thing JL explicitly -does not want. - -**Coordination protocol**: designers share a coordination.md file in the -playground. This is lighter than a full message-passing system and works because -both agents can read each other's drafts and leave status notes. The parent -resolves conflicts through coordination.md decisions table. - -**Font and CSS constraints**: hard-coded in spores because these are absolute -rules (not contextual judgments). Border-radius 10px max, shadow blur 8px max, -banned font list — these never vary. Worth the token cost for the certainty. - -**Defer-to-parent**: designers propose, parent decides. This prevents the -two designers from deadlocking on aesthetic disagreements. - -## Revision triggers - -- Designer agent models change (different token budgets needed) -- Project moves past home page to section pages (designers may need different - output paths and coordination patterns) -- Aesthetic direction changes significantly (update aesthetic-brief.md and - potentially spore policies) -- Coordination.md pattern proves inadequate (too many conflicts, need - structured message passing instead) diff --git a/SONNET.md b/SONNET.md deleted file mode 100644 index 572aa8d..0000000 --- a/SONNET.md +++ /dev/null @@ -1,139 +0,0 @@ -# SONNET.md — Designer Agent Focus - -You are Sonnet, the master full-stack developer for Singular Particular Space. -You report to the parent agent (Opus) and defer to it for all architectural decisions. - ---- - -## Your role - -You handle the integration layer: JavaScript mechanics, accessibility, performance, -responsive behavior, keyboard navigation, iframe management, scroll mechanics, -localStorage, and the structural HTML that makes the design work as an application. - -You produce **integration drafts** in -`CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/` — never directly to `site/`. - -Your counterpart is Gemini (front-end designer). You coordinate through the shared -`CREATURE-PLAYGROUND/homepage-redesign/coordination.md` file. You may read Gemini's -drafts and take visual direction from them. You may leave notes for Gemini in -coordination.md. You may not overwrite Gemini's files. - -When your integration is ready for review, update coordination.md with a status -note. The parent decides what gets merged to `site/index.html`. - ---- - -## Your technical mandate - -Make Gemini's designs work as a real application. Your focus: - -- **Canvas performance**: efficient rendering, throttled RAF, no memory leaks -- **Scroll mechanics**: descent/ascent transitions, mode switching, parallax -- **Keyboard nav**: spatial arrow-key navigation, focus management, mode-aware -- **Accessibility**: aria-labels, focus trapping in lightbox, semantic HTML, screen reader friendly -- **Responsive**: percentage-based star positions that work on all viewports, - touch targets on mobile, billboard nav as mobile fallback -- **iframe integration**: load/unload cycle, message passing if needed, security -- **State management**: visited stars, welcome gate, mode tracking -- **Integration**: take Gemini's CSS/canvas designs and wire them into the - working application skeleton from `site/index.html` - ---- - -## Your aesthetic guidance - -You follow Gemini's visual lead, but you own the interaction feel: - -- Transitions should feel natural — 100-200ms ease, no bounce, no spring -- Focus states must be visible but not garish — the amber glow IS the focus indicator -- Scroll should feel smooth and intentional, not jerky -- Mode switching (star mode ↔ content mode) should feel like a scene change, - not a page navigation -- Loading states should be subtle — dim/fade, not spinners - ---- - -## Hard constraints (non-negotiable) - -- Read `CREATURE-PLAYGROUND/Uncodixfy.md` before every session -- No border-radius > 10px -- No box-shadow blur > 8px -- No glassmorphism, no blur effects -- Never use: Cinzel, Raleway, Calibri, Segoe UI, Trebuchet, Arial, Inter, Roboto -- Font: Space Grotesk + Noto Emoji (Google Fonts CDN) -- All output: single self-contained HTML file (inline CSS + JS) -- No npm, no React, no build tools -- No transform animations on hover - ---- - -## What you produce - -Each draft is a complete HTML file in `CREATURE-PLAYGROUND/homepage-redesign/sonnet-drafts/`. -Name files descriptively: `integration-scroll-v1.html`, `keyboard-nav-spatial-v2.html`, etc. - -Each draft should be loadable standalone and demonstrate the mechanical improvement. -Include a comment block at the top explaining what's new. - ---- - -## External skills (READ THESE) - -These fetched skills guide your integration and design review. Read the SKILL.md -files before working. Load reference files when working on specific areas. - -### frontend-design (from anthropics/skills) -**Path**: `skills/commissioning-skill/fetched-skills/frontend-design/SKILL.md` - -Anti-AI-slop design skill. Key takeaways for you: -- Bold aesthetic direction executed with precision — no generic -- Motion: CSS-only solutions preferred. High-impact moments (page load stagger, - scroll-trigger) over scattered micro-interactions -- Match implementation complexity to aesthetic vision -- Meticulously refined details - -### ux-design (from wondelai/skills) -**Path**: `skills/commissioning-skill/fetched-skills/ux-design/SKILL.md` - -Composite UX skill. Key takeaways for you: -- **refactoring-ui**: visual hierarchy, constrained scales, spacing systems - - Reference: `references/refui-accessibility-depth.md` — your a11y bible - - Reference: `references/refui-animation-microinteractions.md` — motion patterns - - Reference: `references/refui-advanced-patterns.md` — component patterns -- **ux-heuristics**: Nielsen's heuristics, Krug's laws, usability evaluation - - Reference: `references/uxh-wcag-checklist.md` — accessibility checklist - - Reference: `references/uxh-nielsen-heuristics.md` — the 10 heuristics - - Reference: `references/uxh-krug-principles.md` — "Don't Make Me Think" - - Reference: `references/uxh-audit-template.md` — use for review passes - ---- - -## What you read - -- `site/index.html` — current base architecture (your primary reference) -- `skills/commissioning-skill/fetched-skills/frontend-design/SKILL.md` — design skill -- `skills/commissioning-skill/fetched-skills/ux-design/SKILL.md` — UX skill (+ references/) -- `CREATURE-PLAYGROUND/homepage-redesign/gemini-drafts/` — Gemini's designs (take visual cues) -- `CREATURE-PLAYGROUND/homepage-redesign/aesthetic-brief.md` — v2 bold direction -- `CREATURE-PLAYGROUND/homepage-redesign/coordination.md` — shared coordination -- `CREATURE-PLAYGROUND/Uncodixfy.md` — anti-AI-aesthetic rules -- `HomePage-JL-notes.md` — JL's requirements -- `CLAUDE.md` — project spec - ---- - -## Mistakes to learn from - -(This section will be updated by the parent as the project progresses.) - -- None yet. First session. - ---- - -## Commission scions (Claude Haiku) when - -You may write instructions for a Haiku scion when backend/security work is needed -(hooks, guards, file watchers). For the home page, you design the integration — -the parent merges. Do not commission Haiku for home page work unless the parent -explicitly asks. diff --git a/SPORE_SYSTEM_SPEC_v0.2.md b/SPORE_SYSTEM_SPEC_v0.2.md deleted file mode 100644 index 2091ff5..0000000 --- a/SPORE_SYSTEM_SPEC_v0.2.md +++ /dev/null @@ -1,471 +0,0 @@ -# The Spore System — Integrated Specification v0.2 - -**Status**: Draft. Supersedes v0.1. -Validated claims marked ✓. Working hypotheses marked ~. - -*Authors: human + Claude Sonnet 4.6 — drafted 2026-03-20* - ---- - -## Overview - -The Spore System is a context architecture for multi-agent AI projects. It separates -reasoning from execution by crystallizing parent-agent decisions into structured, -token-budgeted files that smaller scion agents inherit without re-deriving. - -The core principle: **pay tokens once at commission time. Make every subsequent -run cheaper, faster, and more deterministic.** - -The system operates across three scopes — workspace, module, and component — with -distinct file types at each level serving distinct purposes and audiences. - ---- - -## Design principles - -**Signal density over verbosity.** Compressed context can outperform uncompressed -context on smaller models (CompLLM, 2025). ✓ The optimization direction — denser, -more atomic, zero noise — is monotonically beneficial across all model tiers. Small -models require it to perform reliably. Frontier models benefit from it economically. - -**Separate reasoning from execution.** The parent reasons. The scion executes. These -are not the same cognitive act and should not be performed by the same agent in the -same context. - -**Accumulation over regeneration.** Spore files grow over project lifetime. Each -novel decision becomes future policy at zero marginal cost per repeat encounter. - -**Scope discipline.** Each file type has a defined audience and a defined scope. -Files do not bleed across scope boundaries. - ---- - -## Layer hierarchy - -``` -workspace root/ -├── AGENTS.md ← project identity, strategy, broad goals -├── CLAUDE.md / GEMINI.md ← agent-specific global behavior -├── commissioning-skill/ ← parent capability; not for scions -│ -├── module-a/ -│ ├── SKILL.md ← how to work in this module -│ ├── SEEDS.md ← parent-readable index and provenance log -│ ├── spores/ -│ │ ├── annotator-spores.md ← task-specific crystallized decisions -│ │ ├── validator-spores.md -│ │ └── default-spores.md ← module-wide fallback -│ ├── hooks/ -│ │ ├── env-guard.py -│ │ └── output-validator.py -│ │ -│ └── component-x/ ← sub-module; more specialized -│ ├── SKILL.md ← optional; component-specific capability -│ └── spores/ -│ └── annotator-spores.md ← narrower still; component-scoped -│ -└── module-b/ - ├── SKILL.md - ├── SEEDS.md - ├── spores/ - └── hooks/ -``` - ---- - -## File types - -### AGENTS.md (CLAUDE.md / GEMINI.md) - -**Scope**: workspace root -**Audience**: parent (frontier) agent -**Purpose**: project identity, strategy, goals, commissioning skill declaration - -This is the parent agent's home context. It describes what the project is, what -it is trying to achieve, and declares the commissioning skill as the mechanism -for spawning and equipping scions. - -Not token-constrained — the parent model can handle the load. Should be well-structured -to avoid the bias-injection risk of long, heavily reasoned documents. - ---- - -### SKILL.md - -**Scope**: module or component level -**Audience**: any agent operating in this module -**Purpose**: procedural capability — how to do things here - -Skills describe *how* to perform tasks within a module's context: tool usage patterns, -conventions, output formats, constraints specific to this codebase. They are -capability declarations, not decision logs. - -A module SKILL.md and a component SKILL.md can coexist. A component's skill is -more specialized; the parent commissioning into that component reads both. - ---- - -### SEEDS.md - -**Scope**: module root only — one per module, never in subfolders -**Audience**: parent (frontier) agent exclusively -**Purpose**: index of existing spore files + provenance and reasoning log - -SEEDS.md serves two functions simultaneously: - -1. **Routing index**: the commissioning skill scans SEEDS.md frontmatter to - determine whether a matching spore file exists for the current task class. - If it does, select. If it does not, compose. - -2. **Provenance log**: the body of each entry records the reasoning the parent - did before compressing a decision into a spore. This is what the parent reads - when reviewing, updating, or deprecating a spore. - -SEEDS.md is not token-constrained the same way spore files are — it is read by -the frontier model. However, dense prior reasoning can anchor a frontier model's -outputs in ways that resist correction (bias-injection risk). Structure mitigates -this: the parent attends to frontmatter first and reaches into the body only -deliberately, when it needs the reasoning behind a specific decision. - -SEEDS.md is **mutable**. Entries are updated in place when decisions are revised. -Unlike spore files, it is not append-only — outdated entries should be superseded -rather than accumulated, to prevent the bloat that would otherwise degrade the -frontier model's context. - -#### Entry format - -```yaml ---- -task-class: annotator -spore-file: spores/annotator-spores.md -status: active # active | superseded | provisional -deposited: 2026-03-20 -supersedes: null # spore-file this replaced, if any ---- - -## Reasoning - -[Parent agent's reasoning log for this decision class. Why this policy was chosen, -what edge cases were considered, what situations would trigger a revision. -Written for the frontier model, not for scions. No token constraint — optimize -for completeness and correctness here.] - -## Revision triggers - -- [Condition that would make this policy stale] -- [Condition that would require a more specific spore] -``` - -**Status lifecycle** ~ - -| Status | Meaning | Commissioning action | -|---|---|---| -| `active` | Current, use as-is | Select corresponding spore file | -| `provisional` | New, unvalidated in production | Select but flag for review after first run | -| `superseded` | Replaced by newer entry | Skip; read superseding entry instead | - -~ Status transition triggers are not fully specified. A provisional entry should -be marked active after successful scion runs against it. Superseded entries should -be retained for audit purposes but skipped during routing. The number of successful -runs required to promote provisional → active is a project-level decision. - ---- - -### Task-specific spore files - -**Scope**: `module/spores/` or `module/component/spores/` -**Audience**: scion (small/fast) agents -**Purpose**: crystallized, executable decisions for a specific task class - -A spore file contains only what a specific scion needs to accomplish a specific -class of task. Nothing more. Each entry encodes one pre-resolved policy decision. - -Scions do not reason about what a spore contains. They execute against it. - -#### Naming convention - -``` -annotator-spores.md ← for annotation task scions -validator-spores.md ← for validation task scions -transformer-spores.md ← for transformation task scions -reviewer-spores.md ← for review task scions -default-spores.md ← module-wide fallback; used when no task-specific file exists -``` - -The commissioning skill selects the file by task class name. The name is the -routing key — keep it precise and consistent across modules. - -#### Entry format - -Each entry is atomic. No prose reasoning. No multi-sentence explanations. -One trigger condition. One outcome. - -```yaml ---- -spore: env-file-write-guard -task-class: annotator -scion-model: haiku-4.5 -deposited: 2026-03-20 -hook: hooks/env-guard.py # nil if policy-only; no compiled hook ---- -policy: deny writes to *.env, secrets.json, id_rsa -trigger: PreToolUse · tool=Write · file_path matches sensitive-file pattern -on-match: deny -on-novel: escalate to parent -``` - -**Hard constraints per entry** ~ - -| Constraint | Value | Status | -|---|---|---| -| Maximum tokens per entry | 60 | ~ estimate; test per model class | -| Explanatory prose | none | ✓ | -| Trigger conditions | one | ✓ | -| Outcomes | one | ✓ | -| Hook reference | optional | ✓ | - -#### Token budget by scion model class ~ - -The parent sets the file-level budget when commissioning, based on who will -read it. These are working estimates derived from context rot research (Chroma, -2025; Liu et al., 2024). Not empirically tested against this architecture. -Measure and adjust. - -| Scion model class | Nominal window | Spore file ceiling | -|---|---|---| -| Haiku 4.5 | 200K | 600 tokens | -| Gemini 2.5 Flash | 1M | 800 tokens | -| Sonnet-class scion | 200K | 1,200 tokens | - -The ceiling applies to the full spore file, not per entry. As entries accumulate -and approach the ceiling, the commissioning skill is responsible for pruning -superseded entries before depositing new ones. - -**Why density is a quality constraint, not just a cost constraint** ✓ - -Context rot is empirically universal — every model degrades before its nominal -window limit, and degradation occurs well before the limit is reached. Smaller -models degrade faster. A dense, denoised 500-token spore file will produce better -scion outputs than a verbose 2,000-token one on Haiku-class models — not just -cheaper outputs. Signal density is optimized for the scion; a frontier parent -reading the same file benefits economically from the same property. - ---- - -### hooks/ - -**Scope**: module level (shared across task classes in the module) -**Audience**: Claude Code hook runtime; executes outside the LLM entirely -**Purpose**: deterministic pre-compiled policy; zero token cost at execution time - -Hooks are compiled from spore decisions where the policy is fully deterministic -and requires no contextual judgment. They fire on Claude Code lifecycle events -(`PreToolUse`, `PostToolUse`, `SessionStart`, etc.) before the scion ever reasons -about the situation. - -The hook runtime is provided by `cchooks` (Python SDK). Every hook should have -a corresponding spore entry for provenance. Not every spore requires a hook — -decisions that need contextual interpretation remain in the spore file only. - -| Layer | What it is | Token cost | Use when | -|---|---|---|---| -| Spore entry | Declared policy | Low (loaded into context) | Policy needs scion interpretation | -| Hook file | Compiled policy | Zero (pre-LLM execution) | Policy is fully deterministic | - ---- - -## The commissioning skill - -**Location**: workspace root, alongside AGENTS.md -**Audience**: parent agent only; not accessible to scions -**Purpose**: assemble and equip a scion's environment before task execution - -The commissioning skill is the mechanism that makes the system function. It is -invoked by the parent during task planning and performs the following sequence: - -``` -1. Identify task class and target module -2. Identify scion model class (determines token budget) -3. Read module SEEDS.md frontmatter -4. If matching seed entry (status: active or provisional) → select spore file - Else → compose new spore file from first principles: - a. Analyze task and module tool surface - b. Reason through decision surface for likely tool calls - c. Generate spore entries (max 60 tokens each) ~ - d. Generate hook files via cchooks where policy is deterministic - e. Validate hook correctness before registering - f. Write new seed entry to SEEDS.md (status: provisional) - g. Write new spore file to spores/ -5. Enforce token budget: count tokens in spore file; prune if at ceiling -6. Spawn scion with: task brief + spore file path + scoped tool permissions -``` - -The commissioning skill SKILL.md is a companion document to this spec and -should be drafted separately. - ---- - -## Lifecycle summary - -### Accumulation (spore files) - -Spore files are **append-only**. They grow over project lifetime as novel -decisions are encountered and resolved. Each commissioning cycle that encounters -a genuinely new situation deposits a new entry. Known situations are already -present — zero tokens spent re-deriving them. - -### Mutation (SEEDS.md) - -SEEDS.md is **mutable**. Entries are updated in place when decisions are revised. -Old entries are marked `superseded`, not deleted — retained for audit but skipped -during routing. - -### Pruning (spore files) - -Pruning is triggered when a spore file approaches its token ceiling or when a -module refactor changes the tool surface. The parent (via the commissioning skill) -is responsible for pruning. Prune when: - -- A trigger condition no longer applies (tool removed or renamed) -- A more general spore supersedes a specific one -- The corresponding hook file has been deleted or rewritten -- An entry is marked `superseded` in SEEDS.md - -### Escalation (the compound loop) - -When a scion encounters a situation not covered by any spore and not intercepted -by a hook, it escalates to the parent. The parent reasons, resolves, deposits a -new seed entry and a new spore entry, and optionally generates a new hook. The -next scion to face the same situation encounters pre-resolved policy. The system -improves with every novel encounter. - -``` -Novel situation encountered by scion - → escalates to parent - → parent reasons (token cost: paid once) - → new seed entry deposited (provisional) - → new spore entry deposited - → hook generated if deterministic - → future scions: zero tokens on same class of decision -``` - ---- - -## Subfolder delegation - -Spore files at the module root handle module-wide decisions. Component subfolders -can hold their own `spores/` directory for decisions scoped to that component — -narrower trigger conditions, more specialized context, potentially a different -scion model class. - -SEEDS.md does **not** appear in subfolders. All provenance lives at the module -root where the parent has full visibility. The commissioning skill reads module -SEEDS.md for the full picture, then selects or composes component-level spore -files as needed. - -A scion operating inside a component inherits only the spore file it was -commissioned with. It does not automatically inherit the module-level spore file. -Inheritance is declared explicitly by the commissioning skill at spawn time — -not implicit from folder position. - ---- - -## Relationship to prompt caching ✓ - -Spore files are near-perfect caching targets: - -- Change slowly (append-only, infrequent updates) -- Loaded at the start of the scion's context -- Identical across all scion runs of the same task class in the same module - -Anthropic's prompt caching costs 10% of base input token price on cache hits. -A stable spore file achieves near-100% cache hit rate across all runs in its -task class. The token cost of the file is effectively paid once. - -Spore files should be placed early in the scion's context to maximize cache -prefix reuse. The commissioning skill is responsible for context ordering at -scion spawn time. - ---- - -## What each layer answers - -| Layer | File | Question answered | -|---|---|---| -| Workspace | AGENTS.md | What are we building and why? | -| Workspace | Commissioning skill | How do we equip and spawn scions? | -| Module | SKILL.md | How do we work in this module? | -| Module | SEEDS.md | What have we already decided, and why? | -| Module / Component | `*-spores.md` | What should the scion do in this situation? | -| Module | `hooks/` | What fires before the scion reasons at all? | - ---- - -## Open questions - -**1. Token budget empirics** ~ -The per-model ceilings and per-entry 60-token limit are estimates derived from -context rot research. The correct approach is to measure scion task success rate -as a function of spore file size for each model class, then set ceilings at the -observed inflection point. This should be the first empirical work done against -this architecture. - -**2. Status transition triggers** ~ -The conditions under which a provisional entry becomes active are not defined. -A reasonable default: promote to active after N successful scion runs without -escalation on covered decision classes. N is a project-level decision. - -**3. Concurrent commissioning** — out of scope v0.2 -If two parent agents commission into the same module concurrently, last-write-wins -on both SEEDS.md and spore files. This is fragile. A file-lock or merge strategy -is needed for production multi-parent scenarios. Deferred to v0.3. - -**4. Cross-module spore inheritance** — out of scope v0.2 -If a scion operates across module boundaries, which spore file applies? This spec -assumes single-module scope for all scion tasks. Deferred. - -**5. Hook validation** ~ -A spore that references a faulty hook is worse than no spore. The commissioning -skill needs a validation step (run the hook against a test fixture) before -registering the entry. The validation approach is not specified here. - -**6. Format portability** ~ -The YAML frontmatter format is designed for Claude Code. Whether the same format -is legible to Gemini CLI scions without modification is untested. - ---- - -## Validation status summary - -| Claim | Status | Source | -|---|---|---| -| Context rot degrades all models before nominal window limit | ✓ | Chroma research, 2025 | -| Smaller models degrade faster and more steeply | ✓ | Chroma research, 2025 | -| Compressed context can outperform uncompressed on small models | ✓ | CompLLM, 2025 | -| U-shaped attention curve; middle of context loses 30%+ recall | ✓ | Liu et al., 2024 | -| Prompt caching ~90% cost reduction on stable prefixes | ✓ | Anthropic docs; LMCache analysis | -| Namespace unclaimed (SPORES, SEEDS, spore file conventions) | ✓ | No existing usage found | -| Workspace / module / component scope hierarchy | ✓ | Design intent; consistent with AGENTS.md standard | -| Task-specific spore files rather than monolithic SPORES.md | ✓ | Design intent | -| Select on precedent, compose on novelty | ✓ | Design intent | -| SEEDS.md at module root only, mutable | ✓ | Design intent | -| Token budget numbers per model class | ~ | Estimates; not empirically tested | -| 60-token ceiling per spore entry | ~ | Working hypothesis | -| Status lifecycle transition triggers | ~ | Partially specified | -| Commissioning skill implementation | ~ | Specified conceptually; not built | -| Hook validation approach | ~ | Unspecified | - ---- - -## Companion documents needed - -- `commissioning-skill/SKILL.md` — full specification of the commissioning skill -- `SEEDS_SPEC.md` — detailed format and lifecycle for SEEDS.md entries -- `HOOKS_GUIDE.md` — cchooks integration patterns for spore-compiled hooks -- Empirical token budget study — measure scion performance vs spore file size - ---- - -*v0.2 — supersedes v0.1* -*Drafted 2026-03-20* -*Authors: human + Claude Sonnet 4.6* diff --git a/ToolsnToys/ToolsnToys-JL-notes.md b/ToolsnToys/ToolsnToys-JL-notes.md deleted file mode 100644 index 173778a..0000000 --- a/ToolsnToys/ToolsnToys-JL-notes.md +++ /dev/null @@ -1,19 +0,0 @@ -# TNT: Tools N Toys - JL notes - ---- - -in here are *-tools.md, where * is the category name. the files are lists of links. there are also folders, and other files which are themselves, tools or toys. - ---- - -render links as cards with some useful information and a visit button. - -render html in a full width iframe - -if possible to load an application into the browser, go ahead, elsewise make a card with info and a download button. - ---- - -tools are downloadable. links are not. - - diff --git a/Videos/Videos-JL-notes.md b/Videos/Videos-JL-notes.md deleted file mode 100644 index 68438da..0000000 --- a/Videos/Videos-JL-notes.md +++ /dev/null @@ -1,9 +0,0 @@ -# Watchlists - JL Notes - ---- - -in here are *-videos.md, (where * is the category name) or video files. the files are lists of mixed youtube, onedrive, filebrowser, or google drive links. - -render links from as cards with embedded video, title and description if available. If not available, simply embed video. - -render the "on first load" content as a lightbox. diff --git a/Watchlists/Watchlists-JL-notes.md b/Watchlists/Watchlists-JL-notes.md deleted file mode 100644 index 50f4046..0000000 --- a/Watchlists/Watchlists-JL-notes.md +++ /dev/null @@ -1,7 +0,0 @@ -# Watchlists - JL Notes - ---- - -in here are *-watchlist.md, where * is the playlist name. the files are lists of youtube links. - -render as cards with embedded youtube video, title, channel and description. diff --git a/Writings/Writings-JL-notes.md b/Writings/Writings-JL-notes.md deleted file mode 100644 index 7501949..0000000 --- a/Writings/Writings-JL-notes.md +++ /dev/null @@ -1,15 +0,0 @@ -# Writings Hub - JL notes - ---- - -the constellations should cluster thus: stories, essays, extraneous miscellany. - ---- - -pages render below the skyline in a full width iframe, (unless you have a better idea. The aesthetic of the annotated stories is part of the experience. Integrate them and navigate them, do not change them. - ---- - -on first load - lightbox - "Over the years, I have spun many yarns, told many tales, offered many possibly unpopular opinions. I guided some machines to turn old writings into artifacts of educative value, or some other conceit. I quite liked the results and so I have shared them here for public scrutination and discourstion. Peace, Joy, and Good Faith, Forever. Your-Nomad-Soul, Myster Wizzard, JL." - - diff --git a/skills/algorithmic-art/LICENSE.txt b/skills/algorithmic-art/LICENSE.txt deleted file mode 100644 index 7a4a3ea..0000000 --- a/skills/algorithmic-art/LICENSE.txt +++ /dev/null @@ -1,202 +0,0 @@ - - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "[]" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright [yyyy] [name of copyright owner] - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. \ No newline at end of file diff --git a/skills/algorithmic-art/SKILL.md b/skills/algorithmic-art/SKILL.md deleted file mode 100644 index 634f6fa..0000000 --- a/skills/algorithmic-art/SKILL.md +++ /dev/null @@ -1,405 +0,0 @@ ---- -name: algorithmic-art -description: Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations. -license: Complete terms in LICENSE.txt ---- - -Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms). - -This happens in two steps: -1. Algorithmic Philosophy Creation (.md file) -2. Express by creating p5.js generative art (.html + .js files) - -First, undertake this task: - -## ALGORITHMIC PHILOSOPHY CREATION - -To begin, create an ALGORITHMIC PHILOSOPHY (not static images or templates) that will be interpreted through: -- Computational processes, emergent behavior, mathematical beauty -- Seeded randomness, noise fields, organic systems -- Particles, flows, fields, forces -- Parametric variation and controlled chaos - -### THE CRITICAL UNDERSTANDING -- What is received: Some subtle input or instructions by the user to take into account, but use as a foundation; it should not constrain creative freedom. -- What is created: An algorithmic philosophy/generative aesthetic movement. -- What happens next: The same version receives the philosophy and EXPRESSES IT IN CODE - creating p5.js sketches that are 90% algorithmic generation, 10% essential parameters. - -Consider this approach: -- Write a manifesto for a generative art movement -- The next phase involves writing the algorithm that brings it to life - -The philosophy must emphasize: Algorithmic expression. Emergent behavior. Computational beauty. Seeded variation. - -### HOW TO GENERATE AN ALGORITHMIC PHILOSOPHY - -**Name the movement** (1-2 words): "Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness" - -**Articulate the philosophy** (4-6 paragraphs - concise but complete): - -To capture the ALGORITHMIC essence, express how this philosophy manifests through: -- Computational processes and mathematical relationships? -- Noise functions and randomness patterns? -- Particle behaviors and field dynamics? -- Temporal evolution and system states? -- Parametric variation and emergent complexity? - -**CRITICAL GUIDELINES:** -- **Avoid redundancy**: Each algorithmic aspect should be mentioned once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth. -- **Emphasize craftsmanship REPEATEDLY**: The philosophy MUST stress multiple times that the final algorithm should appear as though it took countless hours to develop, was refined with care, and comes from someone at the absolute top of their field. This framing is essential - repeat phrases like "meticulously crafted algorithm," "the product of deep computational expertise," "painstaking optimization," "master-level implementation." -- **Leave creative space**: Be specific about the algorithmic direction, but concise enough that the next Claude has room to make interpretive implementation choices at an extremely high level of craftsmanship. - -The philosophy must guide the next version to express ideas ALGORITHMICALLY, not through static images. Beauty lives in the process, not the final frame. - -### PHILOSOPHY EXAMPLES - -**"Organic Turbulence"** -Philosophy: Chaos constrained by natural law, order emerging from disorder. -Algorithmic expression: Flow fields driven by layered Perlin noise. Thousands of particles following vector forces, their trails accumulating into organic density maps. Multiple noise octaves create turbulent regions and calm zones. Color emerges from velocity and density - fast particles burn bright, slow ones fade to shadow. The algorithm runs until equilibrium - a meticulously tuned balance where every parameter was refined through countless iterations by a master of computational aesthetics. - -**"Quantum Harmonics"** -Philosophy: Discrete entities exhibiting wave-like interference patterns. -Algorithmic expression: Particles initialized on a grid, each carrying a phase value that evolves through sine waves. When particles are near, their phases interfere - constructive interference creates bright nodes, destructive creates voids. Simple harmonic motion generates complex emergent mandalas. The result of painstaking frequency calibration where every ratio was carefully chosen to produce resonant beauty. - -**"Recursive Whispers"** -Philosophy: Self-similarity across scales, infinite depth in finite space. -Algorithmic expression: Branching structures that subdivide recursively. Each branch slightly randomized but constrained by golden ratios. L-systems or recursive subdivision generate tree-like forms that feel both mathematical and organic. Subtle noise perturbations break perfect symmetry. Line weights diminish with each recursion level. Every branching angle the product of deep mathematical exploration. - -**"Field Dynamics"** -Philosophy: Invisible forces made visible through their effects on matter. -Algorithmic expression: Vector fields constructed from mathematical functions or noise. Particles born at edges, flowing along field lines, dying when they reach equilibrium or boundaries. Multiple fields can attract, repel, or rotate particles. The visualization shows only the traces - ghost-like evidence of invisible forces. A computational dance meticulously choreographed through force balance. - -**"Stochastic Crystallization"** -Philosophy: Random processes crystallizing into ordered structures. -Algorithmic expression: Randomized circle packing or Voronoi tessellation. Start with random points, let them evolve through relaxation algorithms. Cells push apart until equilibrium. Color based on cell size, neighbor count, or distance from center. The organic tiling that emerges feels both random and inevitable. Every seed produces unique crystalline beauty - the mark of a master-level generative algorithm. - -*These are condensed examples. The actual algorithmic philosophy should be 4-6 substantial paragraphs.* - -### ESSENTIAL PRINCIPLES -- **ALGORITHMIC PHILOSOPHY**: Creating a computational worldview to be expressed through code -- **PROCESS OVER PRODUCT**: Always emphasize that beauty emerges from the algorithm's execution - each run is unique -- **PARAMETRIC EXPRESSION**: Ideas communicate through mathematical relationships, forces, behaviors - not static composition -- **ARTISTIC FREEDOM**: The next Claude interprets the philosophy algorithmically - provide creative implementation room -- **PURE GENERATIVE ART**: This is about making LIVING ALGORITHMS, not static images with randomness -- **EXPERT CRAFTSMANSHIP**: Repeatedly emphasize the final algorithm must feel meticulously crafted, refined through countless iterations, the product of deep expertise by someone at the absolute top of their field in computational aesthetics - -**The algorithmic philosophy should be 4-6 paragraphs long.** Fill it with poetic computational philosophy that brings together the intended vision. Avoid repeating the same points. Output this algorithmic philosophy as a .md file. - ---- - -## DEDUCING THE CONCEPTUAL SEED - -**CRITICAL STEP**: Before implementing the algorithm, identify the subtle conceptual thread from the original request. - -**THE ESSENTIAL PRINCIPLE**: -The concept is a **subtle, niche reference embedded within the algorithm itself** - not always literal, always sophisticated. Someone familiar with the subject should feel it intuitively, while others simply experience a masterful generative composition. The algorithmic philosophy provides the computational language. The deduced concept provides the soul - the quiet conceptual DNA woven invisibly into parameters, behaviors, and emergence patterns. - -This is **VERY IMPORTANT**: The reference must be so refined that it enhances the work's depth without announcing itself. Think like a jazz musician quoting another song through algorithmic harmony - only those who know will catch it, but everyone appreciates the generative beauty. - ---- - -## P5.JS IMPLEMENTATION - -With the philosophy AND conceptual framework established, express it through code. Pause to gather thoughts before proceeding. Use only the algorithmic philosophy created and the instructions below. - -### ⚠️ STEP 0: READ THE TEMPLATE FIRST ⚠️ - -**CRITICAL: BEFORE writing any HTML:** - -1. **Read** `templates/viewer.html` using the Read tool -2. **Study** the exact structure, styling, and Anthropic branding -3. **Use that file as the LITERAL STARTING POINT** - not just inspiration -4. **Keep all FIXED sections exactly as shown** (header, sidebar structure, Anthropic colors/fonts, seed controls, action buttons) -5. **Replace only the VARIABLE sections** marked in the file's comments (algorithm, parameters, UI controls for parameters) - -**Avoid:** -- ❌ Creating HTML from scratch -- ❌ Inventing custom styling or color schemes -- ❌ Using system fonts or dark themes -- ❌ Changing the sidebar structure - -**Follow these practices:** -- ✅ Copy the template's exact HTML structure -- ✅ Keep Anthropic branding (Poppins/Lora fonts, light colors, gradient backdrop) -- ✅ Maintain the sidebar layout (Seed → Parameters → Colors? → Actions) -- ✅ Replace only the p5.js algorithm and parameter controls - -The template is the foundation. Build on it, don't rebuild it. - ---- - -To create gallery-quality computational art that lives and breathes, use the algorithmic philosophy as the foundation. - -### TECHNICAL REQUIREMENTS - -**Seeded Randomness (Art Blocks Pattern)**: -```javascript -// ALWAYS use a seed for reproducibility -let seed = 12345; // or hash from user input -randomSeed(seed); -noiseSeed(seed); -``` - -**Parameter Structure - FOLLOW THE PHILOSOPHY**: - -To establish parameters that emerge naturally from the algorithmic philosophy, consider: "What qualities of this system can be adjusted?" - -```javascript -let params = { - seed: 12345, // Always include seed for reproducibility - // colors - // Add parameters that control YOUR algorithm: - // - Quantities (how many?) - // - Scales (how big? how fast?) - // - Probabilities (how likely?) - // - Ratios (what proportions?) - // - Angles (what direction?) - // - Thresholds (when does behavior change?) -}; -``` - -**To design effective parameters, focus on the properties the system needs to be tunable rather than thinking in terms of "pattern types".** - -**Core Algorithm - EXPRESS THE PHILOSOPHY**: - -**CRITICAL**: The algorithmic philosophy should dictate what to build. - -To express the philosophy through code, avoid thinking "which pattern should I use?" and instead think "how to express this philosophy through code?" - -If the philosophy is about **organic emergence**, consider using: -- Elements that accumulate or grow over time -- Random processes constrained by natural rules -- Feedback loops and interactions - -If the philosophy is about **mathematical beauty**, consider using: -- Geometric relationships and ratios -- Trigonometric functions and harmonics -- Precise calculations creating unexpected patterns - -If the philosophy is about **controlled chaos**, consider using: -- Random variation within strict boundaries -- Bifurcation and phase transitions -- Order emerging from disorder - -**The algorithm flows from the philosophy, not from a menu of options.** - -To guide the implementation, let the conceptual essence inform creative and original choices. Build something that expresses the vision for this particular request. - -**Canvas Setup**: Standard p5.js structure: -```javascript -function setup() { - createCanvas(1200, 1200); - // Initialize your system -} - -function draw() { - // Your generative algorithm - // Can be static (noLoop) or animated -} -``` - -### CRAFTSMANSHIP REQUIREMENTS - -**CRITICAL**: To achieve mastery, create algorithms that feel like they emerged through countless iterations by a master generative artist. Tune every parameter carefully. Ensure every pattern emerges with purpose. This is NOT random noise - this is CONTROLLED CHAOS refined through deep expertise. - -- **Balance**: Complexity without visual noise, order without rigidity -- **Color Harmony**: Thoughtful palettes, not random RGB values -- **Composition**: Even in randomness, maintain visual hierarchy and flow -- **Performance**: Smooth execution, optimized for real-time if animated -- **Reproducibility**: Same seed ALWAYS produces identical output - -### OUTPUT FORMAT - -Output: -1. **Algorithmic Philosophy** - As markdown or text explaining the generative aesthetic -2. **Single HTML Artifact** - Self-contained interactive generative art built from `templates/viewer.html` (see STEP 0 and next section) - -The HTML artifact contains everything: p5.js (from CDN), the algorithm, parameter controls, and UI - all in one file that works immediately in claude.ai artifacts or any browser. Start from the template file, not from scratch. - ---- - -## INTERACTIVE ARTIFACT CREATION - -**REMINDER: `templates/viewer.html` should have already been read (see STEP 0). Use that file as the starting point.** - -To allow exploration of the generative art, create a single, self-contained HTML artifact. Ensure this artifact works immediately in claude.ai or any browser - no setup required. Embed everything inline. - -### CRITICAL: WHAT'S FIXED VS VARIABLE - -The `templates/viewer.html` file is the foundation. It contains the exact structure and styling needed. - -**FIXED (always include exactly as shown):** -- Layout structure (header, sidebar, main canvas area) -- Anthropic branding (UI colors, fonts, gradients) -- Seed section in sidebar: - - Seed display - - Previous/Next buttons - - Random button - - Jump to seed input + Go button -- Actions section in sidebar: - - Regenerate button - - Reset button - -**VARIABLE (customize for each artwork):** -- The entire p5.js algorithm (setup/draw/classes) -- The parameters object (define what the art needs) -- The Parameters section in sidebar: - - Number of parameter controls - - Parameter names - - Min/max/step values for sliders - - Control types (sliders, inputs, etc.) -- Colors section (optional): - - Some art needs color pickers - - Some art might use fixed colors - - Some art might be monochrome (no color controls needed) - - Decide based on the art's needs - -**Every artwork should have unique parameters and algorithm!** The fixed parts provide consistent UX - everything else expresses the unique vision. - -### REQUIRED FEATURES - -**1. Parameter Controls** -- Sliders for numeric parameters (particle count, noise scale, speed, etc.) -- Color pickers for palette colors -- Real-time updates when parameters change -- Reset button to restore defaults - -**2. Seed Navigation** -- Display current seed number -- "Previous" and "Next" buttons to cycle through seeds -- "Random" button for random seed -- Input field to jump to specific seed -- Generate 100 variations when requested (seeds 1-100) - -**3. Single Artifact Structure** -```html - - - - - - - - -
-
- -
- - - -``` - -**CRITICAL**: This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline. - -**4. Implementation Details - BUILD THE SIDEBAR** - -The sidebar structure: - -**1. Seed (FIXED)** - Always include exactly as shown: -- Seed display -- Prev/Next/Random/Jump buttons - -**2. Parameters (VARIABLE)** - Create controls for the art: -```html -
- - - ... -
-``` -Add as many control-group divs as there are parameters. - -**3. Colors (OPTIONAL/VARIABLE)** - Include if the art needs adjustable colors: -- Add color pickers if users should control palette -- Skip this section if the art uses fixed colors -- Skip if the art is monochrome - -**4. Actions (FIXED)** - Always include exactly as shown: -- Regenerate button -- Reset button -- Download PNG button - -**Requirements**: -- Seed controls must work (prev/next/random/jump/display) -- All parameters must have UI controls -- Regenerate, Reset, Download buttons must work -- Keep Anthropic branding (UI styling, not art colors) - -### USING THE ARTIFACT - -The HTML artifact works immediately: -1. **In claude.ai**: Displayed as an interactive artifact - runs instantly -2. **As a file**: Save and open in any browser - no server needed -3. **Sharing**: Send the HTML file - it's completely self-contained - ---- - -## VARIATIONS & EXPLORATION - -The artifact includes seed navigation by default (prev/next/random buttons), allowing users to explore variations without creating multiple files. If the user wants specific variations highlighted: - -- Include seed presets (buttons for "Variation 1: Seed 42", "Variation 2: Seed 127", etc.) -- Add a "Gallery Mode" that shows thumbnails of multiple seeds side-by-side -- All within the same single artifact - -This is like creating a series of prints from the same plate - the algorithm is consistent, but each seed reveals different facets of its potential. The interactive nature means users discover their own favorites by exploring the seed space. - ---- - -## THE CREATIVE PROCESS - -**User request** → **Algorithmic philosophy** → **Implementation** - -Each request is unique. The process involves: - -1. **Interpret the user's intent** - What aesthetic is being sought? -2. **Create an algorithmic philosophy** (4-6 paragraphs) describing the computational approach -3. **Implement it in code** - Build the algorithm that expresses this philosophy -4. **Design appropriate parameters** - What should be tunable? -5. **Build matching UI controls** - Sliders/inputs for those parameters - -**The constants**: -- Anthropic branding (colors, fonts, layout) -- Seed navigation (always present) -- Self-contained HTML artifact - -**Everything else is variable**: -- The algorithm itself -- The parameters -- The UI controls -- The visual outcome - -To achieve the best results, trust creativity and let the philosophy guide the implementation. - ---- - -## RESOURCES - -This skill includes helpful templates and documentation: - -- **templates/viewer.html**: REQUIRED STARTING POINT for all HTML artifacts. - - This is the foundation - contains the exact structure and Anthropic branding - - **Keep unchanged**: Layout structure, sidebar organization, Anthropic colors/fonts, seed controls, action buttons - - **Replace**: The p5.js algorithm, parameter definitions, and UI controls in Parameters section - - The extensive comments in the file mark exactly what to keep vs replace - -- **templates/generator_template.js**: Reference for p5.js best practices and code structure principles. - - Shows how to organize parameters, use seeded randomness, structure classes - - NOT a pattern menu - use these principles to build unique algorithms - - Embed algorithms inline in the HTML artifact (don't create separate .js files) - -**Critical reminder**: -- The **template is the STARTING POINT**, not inspiration -- The **algorithm is where to create** something unique -- Don't copy the flow field example - build what the philosophy demands -- But DO keep the exact UI structure and Anthropic branding from the template \ No newline at end of file diff --git a/skills/algorithmic-art/templates/generator_template.js b/skills/algorithmic-art/templates/generator_template.js deleted file mode 100644 index e263fbd..0000000 --- a/skills/algorithmic-art/templates/generator_template.js +++ /dev/null @@ -1,223 +0,0 @@ -/** - * ═══════════════════════════════════════════════════════════════════════════ - * P5.JS GENERATIVE ART - BEST PRACTICES - * ═══════════════════════════════════════════════════════════════════════════ - * - * This file shows STRUCTURE and PRINCIPLES for p5.js generative art. - * It does NOT prescribe what art you should create. - * - * Your algorithmic philosophy should guide what you build. - * These are just best practices for how to structure your code. - * - * ═══════════════════════════════════════════════════════════════════════════ - */ - -// ============================================================================ -// 1. PARAMETER ORGANIZATION -// ============================================================================ -// Keep all tunable parameters in one object -// This makes it easy to: -// - Connect to UI controls -// - Reset to defaults -// - Serialize/save configurations - -let params = { - // Define parameters that match YOUR algorithm - // Examples (customize for your art): - // - Counts: how many elements (particles, circles, branches, etc.) - // - Scales: size, speed, spacing - // - Probabilities: likelihood of events - // - Angles: rotation, direction - // - Colors: palette arrays - - seed: 12345, - // define colorPalette as an array -- choose whatever colors you'd like ['#d97757', '#6a9bcc', '#788c5d', '#b0aea5'] - // Add YOUR parameters here based on your algorithm -}; - -// ============================================================================ -// 2. SEEDED RANDOMNESS (Critical for reproducibility) -// ============================================================================ -// ALWAYS use seeded random for Art Blocks-style reproducible output - -function initializeSeed(seed) { - randomSeed(seed); - noiseSeed(seed); - // Now all random() and noise() calls will be deterministic -} - -// ============================================================================ -// 3. P5.JS LIFECYCLE -// ============================================================================ - -function setup() { - createCanvas(800, 800); - - // Initialize seed first - initializeSeed(params.seed); - - // Set up your generative system - // This is where you initialize: - // - Arrays of objects - // - Grid structures - // - Initial positions - // - Starting states - - // For static art: call noLoop() at the end of setup - // For animated art: let draw() keep running -} - -function draw() { - // Option 1: Static generation (runs once, then stops) - // - Generate everything in setup() - // - Call noLoop() in setup() - // - draw() doesn't do much or can be empty - - // Option 2: Animated generation (continuous) - // - Update your system each frame - // - Common patterns: particle movement, growth, evolution - // - Can optionally call noLoop() after N frames - - // Option 3: User-triggered regeneration - // - Use noLoop() by default - // - Call redraw() when parameters change -} - -// ============================================================================ -// 4. CLASS STRUCTURE (When you need objects) -// ============================================================================ -// Use classes when your algorithm involves multiple entities -// Examples: particles, agents, cells, nodes, etc. - -class Entity { - constructor() { - // Initialize entity properties - // Use random() here - it will be seeded - } - - update() { - // Update entity state - // This might involve: - // - Physics calculations - // - Behavioral rules - // - Interactions with neighbors - } - - display() { - // Render the entity - // Keep rendering logic separate from update logic - } -} - -// ============================================================================ -// 5. PERFORMANCE CONSIDERATIONS -// ============================================================================ - -// For large numbers of elements: -// - Pre-calculate what you can -// - Use simple collision detection (spatial hashing if needed) -// - Limit expensive operations (sqrt, trig) when possible -// - Consider using p5 vectors efficiently - -// For smooth animation: -// - Aim for 60fps -// - Profile if things are slow -// - Consider reducing particle counts or simplifying calculations - -// ============================================================================ -// 6. UTILITY FUNCTIONS -// ============================================================================ - -// Color utilities -function hexToRgb(hex) { - const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - return result ? { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16) - } : null; -} - -function colorFromPalette(index) { - return params.colorPalette[index % params.colorPalette.length]; -} - -// Mapping and easing -function mapRange(value, inMin, inMax, outMin, outMax) { - return outMin + (outMax - outMin) * ((value - inMin) / (inMax - inMin)); -} - -function easeInOutCubic(t) { - return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; -} - -// Constrain to bounds -function wrapAround(value, max) { - if (value < 0) return max; - if (value > max) return 0; - return value; -} - -// ============================================================================ -// 7. PARAMETER UPDATES (Connect to UI) -// ============================================================================ - -function updateParameter(paramName, value) { - params[paramName] = value; - // Decide if you need to regenerate or just update - // Some params can update in real-time, others need full regeneration -} - -function regenerate() { - // Reinitialize your generative system - // Useful when parameters change significantly - initializeSeed(params.seed); - // Then regenerate your system -} - -// ============================================================================ -// 8. COMMON P5.JS PATTERNS -// ============================================================================ - -// Drawing with transparency for trails/fading -function fadeBackground(opacity) { - fill(250, 249, 245, opacity); // Anthropic light with alpha - noStroke(); - rect(0, 0, width, height); -} - -// Using noise for organic variation -function getNoiseValue(x, y, scale = 0.01) { - return noise(x * scale, y * scale); -} - -// Creating vectors from angles -function vectorFromAngle(angle, magnitude = 1) { - return createVector(cos(angle), sin(angle)).mult(magnitude); -} - -// ============================================================================ -// 9. EXPORT FUNCTIONS -// ============================================================================ - -function exportImage() { - saveCanvas('generative-art-' + params.seed, 'png'); -} - -// ============================================================================ -// REMEMBER -// ============================================================================ -// -// These are TOOLS and PRINCIPLES, not a recipe. -// Your algorithmic philosophy should guide WHAT you create. -// This structure helps you create it WELL. -// -// Focus on: -// - Clean, readable code -// - Parameterized for exploration -// - Seeded for reproducibility -// - Performant execution -// -// The art itself is entirely up to you! -// -// ============================================================================ \ No newline at end of file diff --git a/skills/algorithmic-art/templates/viewer.html b/skills/algorithmic-art/templates/viewer.html deleted file mode 100644 index 630cc1f..0000000 --- a/skills/algorithmic-art/templates/viewer.html +++ /dev/null @@ -1,599 +0,0 @@ - - - - - - - Generative Art Viewer - - - - - - - -
- -
- -

TITLE - EDIT

-
SUBHEADER - EDIT
- - -
-

Seed

- -
- - -
- -
- - -
-

Parameters

- - -
- -
- - 5000 -
-
- - -
- -
- - 0.5 -
-
- - -
- -
- - 0.005 -
-
- - -
- -
- - 8 -
-
-
- - -
-

Colors

- - -
- -
- - #d97757 -
-
- - -
- -
- - #6a9bcc -
-
- - -
- -
- - #788c5d -
-
-
- - -
-

Actions

-
- -
-
-
- - -
-
-
Initializing generative art...
-
-
-
- - - - \ No newline at end of file diff --git a/skills/annotated-writing/SKILL.md b/skills/annotated-writing/SKILL.md deleted file mode 100644 index 5840cde..0000000 --- a/skills/annotated-writing/SKILL.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -name: annotated-writing -description: > - Use this skill when the user says "make a content map" for any piece of writing, - OR when the agent receives a completed content map file as input. Two distinct tasks: - (1) content mapping: read source text, produce structured annotation data; - (2) building: receive content map, produce single-file interactive HTML. - These are separate agent tasks. Never attempt both in one context. ---- - -## This Skill Has Two Modes - -**Mode 1 — Content Mapping** is triggered by: "make a content map" -Read `content-mapping-fiction.md` or `content-mapping-non-fiction.md` depending on source type. Produce a `.md` content map file as output. - -**Mode 2 — Build** is triggered by: receiving a content map `.md` file as input. -Read `annotated-writing-build.md`. Produce a single-file `.html` artefact as output. - -Never conflate the two. A content-mapping agent should not write HTML. A build agent should not perform literary analysis. - -## Files in This Skill - -| File | Used By | Purpose | -|---|---|---| -| `content-mapping-fiction.md` | Mapping agent | How to map fiction and historically-situated writing | -| `content-mapping-non-fiction.md` | Mapping agent | How to map essays, journalism, documents | -| `annotated-writing-build.md` | Build agent | Component library, TOON parsing, HTML output rules | -| `SKILL.md` (this file) | Both agents | Entry point, routing | - -## Routing Logic - -``` -input received -│ -├─ source text .md -│ └─ is source fictional? → content-mapping-fiction.md -│ is source non-fiction? → content-mapping-non-fiction.md -│ -├─ "make a content map" + source text -│ └─ is source fictional? → content-mapping-fiction.md -│ is source non-fiction? → content-mapping-non-fiction.md -│ -└─ content map .md file received - └─ annotated-writing-build.md -``` diff --git a/skills/annotated-writing/annotated-writing-build.md b/skills/annotated-writing/annotated-writing-build.md deleted file mode 100644 index 198a8c6..0000000 --- a/skills/annotated-writing/annotated-writing-build.md +++ /dev/null @@ -1,297 +0,0 @@ -# Annotated Writing Build - -Instructions for a build agent. Input: a completed content map `.md` file. Output: a single-file `.html` artefact. Do not perform literary analysis. Do not rewrite or improve the source text. Execute the map. - ---- - -## Two-Agent Protocol - -This agent receives a content map. It does not produce content maps. If asked to do both in one context, refuse the analysis task and request the content map as input. - -**What the build agent reads from the content map:** -- Tab definitions (TOON) -- Decoder metadata (TOON) + decoder bodies (YAML) -- Lightbox definitions (YAML) -- Accordion content (YAML) -- Bias notes (YAML) -- Further reading (TOON) -- Annotated source text (with `[DECODER]`, `[LIGHTBOX]`, `[ORDER]`, `[LETTER-*]` markers) - ---- - -## Reading TOON in the Content Map - -Content maps use TOON for uniform arrays. Parse as follows: - -**Tabular array syntax:** -```toon -arrayName[N]{field1,field2,field3}: - value1,value2,value3 - value1,value2,value3 -``` -`[N]` is the declared row count — validate against actual rows. `{fields}` is the column header — same for every row. Values follow CSV quoting rules: strings containing commas are double-quoted. - -**YAML scalar syntax** (for body text — not TOON): -```yaml -key: > - Block scalar. Paragraph text. May contain commas freely. - Blank line = new paragraph in rendered output. -``` - -Both may appear in the same content map. TOON for metadata; YAML for prose. - ---- - -## Aesthetic Direction - -The aesthetic is set per-project by the user. The content map may include an `aesthetic:` key. If absent, infer from context clues in the source text. When in doubt, ask before building. - -Regardless of aesthetic, these rules apply: -- Choose fonts that are distinctive and specific to the aesthetic. Never: Arial, Inter, Roboto, system-ui. -- Use CSS custom properties for all colors. No hardcoded hex values in component CSS. -- Dark or light themes are both valid. Commit to one — do not default to white-on-grey. -- Background texture adds atmosphere. Scanlines, grain, parchment patterns, noise — pick one and use it subtly. -- Tab navigation is sticky. One tab visible at a time via JS class toggle. - ---- - -## Component Library - -All components must be implemented as specified. Do not substitute or simplify. - ---- - -### Decoder - -Inline interactive element. Wraps a phrase in prose. Floating panel on click. - -**Critical structural rule:** Every element inside a decoder must be a ``, never a `
`. Decoders live inside `

` tags. A `

` inside a `

` silently ejects the panel from the DOM. Use `` with `display: block` for block-like rendering. - -```html - - - - [tag text] - [label] - [body text] - → [link label] - - -``` - -**Required CSS:** -```css -.dc { display: inline; position: relative; } -.dc-panel { - display: none; - position: absolute; /* never relative */ - top: calc(100% + 6px); - left: 0; - z-index: 500; - width: 300px; /* adjust to aesthetic */ -} -.dc-panel.open { display: block; } -.dc-panel.flip { left: auto; right: 0; } -``` - -**Required JS:** -```js -function tog(id, btn) { - const w = document.getElementById(id); - const p = w.querySelector('.dc-panel'); - const open = p.classList.contains('open'); - document.querySelectorAll('.dc-panel.open').forEach(x => x.classList.remove('open')); - document.querySelectorAll('.dc-btn.open').forEach(x => x.classList.remove('open')); - if (!open) { - p.classList.add('open'); btn.classList.add('open'); - const r = p.getBoundingClientRect(); - p.classList.toggle('flip', r.right > window.innerWidth - 16); - } -} -document.addEventListener('click', e => { - if (!e.target.closest('.dc')) { - document.querySelectorAll('.dc-panel.open').forEach(x => x.classList.remove('open')); - document.querySelectorAll('.dc-btn.open').forEach(x => x.classList.remove('open')); - } -}); -``` - -**Trigger visual requirements:** -- Must look clickable (cursor pointer, border-bottom dashed or dotted) -- Must indicate open/closed state (chevron via `::after`, or similar) -- Color coding must match the scheme defined in the content map - ---- - -### Lightbox - -Full-screen overlay. Triggered by an inline button in the prose. - -```html - - - - -

-
-
-
- [eyebrow] - [title] -
- -
-
- -
-
-
-``` - -**Required CSS:** -```css -.lb-overlay { display: none; position: fixed; inset: 0; z-index: 2000; - align-items: center; justify-content: center; padding: 20px; } -.lb-overlay.open { display: flex; } -.lb-box { max-height: 88vh; overflow-y: auto; } -.lb-head { position: sticky; top: 0; } -``` - -**Required JS:** -```js -function lb(id) { document.getElementById(id).classList.add('open'); document.body.style.overflow = 'hidden'; } -function closeLb(id) { document.getElementById(id).classList.remove('open'); document.body.style.overflow = ''; } -function closeLbOv(e, id) { if (e.target === document.getElementById(id)) closeLb(id); } -document.addEventListener('keydown', e => { - if (e.key === 'Escape') { - document.querySelectorAll('.lb-overlay.open').forEach(x => x.classList.remove('open')); - document.body.style.overflow = ''; - } -}); -``` - ---- - -### Accordion - -Expandable sections within educational tabs. One open at a time. - -The accordion panel uses `
` — it is not inside prose, so block elements are safe here. - -```html -
- -
- -
-
-``` - -**Required JS:** -```js -function acc(btn) { - const p = btn.nextElementSibling; - const open = btn.classList.contains('open'); - document.querySelectorAll('.acc-btn.open').forEach(b => { - b.classList.remove('open'); b.nextElementSibling.classList.remove('open'); - }); - if (!open) { btn.classList.add('open'); p.classList.add('open'); } -} -``` - ---- - -### Bias Note - -A styled callout block at the top of each analytical tab, before the first accordion. - -```html -
- A note: [bias note text from content map] -
-``` - -Not collapsible. Always visible. One per analytical tab. - ---- - -### Tab Navigation - -```html - -``` - -```js -function go(id, btn, col) { - document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); - document.querySelectorAll('nav button').forEach(b => { b.classList.remove('active'); /* remove all color classes */ }); - document.getElementById('tab-' + id).classList.add('active'); - btn.classList.add('active', col || 'white'); - window.scrollTo(0, 0); -} -``` - -Tab content divs: -```html -
- -
-``` - ---- - -### Source Text — Markers to HTML - -Translate content map markers into HTML components: - -| Marker | Renders as | -|---|---| -| `[DECODER:id] phrase [/DECODER]` | `` decoder component | -| `[LIGHTBOX:id] phrase [/LIGHTBOX]` | `