commit 374eecc4f32a1075aa0078a3b460cc2bf507c923 Author: Zhongwei Li Date: Sat Nov 29 18:03:29 2025 +0800 Initial commit diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..a6d27de --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,21 @@ +{ + "name": "example-skills", + "description": "Collection of example skills demonstrating various capabilities including skill creation, MCP building, visual design, algorithmic art, internal communications, web testing, artifact building, Slack GIFs, and theme styling", + "version": "0.0.0-2025.11.28", + "author": { + "name": "Cameron Rohn", + "email": "github@cameronrohn.com" + }, + "skills": [ + "./skills/skill-creator", + "./skills/mcp-builder", + "./skills/canvas-design", + "./skills/algorithmic-art", + "./skills/internal-comms", + "./skills/webapp-testing", + "./skills/artifacts-builder", + "./skills/slack-gif-creator", + "./skills/theme-factory", + "./skills/brand-guidelines" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..14889b1 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# example-skills + +Collection of example skills demonstrating various capabilities including skill creation, MCP building, visual design, algorithmic art, internal communications, web testing, artifact building, Slack GIFs, and theme styling diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..2eaadc8 --- /dev/null +++ b/plugin.lock.json @@ -0,0 +1,664 @@ +{ + "$schema": "internal://schemas/plugin.lock.v1.json", + "pluginId": "gh:Cam10001110101/claude-skills-base:example-skills", + "normalized": { + "repo": null, + "ref": "refs/tags/v20251128.0", + "commit": "d2d78a04f0c53b0de8687d1cbc3d9502158cfa48", + "treeHash": "9747e8a4452701e6bbfd4975b62b0c63f5d4d110cf23347847621847c4486d7c", + "generatedAt": "2025-11-28T10:10:01.660452Z", + "toolVersion": "publish_plugins.py@0.2.0" + }, + "origin": { + "remote": "git@github.com:zhongweili/42plugin-data.git", + "branch": "master", + "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390", + "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data" + }, + "manifest": { + "name": "example-skills", + "description": "Collection of example skills demonstrating various capabilities including skill creation, MCP building, visual design, algorithmic art, internal communications, web testing, artifact building, Slack GIFs, and theme styling" + }, + "content": { + "files": [ + { + "path": "README.md", + "sha256": "df0377fd38f8fd0c2aa0c37b4afe128eaca3354c53daaad25e08d25088df897a" + }, + { + "path": ".claude-plugin/plugin.json", + "sha256": "7efc30f77692cf4c67a0d0fab118ca93979c3a9d7896ae9eb0bee97187787ca8" + }, + { + "path": "skills/theme-factory/SKILL.md", + "sha256": "c35893e221e28895c52143cc11bf30e41a44817796b39d4b15727dadc9796552" + }, + { + "path": "skills/theme-factory/theme-showcase.pdf", + "sha256": "3e126eca9fe99088051f7cb984c97cedb31c7d9e09ce0ba5d61bd01e70a0d253" + }, + { + "path": "skills/theme-factory/LICENSE.txt", + "sha256": "58d1e17ffe5109a7ae296caafcadfdbe6a7d176f0bc4ab01e12a689b0499d8bd" + }, + { + "path": "skills/theme-factory/themes/sunset-boulevard.md", + "sha256": "658af11ab04be4923692571081ffb42a428141ae537703117b9236d9f8ee22a3" + }, + { + "path": "skills/theme-factory/themes/tech-innovation.md", + "sha256": "183648163026dd5eeba3df5effa335b55ba333c3ee1fe215278605e55f40a52a" + }, + { + "path": "skills/theme-factory/themes/arctic-frost.md", + "sha256": "868a75a8fb5b2a61d0f0ab87c437fe632d3cbab6371c418f06aa2816ac109ae0" + }, + { + "path": "skills/theme-factory/themes/modern-minimalist.md", + "sha256": "b8bc572b75948d4df69c401af703b9262ed6820a3ceb270da30a529e92763614" + }, + { + "path": "skills/theme-factory/themes/golden-hour.md", + "sha256": "3444a00df971d3c2f06b665e21a2e9eb5d7d7d6f6281f2758773b8345776a139" + }, + { + "path": "skills/theme-factory/themes/midnight-galaxy.md", + "sha256": "0e134c4c0324df41e34ac314269aa6829cd378cf3c304b31858d0cd158d2f944" + }, + { + "path": "skills/theme-factory/themes/forest-canopy.md", + "sha256": "ecb722efa24688e808b5bf323c334ca2349e989cfddd72ce8400ce5d4c4bd3e7" + }, + { + "path": "skills/theme-factory/themes/ocean-depths.md", + "sha256": "a7ad8eec85341dbfcb2665da827a4b6a4baee08ab3335ac02421f18e6b46b2e2" + }, + { + "path": "skills/theme-factory/themes/desert-rose.md", + "sha256": "bd065b8629be3b64655183927e248e3d892a27b8d184b009cfba89c96102744f" + }, + { + "path": "skills/theme-factory/themes/botanical-garden.md", + "sha256": "222cb8e7496abc9b75b29453c809fb9839e7e4b01fa45deecdd896b38d087765" + }, + { + "path": "skills/algorithmic-art/SKILL.md", + "sha256": "3bc4092c09804853186524c826bc0621b940bb6122c05b84496dff95388e6eef" + }, + { + "path": "skills/algorithmic-art/LICENSE.txt", + "sha256": "58d1e17ffe5109a7ae296caafcadfdbe6a7d176f0bc4ab01e12a689b0499d8bd" + }, + { + "path": "skills/algorithmic-art/templates/generator_template.js", + "sha256": "9ee0f1da52ef8f7bbfde1917123654880890d43f2d388642d71eab6dd78f94c4" + }, + { + "path": "skills/algorithmic-art/templates/viewer.html", + "sha256": "86c79d7ce97d2599ebe4bd9b97fdeb7295c9d3ed61ceeb513cbe1b2bb5d1ce29" + }, + { + "path": "skills/internal-comms/SKILL.md", + "sha256": "067b7587a344a928fc6534ef66b1bcd591fc7c26d207ea7ca3334aeb678d6475" + }, + { + "path": "skills/internal-comms/LICENSE.txt", + "sha256": "58d1e17ffe5109a7ae296caafcadfdbe6a7d176f0bc4ab01e12a689b0499d8bd" + }, + { + "path": "skills/internal-comms/examples/faq-answers.md", + "sha256": "5ecd3356cd6666937f2ebefa753253edfdbdca15e368d07baf398bfcced72484" + }, + { + "path": "skills/internal-comms/examples/company-newsletter.md", + "sha256": "30f81cfbdb03858a006169c72169024089c7c5d3d32611d337782da4f38c86b5" + }, + { + "path": "skills/internal-comms/examples/general-comms.md", + "sha256": "4d3a4bb198a77626bcf018e96b2b45a2dbabed172d4ade0fcd70d23ae8a47a47" + }, + { + "path": "skills/internal-comms/examples/3p-updates.md", + "sha256": "087e4363c0f3513728a7e695eeb9ead5c3ecd12a4681b59340691180e65b68fc" + }, + { + "path": "skills/skill-creator/SKILL.md", + "sha256": "8c0ce23bb87be91f5b0853c2e9815617c3858b63acdddfe5da47d2c2d3a60816" + }, + { + "path": "skills/skill-creator/LICENSE.txt", + "sha256": "58d1e17ffe5109a7ae296caafcadfdbe6a7d176f0bc4ab01e12a689b0499d8bd" + }, + { + "path": "skills/skill-creator/scripts/init_skill.py", + "sha256": "0bba250b94caa4cb2b28b15dad26fdcf371aeda4c9797b8120e55c2e33e0c73c" + }, + { + "path": "skills/skill-creator/scripts/package_skill.py", + "sha256": "692525dd8096aee51730ab142fb2605894a6f1a4135bcffebbf4f8ed3cf8715e" + }, + { + "path": "skills/skill-creator/scripts/quick_validate.py", + "sha256": "41647b79d15e7e51b944d56843e9f87a33f4c66e64ded5964d1f95bad2fe634a" + }, + { + "path": "skills/canvas-design/SKILL.md", + "sha256": "a1f288079624402f30682753c1d43920b6664785698d21d3e7aa197450a6448b" + }, + { + "path": "skills/canvas-design/LICENSE.txt", + "sha256": "58d1e17ffe5109a7ae296caafcadfdbe6a7d176f0bc4ab01e12a689b0499d8bd" + }, + { + "path": "skills/canvas-design/canvas-fonts/Lora-Italic.ttf", + "sha256": "be627e595184e8afe521f08da0607eee613f1997d423bc8dadc5798995581377" + }, + { + "path": "skills/canvas-design/canvas-fonts/InstrumentSerif-Italic.ttf", + "sha256": "9c86e4d5a47b50224a2463a9eca8535835257c8e85c470c2c6b454b1af6f046e" + }, + { + "path": "skills/canvas-design/canvas-fonts/WorkSans-Regular.ttf", + "sha256": "e67985a843df0d3cdee51a3d0f329eb1774a344ad9ff0c9ab923751f1577e2a4" + }, + { + "path": "skills/canvas-design/canvas-fonts/ArsenalSC-OFL.txt", + "sha256": "8ddd61b18ba2c0d0dbe4a691cf5f1a0673f473d02fa0546e67ee88c006aeff6e" + }, + { + "path": "skills/canvas-design/canvas-fonts/Italiana-OFL.txt", + "sha256": "8373b11312ace78c4cec2e8f9f6aa9f2330601107dac7bcf899c6f2dbd40c5a5" + }, + { + "path": "skills/canvas-design/canvas-fonts/CrimsonPro-Italic.ttf", + "sha256": "52318db3526b644e6efa60be0b3ca5a50e40fbe8bd026c261e0aa206f0772267" + }, + { + "path": "skills/canvas-design/canvas-fonts/Outfit-OFL.txt", + "sha256": "1945b62cd76da9a3051a1660dde72afaa64ffc2666d30e7a78356d651653ba2f" + }, + { + "path": "skills/canvas-design/canvas-fonts/Gloock-OFL.txt", + "sha256": "c0a3f3125ac491ef3d1f09f401be4834c646562f647e44f2bcbc49f0466c656d" + }, + { + "path": "skills/canvas-design/canvas-fonts/RedHatMono-Regular.ttf", + "sha256": "452fe826871b37539f5212b20c87cf30f82f58dd2741f1c96edd1dcbdc0db6b4" + }, + { + "path": "skills/canvas-design/canvas-fonts/YoungSerif-OFL.txt", + "sha256": "cdcb8039606b40a027a6d24586ec62d5fe29c701343d82a048c829cb28a3dd28" + }, + { + "path": "skills/canvas-design/canvas-fonts/Outfit-Bold.ttf", + "sha256": "6654b93d21301ec61887d3cedd6c11d9df1b1dfb63f9cf45ac7995f6e2235ab1" + }, + { + "path": "skills/canvas-design/canvas-fonts/Boldonse-Regular.ttf", + "sha256": "cc2e540604565c0f90a7d8d46194a2f42fc9c45512cd2e39bf03b50eb68c35a4" + }, + { + "path": "skills/canvas-design/canvas-fonts/CrimsonPro-OFL.txt", + "sha256": "35680d14547b6748b6f362a052a46d22764ce5eccf96e18b74f567bb2ee58114" + }, + { + "path": "skills/canvas-design/canvas-fonts/RedHatMono-Bold.ttf", + "sha256": "7ef48353f4be5ddb90f000f6fad48f2b62b3e8c27d9818d8d45ff46c201065e0" + }, + { + "path": "skills/canvas-design/canvas-fonts/PixelifySans-OFL.txt", + "sha256": "7f54d1d9f1ae1ba9f2722f978145f90324fea34ca3c2304b3a29cfa96ac6037e" + }, + { + "path": "skills/canvas-design/canvas-fonts/Jura-OFL.txt", + "sha256": "eaf9bdb675f6d87e5feb88199ab3ea581d3bd2082f426e384fa9c394576d7260" + }, + { + "path": "skills/canvas-design/canvas-fonts/Outfit-Regular.ttf", + "sha256": "f24945365147c9e783e91d8649959b59be6b00c9ee4ecd2f6b33afbb2dd871fe" + }, + { + "path": "skills/canvas-design/canvas-fonts/Silkscreen-OFL.txt", + "sha256": "6b849745119bbe85ec01fd080c9cd50234da9f52ac6e48b55d1a424a0c4d7ca9" + }, + { + "path": "skills/canvas-design/canvas-fonts/JetBrainsMono-Bold.ttf", + "sha256": "a2349098b9e45419e7bf0e2958d6c4937a049dded37387b08be725be4c7615f3" + }, + { + "path": "skills/canvas-design/canvas-fonts/IBMPlexSerif-Regular.ttf", + "sha256": "77cd233a2af8dc6b1022faea3bb3b01f3c75af68bcf530cb6aeb15982ff3dbb7" + }, + { + "path": "skills/canvas-design/canvas-fonts/YoungSerif-Regular.ttf", + "sha256": "f8dc08f77abad753a00670af70756a8ace938e5c3f0b770f4f4c2071c4bd8fc6" + }, + { + "path": "skills/canvas-design/canvas-fonts/Italiana-Regular.ttf", + "sha256": "15c4dd6ab8cf4a29ba8826f65edcbe2f6c266c557d34d081f25072dfd5605fd2" + }, + { + "path": "skills/canvas-design/canvas-fonts/Lora-Bold.ttf", + "sha256": "7d74015e950c2fb66519c7295b8155621d22200ae2ca2a4c6b43ce3c490cac87" + }, + { + "path": "skills/canvas-design/canvas-fonts/IBMPlexSerif-BoldItalic.ttf", + "sha256": "da64b75f4284f53e7b5c71fa190a35b8bf3494fe19f1804c81c3a53340bca570" + }, + { + "path": "skills/canvas-design/canvas-fonts/JetBrainsMono-Regular.ttf", + "sha256": "b6b1ff4ddefe36d7f2a6174e1d001cab374e594519ee9049af028d577b64c5f5" + }, + { + "path": "skills/canvas-design/canvas-fonts/CrimsonPro-Regular.ttf", + "sha256": "48fad08cb1917a7b2f2c6fe5135d6c07743a6663cf7631ec4481108aaf081422" + }, + { + "path": "skills/canvas-design/canvas-fonts/InstrumentSans-Italic.ttf", + "sha256": "78e85858e371b2cb4e18f617c10f0f937c0e12a0887ffee98555b24ed305b3a7" + }, + { + "path": "skills/canvas-design/canvas-fonts/Jura-Light.ttf", + "sha256": "c891a381df056b2c4dfe85841e911bf45da0890fa21a7b2692cbe5ea1f505e1e" + }, + { + "path": "skills/canvas-design/canvas-fonts/IBMPlexMono-Bold.ttf", + "sha256": "dbd2a2fb024579438d6400a84e57579bfd2dbe67c306c8fd9fde92a61e4f2eea" + }, + { + "path": "skills/canvas-design/canvas-fonts/WorkSans-BoldItalic.ttf", + "sha256": "a5b2cad813df0aaa7d16621f2e93b5117c25e9bc788bc9a3ad218e9d6348ce34" + }, + { + "path": "skills/canvas-design/canvas-fonts/WorkSans-OFL.txt", + "sha256": "ace8c22a3326318b54e67c3691857929634205533f454a70ef5a3473ddb2e2ba" + }, + { + "path": "skills/canvas-design/canvas-fonts/Lora-OFL.txt", + "sha256": "62e37a82d3f1ef2a70712885fa8b3144b65fd144d8e748d6196b690a354d792c" + }, + { + "path": "skills/canvas-design/canvas-fonts/Silkscreen-Regular.ttf", + "sha256": "49567408600809e25147e9225ac4f37f410e2df45a750696c45027531fb65f1b" + }, + { + "path": "skills/canvas-design/canvas-fonts/PixelifySans-Medium.ttf", + "sha256": "38397504f71c122b03d234ea6f55118e3d5bdbddffd82bedddbd7755d3b3be82" + }, + { + "path": "skills/canvas-design/canvas-fonts/PoiretOne-Regular.ttf", + "sha256": "9cf265b139648b36b6c0afdfeb0bf27f7e66db9a16094bc40f644d8da05bc318" + }, + { + "path": "skills/canvas-design/canvas-fonts/BricolageGrotesque-Regular.ttf", + "sha256": "972a6d098c9867ae131d0ea99e221e63976b11a19d4b931c2c7ace525674e4f6" + }, + { + "path": "skills/canvas-design/canvas-fonts/IBMPlexMono-Regular.ttf", + "sha256": "ab08018ccd276b79fb2c636bb95b9c543598f9d50505fe92506fcb4dae7810cd" + }, + { + "path": "skills/canvas-design/canvas-fonts/CrimsonPro-Bold.ttf", + "sha256": "48f191e38355c8db100eb3ce157c20f9302a3b9a37b44a660f77ecfce3986609" + }, + { + "path": "skills/canvas-design/canvas-fonts/InstrumentSerif-Regular.ttf", + "sha256": "56ac3be03ac3ba283196b3e77850ab2ffcf56cfb6fd3212c5620109a972f8c99" + }, + { + "path": "skills/canvas-design/canvas-fonts/InstrumentSans-OFL.txt", + "sha256": "bf4dc6d13a8cccd4807133c77a1ee9619a16b92cb23322258725ab6731c2f6e5" + }, + { + "path": "skills/canvas-design/canvas-fonts/Tektur-OFL.txt", + "sha256": "3f1466cb5438f31782eeb6e895f3a655bc4d090e24263e331f555357d1cb734e" + }, + { + "path": "skills/canvas-design/canvas-fonts/InstrumentSans-BoldItalic.ttf", + "sha256": "3762f6cef95d6039489ad5ba5787d4c30f17a1ad01e9ac3c816ed69692722a68" + }, + { + "path": "skills/canvas-design/canvas-fonts/EricaOne-OFL.txt", + "sha256": "e0de629968b52255548d5fafcf30b24ff9edae0eda362380755a75816404d0fa" + }, + { + "path": "skills/canvas-design/canvas-fonts/IBMPlexSerif-Italic.ttf", + "sha256": "b11f1048745e715a55c9d837b3f10226ca3d78867b7db7251ddad8f98dcf0f38" + }, + { + "path": "skills/canvas-design/canvas-fonts/DMMono-Regular.ttf", + "sha256": "f98ada968dc3b6b2c08d3f5caaf266977df0bfe0929372b93df5a06cf2ace450" + }, + { + "path": "skills/canvas-design/canvas-fonts/NationalPark-Bold.ttf", + "sha256": "69ac4c301c4a7233c6e602d12a92c54d7967b575f4449951c45ce773f7acff53" + }, + { + "path": "skills/canvas-design/canvas-fonts/DMMono-OFL.txt", + "sha256": "bfe7842fcb88323e2981e24710c25202677385a8c75fb6a87217b275a0247ae3" + }, + { + "path": "skills/canvas-design/canvas-fonts/NationalPark-OFL.txt", + "sha256": "81c6c71d83b5b45d7344f96df12bb4a2477a5b092a9144757ee1d0f50f855175" + }, + { + "path": "skills/canvas-design/canvas-fonts/InstrumentSans-Regular.ttf", + "sha256": "a22cb26e48fd79bcb01bf2fc92d36785474dce36d9c544ab0a8868c2657c4a87" + }, + { + "path": "skills/canvas-design/canvas-fonts/LibreBaskerville-Regular.ttf", + "sha256": "2101302538d9e88adb679031c04623e4578b5745e89566284fd2c508d79acae0" + }, + { + "path": "skills/canvas-design/canvas-fonts/EricaOne-Regular.ttf", + "sha256": "db1d89e80e33a8a01beaaac7a85df582857d24a43f1e181461aa7ff5d701476a" + }, + { + "path": "skills/canvas-design/canvas-fonts/SmoochSans-OFL.txt", + "sha256": "74c9c4eb88e891483e1b7bc54780b452cbf4f4df66d4e71881d7569aa2130749" + }, + { + "path": "skills/canvas-design/canvas-fonts/NothingYouCouldDo-Regular.ttf", + "sha256": "d866f985896d3280f4fce72db7e17302c24a0c1fdb0699b6b5ed3af14f944d57" + }, + { + "path": "skills/canvas-design/canvas-fonts/WorkSans-Italic.ttf", + "sha256": "6b7f7002e0b0c8b261fe878658ef5551e3e59d9f6b609b04efb90dde1e2c1ada" + }, + { + "path": "skills/canvas-design/canvas-fonts/LibreBaskerville-OFL.txt", + "sha256": "55959eef5b0c3b2e3c1c7631b8ff0f9447d75de20f29cfa7db5bcfb026763343" + }, + { + "path": "skills/canvas-design/canvas-fonts/PoiretOne-OFL.txt", + "sha256": "2eaf541f7eb8b512e4c757a5212060abf5b6edfef230e9d7640bf736b315c33a" + }, + { + "path": "skills/canvas-design/canvas-fonts/Gloock-Regular.ttf", + "sha256": "e86b4ce66dbd3f1f83eee8db99ec96e0da1128c3f53df0e9b3b7472025dfe960" + }, + { + "path": "skills/canvas-design/canvas-fonts/BricolageGrotesque-OFL.txt", + "sha256": "0e4f4eb8534bc66a76aca13dd19c1f9731b2008866b29ccff182b764649df9b4" + }, + { + "path": "skills/canvas-design/canvas-fonts/SmoochSans-Medium.ttf", + "sha256": "dd76e6e77cce82f827a8654cd906e9ce58f3aaf78adda63c4a7f655b8ecb41f0" + }, + { + "path": "skills/canvas-design/canvas-fonts/NothingYouCouldDo-OFL.txt", + "sha256": "7c2a6970584ddad04919816163746f83b378078015899b18468b40f05e9ce128" + }, + { + "path": "skills/canvas-design/canvas-fonts/Tektur-Regular.ttf", + "sha256": "162e1b36c4718c5b051b36c971ad7e50d341944f35618f480422ebbe72988f98" + }, + { + "path": "skills/canvas-design/canvas-fonts/GeistMono-Regular.ttf", + "sha256": "a55c1b51cda4afeab9e471e7947b85a20f7c8831d7e6b1470c1b7fbdc0f0f15e" + }, + { + "path": "skills/canvas-design/canvas-fonts/Lora-BoldItalic.ttf", + "sha256": "152f87e71f5ddb60d5c57ecd9132807c947e65c42977193c9164e7c5a6690081" + }, + { + "path": "skills/canvas-design/canvas-fonts/RedHatMono-OFL.txt", + "sha256": "435fbfb7e66988b2a06686a4cb966faec733f35d8fe100a1601573c27f3e0bb8" + }, + { + "path": "skills/canvas-design/canvas-fonts/BricolageGrotesque-Bold.ttf", + "sha256": "a737b146fe0d77ffe8a86e3cd16700dd431d3b1e420d4fd80e142cd68a1cb50d" + }, + { + "path": "skills/canvas-design/canvas-fonts/NationalPark-Regular.ttf", + "sha256": "a477338b7e18308d476650dfe31235ef86a883572665e56ffb5fb80f82009b58" + }, + { + "path": "skills/canvas-design/canvas-fonts/BigShoulders-Regular.ttf", + "sha256": "18a879fc71978a4447150705caf880a9da3860083c259fd29e6dc03057b6842a" + }, + { + "path": "skills/canvas-design/canvas-fonts/GeistMono-Bold.ttf", + "sha256": "75c0828d5c1ee44b9ef9f4df577bf41595ec362e2ea3f1e558590c9e92c7949d" + }, + { + "path": "skills/canvas-design/canvas-fonts/GeistMono-OFL.txt", + "sha256": "6a873c900f584109b13ae0aaf81d6e3cf0a68751a216b03f7b6c68d547057bb4" + }, + { + "path": "skills/canvas-design/canvas-fonts/Lora-Regular.ttf", + "sha256": "7ed00e7c9cdf16ab7e2fd2361fe45d4f0b61263cd60aae398b27b7ee08108827" + }, + { + "path": "skills/canvas-design/canvas-fonts/ArsenalSC-Regular.ttf", + "sha256": "65e6f89df58f68fd905b3add34a79dd6106aa3b3044df0dad9676fff53d504b9" + }, + { + "path": "skills/canvas-design/canvas-fonts/JetBrainsMono-OFL.txt", + "sha256": "a76abf002c49097d146e86740a3105a5d00450b1592e820a1109a8c5680cd697" + }, + { + "path": "skills/canvas-design/canvas-fonts/BigShoulders-OFL.txt", + "sha256": "fbc746aabf0eb1847dfd92e2efc4596d79fa897d60b8e64062a22f585508fb3f" + }, + { + "path": "skills/canvas-design/canvas-fonts/IBMPlexMono-OFL.txt", + "sha256": "5294ce778857e1eb02e830b6ab06435537d38f43055327e73d03a2d4d57d5123" + }, + { + "path": "skills/canvas-design/canvas-fonts/Tektur-Medium.ttf", + "sha256": "52bbe8c9b057b3d2da4eeace31a524b1ea26a1375ae34319cf6900ccc57a4c82" + }, + { + "path": "skills/canvas-design/canvas-fonts/Jura-Medium.ttf", + "sha256": "c72965cb732a92872643819fd1734128238583cc36b116313859137a51d3368a" + }, + { + "path": "skills/canvas-design/canvas-fonts/InstrumentSans-Bold.ttf", + "sha256": "444f85bf1c4b0e1ce1ca624f6be54bcd832207714ccaf4ea99ee531341683bdf" + }, + { + "path": "skills/canvas-design/canvas-fonts/Boldonse-OFL.txt", + "sha256": "45cc82ab4032273c0924025ffcf8f0665a68e1a5955e3f7247e5daf1deeb1326" + }, + { + "path": "skills/canvas-design/canvas-fonts/BigShoulders-Bold.ttf", + "sha256": "b43bcd198b9fdf717dd42aa61a34dba32e01aceaeae659d689afd0ca52c37ea2" + }, + { + "path": "skills/canvas-design/canvas-fonts/IBMPlexSerif-Bold.ttf", + "sha256": "b8d294e9b5c5a0940f167c3ced0f7ef2e3f57082ca3ff096ef30e86e26c1c159" + }, + { + "path": "skills/canvas-design/canvas-fonts/WorkSans-Bold.ttf", + "sha256": "240d125fc9f8561363dc1ea3f513501253bd70942f41468f48f0b0cafb0c82e2" + }, + { + "path": "skills/slack-gif-creator/requirements.txt", + "sha256": "edc7108a0c6b56183566c71ee96830f6dc791e3b41952112d9cb56b33a6bd757" + }, + { + "path": "skills/slack-gif-creator/SKILL.md", + "sha256": "e5ce81d3dc40e7780b0fa2a0a36b5ada888beb3931d2badd2909b57c50002aed" + }, + { + "path": "skills/slack-gif-creator/LICENSE.txt", + "sha256": "58d1e17ffe5109a7ae296caafcadfdbe6a7d176f0bc4ab01e12a689b0499d8bd" + }, + { + "path": "skills/slack-gif-creator/core/typography.py", + "sha256": "20dde1862f4049474afc6022e0aeb8674a8a487d85fefc07c997a4a6f0ad641d" + }, + { + "path": "skills/slack-gif-creator/core/validators.py", + "sha256": "39e0756c3ff78eaf3feb0a67bfeb9209fedb9a7c889cec6580762f228107b5fa" + }, + { + "path": "skills/slack-gif-creator/core/easing.py", + "sha256": "1e7e2e2507db0a56f583a24955922a4dc890899ad9933d945dfb874bac46a537" + }, + { + "path": "skills/slack-gif-creator/core/visual_effects.py", + "sha256": "259b341762903b16dff52a0e7e447427e9cde10c7b18f98b1e93273b0aba62cb" + }, + { + "path": "skills/slack-gif-creator/core/gif_builder.py", + "sha256": "b5042a3c5f03d603f04509650ca9a6db3f04b7d9829295abe45f7423b750972e" + }, + { + "path": "skills/slack-gif-creator/core/frame_composer.py", + "sha256": "38d9f0ad2f4b582e4e660ae37479b5c0a47610e6d4946cda0d5079812305ed02" + }, + { + "path": "skills/slack-gif-creator/core/color_palettes.py", + "sha256": "bbffe4a7904b05b7759756acbe331cf49361053e279a9b3e1c78d2789bd01d5a" + }, + { + "path": "skills/slack-gif-creator/templates/pulse.py", + "sha256": "512e3507c3eec167fdec9602ebdb3d0b47c11355bc6403547e3de33a05ca8d63" + }, + { + "path": "skills/slack-gif-creator/templates/wiggle.py", + "sha256": "356497711bf092c8b53213224251a0562f974ccb61e3a56c731968d358fa0f99" + }, + { + "path": "skills/slack-gif-creator/templates/kaleidoscope.py", + "sha256": "d911d23fdea1130b4453d27dbde14ada0450266f13808394c6eecdf165fa102d" + }, + { + "path": "skills/slack-gif-creator/templates/slide.py", + "sha256": "576fbfd2c70c58cd8ce98ed4c105a19f5901ddb70855c826436a4cf3f4c1c197" + }, + { + "path": "skills/slack-gif-creator/templates/spin.py", + "sha256": "6eff85e171fc060df1431a6389aff49ca5f47c1d13d29badf1269a2def62d7d4" + }, + { + "path": "skills/slack-gif-creator/templates/zoom.py", + "sha256": "955facbb5983e75261d0a2cc074ec7e60e005eb9a26f46e8196f43682e08f27d" + }, + { + "path": "skills/slack-gif-creator/templates/shake.py", + "sha256": "b0820547cf7215f07ad5619562cd23e44a16c5d21cf4ab1534df8d35a57d35d9" + }, + { + "path": "skills/slack-gif-creator/templates/morph.py", + "sha256": "7d46e5b6abb09cd8754565484910c36554eb1528107a0e507fbda0a835e3aff8" + }, + { + "path": "skills/slack-gif-creator/templates/bounce.py", + "sha256": "7028f9ee00cc401f10c198234ed4acf8d23995f1337e9e6091442de557fe28b0" + }, + { + "path": "skills/slack-gif-creator/templates/explode.py", + "sha256": "c0f1d109c62bfafe246fd8ba4ec93c820b0b9180752aaa6ca2e3130e238d0d18" + }, + { + "path": "skills/slack-gif-creator/templates/move.py", + "sha256": "94dcf4d913a471d131cd7a0d63a4b0012b8be30d2d8d6ae18ed64be6e98e1341" + }, + { + "path": "skills/slack-gif-creator/templates/flip.py", + "sha256": "37774e771eb4c7ca74b24018c776b6ea8158e8fa1e6fd607af63d03ef98fa47b" + }, + { + "path": "skills/slack-gif-creator/templates/fade.py", + "sha256": "7ae3ed383e693ddfef6274c6c081b2f16d9c60ef089123af6c4868dd219da41b" + }, + { + "path": "skills/artifacts-builder/SKILL.md", + "sha256": "8455a64e627d203fd7b43df64c83d8870cb98907aae21edce4ec8eeef651d850" + }, + { + "path": "skills/artifacts-builder/LICENSE.txt", + "sha256": "58d1e17ffe5109a7ae296caafcadfdbe6a7d176f0bc4ab01e12a689b0499d8bd" + }, + { + "path": "skills/artifacts-builder/scripts/shadcn-components.tar.gz", + "sha256": "1296f069e825de7933de7e8ac63672495cacce3f88f2dc45554dbcddbcbca60f" + }, + { + "path": "skills/artifacts-builder/scripts/init-artifact.sh", + "sha256": "355e5dd4382aaaee91f01f1627eaeab30b2676ffa8d9b3ec328a1ae450ebccaa" + }, + { + "path": "skills/artifacts-builder/scripts/bundle-artifact.sh", + "sha256": "abf0e480bf6585b56fab8526a407dfb7dc740812bddd70c636e1e8f3df5f9618" + }, + { + "path": "skills/webapp-testing/SKILL.md", + "sha256": "54c789cc4d709248edccaf208e38f7496efdf8075677c3e3aa5800037176424f" + }, + { + "path": "skills/webapp-testing/examples/console_logging.py", + "sha256": "ea46877289acb82da7e7ce59d0bc37c8977cd57e2a006d0c88d7a1c625bf95da" + }, + { + "path": "skills/webapp-testing/examples/static_html_automation.py", + "sha256": "9d533aafb875ee3ab8b8ebf8f5b9003ac8d999da3d09b285cce252e623140064" + }, + { + "path": "skills/webapp-testing/examples/element_discovery.py", + "sha256": "d63c89604a22f8845d724e95dda45db49b1bf57c25ce0a83afbb7b8da3d402f0" + }, + { + "path": "skills/webapp-testing/scripts/with_server.py", + "sha256": "b0dcf4918935b795f4eda9821579b9902119235ff4447f687a30286e7d0925fd" + }, + { + "path": "skills/mcp-builder/SKILL.md", + "sha256": "b1010e90adcb8fd6bf57640df34ab6454fbf7e4216e150a4620f7caccadc4e63" + }, + { + "path": "skills/mcp-builder/LICENSE.txt", + "sha256": "58d1e17ffe5109a7ae296caafcadfdbe6a7d176f0bc4ab01e12a689b0499d8bd" + }, + { + "path": "skills/mcp-builder/scripts/requirements.txt", + "sha256": "d5d7558b2368ecea9dfeed7d1fbc71ee9e0750bebd1282faa527d528a344c3c7" + }, + { + "path": "skills/mcp-builder/scripts/evaluation.py", + "sha256": "49ed1d17cdce5da101b210197740713f49b935c29d4f339542a14b132658e6f7" + }, + { + "path": "skills/mcp-builder/scripts/connections.py", + "sha256": "9403668a2041568772082a8b334122c1f88daf0541fb393af4522d0094a47a6e" + }, + { + "path": "skills/mcp-builder/scripts/example_evaluation.xml", + "sha256": "9272b348ddcc4b06ba562367ccd0770e018158c0068ac5116d5e34aaeff8777a" + }, + { + "path": "skills/mcp-builder/reference/mcp_best_practices.md", + "sha256": "3bdf013379bdd3c198baccd0f183441c710fc7cae07ba4c6f8f8048276519688" + }, + { + "path": "skills/mcp-builder/reference/python_mcp_server.md", + "sha256": "4e6db48188f44ff4eb707f50b8d273d5d18af4b88d326f7a26f03a405064bc0b" + }, + { + "path": "skills/mcp-builder/reference/node_mcp_server.md", + "sha256": "40b03e9c07463d5db524c1f5140ef60713fdd911c2f4386f89e0b94d43b8764e" + }, + { + "path": "skills/mcp-builder/reference/evaluation.md", + "sha256": "8c99479f8a2d22a636c38e274537aac3610879e26f34e0709825077c4576f427" + }, + { + "path": "skills/brand-guidelines/SKILL.md", + "sha256": "1120b3769e2985cefb3d25be981b1f914abeba57ae079b83c20c666c164fa9fe" + }, + { + "path": "skills/brand-guidelines/LICENSE.txt", + "sha256": "58d1e17ffe5109a7ae296caafcadfdbe6a7d176f0bc4ab01e12a689b0499d8bd" + } + ], + "dirSha256": "9747e8a4452701e6bbfd4975b62b0c63f5d4d110cf23347847621847c4486d7c" + }, + "security": { + "scannedAt": null, + "scannerVersion": null, + "flags": [] + } +} \ No newline at end of file diff --git a/skills/algorithmic-art/LICENSE.txt b/skills/algorithmic-art/LICENSE.txt new file mode 100644 index 0000000..7a4a3ea --- /dev/null +++ b/skills/algorithmic-art/LICENSE.txt @@ -0,0 +1,202 @@ + + 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 new file mode 100644 index 0000000..634f6fa --- /dev/null +++ b/skills/algorithmic-art/SKILL.md @@ -0,0 +1,405 @@ +--- +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 new file mode 100644 index 0000000..e263fbd --- /dev/null +++ b/skills/algorithmic-art/templates/generator_template.js @@ -0,0 +1,223 @@ +/** + * ═══════════════════════════════════════════════════════════════════════════ + * 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 new file mode 100644 index 0000000..630cc1f --- /dev/null +++ b/skills/algorithmic-art/templates/viewer.html @@ -0,0 +1,599 @@ + + + + + + + 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/artifacts-builder/LICENSE.txt b/skills/artifacts-builder/LICENSE.txt new file mode 100644 index 0000000..7a4a3ea --- /dev/null +++ b/skills/artifacts-builder/LICENSE.txt @@ -0,0 +1,202 @@ + + 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/artifacts-builder/SKILL.md b/skills/artifacts-builder/SKILL.md new file mode 100644 index 0000000..347becd --- /dev/null +++ b/skills/artifacts-builder/SKILL.md @@ -0,0 +1,74 @@ +--- +name: artifacts-builder +description: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts. +license: Complete terms in LICENSE.txt +--- + +# Artifacts Builder + +To build powerful frontend claude.ai artifacts, follow these steps: +1. Initialize the frontend repo using `scripts/init-artifact.sh` +2. Develop your artifact by editing the generated code +3. Bundle all code into a single HTML file using `scripts/bundle-artifact.sh` +4. Display artifact to user +5. (Optional) Test the artifact + +**Stack**: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui + +## Design & Style Guidelines + +VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font. + +## Quick Start + +### Step 1: Initialize Project + +Run the initialization script to create a new React project: +```bash +bash scripts/init-artifact.sh +cd +``` + +This creates a fully configured project with: +- ✅ React + TypeScript (via Vite) +- ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system +- ✅ Path aliases (`@/`) configured +- ✅ 40+ shadcn/ui components pre-installed +- ✅ All Radix UI dependencies included +- ✅ Parcel configured for bundling (via .parcelrc) +- ✅ Node 18+ compatibility (auto-detects and pins Vite version) + +### Step 2: Develop Your Artifact + +To build the artifact, edit the generated files. See **Common Development Tasks** below for guidance. + +### Step 3: Bundle to Single HTML File + +To bundle the React app into a single HTML artifact: +```bash +bash scripts/bundle-artifact.sh +``` + +This creates `bundle.html` - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact. + +**Requirements**: Your project must have an `index.html` in the root directory. + +**What the script does**: +- Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline) +- Creates `.parcelrc` config with path alias support +- Builds with Parcel (no source maps) +- Inlines all assets into single HTML using html-inline + +### Step 4: Share Artifact with User + +Finally, share the bundled HTML file in conversation with the user so they can view it as an artifact. + +### Step 5: Testing/Visualizing the Artifact (Optional) + +Note: This is a completely optional step. Only perform if necessary or requested. + +To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise. + +## Reference + +- **shadcn/ui components**: https://ui.shadcn.com/docs/components \ No newline at end of file diff --git a/skills/artifacts-builder/scripts/bundle-artifact.sh b/skills/artifacts-builder/scripts/bundle-artifact.sh new file mode 100644 index 0000000..c13d229 --- /dev/null +++ b/skills/artifacts-builder/scripts/bundle-artifact.sh @@ -0,0 +1,54 @@ +#!/bin/bash +set -e + +echo "📦 Bundling React app to single HTML artifact..." + +# Check if we're in a project directory +if [ ! -f "package.json" ]; then + echo "❌ Error: No package.json found. Run this script from your project root." + exit 1 +fi + +# Check if index.html exists +if [ ! -f "index.html" ]; then + echo "❌ Error: No index.html found in project root." + echo " This script requires an index.html entry point." + exit 1 +fi + +# Install bundling dependencies +echo "📦 Installing bundling dependencies..." +pnpm add -D parcel @parcel/config-default parcel-resolver-tspaths html-inline + +# Create Parcel config with tspaths resolver +if [ ! -f ".parcelrc" ]; then + echo "🔧 Creating Parcel configuration with path alias support..." + cat > .parcelrc << 'EOF' +{ + "extends": "@parcel/config-default", + "resolvers": ["parcel-resolver-tspaths", "..."] +} +EOF +fi + +# Clean previous build +echo "🧹 Cleaning previous build..." +rm -rf dist bundle.html + +# Build with Parcel +echo "🔨 Building with Parcel..." +pnpm exec parcel build index.html --dist-dir dist --no-source-maps + +# Inline everything into single HTML +echo "🎯 Inlining all assets into single HTML file..." +pnpm exec html-inline dist/index.html > bundle.html + +# Get file size +FILE_SIZE=$(du -h bundle.html | cut -f1) + +echo "" +echo "✅ Bundle complete!" +echo "📄 Output: bundle.html ($FILE_SIZE)" +echo "" +echo "You can now use this single HTML file as an artifact in Claude conversations." +echo "To test locally: open bundle.html in your browser" \ No newline at end of file diff --git a/skills/artifacts-builder/scripts/init-artifact.sh b/skills/artifacts-builder/scripts/init-artifact.sh new file mode 100644 index 0000000..7d1022d --- /dev/null +++ b/skills/artifacts-builder/scripts/init-artifact.sh @@ -0,0 +1,322 @@ +#!/bin/bash + +# Exit on error +set -e + +# Detect Node version +NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1) + +echo "🔍 Detected Node.js version: $NODE_VERSION" + +if [ "$NODE_VERSION" -lt 18 ]; then + echo "❌ Error: Node.js 18 or higher is required" + echo " Current version: $(node -v)" + exit 1 +fi + +# Set Vite version based on Node version +if [ "$NODE_VERSION" -ge 20 ]; then + VITE_VERSION="latest" + echo "✅ Using Vite latest (Node 20+)" +else + VITE_VERSION="5.4.11" + echo "✅ Using Vite $VITE_VERSION (Node 18 compatible)" +fi + +# Detect OS and set sed syntax +if [[ "$OSTYPE" == "darwin"* ]]; then + SED_INPLACE="sed -i ''" +else + SED_INPLACE="sed -i" +fi + +# Check if pnpm is installed +if ! command -v pnpm &> /dev/null; then + echo "📦 pnpm not found. Installing pnpm..." + npm install -g pnpm +fi + +# Check if project name is provided +if [ -z "$1" ]; then + echo "❌ Usage: ./create-react-shadcn-complete.sh " + exit 1 +fi + +PROJECT_NAME="$1" +SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" +COMPONENTS_TARBALL="$SCRIPT_DIR/shadcn-components.tar.gz" + +# Check if components tarball exists +if [ ! -f "$COMPONENTS_TARBALL" ]; then + echo "❌ Error: shadcn-components.tar.gz not found in script directory" + echo " Expected location: $COMPONENTS_TARBALL" + exit 1 +fi + +echo "🚀 Creating new React + Vite project: $PROJECT_NAME" + +# Create new Vite project (always use latest create-vite, pin vite version later) +pnpm create vite "$PROJECT_NAME" --template react-ts + +# Navigate into project directory +cd "$PROJECT_NAME" + +echo "🧹 Cleaning up Vite template..." +$SED_INPLACE '/.*<\/title>/'"$PROJECT_NAME"'<\/title>/' index.html + +echo "📦 Installing base dependencies..." +pnpm install + +# Pin Vite version for Node 18 +if [ "$NODE_VERSION" -lt 20 ]; then + echo "📌 Pinning Vite to $VITE_VERSION for Node 18 compatibility..." + pnpm add -D vite@$VITE_VERSION +fi + +echo "📦 Installing Tailwind CSS and dependencies..." +pnpm install -D tailwindcss@3.4.1 postcss autoprefixer @types/node tailwindcss-animate +pnpm install class-variance-authority clsx tailwind-merge lucide-react next-themes + +echo "⚙️ Creating Tailwind and PostCSS configuration..." +cat > postcss.config.js << 'EOF' +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} +EOF + +echo "📝 Configuring Tailwind with shadcn theme..." +cat > tailwind.config.js << 'EOF' +/** @type {import('tailwindcss').Config} */ +module.exports = { + darkMode: ["class"], + content: [ + "./index.html", + "./src/**/*.{js,ts,jsx,tsx}", + ], + theme: { + extend: { + colors: { + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + }, + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + }, + }, + }, + plugins: [require("tailwindcss-animate")], +} +EOF + +# Add Tailwind directives and CSS variables to index.css +echo "🎨 Adding Tailwind directives and CSS variables..." +cat > src/index.css << 'EOF' +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --radius: 0.5rem; + } + + .dark { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} +EOF + +# Add path aliases to tsconfig.json +echo "🔧 Adding path aliases to tsconfig.json..." +node -e " +const fs = require('fs'); +const config = JSON.parse(fs.readFileSync('tsconfig.json', 'utf8')); +config.compilerOptions = config.compilerOptions || {}; +config.compilerOptions.baseUrl = '.'; +config.compilerOptions.paths = { '@/*': ['./src/*'] }; +fs.writeFileSync('tsconfig.json', JSON.stringify(config, null, 2)); +" + +# Add path aliases to tsconfig.app.json +echo "🔧 Adding path aliases to tsconfig.app.json..." +node -e " +const fs = require('fs'); +const path = 'tsconfig.app.json'; +const content = fs.readFileSync(path, 'utf8'); +// Remove comments manually +const lines = content.split('\n').filter(line => !line.trim().startsWith('//')); +const jsonContent = lines.join('\n'); +const config = JSON.parse(jsonContent.replace(/\/\*[\s\S]*?\*\//g, '').replace(/,(\s*[}\]])/g, '\$1')); +config.compilerOptions = config.compilerOptions || {}; +config.compilerOptions.baseUrl = '.'; +config.compilerOptions.paths = { '@/*': ['./src/*'] }; +fs.writeFileSync(path, JSON.stringify(config, null, 2)); +" + +# Update vite.config.ts +echo "⚙️ Updating Vite configuration..." +cat > vite.config.ts << 'EOF' +import path from "path"; +import react from "@vitejs/plugin-react"; +import { defineConfig } from "vite"; + +export default defineConfig({ + plugins: [react()], + resolve: { + alias: { + "@": path.resolve(__dirname, "./src"), + }, + }, +}); +EOF + +# Install all shadcn/ui dependencies +echo "📦 Installing shadcn/ui dependencies..." +pnpm install @radix-ui/react-accordion @radix-ui/react-aspect-ratio @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-context-menu @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-label @radix-ui/react-menubar @radix-ui/react-navigation-menu @radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group @radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-toggle @radix-ui/react-toggle-group @radix-ui/react-tooltip +pnpm install sonner cmdk vaul embla-carousel-react react-day-picker react-resizable-panels date-fns react-hook-form @hookform/resolvers zod + +# Extract shadcn components from tarball +echo "📦 Extracting shadcn/ui components..." +tar -xzf "$COMPONENTS_TARBALL" -C src/ + +# Create components.json for reference +echo "📝 Creating components.json config..." +cat > components.json << 'EOF' +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "tailwind.config.js", + "css": "src/index.css", + "baseColor": "slate", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + } +} +EOF + +echo "✅ Setup complete! You can now use Tailwind CSS and shadcn/ui in your project." +echo "" +echo "📦 Included components (40+ total):" +echo " - accordion, alert, aspect-ratio, avatar, badge, breadcrumb" +echo " - button, calendar, card, carousel, checkbox, collapsible" +echo " - command, context-menu, dialog, drawer, dropdown-menu" +echo " - form, hover-card, input, label, menubar, navigation-menu" +echo " - popover, progress, radio-group, resizable, scroll-area" +echo " - select, separator, sheet, skeleton, slider, sonner" +echo " - switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip" +echo "" +echo "To start developing:" +echo " cd $PROJECT_NAME" +echo " pnpm dev" +echo "" +echo "📚 Import components like:" +echo " import { Button } from '@/components/ui/button'" +echo " import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'" +echo " import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'" diff --git a/skills/brand-guidelines/LICENSE.txt b/skills/brand-guidelines/LICENSE.txt new file mode 100644 index 0000000..7a4a3ea --- /dev/null +++ b/skills/brand-guidelines/LICENSE.txt @@ -0,0 +1,202 @@ + + 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/brand-guidelines/SKILL.md b/skills/brand-guidelines/SKILL.md new file mode 100644 index 0000000..47c72c6 --- /dev/null +++ b/skills/brand-guidelines/SKILL.md @@ -0,0 +1,73 @@ +--- +name: brand-guidelines +description: Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply. +license: Complete terms in LICENSE.txt +--- + +# Anthropic Brand Styling + +## Overview + +To access Anthropic's official brand identity and style resources, use this skill. + +**Keywords**: branding, corporate identity, visual identity, post-processing, styling, brand colors, typography, Anthropic brand, visual formatting, visual design + +## Brand Guidelines + +### Colors + +**Main Colors:** + +- Dark: `#141413` - Primary text and dark backgrounds +- Light: `#faf9f5` - Light backgrounds and text on dark +- Mid Gray: `#b0aea5` - Secondary elements +- Light Gray: `#e8e6dc` - Subtle backgrounds + +**Accent Colors:** + +- Orange: `#d97757` - Primary accent +- Blue: `#6a9bcc` - Secondary accent +- Green: `#788c5d` - Tertiary accent + +### Typography + +- **Headings**: Poppins (with Arial fallback) +- **Body Text**: Lora (with Georgia fallback) +- **Note**: Fonts should be pre-installed in your environment for best results + +## Features + +### Smart Font Application + +- Applies Poppins font to headings (24pt and larger) +- Applies Lora font to body text +- Automatically falls back to Arial/Georgia if custom fonts unavailable +- Preserves readability across all systems + +### Text Styling + +- Headings (24pt+): Poppins font +- Body text: Lora font +- Smart color selection based on background +- Preserves text hierarchy and formatting + +### Shape and Accent Colors + +- Non-text shapes use accent colors +- Cycles through orange, blue, and green accents +- Maintains visual interest while staying on-brand + +## Technical Details + +### Font Management + +- Uses system-installed Poppins and Lora fonts when available +- Provides automatic fallback to Arial (headings) and Georgia (body) +- No font installation required - works with existing system fonts +- For best results, pre-install Poppins and Lora fonts in your environment + +### Color Application + +- Uses RGB color values for precise brand matching +- Applied via python-pptx's RGBColor class +- Maintains color fidelity across different systems diff --git a/skills/canvas-design/LICENSE.txt b/skills/canvas-design/LICENSE.txt new file mode 100644 index 0000000..7a4a3ea --- /dev/null +++ b/skills/canvas-design/LICENSE.txt @@ -0,0 +1,202 @@ + + 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/canvas-design/SKILL.md b/skills/canvas-design/SKILL.md new file mode 100644 index 0000000..9f63fee --- /dev/null +++ b/skills/canvas-design/SKILL.md @@ -0,0 +1,130 @@ +--- +name: canvas-design +description: Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations. +license: Complete terms in LICENSE.txt +--- + +These are instructions for creating design philosophies - aesthetic movements that are then EXPRESSED VISUALLY. Output only .md files, .pdf files, and .png files. + +Complete this in two steps: +1. Design Philosophy Creation (.md file) +2. Express by creating it on a canvas (.pdf file or .png file) + +First, undertake this task: + +## DESIGN PHILOSOPHY CREATION + +To begin, create a VISUAL PHILOSOPHY (not layouts or templates) that will be interpreted through: +- Form, space, color, composition +- Images, graphics, shapes, patterns +- Minimal text as visual accent + +### THE CRITICAL UNDERSTANDING +- What is received: Some subtle input or instructions by the user that should be taken into account, but used as a foundation; it should not constrain creative freedom. +- What is created: A design philosophy/aesthetic movement. +- What happens next: Then, the same version receives the philosophy and EXPRESSES IT VISUALLY - creating artifacts that are 90% visual design, 10% essential text. + +Consider this approach: +- Write a manifesto for an art movement +- The next phase involves making the artwork + +The philosophy must emphasize: Visual expression. Spatial communication. Artistic interpretation. Minimal words. + +### HOW TO GENERATE A VISUAL PHILOSOPHY + +**Name the movement** (1-2 words): "Brutalist Joy" / "Chromatic Silence" / "Metabolist Dreams" + +**Articulate the philosophy** (4-6 paragraphs - concise but complete): + +To capture the VISUAL essence, express how the philosophy manifests through: +- Space and form +- Color and material +- Scale and rhythm +- Composition and balance +- Visual hierarchy + +**CRITICAL GUIDELINES:** +- **Avoid redundancy**: Each design aspect should be mentioned once. Avoid repeating points about color theory, spatial relationships, or typographic principles unless adding new depth. +- **Emphasize craftsmanship REPEATEDLY**: The philosophy MUST stress multiple times that the final work should appear as though it took countless hours to create, was labored over with care, and comes from someone at the absolute top of their field. This framing is essential - repeat phrases like "meticulously crafted," "the product of deep expertise," "painstaking attention," "master-level execution." +- **Leave creative space**: Remain specific about the aesthetic direction, but concise enough that the next Claude has room to make interpretive choices also at a extremely high level of craftmanship. + +The philosophy must guide the next version to express ideas VISUALLY, not through text. Information lives in design, not paragraphs. + +### PHILOSOPHY EXAMPLES + +**"Concrete Poetry"** +Philosophy: Communication through monumental form and bold geometry. +Visual expression: Massive color blocks, sculptural typography (huge single words, tiny labels), Brutalist spatial divisions, Polish poster energy meets Le Corbusier. Ideas expressed through visual weight and spatial tension, not explanation. Text as rare, powerful gesture - never paragraphs, only essential words integrated into the visual architecture. Every element placed with the precision of a master craftsman. + +**"Chromatic Language"** +Philosophy: Color as the primary information system. +Visual expression: Geometric precision where color zones create meaning. Typography minimal - small sans-serif labels letting chromatic fields communicate. Think Josef Albers' interaction meets data visualization. Information encoded spatially and chromatically. Words only to anchor what color already shows. The result of painstaking chromatic calibration. + +**"Analog Meditation"** +Philosophy: Quiet visual contemplation through texture and breathing room. +Visual expression: Paper grain, ink bleeds, vast negative space. Photography and illustration dominate. Typography whispered (small, restrained, serving the visual). Japanese photobook aesthetic. Images breathe across pages. Text appears sparingly - short phrases, never explanatory blocks. Each composition balanced with the care of a meditation practice. + +**"Organic Systems"** +Philosophy: Natural clustering and modular growth patterns. +Visual expression: Rounded forms, organic arrangements, color from nature through architecture. Information shown through visual diagrams, spatial relationships, iconography. Text only for key labels floating in space. The composition tells the story through expert spatial orchestration. + +**"Geometric Silence"** +Philosophy: Pure order and restraint. +Visual expression: Grid-based precision, bold photography or stark graphics, dramatic negative space. Typography precise but minimal - small essential text, large quiet zones. Swiss formalism meets Brutalist material honesty. Structure communicates, not words. Every alignment the work of countless refinements. + +*These are condensed examples. The actual design philosophy should be 4-6 substantial paragraphs.* + +### ESSENTIAL PRINCIPLES +- **VISUAL PHILOSOPHY**: Create an aesthetic worldview to be expressed through design +- **MINIMAL TEXT**: Always emphasize that text is sparse, essential-only, integrated as visual element - never lengthy +- **SPATIAL EXPRESSION**: Ideas communicate through space, form, color, composition - not paragraphs +- **ARTISTIC FREEDOM**: The next Claude interprets the philosophy visually - provide creative room +- **PURE DESIGN**: This is about making ART OBJECTS, not documents with decoration +- **EXPERT CRAFTSMANSHIP**: Repeatedly emphasize the final work must look meticulously crafted, labored over with care, the product of countless hours by someone at the top of their field + +**The design philosophy should be 4-6 paragraphs long.** Fill it with poetic design philosophy that brings together the core vision. Avoid repeating the same points. Keep the design philosophy generic without mentioning the intention of the art, as if it can be used wherever. Output the design philosophy as a .md file. + +--- + +## DEDUCING THE SUBTLE REFERENCE + +**CRITICAL STEP**: Before creating the canvas, identify the subtle conceptual thread from the original request. + +**THE ESSENTIAL PRINCIPLE**: +The topic is a **subtle, niche reference embedded within the art itself** - not always literal, always sophisticated. Someone familiar with the subject should feel it intuitively, while others simply experience a masterful abstract composition. The design philosophy provides the aesthetic language. The deduced topic provides the soul - the quiet conceptual DNA woven invisibly into form, color, and composition. + +This is **VERY IMPORTANT**: The reference must be refined so it enhances the work's depth without announcing itself. Think like a jazz musician quoting another song - only those who know will catch it, but everyone appreciates the music. + +--- + +## CANVAS CREATION + +With both the philosophy and the conceptual framework established, express it on a canvas. Take a moment to gather thoughts and clear the mind. Use the design philosophy created and the instructions below to craft a masterpiece, embodying all aspects of the philosophy with expert craftsmanship. + +**IMPORTANT**: For any type of content, even if the user requests something for a movie/game/book, the approach should still be sophisticated. Never lose sight of the idea that this should be art, not something that's cartoony or amateur. + +To create museum or magazine quality work, use the design philosophy as the foundation. Create one single page, highly visual, design-forward PDF or PNG output (unless asked for more pages). Generally use repeating patterns and perfect shapes. Treat the abstract philosophical design as if it were a scientific bible, borrowing the visual language of systematic observation—dense accumulation of marks, repeated elements, or layered patterns that build meaning through patient repetition and reward sustained viewing. Add sparse, clinical typography and systematic reference markers that suggest this could be a diagram from an imaginary discipline, treating the invisible subject with the same reverence typically reserved for documenting observable phenomena. Anchor the piece with simple phrase(s) or details positioned subtly, using a limited color palette that feels intentional and cohesive. Embrace the paradox of using analytical visual language to express ideas about human experience: the result should feel like an artifact that proves something ephemeral can be studied, mapped, and understood through careful attention. This is true art. + +**Text as a contextual element**: Text is always minimal and visual-first, but let context guide whether that means whisper-quiet labels or bold typographic gestures. A punk venue poster might have larger, more aggressive type than a minimalist ceramics studio identity. Most of the time, font should be thin. All use of fonts must be design-forward and prioritize visual communication. Regardless of text scale, nothing falls off the page and nothing overlaps. Every element must be contained within the canvas boundaries with proper margins. Check carefully that all text, graphics, and visual elements have breathing room and clear separation. This is non-negotiable for professional execution. **IMPORTANT: Use different fonts if writing text. Search the `./canvas-fonts` directory. Regardless of approach, sophistication is non-negotiable.** + +Download and use whatever fonts are needed to make this a reality. Get creative by making the typography actually part of the art itself -- if the art is abstract, bring the font onto the canvas, not typeset digitally. + +To push boundaries, follow design instinct/intuition while using the philosophy as a guiding principle. Embrace ultimate design freedom and choice. Push aesthetics and design to the frontier. + +**CRITICAL**: To achieve human-crafted quality (not AI-generated), create work that looks like it took countless hours. Make it appear as though someone at the absolute top of their field labored over every detail with painstaking care. Ensure the composition, spacing, color choices, typography - everything screams expert-level craftsmanship. Double-check that nothing overlaps, formatting is flawless, every detail perfect. Create something that could be shown to people to prove expertise and rank as undeniably impressive. + +Output the final result as a single, downloadable .pdf or .png file, alongside the design philosophy used as a .md file. + +--- + +## FINAL STEP + +**IMPORTANT**: The user ALREADY said "It isn't perfect enough. It must be pristine, a masterpiece if craftsmanship, as if it were about to be displayed in a museum." + +**CRITICAL**: To refine the work, avoid adding more graphics; instead refine what has been created and make it extremely crisp, respecting the design philosophy and the principles of minimalism entirely. Rather than adding a fun filter or refactoring a font, consider how to make the existing composition more cohesive with the art. If the instinct is to call a new function or draw a new shape, STOP and instead ask: "How can I make what's already here more of a piece of art?" + +Take a second pass. Go back to the code and refine/polish further to make this a philosophically designed masterpiece. + +## MULTI-PAGE OPTION + +To create additional pages when requested, create more creative pages along the same lines as the design philosophy but distinctly different as well. Bundle those pages in the same .pdf or many .pngs. Treat the first page as just a single page in a whole coffee table book waiting to be filled. Make the next pages unique twists and memories of the original. Have them almost tell a story in a very tasteful way. Exercise full creative freedom. \ No newline at end of file diff --git a/skills/canvas-design/canvas-fonts/ArsenalSC-OFL.txt b/skills/canvas-design/canvas-fonts/ArsenalSC-OFL.txt new file mode 100644 index 0000000..1dad6ca --- /dev/null +++ b/skills/canvas-design/canvas-fonts/ArsenalSC-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2012 The Arsenal Project Authors (andrij.design@gmail.com) + +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/skills/canvas-design/canvas-fonts/ArsenalSC-Regular.ttf b/skills/canvas-design/canvas-fonts/ArsenalSC-Regular.ttf new file mode 100644 index 0000000..fe5409b Binary files /dev/null and b/skills/canvas-design/canvas-fonts/ArsenalSC-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/BigShoulders-Bold.ttf b/skills/canvas-design/canvas-fonts/BigShoulders-Bold.ttf new file mode 100644 index 0000000..fc5f8fd Binary files /dev/null and b/skills/canvas-design/canvas-fonts/BigShoulders-Bold.ttf differ diff --git a/skills/canvas-design/canvas-fonts/BigShoulders-OFL.txt b/skills/canvas-design/canvas-fonts/BigShoulders-OFL.txt new file mode 100644 index 0000000..b220280 --- /dev/null +++ b/skills/canvas-design/canvas-fonts/BigShoulders-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2019 The Big Shoulders Project Authors (https://github.com/xotypeco/big_shoulders) + +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/skills/canvas-design/canvas-fonts/BigShoulders-Regular.ttf b/skills/canvas-design/canvas-fonts/BigShoulders-Regular.ttf new file mode 100644 index 0000000..de8308c Binary files /dev/null and b/skills/canvas-design/canvas-fonts/BigShoulders-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/Boldonse-OFL.txt b/skills/canvas-design/canvas-fonts/Boldonse-OFL.txt new file mode 100644 index 0000000..1890cb1 --- /dev/null +++ b/skills/canvas-design/canvas-fonts/Boldonse-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2024 The Boldonse Project Authors (https://github.com/googlefonts/boldonse) + +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/skills/canvas-design/canvas-fonts/Boldonse-Regular.ttf b/skills/canvas-design/canvas-fonts/Boldonse-Regular.ttf new file mode 100644 index 0000000..43fa30a Binary files /dev/null and b/skills/canvas-design/canvas-fonts/Boldonse-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/BricolageGrotesque-Bold.ttf b/skills/canvas-design/canvas-fonts/BricolageGrotesque-Bold.ttf new file mode 100644 index 0000000..f3b1ded Binary files /dev/null and b/skills/canvas-design/canvas-fonts/BricolageGrotesque-Bold.ttf differ diff --git a/skills/canvas-design/canvas-fonts/BricolageGrotesque-OFL.txt b/skills/canvas-design/canvas-fonts/BricolageGrotesque-OFL.txt new file mode 100644 index 0000000..fc2b216 --- /dev/null +++ b/skills/canvas-design/canvas-fonts/BricolageGrotesque-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2022 The Bricolage Grotesque Project Authors (https://github.com/ateliertriay/bricolage) + +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/skills/canvas-design/canvas-fonts/BricolageGrotesque-Regular.ttf b/skills/canvas-design/canvas-fonts/BricolageGrotesque-Regular.ttf new file mode 100644 index 0000000..0674ae3 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/BricolageGrotesque-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/CrimsonPro-Bold.ttf b/skills/canvas-design/canvas-fonts/CrimsonPro-Bold.ttf new file mode 100644 index 0000000..58730fb Binary files /dev/null and b/skills/canvas-design/canvas-fonts/CrimsonPro-Bold.ttf differ diff --git a/skills/canvas-design/canvas-fonts/CrimsonPro-Italic.ttf b/skills/canvas-design/canvas-fonts/CrimsonPro-Italic.ttf new file mode 100644 index 0000000..786a1bd Binary files /dev/null and b/skills/canvas-design/canvas-fonts/CrimsonPro-Italic.ttf differ diff --git a/skills/canvas-design/canvas-fonts/CrimsonPro-OFL.txt b/skills/canvas-design/canvas-fonts/CrimsonPro-OFL.txt new file mode 100644 index 0000000..f976fdc --- /dev/null +++ b/skills/canvas-design/canvas-fonts/CrimsonPro-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2018 The Crimson Pro Project Authors (https://github.com/Fonthausen/CrimsonPro) + +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/skills/canvas-design/canvas-fonts/CrimsonPro-Regular.ttf b/skills/canvas-design/canvas-fonts/CrimsonPro-Regular.ttf new file mode 100644 index 0000000..f5666b9 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/CrimsonPro-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/DMMono-OFL.txt b/skills/canvas-design/canvas-fonts/DMMono-OFL.txt new file mode 100644 index 0000000..5b17f0c --- /dev/null +++ b/skills/canvas-design/canvas-fonts/DMMono-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2020 The DM Mono Project Authors (https://www.github.com/googlefonts/dm-mono) + +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/skills/canvas-design/canvas-fonts/DMMono-Regular.ttf b/skills/canvas-design/canvas-fonts/DMMono-Regular.ttf new file mode 100644 index 0000000..7efe813 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/DMMono-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/EricaOne-OFL.txt b/skills/canvas-design/canvas-fonts/EricaOne-OFL.txt new file mode 100644 index 0000000..490d012 --- /dev/null +++ b/skills/canvas-design/canvas-fonts/EricaOne-OFL.txt @@ -0,0 +1,94 @@ +Copyright (c) 2011 by LatinoType Limitada (luciano@latinotype.com), +with Reserved Font Names "Erica One" + +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/skills/canvas-design/canvas-fonts/EricaOne-Regular.ttf b/skills/canvas-design/canvas-fonts/EricaOne-Regular.ttf new file mode 100644 index 0000000..8bd91d1 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/EricaOne-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/GeistMono-Bold.ttf b/skills/canvas-design/canvas-fonts/GeistMono-Bold.ttf new file mode 100644 index 0000000..736ff7c Binary files /dev/null and b/skills/canvas-design/canvas-fonts/GeistMono-Bold.ttf differ diff --git a/skills/canvas-design/canvas-fonts/GeistMono-OFL.txt b/skills/canvas-design/canvas-fonts/GeistMono-OFL.txt new file mode 100644 index 0000000..679a685 --- /dev/null +++ b/skills/canvas-design/canvas-fonts/GeistMono-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font.git) + +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/skills/canvas-design/canvas-fonts/GeistMono-Regular.ttf b/skills/canvas-design/canvas-fonts/GeistMono-Regular.ttf new file mode 100644 index 0000000..1a30262 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/GeistMono-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/Gloock-OFL.txt b/skills/canvas-design/canvas-fonts/Gloock-OFL.txt new file mode 100644 index 0000000..363acd3 --- /dev/null +++ b/skills/canvas-design/canvas-fonts/Gloock-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2022 The Gloock Project Authors (https://github.com/duartp/gloock) + +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/skills/canvas-design/canvas-fonts/Gloock-Regular.ttf b/skills/canvas-design/canvas-fonts/Gloock-Regular.ttf new file mode 100644 index 0000000..3e58c4e Binary files /dev/null and b/skills/canvas-design/canvas-fonts/Gloock-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/IBMPlexMono-Bold.ttf b/skills/canvas-design/canvas-fonts/IBMPlexMono-Bold.ttf new file mode 100644 index 0000000..247979c Binary files /dev/null and b/skills/canvas-design/canvas-fonts/IBMPlexMono-Bold.ttf differ diff --git a/skills/canvas-design/canvas-fonts/IBMPlexMono-OFL.txt b/skills/canvas-design/canvas-fonts/IBMPlexMono-OFL.txt new file mode 100644 index 0000000..e423b74 --- /dev/null +++ b/skills/canvas-design/canvas-fonts/IBMPlexMono-OFL.txt @@ -0,0 +1,93 @@ +Copyright © 2017 IBM Corp. with Reserved Font Name "Plex" + +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/skills/canvas-design/canvas-fonts/IBMPlexMono-Regular.ttf b/skills/canvas-design/canvas-fonts/IBMPlexMono-Regular.ttf new file mode 100644 index 0000000..601ae94 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/IBMPlexMono-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/IBMPlexSerif-Bold.ttf b/skills/canvas-design/canvas-fonts/IBMPlexSerif-Bold.ttf new file mode 100644 index 0000000..78f6e50 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/IBMPlexSerif-Bold.ttf differ diff --git a/skills/canvas-design/canvas-fonts/IBMPlexSerif-BoldItalic.ttf b/skills/canvas-design/canvas-fonts/IBMPlexSerif-BoldItalic.ttf new file mode 100644 index 0000000..369b89d Binary files /dev/null and b/skills/canvas-design/canvas-fonts/IBMPlexSerif-BoldItalic.ttf differ diff --git a/skills/canvas-design/canvas-fonts/IBMPlexSerif-Italic.ttf b/skills/canvas-design/canvas-fonts/IBMPlexSerif-Italic.ttf new file mode 100644 index 0000000..a4d859a Binary files /dev/null and b/skills/canvas-design/canvas-fonts/IBMPlexSerif-Italic.ttf differ diff --git a/skills/canvas-design/canvas-fonts/IBMPlexSerif-Regular.ttf b/skills/canvas-design/canvas-fonts/IBMPlexSerif-Regular.ttf new file mode 100644 index 0000000..35f454c Binary files /dev/null and b/skills/canvas-design/canvas-fonts/IBMPlexSerif-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/InstrumentSans-Bold.ttf b/skills/canvas-design/canvas-fonts/InstrumentSans-Bold.ttf new file mode 100644 index 0000000..f602dce Binary files /dev/null and b/skills/canvas-design/canvas-fonts/InstrumentSans-Bold.ttf differ diff --git a/skills/canvas-design/canvas-fonts/InstrumentSans-BoldItalic.ttf b/skills/canvas-design/canvas-fonts/InstrumentSans-BoldItalic.ttf new file mode 100644 index 0000000..122b273 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/InstrumentSans-BoldItalic.ttf differ diff --git a/skills/canvas-design/canvas-fonts/InstrumentSans-Italic.ttf b/skills/canvas-design/canvas-fonts/InstrumentSans-Italic.ttf new file mode 100644 index 0000000..4b98fb8 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/InstrumentSans-Italic.ttf differ diff --git a/skills/canvas-design/canvas-fonts/InstrumentSans-OFL.txt b/skills/canvas-design/canvas-fonts/InstrumentSans-OFL.txt new file mode 100644 index 0000000..4bb9914 --- /dev/null +++ b/skills/canvas-design/canvas-fonts/InstrumentSans-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2022 The Instrument Sans Project Authors (https://github.com/Instrument/instrument-sans) + +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/skills/canvas-design/canvas-fonts/InstrumentSans-Regular.ttf b/skills/canvas-design/canvas-fonts/InstrumentSans-Regular.ttf new file mode 100644 index 0000000..14c6113 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/InstrumentSans-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/InstrumentSerif-Italic.ttf b/skills/canvas-design/canvas-fonts/InstrumentSerif-Italic.ttf new file mode 100644 index 0000000..8fa958d Binary files /dev/null and b/skills/canvas-design/canvas-fonts/InstrumentSerif-Italic.ttf differ diff --git a/skills/canvas-design/canvas-fonts/InstrumentSerif-Regular.ttf b/skills/canvas-design/canvas-fonts/InstrumentSerif-Regular.ttf new file mode 100644 index 0000000..9763031 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/InstrumentSerif-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/Italiana-OFL.txt b/skills/canvas-design/canvas-fonts/Italiana-OFL.txt new file mode 100644 index 0000000..ba8af21 --- /dev/null +++ b/skills/canvas-design/canvas-fonts/Italiana-OFL.txt @@ -0,0 +1,93 @@ +Copyright (c) 2011, Santiago Orozco (hi@typemade.mx), with Reserved Font Name "Italiana". + +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/skills/canvas-design/canvas-fonts/Italiana-Regular.ttf b/skills/canvas-design/canvas-fonts/Italiana-Regular.ttf new file mode 100644 index 0000000..a9b828c Binary files /dev/null and b/skills/canvas-design/canvas-fonts/Italiana-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/JetBrainsMono-Bold.ttf b/skills/canvas-design/canvas-fonts/JetBrainsMono-Bold.ttf new file mode 100644 index 0000000..1926c80 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/JetBrainsMono-Bold.ttf differ diff --git a/skills/canvas-design/canvas-fonts/JetBrainsMono-OFL.txt b/skills/canvas-design/canvas-fonts/JetBrainsMono-OFL.txt new file mode 100644 index 0000000..5ceee00 --- /dev/null +++ b/skills/canvas-design/canvas-fonts/JetBrainsMono-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) + +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/skills/canvas-design/canvas-fonts/JetBrainsMono-Regular.ttf b/skills/canvas-design/canvas-fonts/JetBrainsMono-Regular.ttf new file mode 100644 index 0000000..436c982 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/JetBrainsMono-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/Jura-Light.ttf b/skills/canvas-design/canvas-fonts/Jura-Light.ttf new file mode 100644 index 0000000..dffbb33 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/Jura-Light.ttf differ diff --git a/skills/canvas-design/canvas-fonts/Jura-Medium.ttf b/skills/canvas-design/canvas-fonts/Jura-Medium.ttf new file mode 100644 index 0000000..4bf91a3 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/Jura-Medium.ttf differ diff --git a/skills/canvas-design/canvas-fonts/Jura-OFL.txt b/skills/canvas-design/canvas-fonts/Jura-OFL.txt new file mode 100644 index 0000000..64ad4c6 --- /dev/null +++ b/skills/canvas-design/canvas-fonts/Jura-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2019 The Jura Project Authors (https://github.com/ossobuffo/jura) + +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/skills/canvas-design/canvas-fonts/LibreBaskerville-OFL.txt b/skills/canvas-design/canvas-fonts/LibreBaskerville-OFL.txt new file mode 100644 index 0000000..8c531fa --- /dev/null +++ b/skills/canvas-design/canvas-fonts/LibreBaskerville-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2012 The Libre Baskerville Project Authors (https://github.com/impallari/Libre-Baskerville) with Reserved Font Name Libre Baskerville. + +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/skills/canvas-design/canvas-fonts/LibreBaskerville-Regular.ttf b/skills/canvas-design/canvas-fonts/LibreBaskerville-Regular.ttf new file mode 100644 index 0000000..c1abc26 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/LibreBaskerville-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/Lora-Bold.ttf b/skills/canvas-design/canvas-fonts/Lora-Bold.ttf new file mode 100644 index 0000000..edae21e Binary files /dev/null and b/skills/canvas-design/canvas-fonts/Lora-Bold.ttf differ diff --git a/skills/canvas-design/canvas-fonts/Lora-BoldItalic.ttf b/skills/canvas-design/canvas-fonts/Lora-BoldItalic.ttf new file mode 100644 index 0000000..12dea8c Binary files /dev/null and b/skills/canvas-design/canvas-fonts/Lora-BoldItalic.ttf differ diff --git a/skills/canvas-design/canvas-fonts/Lora-Italic.ttf b/skills/canvas-design/canvas-fonts/Lora-Italic.ttf new file mode 100644 index 0000000..e24b69b Binary files /dev/null and b/skills/canvas-design/canvas-fonts/Lora-Italic.ttf differ diff --git a/skills/canvas-design/canvas-fonts/Lora-OFL.txt b/skills/canvas-design/canvas-fonts/Lora-OFL.txt new file mode 100644 index 0000000..4cf1b95 --- /dev/null +++ b/skills/canvas-design/canvas-fonts/Lora-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2011 The Lora Project Authors (https://github.com/cyrealtype/Lora-Cyrillic), with Reserved Font Name "Lora". + +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/skills/canvas-design/canvas-fonts/Lora-Regular.ttf b/skills/canvas-design/canvas-fonts/Lora-Regular.ttf new file mode 100644 index 0000000..dc751db Binary files /dev/null and b/skills/canvas-design/canvas-fonts/Lora-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/NationalPark-Bold.ttf b/skills/canvas-design/canvas-fonts/NationalPark-Bold.ttf new file mode 100644 index 0000000..f4d7c02 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/NationalPark-Bold.ttf differ diff --git a/skills/canvas-design/canvas-fonts/NationalPark-OFL.txt b/skills/canvas-design/canvas-fonts/NationalPark-OFL.txt new file mode 100644 index 0000000..f4ec3fb --- /dev/null +++ b/skills/canvas-design/canvas-fonts/NationalPark-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2025 The National Park Project Authors (https://github.com/benhoepner/National-Park) + +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/skills/canvas-design/canvas-fonts/NationalPark-Regular.ttf b/skills/canvas-design/canvas-fonts/NationalPark-Regular.ttf new file mode 100644 index 0000000..e4cbfbf Binary files /dev/null and b/skills/canvas-design/canvas-fonts/NationalPark-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/NothingYouCouldDo-OFL.txt b/skills/canvas-design/canvas-fonts/NothingYouCouldDo-OFL.txt new file mode 100644 index 0000000..c81eccd --- /dev/null +++ b/skills/canvas-design/canvas-fonts/NothingYouCouldDo-OFL.txt @@ -0,0 +1,93 @@ +Copyright (c) 2010, Kimberly Geswein (kimberlygeswein.com) + +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/skills/canvas-design/canvas-fonts/NothingYouCouldDo-Regular.ttf b/skills/canvas-design/canvas-fonts/NothingYouCouldDo-Regular.ttf new file mode 100644 index 0000000..b086bce Binary files /dev/null and b/skills/canvas-design/canvas-fonts/NothingYouCouldDo-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/Outfit-Bold.ttf b/skills/canvas-design/canvas-fonts/Outfit-Bold.ttf new file mode 100644 index 0000000..f9f2f72 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/Outfit-Bold.ttf differ diff --git a/skills/canvas-design/canvas-fonts/Outfit-OFL.txt b/skills/canvas-design/canvas-fonts/Outfit-OFL.txt new file mode 100644 index 0000000..fd0cb99 --- /dev/null +++ b/skills/canvas-design/canvas-fonts/Outfit-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2021 The Outfit Project Authors (https://github.com/Outfitio/Outfit-Fonts) + +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/skills/canvas-design/canvas-fonts/Outfit-Regular.ttf b/skills/canvas-design/canvas-fonts/Outfit-Regular.ttf new file mode 100644 index 0000000..3939ab2 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/Outfit-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/PixelifySans-Medium.ttf b/skills/canvas-design/canvas-fonts/PixelifySans-Medium.ttf new file mode 100644 index 0000000..95cd372 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/PixelifySans-Medium.ttf differ diff --git a/skills/canvas-design/canvas-fonts/PixelifySans-OFL.txt b/skills/canvas-design/canvas-fonts/PixelifySans-OFL.txt new file mode 100644 index 0000000..b02d1b6 --- /dev/null +++ b/skills/canvas-design/canvas-fonts/PixelifySans-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2021 The Pixelify Sans Project Authors (https://github.com/eifetx/Pixelify-Sans) + +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/skills/canvas-design/canvas-fonts/PoiretOne-OFL.txt b/skills/canvas-design/canvas-fonts/PoiretOne-OFL.txt new file mode 100644 index 0000000..607bdad --- /dev/null +++ b/skills/canvas-design/canvas-fonts/PoiretOne-OFL.txt @@ -0,0 +1,93 @@ +Copyright (c) 2011, Denis Masharov (denis.masharov@gmail.com) + +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/skills/canvas-design/canvas-fonts/PoiretOne-Regular.ttf b/skills/canvas-design/canvas-fonts/PoiretOne-Regular.ttf new file mode 100644 index 0000000..b339511 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/PoiretOne-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/RedHatMono-Bold.ttf b/skills/canvas-design/canvas-fonts/RedHatMono-Bold.ttf new file mode 100644 index 0000000..a6e3cf1 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/RedHatMono-Bold.ttf differ diff --git a/skills/canvas-design/canvas-fonts/RedHatMono-OFL.txt b/skills/canvas-design/canvas-fonts/RedHatMono-OFL.txt new file mode 100644 index 0000000..16cf394 --- /dev/null +++ b/skills/canvas-design/canvas-fonts/RedHatMono-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2024 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont) + +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/skills/canvas-design/canvas-fonts/RedHatMono-Regular.ttf b/skills/canvas-design/canvas-fonts/RedHatMono-Regular.ttf new file mode 100644 index 0000000..3bf6a69 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/RedHatMono-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/Silkscreen-OFL.txt b/skills/canvas-design/canvas-fonts/Silkscreen-OFL.txt new file mode 100644 index 0000000..a1fe7d5 --- /dev/null +++ b/skills/canvas-design/canvas-fonts/Silkscreen-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2001 The Silkscreen Project Authors (https://github.com/googlefonts/silkscreen) + +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/skills/canvas-design/canvas-fonts/Silkscreen-Regular.ttf b/skills/canvas-design/canvas-fonts/Silkscreen-Regular.ttf new file mode 100644 index 0000000..8abaa7c Binary files /dev/null and b/skills/canvas-design/canvas-fonts/Silkscreen-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/SmoochSans-Medium.ttf b/skills/canvas-design/canvas-fonts/SmoochSans-Medium.ttf new file mode 100644 index 0000000..0af9ead Binary files /dev/null and b/skills/canvas-design/canvas-fonts/SmoochSans-Medium.ttf differ diff --git a/skills/canvas-design/canvas-fonts/SmoochSans-OFL.txt b/skills/canvas-design/canvas-fonts/SmoochSans-OFL.txt new file mode 100644 index 0000000..4c2f033 --- /dev/null +++ b/skills/canvas-design/canvas-fonts/SmoochSans-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2016 The Smooch Sans Project Authors (https://github.com/googlefonts/smooch-sans) + +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/skills/canvas-design/canvas-fonts/Tektur-Medium.ttf b/skills/canvas-design/canvas-fonts/Tektur-Medium.ttf new file mode 100644 index 0000000..34fc797 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/Tektur-Medium.ttf differ diff --git a/skills/canvas-design/canvas-fonts/Tektur-OFL.txt b/skills/canvas-design/canvas-fonts/Tektur-OFL.txt new file mode 100644 index 0000000..2cad55f --- /dev/null +++ b/skills/canvas-design/canvas-fonts/Tektur-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2023 The Tektur Project Authors (https://www.github.com/hyvyys/Tektur) + +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/skills/canvas-design/canvas-fonts/Tektur-Regular.ttf b/skills/canvas-design/canvas-fonts/Tektur-Regular.ttf new file mode 100644 index 0000000..f280fba Binary files /dev/null and b/skills/canvas-design/canvas-fonts/Tektur-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/WorkSans-Bold.ttf b/skills/canvas-design/canvas-fonts/WorkSans-Bold.ttf new file mode 100644 index 0000000..5c97989 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/WorkSans-Bold.ttf differ diff --git a/skills/canvas-design/canvas-fonts/WorkSans-BoldItalic.ttf b/skills/canvas-design/canvas-fonts/WorkSans-BoldItalic.ttf new file mode 100644 index 0000000..54418b8 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/WorkSans-BoldItalic.ttf differ diff --git a/skills/canvas-design/canvas-fonts/WorkSans-Italic.ttf b/skills/canvas-design/canvas-fonts/WorkSans-Italic.ttf new file mode 100644 index 0000000..40529b6 Binary files /dev/null and b/skills/canvas-design/canvas-fonts/WorkSans-Italic.ttf differ diff --git a/skills/canvas-design/canvas-fonts/WorkSans-OFL.txt b/skills/canvas-design/canvas-fonts/WorkSans-OFL.txt new file mode 100644 index 0000000..070f341 --- /dev/null +++ b/skills/canvas-design/canvas-fonts/WorkSans-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2019 The Work Sans Project Authors (https://github.com/weiweihuanghuang/Work-Sans) + +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/skills/canvas-design/canvas-fonts/WorkSans-Regular.ttf b/skills/canvas-design/canvas-fonts/WorkSans-Regular.ttf new file mode 100644 index 0000000..d24586c Binary files /dev/null and b/skills/canvas-design/canvas-fonts/WorkSans-Regular.ttf differ diff --git a/skills/canvas-design/canvas-fonts/YoungSerif-OFL.txt b/skills/canvas-design/canvas-fonts/YoungSerif-OFL.txt new file mode 100644 index 0000000..f09443c --- /dev/null +++ b/skills/canvas-design/canvas-fonts/YoungSerif-OFL.txt @@ -0,0 +1,93 @@ +Copyright 2023 The Young Serif Project Authors (https://github.com/noirblancrouge/YoungSerif) + +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/skills/canvas-design/canvas-fonts/YoungSerif-Regular.ttf b/skills/canvas-design/canvas-fonts/YoungSerif-Regular.ttf new file mode 100644 index 0000000..f454fbe Binary files /dev/null and b/skills/canvas-design/canvas-fonts/YoungSerif-Regular.ttf differ diff --git a/skills/internal-comms/LICENSE.txt b/skills/internal-comms/LICENSE.txt new file mode 100644 index 0000000..7a4a3ea --- /dev/null +++ b/skills/internal-comms/LICENSE.txt @@ -0,0 +1,202 @@ + + 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/internal-comms/SKILL.md b/skills/internal-comms/SKILL.md new file mode 100644 index 0000000..56ea935 --- /dev/null +++ b/skills/internal-comms/SKILL.md @@ -0,0 +1,32 @@ +--- +name: internal-comms +description: A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.). +license: Complete terms in LICENSE.txt +--- + +## When to use this skill +To write internal communications, use this skill for: +- 3P updates (Progress, Plans, Problems) +- Company newsletters +- FAQ responses +- Status reports +- Leadership updates +- Project updates +- Incident reports + +## How to use this skill + +To write any internal communication: + +1. **Identify the communication type** from the request +2. **Load the appropriate guideline file** from the `examples/` directory: + - `examples/3p-updates.md` - For Progress/Plans/Problems team updates + - `examples/company-newsletter.md` - For company-wide newsletters + - `examples/faq-answers.md` - For answering frequently asked questions + - `examples/general-comms.md` - For anything else that doesn't explicitly match one of the above +3. **Follow the specific instructions** in that file for formatting, tone, and content gathering + +If the communication type doesn't match any existing guideline, ask for clarification or more context about the desired format. + +## Keywords +3P updates, company newsletter, company comms, weekly update, faqs, common questions, updates, internal comms diff --git a/skills/internal-comms/examples/3p-updates.md b/skills/internal-comms/examples/3p-updates.md new file mode 100644 index 0000000..5329bfb --- /dev/null +++ b/skills/internal-comms/examples/3p-updates.md @@ -0,0 +1,47 @@ +## Instructions +You are being asked to write a 3P update. 3P updates stand for "Progress, Plans, Problems." The main audience is for executives, leadership, other teammates, etc. They're meant to be very succinct and to-the-point: think something you can read in 30-60sec or less. They're also for people with some, but not a lot of context on what the team does. + +3Ps can cover a team of any size, ranging all the way up to the entire company. The bigger the team, the less granular the tasks should be. For example, "mobile team" might have "shipped feature" or "fixed bugs," whereas the company might have really meaty 3Ps, like "hired 20 new people" or "closed 10 new deals." + +They represent the work of the team across a time period, almost always one week. They include three sections: +1) Progress: what the team has accomplished over the next time period. Focus mainly on things shipped, milestones achieved, tasks created, etc. +2) Plans: what the team plans to do over the next time period. Focus on what things are top-of-mind, really high priority, etc. for the team. +3) Problems: anything that is slowing the team down. This could be things like too few people, bugs or blockers that are preventing the team from moving forward, some deal that fell through, etc. + +Before writing them, make sure that you know the team name. If it's not specified, you can ask explicitly what the team name you're writing for is. + + +## Tools Available +Whenever possible, try to pull from available sources to get the information you need: +- Slack: posts from team members with their updates - ideally look for posts in large channels with lots of reactions +- Google Drive: docs written from critical team members with lots of views +- Email: emails with lots of responses of lots of content that seems relevant +- Calendar: non-recurring meetings that have a lot of importance, like product reviews, etc. + + +Try to gather as much context as you can, focusing on the things that covered the time period you're writing for: +- Progress: anything between a week ago and today +- Plans: anything from today to the next week +- Problems: anything between a week ago and today + + +If you don't have access, you can ask the user for things they want to cover. They might also include these things to you directly, in which case you're mostly just formatting for this particular format. + +## Workflow + +1. **Clarify scope**: Confirm the team name and time period (usually past week for Progress/Problems, next +week for Plans) +2. **Gather information**: Use available tools or ask the user directly +3. **Draft the update**: Follow the strict formatting guidelines +4. **Review**: Ensure it's concise (30-60 seconds to read) and data-driven + +## Formatting + +The format is always the same, very strict formatting. Never use any formatting other than this. Pick an emoji that is fun and captures the vibe of the team and update. + +[pick an emoji] [Team Name] (Dates Covered, usually a week) +Progress: [1-3 sentences of content] +Plans: [1-3 sentences of content] +Problems: [1-3 sentences of content] + +Each section should be no more than 1-3 sentences: clear, to the point. It should be data-driven, and generally include metrics where possible. The tone should be very matter-of-fact, not super prose-heavy. \ No newline at end of file diff --git a/skills/internal-comms/examples/company-newsletter.md b/skills/internal-comms/examples/company-newsletter.md new file mode 100644 index 0000000..4997a07 --- /dev/null +++ b/skills/internal-comms/examples/company-newsletter.md @@ -0,0 +1,65 @@ +## Instructions +You are being asked to write a company-wide newsletter update. You are meant to summarize the past week/month of a company in the form of a newsletter that the entire company will read. It should be maybe ~20-25 bullet points long. It will be sent via Slack and email, so make it consumable for that. + +Ideally it includes the following attributes: +- Lots of links: pulling documents from Google Drive that are very relevant, linking to prominent Slack messages in announce channels and from executives, perhgaps referencing emails that went company-wide, highlighting significant things that have happened in the company. +- Short and to-the-point: each bullet should probably be no longer than ~1-2 sentences +- Use the "we" tense, as you are part of the company. Many of the bullets should say "we did this" or "we did that" + +## Tools to use +If you have access to the following tools, please try to use them. If not, you can also let the user know directly that their responses would be better if they gave them access. + +- Slack: look for messages in channels with lots of people, with lots of reactions or lots of responses within the thread +- Email: look for things from executives that discuss company-wide announcements +- Calendar: if there were meetings with large attendee lists, particularly things like All-Hands meetings, big company announcements, etc. If there were documents attached to those meetings, those are great links to include. +- Documents: if there were new docs published in the last week or two that got a lot of attention, you can link them. These should be things like company-wide vision docs, plans for the upcoming quarter or half, things authored by critical executives, etc. +- External press: if you see references to articles or press we've received over the past week, that could be really cool too. + +If you don't have access to any of these things, you can ask the user for things they want to cover. In this case, you'll mostly just be polishing up and fitting to this format more directly. + +## Sections +The company is pretty big: 1000+ people. There are a variety of different teams and initiatives going on across the company. To make sure the update works well, try breaking it into sections of similar things. You might break into clusters like {product development, go to market, finance} or {recruiting, execution, vision}, or {external news, internal news} etc. Try to make sure the different areas of the company are highlighted well. + +## Prioritization +Focus on: +- Company-wide impact (not team-specific details) +- Announcements from leadership +- Major milestones and achievements +- Information that affects most employees +- External recognition or press + +Avoid: +- Overly granular team updates (save those for 3Ps) +- Information only relevant to small groups +- Duplicate information already communicated + +## Example Formats + +:megaphone: Company Announcements +- Announcement 1 +- Announcement 2 +- Announcement 3 + +:dart: Progress on Priorities +- Area 1 + - Sub-area 1 + - Sub-area 2 + - Sub-area 3 +- Area 2 + - Sub-area 1 + - Sub-area 2 + - Sub-area 3 +- Area 3 + - Sub-area 1 + - Sub-area 2 + - Sub-area 3 + +:pillar: Leadership Updates +- Post 1 +- Post 2 +- Post 3 + +:thread: Social Updates +- Update 1 +- Update 2 +- Update 3 diff --git a/skills/internal-comms/examples/faq-answers.md b/skills/internal-comms/examples/faq-answers.md new file mode 100644 index 0000000..395262a --- /dev/null +++ b/skills/internal-comms/examples/faq-answers.md @@ -0,0 +1,30 @@ +## Instructions +You are an assistant for answering questions that are being asked across the company. Every week, there are lots of questions that get asked across the company, and your goal is to try to summarize what those questions are. We want our company to be well-informed and on the same page, so your job is to produce a set of frequently asked questions that our employees are asking and attempt to answer them. Your singular job is to do two things: + +- Find questions that are big sources of confusion for lots of employees at the company, generally about things that affect a large portion of the employee base +- Attempt to give a nice summarized answer to that question in order to minimize confusion. + +Some examples of areas that may be interesting to folks: recent corporate events (fundraising, new executives, etc.), upcoming launches, hiring progress, changes to vision or focus, etc. + + +## Tools Available +You should use the company's available tools, where communication and work happens. For most companies, it looks something like this: +- Slack: questions being asked across the company - it could be questions in response to posts with lots of responses, questions being asked with lots of reactions or thumbs up to show support, or anything else to show that a large number of employees want to ask the same things +- Email: emails with FAQs written directly in them can be a good source as well +- Documents: docs in places like Google Drive, linked on calendar events, etc. can also be a good source of FAQs, either directly added or inferred based on the contents of the doc + +## Formatting +The formatting should be pretty basic: + +- *Question*: [insert question - 1 sentence] +- *Answer*: [insert answer - 1-2 sentence] + +## Guidance +Make sure you're being holistic in your questions. Don't focus too much on just the user in question or the team they are a part of, but try to capture the entire company. Try to be as holistic as you can in reading all the tools available, producing responses that are relevant to all at the company. + +## Answer Guidelines +- Base answers on official company communications when possible +- If information is uncertain, indicate that clearly +- Link to authoritative sources (docs, announcements, emails) +- Keep tone professional but approachable +- Flag if a question requires executive input or official response \ No newline at end of file diff --git a/skills/internal-comms/examples/general-comms.md b/skills/internal-comms/examples/general-comms.md new file mode 100644 index 0000000..0ea9770 --- /dev/null +++ b/skills/internal-comms/examples/general-comms.md @@ -0,0 +1,16 @@ + ## Instructions + You are being asked to write internal company communication that doesn't fit into the standard formats (3P + updates, newsletters, or FAQs). + + Before proceeding: + 1. Ask the user about their target audience + 2. Understand the communication's purpose + 3. Clarify the desired tone (formal, casual, urgent, informational) + 4. Confirm any specific formatting requirements + + Use these general principles: + - Be clear and concise + - Use active voice + - Put the most important information first + - Include relevant links and references + - Match the company's communication style \ No newline at end of file diff --git a/skills/mcp-builder/LICENSE.txt b/skills/mcp-builder/LICENSE.txt new file mode 100644 index 0000000..7a4a3ea --- /dev/null +++ b/skills/mcp-builder/LICENSE.txt @@ -0,0 +1,202 @@ + + 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/mcp-builder/SKILL.md b/skills/mcp-builder/SKILL.md new file mode 100644 index 0000000..c9ef8a2 --- /dev/null +++ b/skills/mcp-builder/SKILL.md @@ -0,0 +1,328 @@ +--- +name: mcp-builder +description: Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK). +license: Complete terms in LICENSE.txt +--- + +# MCP Server Development Guide + +## Overview + +To create high-quality MCP (Model Context Protocol) servers that enable LLMs to effectively interact with external services, use this skill. An MCP server provides tools that allow LLMs to access external services and APIs. The quality of an MCP server is measured by how well it enables LLMs to accomplish real-world tasks using the tools provided. + +--- + +# Process + +## 🚀 High-Level Workflow + +Creating a high-quality MCP server involves four main phases: + +### Phase 1: Deep Research and Planning + +#### 1.1 Understand Agent-Centric Design Principles + +Before diving into implementation, understand how to design tools for AI agents by reviewing these principles: + +**Build for Workflows, Not Just API Endpoints:** +- Don't simply wrap existing API endpoints - build thoughtful, high-impact workflow tools +- Consolidate related operations (e.g., `schedule_event` that both checks availability and creates event) +- Focus on tools that enable complete tasks, not just individual API calls +- Consider what workflows agents actually need to accomplish + +**Optimize for Limited Context:** +- Agents have constrained context windows - make every token count +- Return high-signal information, not exhaustive data dumps +- Provide "concise" vs "detailed" response format options +- Default to human-readable identifiers over technical codes (names over IDs) +- Consider the agent's context budget as a scarce resource + +**Design Actionable Error Messages:** +- Error messages should guide agents toward correct usage patterns +- Suggest specific next steps: "Try using filter='active_only' to reduce results" +- Make errors educational, not just diagnostic +- Help agents learn proper tool usage through clear feedback + +**Follow Natural Task Subdivisions:** +- Tool names should reflect how humans think about tasks +- Group related tools with consistent prefixes for discoverability +- Design tools around natural workflows, not just API structure + +**Use Evaluation-Driven Development:** +- Create realistic evaluation scenarios early +- Let agent feedback drive tool improvements +- Prototype quickly and iterate based on actual agent performance + +#### 1.3 Study MCP Protocol Documentation + +**Fetch the latest MCP protocol documentation:** + +Use WebFetch to load: `https://modelcontextprotocol.io/llms-full.txt` + +This comprehensive document contains the complete MCP specification and guidelines. + +#### 1.4 Study Framework Documentation + +**Load and read the following reference files:** + +- **MCP Best Practices**: [📋 View Best Practices](./reference/mcp_best_practices.md) - Core guidelines for all MCP servers + +**For Python implementations, also load:** +- **Python SDK Documentation**: Use WebFetch to load `https://raw.githubusercontent.com/modelcontextprotocol/python-sdk/main/README.md` +- [🐍 Python Implementation Guide](./reference/python_mcp_server.md) - Python-specific best practices and examples + +**For Node/TypeScript implementations, also load:** +- **TypeScript SDK Documentation**: Use WebFetch to load `https://raw.githubusercontent.com/modelcontextprotocol/typescript-sdk/main/README.md` +- [⚡ TypeScript Implementation Guide](./reference/node_mcp_server.md) - Node/TypeScript-specific best practices and examples + +#### 1.5 Exhaustively Study API Documentation + +To integrate a service, read through **ALL** available API documentation: +- Official API reference documentation +- Authentication and authorization requirements +- Rate limiting and pagination patterns +- Error responses and status codes +- Available endpoints and their parameters +- Data models and schemas + +**To gather comprehensive information, use web search and the WebFetch tool as needed.** + +#### 1.6 Create a Comprehensive Implementation Plan + +Based on your research, create a detailed plan that includes: + +**Tool Selection:** +- List the most valuable endpoints/operations to implement +- Prioritize tools that enable the most common and important use cases +- Consider which tools work together to enable complex workflows + +**Shared Utilities and Helpers:** +- Identify common API request patterns +- Plan pagination helpers +- Design filtering and formatting utilities +- Plan error handling strategies + +**Input/Output Design:** +- Define input validation models (Pydantic for Python, Zod for TypeScript) +- Design consistent response formats (e.g., JSON or Markdown), and configurable levels of detail (e.g., Detailed or Concise) +- Plan for large-scale usage (thousands of users/resources) +- Implement character limits and truncation strategies (e.g., 25,000 tokens) + +**Error Handling Strategy:** +- Plan graceful failure modes +- Design clear, actionable, LLM-friendly, natural language error messages which prompt further action +- Consider rate limiting and timeout scenarios +- Handle authentication and authorization errors + +--- + +### Phase 2: Implementation + +Now that you have a comprehensive plan, begin implementation following language-specific best practices. + +#### 2.1 Set Up Project Structure + +**For Python:** +- Create a single `.py` file or organize into modules if complex (see [🐍 Python Guide](./reference/python_mcp_server.md)) +- Use the MCP Python SDK for tool registration +- Define Pydantic models for input validation + +**For Node/TypeScript:** +- Create proper project structure (see [⚡ TypeScript Guide](./reference/node_mcp_server.md)) +- Set up `package.json` and `tsconfig.json` +- Use MCP TypeScript SDK +- Define Zod schemas for input validation + +#### 2.2 Implement Core Infrastructure First + +**To begin implementation, create shared utilities before implementing tools:** +- API request helper functions +- Error handling utilities +- Response formatting functions (JSON and Markdown) +- Pagination helpers +- Authentication/token management + +#### 2.3 Implement Tools Systematically + +For each tool in the plan: + +**Define Input Schema:** +- Use Pydantic (Python) or Zod (TypeScript) for validation +- Include proper constraints (min/max length, regex patterns, min/max values, ranges) +- Provide clear, descriptive field descriptions +- Include diverse examples in field descriptions + +**Write Comprehensive Docstrings/Descriptions:** +- One-line summary of what the tool does +- Detailed explanation of purpose and functionality +- Explicit parameter types with examples +- Complete return type schema +- Usage examples (when to use, when not to use) +- Error handling documentation, which outlines how to proceed given specific errors + +**Implement Tool Logic:** +- Use shared utilities to avoid code duplication +- Follow async/await patterns for all I/O +- Implement proper error handling +- Support multiple response formats (JSON and Markdown) +- Respect pagination parameters +- Check character limits and truncate appropriately + +**Add Tool Annotations:** +- `readOnlyHint`: true (for read-only operations) +- `destructiveHint`: false (for non-destructive operations) +- `idempotentHint`: true (if repeated calls have same effect) +- `openWorldHint`: true (if interacting with external systems) + +#### 2.4 Follow Language-Specific Best Practices + +**At this point, load the appropriate language guide:** + +**For Python: Load [🐍 Python Implementation Guide](./reference/python_mcp_server.md) and ensure the following:** +- Using MCP Python SDK with proper tool registration +- Pydantic v2 models with `model_config` +- Type hints throughout +- Async/await for all I/O operations +- Proper imports organization +- Module-level constants (CHARACTER_LIMIT, API_BASE_URL) + +**For Node/TypeScript: Load [⚡ TypeScript Implementation Guide](./reference/node_mcp_server.md) and ensure the following:** +- Using `server.registerTool` properly +- Zod schemas with `.strict()` +- TypeScript strict mode enabled +- No `any` types - use proper types +- Explicit Promise<T> return types +- Build process configured (`npm run build`) + +--- + +### Phase 3: Review and Refine + +After initial implementation: + +#### 3.1 Code Quality Review + +To ensure quality, review the code for: +- **DRY Principle**: No duplicated code between tools +- **Composability**: Shared logic extracted into functions +- **Consistency**: Similar operations return similar formats +- **Error Handling**: All external calls have error handling +- **Type Safety**: Full type coverage (Python type hints, TypeScript types) +- **Documentation**: Every tool has comprehensive docstrings/descriptions + +#### 3.2 Test and Build + +**Important:** MCP servers are long-running processes that wait for requests over stdio/stdin or sse/http. Running them directly in your main process (e.g., `python server.py` or `node dist/index.js`) will cause your process to hang indefinitely. + +**Safe ways to test the server:** +- Use the evaluation harness (see Phase 4) - recommended approach +- Run the server in tmux to keep it outside your main process +- Use a timeout when testing: `timeout 5s python server.py` + +**For Python:** +- Verify Python syntax: `python -m py_compile your_server.py` +- Check imports work correctly by reviewing the file +- To manually test: Run server in tmux, then test with evaluation harness in main process +- Or use the evaluation harness directly (it manages the server for stdio transport) + +**For Node/TypeScript:** +- Run `npm run build` and ensure it completes without errors +- Verify dist/index.js is created +- To manually test: Run server in tmux, then test with evaluation harness in main process +- Or use the evaluation harness directly (it manages the server for stdio transport) + +#### 3.3 Use Quality Checklist + +To verify implementation quality, load the appropriate checklist from the language-specific guide: +- Python: see "Quality Checklist" in [🐍 Python Guide](./reference/python_mcp_server.md) +- Node/TypeScript: see "Quality Checklist" in [⚡ TypeScript Guide](./reference/node_mcp_server.md) + +--- + +### Phase 4: Create Evaluations + +After implementing your MCP server, create comprehensive evaluations to test its effectiveness. + +**Load [✅ Evaluation Guide](./reference/evaluation.md) for complete evaluation guidelines.** + +#### 4.1 Understand Evaluation Purpose + +Evaluations test whether LLMs can effectively use your MCP server to answer realistic, complex questions. + +#### 4.2 Create 10 Evaluation Questions + +To create effective evaluations, follow the process outlined in the evaluation guide: + +1. **Tool Inspection**: List available tools and understand their capabilities +2. **Content Exploration**: Use READ-ONLY operations to explore available data +3. **Question Generation**: Create 10 complex, realistic questions +4. **Answer Verification**: Solve each question yourself to verify answers + +#### 4.3 Evaluation Requirements + +Each question must be: +- **Independent**: Not dependent on other questions +- **Read-only**: Only non-destructive operations required +- **Complex**: Requiring multiple tool calls and deep exploration +- **Realistic**: Based on real use cases humans would care about +- **Verifiable**: Single, clear answer that can be verified by string comparison +- **Stable**: Answer won't change over time + +#### 4.4 Output Format + +Create an XML file with this structure: + +```xml +<evaluation> + <qa_pair> + <question>Find discussions about AI model launches with animal codenames. One model needed a specific safety designation that uses the format ASL-X. What number X was being determined for the model named after a spotted wild cat?</question> + <answer>3</answer> + </qa_pair> +<!-- More qa_pairs... --> +</evaluation> +``` + +--- + +# Reference Files + +## 📚 Documentation Library + +Load these resources as needed during development: + +### Core MCP Documentation (Load First) +- **MCP Protocol**: Fetch from `https://modelcontextprotocol.io/llms-full.txt` - Complete MCP specification +- [📋 MCP Best Practices](./reference/mcp_best_practices.md) - Universal MCP guidelines including: + - Server and tool naming conventions + - Response format guidelines (JSON vs Markdown) + - Pagination best practices + - Character limits and truncation strategies + - Tool development guidelines + - Security and error handling standards + +### SDK Documentation (Load During Phase 1/2) +- **Python SDK**: Fetch from `https://raw.githubusercontent.com/modelcontextprotocol/python-sdk/main/README.md` +- **TypeScript SDK**: Fetch from `https://raw.githubusercontent.com/modelcontextprotocol/typescript-sdk/main/README.md` + +### Language-Specific Implementation Guides (Load During Phase 2) +- [🐍 Python Implementation Guide](./reference/python_mcp_server.md) - Complete Python/FastMCP guide with: + - Server initialization patterns + - Pydantic model examples + - Tool registration with `@mcp.tool` + - Complete working examples + - Quality checklist + +- [⚡ TypeScript Implementation Guide](./reference/node_mcp_server.md) - Complete TypeScript guide with: + - Project structure + - Zod schema patterns + - Tool registration with `server.registerTool` + - Complete working examples + - Quality checklist + +### Evaluation Guide (Load During Phase 4) +- [✅ Evaluation Guide](./reference/evaluation.md) - Complete evaluation creation guide with: + - Question creation guidelines + - Answer verification strategies + - XML format specifications + - Example questions and answers + - Running an evaluation with the provided scripts diff --git a/skills/mcp-builder/reference/evaluation.md b/skills/mcp-builder/reference/evaluation.md new file mode 100644 index 0000000..87e9bb7 --- /dev/null +++ b/skills/mcp-builder/reference/evaluation.md @@ -0,0 +1,602 @@ +# MCP Server Evaluation Guide + +## Overview + +This document provides guidance on creating comprehensive evaluations for MCP servers. Evaluations test whether LLMs can effectively use your MCP server to answer realistic, complex questions using only the tools provided. + +--- + +## Quick Reference + +### Evaluation Requirements +- Create 10 human-readable questions +- Questions must be READ-ONLY, INDEPENDENT, NON-DESTRUCTIVE +- Each question requires multiple tool calls (potentially dozens) +- Answers must be single, verifiable values +- Answers must be STABLE (won't change over time) + +### Output Format +```xml +<evaluation> + <qa_pair> + <question>Your question here</question> + <answer>Single verifiable answer</answer> + </qa_pair> +</evaluation> +``` + +--- + +## Purpose of Evaluations + +The measure of quality of an MCP server is NOT how well or comprehensively the server implements tools, but how well these implementations (input/output schemas, docstrings/descriptions, functionality) enable LLMs with no other context and access ONLY to the MCP servers to answer realistic and difficult questions. + +## Evaluation Overview + +Create 10 human-readable questions requiring ONLY READ-ONLY, INDEPENDENT, NON-DESTRUCTIVE, and IDEMPOTENT operations to answer. Each question should be: +- Realistic +- Clear and concise +- Unambiguous +- Complex, requiring potentially dozens of tool calls or steps +- Answerable with a single, verifiable value that you identify in advance + +## Question Guidelines + +### Core Requirements + +1. **Questions MUST be independent** + - Each question should NOT depend on the answer to any other question + - Should not assume prior write operations from processing another question + +2. **Questions MUST require ONLY NON-DESTRUCTIVE AND IDEMPOTENT tool use** + - Should not instruct or require modifying state to arrive at the correct answer + +3. **Questions must be REALISTIC, CLEAR, CONCISE, and COMPLEX** + - Must require another LLM to use multiple (potentially dozens of) tools or steps to answer + +### Complexity and Depth + +4. **Questions must require deep exploration** + - Consider multi-hop questions requiring multiple sub-questions and sequential tool calls + - Each step should benefit from information found in previous questions + +5. **Questions may require extensive paging** + - May need paging through multiple pages of results + - May require querying old data (1-2 years out-of-date) to find niche information + - The questions must be DIFFICULT + +6. **Questions must require deep understanding** + - Rather than surface-level knowledge + - May pose complex ideas as True/False questions requiring evidence + - May use multiple-choice format where LLM must search different hypotheses + +7. **Questions must not be solvable with straightforward keyword search** + - Do not include specific keywords from the target content + - Use synonyms, related concepts, or paraphrases + - Require multiple searches, analyzing multiple related items, extracting context, then deriving the answer + +### Tool Testing + +8. **Questions should stress-test tool return values** + - May elicit tools returning large JSON objects or lists, overwhelming the LLM + - Should require understanding multiple modalities of data: + - IDs and names + - Timestamps and datetimes (months, days, years, seconds) + - File IDs, names, extensions, and mimetypes + - URLs, GIDs, etc. + - Should probe the tool's ability to return all useful forms of data + +9. **Questions should MOSTLY reflect real human use cases** + - The kinds of information retrieval tasks that HUMANS assisted by an LLM would care about + +10. **Questions may require dozens of tool calls** + - This challenges LLMs with limited context + - Encourages MCP server tools to reduce information returned + +11. **Include ambiguous questions** + - May be ambiguous OR require difficult decisions on which tools to call + - Force the LLM to potentially make mistakes or misinterpret + - Ensure that despite AMBIGUITY, there is STILL A SINGLE VERIFIABLE ANSWER + +### Stability + +12. **Questions must be designed so the answer DOES NOT CHANGE** + - Do not ask questions that rely on "current state" which is dynamic + - For example, do not count: + - Number of reactions to a post + - Number of replies to a thread + - Number of members in a channel + +13. **DO NOT let the MCP server RESTRICT the kinds of questions you create** + - Create challenging and complex questions + - Some may not be solvable with the available MCP server tools + - Questions may require specific output formats (datetime vs. epoch time, JSON vs. MARKDOWN) + - Questions may require dozens of tool calls to complete + +## Answer Guidelines + +### Verification + +1. **Answers must be VERIFIABLE via direct string comparison** + - If the answer can be re-written in many formats, clearly specify the output format in the QUESTION + - Examples: "Use YYYY/MM/DD.", "Respond True or False.", "Answer A, B, C, or D and nothing else." + - Answer should be a single VERIFIABLE value such as: + - User ID, user name, display name, first name, last name + - Channel ID, channel name + - Message ID, string + - URL, title + - Numerical quantity + - Timestamp, datetime + - Boolean (for True/False questions) + - Email address, phone number + - File ID, file name, file extension + - Multiple choice answer + - Answers must not require special formatting or complex, structured output + - Answer will be verified using DIRECT STRING COMPARISON + +### Readability + +2. **Answers should generally prefer HUMAN-READABLE formats** + - Examples: names, first name, last name, datetime, file name, message string, URL, yes/no, true/false, a/b/c/d + - Rather than opaque IDs (though IDs are acceptable) + - The VAST MAJORITY of answers should be human-readable + +### Stability + +3. **Answers must be STABLE/STATIONARY** + - Look at old content (e.g., conversations that have ended, projects that have launched, questions answered) + - Create QUESTIONS based on "closed" concepts that will always return the same answer + - Questions may ask to consider a fixed time window to insulate from non-stationary answers + - Rely on context UNLIKELY to change + - Example: if finding a paper name, be SPECIFIC enough so answer is not confused with papers published later + +4. **Answers must be CLEAR and UNAMBIGUOUS** + - Questions must be designed so there is a single, clear answer + - Answer can be derived from using the MCP server tools + +### Diversity + +5. **Answers must be DIVERSE** + - Answer should be a single VERIFIABLE value in diverse modalities and formats + - User concept: user ID, user name, display name, first name, last name, email address, phone number + - Channel concept: channel ID, channel name, channel topic + - Message concept: message ID, message string, timestamp, month, day, year + +6. **Answers must NOT be complex structures** + - Not a list of values + - Not a complex object + - Not a list of IDs or strings + - Not natural language text + - UNLESS the answer can be straightforwardly verified using DIRECT STRING COMPARISON + - And can be realistically reproduced + - It should be unlikely that an LLM would return the same list in any other order or format + +## Evaluation Process + +### Step 1: Documentation Inspection + +Read the documentation of the target API to understand: +- Available endpoints and functionality +- If ambiguity exists, fetch additional information from the web +- Parallelize this step AS MUCH AS POSSIBLE +- Ensure each subagent is ONLY examining documentation from the file system or on the web + +### Step 2: Tool Inspection + +List the tools available in the MCP server: +- Inspect the MCP server directly +- Understand input/output schemas, docstrings, and descriptions +- WITHOUT calling the tools themselves at this stage + +### Step 3: Developing Understanding + +Repeat steps 1 & 2 until you have a good understanding: +- Iterate multiple times +- Think about the kinds of tasks you want to create +- Refine your understanding +- At NO stage should you READ the code of the MCP server implementation itself +- Use your intuition and understanding to create reasonable, realistic, but VERY challenging tasks + +### Step 4: Read-Only Content Inspection + +After understanding the API and tools, USE the MCP server tools: +- Inspect content using READ-ONLY and NON-DESTRUCTIVE operations ONLY +- Goal: identify specific content (e.g., users, channels, messages, projects, tasks) for creating realistic questions +- Should NOT call any tools that modify state +- Will NOT read the code of the MCP server implementation itself +- Parallelize this step with individual sub-agents pursuing independent explorations +- Ensure each subagent is only performing READ-ONLY, NON-DESTRUCTIVE, and IDEMPOTENT operations +- BE CAREFUL: SOME TOOLS may return LOTS OF DATA which would cause you to run out of CONTEXT +- Make INCREMENTAL, SMALL, AND TARGETED tool calls for exploration +- In all tool call requests, use the `limit` parameter to limit results (<10) +- Use pagination + +### Step 5: Task Generation + +After inspecting the content, create 10 human-readable questions: +- An LLM should be able to answer these with the MCP server +- Follow all question and answer guidelines above + +## Output Format + +Each QA pair consists of a question and an answer. The output should be an XML file with this structure: + +```xml +<evaluation> + <qa_pair> + <question>Find the project created in Q2 2024 with the highest number of completed tasks. What is the project name?</question> + <answer>Website Redesign</answer> + </qa_pair> + <qa_pair> + <question>Search for issues labeled as "bug" that were closed in March 2024. Which user closed the most issues? Provide their username.</question> + <answer>sarah_dev</answer> + </qa_pair> + <qa_pair> + <question>Look for pull requests that modified files in the /api directory and were merged between January 1 and January 31, 2024. How many different contributors worked on these PRs?</question> + <answer>7</answer> + </qa_pair> + <qa_pair> + <question>Find the repository with the most stars that was created before 2023. What is the repository name?</question> + <answer>data-pipeline</answer> + </qa_pair> +</evaluation> +``` + +## Evaluation Examples + +### Good Questions + +**Example 1: Multi-hop question requiring deep exploration (GitHub MCP)** +```xml +<qa_pair> + <question>Find the repository that was archived in Q3 2023 and had previously been the most forked project in the organization. What was the primary programming language used in that repository?</question> + <answer>Python</answer> +</qa_pair> +``` + +This question is good because: +- Requires multiple searches to find archived repositories +- Needs to identify which had the most forks before archival +- Requires examining repository details for the language +- Answer is a simple, verifiable value +- Based on historical (closed) data that won't change + +**Example 2: Requires understanding context without keyword matching (Project Management MCP)** +```xml +<qa_pair> + <question>Locate the initiative focused on improving customer onboarding that was completed in late 2023. The project lead created a retrospective document after completion. What was the lead's role title at that time?</question> + <answer>Product Manager</answer> +</qa_pair> +``` + +This question is good because: +- Doesn't use specific project name ("initiative focused on improving customer onboarding") +- Requires finding completed projects from specific timeframe +- Needs to identify the project lead and their role +- Requires understanding context from retrospective documents +- Answer is human-readable and stable +- Based on completed work (won't change) + +**Example 3: Complex aggregation requiring multiple steps (Issue Tracker MCP)** +```xml +<qa_pair> + <question>Among all bugs reported in January 2024 that were marked as critical priority, which assignee resolved the highest percentage of their assigned bugs within 48 hours? Provide the assignee's username.</question> + <answer>alex_eng</answer> +</qa_pair> +``` + +This question is good because: +- Requires filtering bugs by date, priority, and status +- Needs to group by assignee and calculate resolution rates +- Requires understanding timestamps to determine 48-hour windows +- Tests pagination (potentially many bugs to process) +- Answer is a single username +- Based on historical data from specific time period + +**Example 4: Requires synthesis across multiple data types (CRM MCP)** +```xml +<qa_pair> + <question>Find the account that upgraded from the Starter to Enterprise plan in Q4 2023 and had the highest annual contract value. What industry does this account operate in?</question> + <answer>Healthcare</answer> +</qa_pair> +``` + +This question is good because: +- Requires understanding subscription tier changes +- Needs to identify upgrade events in specific timeframe +- Requires comparing contract values +- Must access account industry information +- Answer is simple and verifiable +- Based on completed historical transactions + +### Poor Questions + +**Example 1: Answer changes over time** +```xml +<qa_pair> + <question>How many open issues are currently assigned to the engineering team?</question> + <answer>47</answer> +</qa_pair> +``` + +This question is poor because: +- The answer will change as issues are created, closed, or reassigned +- Not based on stable/stationary data +- Relies on "current state" which is dynamic + +**Example 2: Too easy with keyword search** +```xml +<qa_pair> + <question>Find the pull request with title "Add authentication feature" and tell me who created it.</question> + <answer>developer123</answer> +</qa_pair> +``` + +This question is poor because: +- Can be solved with a straightforward keyword search for exact title +- Doesn't require deep exploration or understanding +- No synthesis or analysis needed + +**Example 3: Ambiguous answer format** +```xml +<qa_pair> + <question>List all the repositories that have Python as their primary language.</question> + <answer>repo1, repo2, repo3, data-pipeline, ml-tools</answer> +</qa_pair> +``` + +This question is poor because: +- Answer is a list that could be returned in any order +- Difficult to verify with direct string comparison +- LLM might format differently (JSON array, comma-separated, newline-separated) +- Better to ask for a specific aggregate (count) or superlative (most stars) + +## Verification Process + +After creating evaluations: + +1. **Examine the XML file** to understand the schema +2. **Load each task instruction** and in parallel using the MCP server and tools, identify the correct answer by attempting to solve the task YOURSELF +3. **Flag any operations** that require WRITE or DESTRUCTIVE operations +4. **Accumulate all CORRECT answers** and replace any incorrect answers in the document +5. **Remove any `<qa_pair>`** that require WRITE or DESTRUCTIVE operations + +Remember to parallelize solving tasks to avoid running out of context, then accumulate all answers and make changes to the file at the end. + +## Tips for Creating Quality Evaluations + +1. **Think Hard and Plan Ahead** before generating tasks +2. **Parallelize Where Opportunity Arises** to speed up the process and manage context +3. **Focus on Realistic Use Cases** that humans would actually want to accomplish +4. **Create Challenging Questions** that test the limits of the MCP server's capabilities +5. **Ensure Stability** by using historical data and closed concepts +6. **Verify Answers** by solving the questions yourself using the MCP server tools +7. **Iterate and Refine** based on what you learn during the process + +--- + +# Running Evaluations + +After creating your evaluation file, you can use the provided evaluation harness to test your MCP server. + +## Setup + +1. **Install Dependencies** + + ```bash + pip install -r scripts/requirements.txt + ``` + + Or install manually: + ```bash + pip install anthropic mcp + ``` + +2. **Set API Key** + + ```bash + export ANTHROPIC_API_KEY=your_api_key_here + ``` + +## Evaluation File Format + +Evaluation files use XML format with `<qa_pair>` elements: + +```xml +<evaluation> + <qa_pair> + <question>Find the project created in Q2 2024 with the highest number of completed tasks. What is the project name?</question> + <answer>Website Redesign</answer> + </qa_pair> + <qa_pair> + <question>Search for issues labeled as "bug" that were closed in March 2024. Which user closed the most issues? Provide their username.</question> + <answer>sarah_dev</answer> + </qa_pair> +</evaluation> +``` + +## Running Evaluations + +The evaluation script (`scripts/evaluation.py`) supports three transport types: + +**Important:** +- **stdio transport**: The evaluation script automatically launches and manages the MCP server process for you. Do not run the server manually. +- **sse/http transports**: You must start the MCP server separately before running the evaluation. The script connects to the already-running server at the specified URL. + +### 1. Local STDIO Server + +For locally-run MCP servers (script launches the server automatically): + +```bash +python scripts/evaluation.py \ + -t stdio \ + -c python \ + -a my_mcp_server.py \ + evaluation.xml +``` + +With environment variables: +```bash +python scripts/evaluation.py \ + -t stdio \ + -c python \ + -a my_mcp_server.py \ + -e API_KEY=abc123 \ + -e DEBUG=true \ + evaluation.xml +``` + +### 2. Server-Sent Events (SSE) + +For SSE-based MCP servers (you must start the server first): + +```bash +python scripts/evaluation.py \ + -t sse \ + -u https://example.com/mcp \ + -H "Authorization: Bearer token123" \ + -H "X-Custom-Header: value" \ + evaluation.xml +``` + +### 3. HTTP (Streamable HTTP) + +For HTTP-based MCP servers (you must start the server first): + +```bash +python scripts/evaluation.py \ + -t http \ + -u https://example.com/mcp \ + -H "Authorization: Bearer token123" \ + evaluation.xml +``` + +## Command-Line Options + +``` +usage: evaluation.py [-h] [-t {stdio,sse,http}] [-m MODEL] [-c COMMAND] + [-a ARGS [ARGS ...]] [-e ENV [ENV ...]] [-u URL] + [-H HEADERS [HEADERS ...]] [-o OUTPUT] + eval_file + +positional arguments: + eval_file Path to evaluation XML file + +optional arguments: + -h, --help Show help message + -t, --transport Transport type: stdio, sse, or http (default: stdio) + -m, --model Claude model to use (default: claude-3-7-sonnet-20250219) + -o, --output Output file for report (default: print to stdout) + +stdio options: + -c, --command Command to run MCP server (e.g., python, node) + -a, --args Arguments for the command (e.g., server.py) + -e, --env Environment variables in KEY=VALUE format + +sse/http options: + -u, --url MCP server URL + -H, --header HTTP headers in 'Key: Value' format +``` + +## Output + +The evaluation script generates a detailed report including: + +- **Summary Statistics**: + - Accuracy (correct/total) + - Average task duration + - Average tool calls per task + - Total tool calls + +- **Per-Task Results**: + - Prompt and expected response + - Actual response from the agent + - Whether the answer was correct (✅/❌) + - Duration and tool call details + - Agent's summary of its approach + - Agent's feedback on the tools + +### Save Report to File + +```bash +python scripts/evaluation.py \ + -t stdio \ + -c python \ + -a my_server.py \ + -o evaluation_report.md \ + evaluation.xml +``` + +## Complete Example Workflow + +Here's a complete example of creating and running an evaluation: + +1. **Create your evaluation file** (`my_evaluation.xml`): + +```xml +<evaluation> + <qa_pair> + <question>Find the user who created the most issues in January 2024. What is their username?</question> + <answer>alice_developer</answer> + </qa_pair> + <qa_pair> + <question>Among all pull requests merged in Q1 2024, which repository had the highest number? Provide the repository name.</question> + <answer>backend-api</answer> + </qa_pair> + <qa_pair> + <question>Find the project that was completed in December 2023 and had the longest duration from start to finish. How many days did it take?</question> + <answer>127</answer> + </qa_pair> +</evaluation> +``` + +2. **Install dependencies**: + +```bash +pip install -r scripts/requirements.txt +export ANTHROPIC_API_KEY=your_api_key +``` + +3. **Run evaluation**: + +```bash +python scripts/evaluation.py \ + -t stdio \ + -c python \ + -a github_mcp_server.py \ + -e GITHUB_TOKEN=ghp_xxx \ + -o github_eval_report.md \ + my_evaluation.xml +``` + +4. **Review the report** in `github_eval_report.md` to: + - See which questions passed/failed + - Read the agent's feedback on your tools + - Identify areas for improvement + - Iterate on your MCP server design + +## Troubleshooting + +### Connection Errors + +If you get connection errors: +- **STDIO**: Verify the command and arguments are correct +- **SSE/HTTP**: Check the URL is accessible and headers are correct +- Ensure any required API keys are set in environment variables or headers + +### Low Accuracy + +If many evaluations fail: +- Review the agent's feedback for each task +- Check if tool descriptions are clear and comprehensive +- Verify input parameters are well-documented +- Consider whether tools return too much or too little data +- Ensure error messages are actionable + +### Timeout Issues + +If tasks are timing out: +- Use a more capable model (e.g., `claude-3-7-sonnet-20250219`) +- Check if tools are returning too much data +- Verify pagination is working correctly +- Consider simplifying complex questions \ No newline at end of file diff --git a/skills/mcp-builder/reference/mcp_best_practices.md b/skills/mcp-builder/reference/mcp_best_practices.md new file mode 100644 index 0000000..db42af7 --- /dev/null +++ b/skills/mcp-builder/reference/mcp_best_practices.md @@ -0,0 +1,915 @@ +# MCP Server Development Best Practices and Guidelines + +## Overview + +This document compiles essential best practices and guidelines for building Model Context Protocol (MCP) servers. It covers naming conventions, tool design, response formats, pagination, error handling, security, and compliance requirements. + +--- + +## Quick Reference + +### Server Naming +- **Python**: `{service}_mcp` (e.g., `slack_mcp`) +- **Node/TypeScript**: `{service}-mcp-server` (e.g., `slack-mcp-server`) + +### Tool Naming +- Use snake_case with service prefix +- Format: `{service}_{action}_{resource}` +- Example: `slack_send_message`, `github_create_issue` + +### Response Formats +- Support both JSON and Markdown formats +- JSON for programmatic processing +- Markdown for human readability + +### Pagination +- Always respect `limit` parameter +- Return `has_more`, `next_offset`, `total_count` +- Default to 20-50 items + +### Character Limits +- Set CHARACTER_LIMIT constant (typically 25,000) +- Truncate gracefully with clear messages +- Provide guidance on filtering + +--- + +## Table of Contents +1. Server Naming Conventions +2. Tool Naming and Design +3. Response Format Guidelines +4. Pagination Best Practices +5. Character Limits and Truncation +6. Tool Development Best Practices +7. Transport Best Practices +8. Testing Requirements +9. OAuth and Security Best Practices +10. Resource Management Best Practices +11. Prompt Management Best Practices +12. Error Handling Standards +13. Documentation Requirements +14. Compliance and Monitoring + +--- + +## 1. Server Naming Conventions + +Follow these standardized naming patterns for MCP servers: + +**Python**: Use format `{service}_mcp` (lowercase with underscores) +- Examples: `slack_mcp`, `github_mcp`, `jira_mcp`, `stripe_mcp` + +**Node/TypeScript**: Use format `{service}-mcp-server` (lowercase with hyphens) +- Examples: `slack-mcp-server`, `github-mcp-server`, `jira-mcp-server` + +The name should be: +- General (not tied to specific features) +- Descriptive of the service/API being integrated +- Easy to infer from the task description +- Without version numbers or dates + +--- + +## 2. Tool Naming and Design + +### Tool Naming Best Practices + +1. **Use snake_case**: `search_users`, `create_project`, `get_channel_info` +2. **Include service prefix**: Anticipate that your MCP server may be used alongside other MCP servers + - Use `slack_send_message` instead of just `send_message` + - Use `github_create_issue` instead of just `create_issue` + - Use `asana_list_tasks` instead of just `list_tasks` +3. **Be action-oriented**: Start with verbs (get, list, search, create, etc.) +4. **Be specific**: Avoid generic names that could conflict with other servers +5. **Maintain consistency**: Use consistent naming patterns within your server + +### Tool Design Guidelines + +- Tool descriptions must narrowly and unambiguously describe functionality +- Descriptions must precisely match actual functionality +- Should not create confusion with other MCP servers +- Should provide tool annotations (readOnlyHint, destructiveHint, idempotentHint, openWorldHint) +- Keep tool operations focused and atomic + +--- + +## 3. Response Format Guidelines + +All tools that return data should support multiple formats for flexibility: + +### JSON Format (`response_format="json"`) +- Machine-readable structured data +- Include all available fields and metadata +- Consistent field names and types +- Suitable for programmatic processing +- Use for when LLMs need to process data further + +### Markdown Format (`response_format="markdown"`, typically default) +- Human-readable formatted text +- Use headers, lists, and formatting for clarity +- Convert timestamps to human-readable format (e.g., "2024-01-15 10:30:00 UTC" instead of epoch) +- Show display names with IDs in parentheses (e.g., "@john.doe (U123456)") +- Omit verbose metadata (e.g., show only one profile image URL, not all sizes) +- Group related information logically +- Use for when presenting information to users + +--- + +## 4. Pagination Best Practices + +For tools that list resources: + +- **Always respect the `limit` parameter**: Never load all results when a limit is specified +- **Implement pagination**: Use `offset` or cursor-based pagination +- **Return pagination metadata**: Include `has_more`, `next_offset`/`next_cursor`, `total_count` +- **Never load all results into memory**: Especially important for large datasets +- **Default to reasonable limits**: 20-50 items is typical +- **Include clear pagination info in responses**: Make it easy for LLMs to request more data + +Example pagination response structure: +```json +{ + "total": 150, + "count": 20, + "offset": 0, + "items": [...], + "has_more": true, + "next_offset": 20 +} +``` + +--- + +## 5. Character Limits and Truncation + +To prevent overwhelming responses with too much data: + +- **Define CHARACTER_LIMIT constant**: Typically 25,000 characters at module level +- **Check response size before returning**: Measure the final response length +- **Truncate gracefully with clear indicators**: Let the LLM know data was truncated +- **Provide guidance on filtering**: Suggest how to use parameters to reduce results +- **Include truncation metadata**: Show what was truncated and how to get more + +Example truncation handling: +```python +CHARACTER_LIMIT = 25000 + +if len(result) > CHARACTER_LIMIT: + truncated_data = data[:max(1, len(data) // 2)] + response["truncated"] = True + response["truncation_message"] = ( + f"Response truncated from {len(data)} to {len(truncated_data)} items. " + f"Use 'offset' parameter or add filters to see more results." + ) +``` + +--- + +## 6. Transport Options + +MCP servers support multiple transport mechanisms for different deployment scenarios: + +### Stdio Transport + +**Best for**: Command-line tools, local integrations, subprocess execution + +**Characteristics**: +- Standard input/output stream communication +- Simple setup, no network configuration needed +- Runs as a subprocess of the client +- Ideal for desktop applications and CLI tools + +**Use when**: +- Building tools for local development environments +- Integrating with desktop applications (e.g., Claude Desktop) +- Creating command-line utilities +- Single-user, single-session scenarios + +### HTTP Transport + +**Best for**: Web services, remote access, multi-client scenarios + +**Characteristics**: +- Request-response pattern over HTTP +- Supports multiple simultaneous clients +- Can be deployed as a web service +- Requires network configuration and security considerations + +**Use when**: +- Serving multiple clients simultaneously +- Deploying as a cloud service +- Integration with web applications +- Need for load balancing or scaling + +### Server-Sent Events (SSE) Transport + +**Best for**: Real-time updates, push notifications, streaming data + +**Characteristics**: +- One-way server-to-client streaming over HTTP +- Enables real-time updates without polling +- Long-lived connections for continuous data flow +- Built on standard HTTP infrastructure + +**Use when**: +- Clients need real-time data updates +- Implementing push notifications +- Streaming logs or monitoring data +- Progressive result delivery for long operations + +### Transport Selection Criteria + +| Criterion | Stdio | HTTP | SSE | +|-----------|-------|------|-----| +| **Deployment** | Local | Remote | Remote | +| **Clients** | Single | Multiple | Multiple | +| **Communication** | Bidirectional | Request-Response | Server-Push | +| **Complexity** | Low | Medium | Medium-High | +| **Real-time** | No | No | Yes | + +--- + +## 7. Tool Development Best Practices + +### General Guidelines +1. Tool names should be descriptive and action-oriented +2. Use parameter validation with detailed JSON schemas +3. Include examples in tool descriptions +4. Implement proper error handling and validation +5. Use progress reporting for long operations +6. Keep tool operations focused and atomic +7. Document expected return value structures +8. Implement proper timeouts +9. Consider rate limiting for resource-intensive operations +10. Log tool usage for debugging and monitoring + +### Security Considerations for Tools + +#### Input Validation +- Validate all parameters against schema +- Sanitize file paths and system commands +- Validate URLs and external identifiers +- Check parameter sizes and ranges +- Prevent command injection + +#### Access Control +- Implement authentication where needed +- Use appropriate authorization checks +- Audit tool usage +- Rate limit requests +- Monitor for abuse + +#### Error Handling +- Don't expose internal errors to clients +- Log security-relevant errors +- Handle timeouts appropriately +- Clean up resources after errors +- Validate return values + +### Tool Annotations +- Provide readOnlyHint and destructiveHint annotations +- Remember annotations are hints, not security guarantees +- Clients should not make security-critical decisions based solely on annotations + +--- + +## 8. Transport Best Practices + +### General Transport Guidelines +1. Handle connection lifecycle properly +2. Implement proper error handling +3. Use appropriate timeout values +4. Implement connection state management +5. Clean up resources on disconnection + +### Security Best Practices for Transport +- Follow security considerations for DNS rebinding attacks +- Implement proper authentication mechanisms +- Validate message formats +- Handle malformed messages gracefully + +### Stdio Transport Specific +- Local MCP servers should NOT log to stdout (interferes with protocol) +- Use stderr for logging messages +- Handle standard I/O streams properly + +--- + +## 9. Testing Requirements + +A comprehensive testing strategy should cover: + +### Functional Testing +- Verify correct execution with valid/invalid inputs + +### Integration Testing +- Test interaction with external systems + +### Security Testing +- Validate auth, input sanitization, rate limiting + +### Performance Testing +- Check behavior under load, timeouts + +### Error Handling +- Ensure proper error reporting and cleanup + +--- + +## 10. OAuth and Security Best Practices + +### Authentication and Authorization + +MCP servers that connect to external services should implement proper authentication: + +**OAuth 2.1 Implementation:** +- Use secure OAuth 2.1 with certificates from recognized authorities +- Validate access tokens before processing requests +- Only accept tokens specifically intended for your server +- Reject tokens without proper audience claims +- Never pass through tokens received from MCP clients + +**API Key Management:** +- Store API keys in environment variables, never in code +- Validate keys on server startup +- Provide clear error messages when authentication fails +- Use secure transmission for sensitive credentials + +### Input Validation and Security + +**Always validate inputs:** +- Sanitize file paths to prevent directory traversal +- Validate URLs and external identifiers +- Check parameter sizes and ranges +- Prevent command injection in system calls +- Use schema validation (Pydantic/Zod) for all inputs + +**Error handling security:** +- Don't expose internal errors to clients +- Log security-relevant errors server-side +- Provide helpful but not revealing error messages +- Clean up resources after errors + +### Privacy and Data Protection + +**Data collection principles:** +- Only collect data strictly necessary for functionality +- Don't collect extraneous conversation data +- Don't collect PII unless explicitly required for the tool's purpose +- Provide clear information about what data is accessed + +**Data transmission:** +- Don't send data to servers outside your organization without disclosure +- Use secure transmission (HTTPS) for all network communication +- Validate certificates for external services + +--- + +## 11. Resource Management Best Practices + +1. Only suggest necessary resources +2. Use clear, descriptive names for roots +3. Handle resource boundaries properly +4. Respect client control over resources +5. Use model-controlled primitives (tools) for automatic data exposure + +--- + +## 12. Prompt Management Best Practices + +- Clients should show users proposed prompts +- Users should be able to modify or reject prompts +- Clients should show users completions +- Users should be able to modify or reject completions +- Consider costs when using sampling + +--- + +## 13. Error Handling Standards + +- Use standard JSON-RPC error codes +- Report tool errors within result objects (not protocol-level) +- Provide helpful, specific error messages +- Don't expose internal implementation details +- Clean up resources properly on errors + +--- + +## 14. Documentation Requirements + +- Provide clear documentation of all tools and capabilities +- Include working examples (at least 3 per major feature) +- Document security considerations +- Specify required permissions and access levels +- Document rate limits and performance characteristics + +--- + +## 15. Compliance and Monitoring + +- Implement logging for debugging and monitoring +- Track tool usage patterns +- Monitor for potential abuse +- Maintain audit trails for security-relevant operations +- Be prepared for ongoing compliance reviews + +--- + +## Summary + +These best practices represent the comprehensive guidelines for building secure, efficient, and compliant MCP servers that work well within the ecosystem. Developers should follow these guidelines to ensure their MCP servers meet the standards for inclusion in the MCP directory and provide a safe, reliable experience for users. + + +---------- + + +# Tools + +> Enable LLMs to perform actions through your server + +Tools are a powerful primitive in the Model Context Protocol (MCP) that enable servers to expose executable functionality to clients. Through tools, LLMs can interact with external systems, perform computations, and take actions in the real world. + +<Note> + Tools are designed to be **model-controlled**, meaning that tools are exposed from servers to clients with the intention of the AI model being able to automatically invoke them (with a human in the loop to grant approval). +</Note> + +## Overview + +Tools in MCP allow servers to expose executable functions that can be invoked by clients and used by LLMs to perform actions. Key aspects of tools include: + +* **Discovery**: Clients can obtain a list of available tools by sending a `tools/list` request +* **Invocation**: Tools are called using the `tools/call` request, where servers perform the requested operation and return results +* **Flexibility**: Tools can range from simple calculations to complex API interactions + +Like [resources](/docs/concepts/resources), tools are identified by unique names and can include descriptions to guide their usage. However, unlike resources, tools represent dynamic operations that can modify state or interact with external systems. + +## Tool definition structure + +Each tool is defined with the following structure: + +```typescript +{ + name: string; // Unique identifier for the tool + description?: string; // Human-readable description + inputSchema: { // JSON Schema for the tool's parameters + type: "object", + properties: { ... } // Tool-specific parameters + }, + annotations?: { // Optional hints about tool behavior + title?: string; // Human-readable title for the tool + readOnlyHint?: boolean; // If true, the tool does not modify its environment + destructiveHint?: boolean; // If true, the tool may perform destructive updates + idempotentHint?: boolean; // If true, repeated calls with same args have no additional effect + openWorldHint?: boolean; // If true, tool interacts with external entities + } +} +``` + +## Implementing tools + +Here's an example of implementing a basic tool in an MCP server: + +<Tabs> + <Tab title="TypeScript"> + ```typescript + const server = new Server({ + name: "example-server", + version: "1.0.0" + }, { + capabilities: { + tools: {} + } + }); + + // Define available tools + server.setRequestHandler(ListToolsRequestSchema, async () => { + return { + tools: [{ + name: "calculate_sum", + description: "Add two numbers together", + inputSchema: { + type: "object", + properties: { + a: { type: "number" }, + b: { type: "number" } + }, + required: ["a", "b"] + } + }] + }; + }); + + // Handle tool execution + server.setRequestHandler(CallToolRequestSchema, async (request) => { + if (request.params.name === "calculate_sum") { + const { a, b } = request.params.arguments; + return { + content: [ + { + type: "text", + text: String(a + b) + } + ] + }; + } + throw new Error("Tool not found"); + }); + ``` + </Tab> + + <Tab title="Python"> + ```python + app = Server("example-server") + + @app.list_tools() + async def list_tools() -> list[types.Tool]: + return [ + types.Tool( + name="calculate_sum", + description="Add two numbers together", + inputSchema={ + "type": "object", + "properties": { + "a": {"type": "number"}, + "b": {"type": "number"} + }, + "required": ["a", "b"] + } + ) + ] + + @app.call_tool() + async def call_tool( + name: str, + arguments: dict + ) -> list[types.TextContent | types.ImageContent | types.EmbeddedResource]: + if name == "calculate_sum": + a = arguments["a"] + b = arguments["b"] + result = a + b + return [types.TextContent(type="text", text=str(result))] + raise ValueError(f"Tool not found: {name}") + ``` + </Tab> +</Tabs> + +## Example tool patterns + +Here are some examples of types of tools that a server could provide: + +### System operations + +Tools that interact with the local system: + +```typescript +{ + name: "execute_command", + description: "Run a shell command", + inputSchema: { + type: "object", + properties: { + command: { type: "string" }, + args: { type: "array", items: { type: "string" } } + } + } +} +``` + +### API integrations + +Tools that wrap external APIs: + +```typescript +{ + name: "github_create_issue", + description: "Create a GitHub issue", + inputSchema: { + type: "object", + properties: { + title: { type: "string" }, + body: { type: "string" }, + labels: { type: "array", items: { type: "string" } } + } + } +} +``` + +### Data processing + +Tools that transform or analyze data: + +```typescript +{ + name: "analyze_csv", + description: "Analyze a CSV file", + inputSchema: { + type: "object", + properties: { + filepath: { type: "string" }, + operations: { + type: "array", + items: { + enum: ["sum", "average", "count"] + } + } + } + } +} +``` + +## Best practices + +When implementing tools: + +1. Provide clear, descriptive names and descriptions +2. Use detailed JSON Schema definitions for parameters +3. Include examples in tool descriptions to demonstrate how the model should use them +4. Implement proper error handling and validation +5. Use progress reporting for long operations +6. Keep tool operations focused and atomic +7. Document expected return value structures +8. Implement proper timeouts +9. Consider rate limiting for resource-intensive operations +10. Log tool usage for debugging and monitoring + +### Tool name conflicts + +MCP client applications and MCP server proxies may encounter tool name conflicts when building their own tool lists. For example, two connected MCP servers `web1` and `web2` may both expose a tool named `search_web`. + +Applications may disambiguiate tools with one of the following strategies (among others; not an exhaustive list): + +* Concatenating a unique, user-defined server name with the tool name, e.g. `web1___search_web` and `web2___search_web`. This strategy may be preferable when unique server names are already provided by the user in a configuration file. +* Generating a random prefix for the tool name, e.g. `jrwxs___search_web` and `6cq52___search_web`. This strategy may be preferable in server proxies where user-defined unique names are not available. +* Using the server URI as a prefix for the tool name, e.g. `web1.example.com:search_web` and `web2.example.com:search_web`. This strategy may be suitable when working with remote MCP servers. + +Note that the server-provided name from the initialization flow is not guaranteed to be unique and is not generally suitable for disambiguation purposes. + +## Security considerations + +When exposing tools: + +### Input validation + +* Validate all parameters against the schema +* Sanitize file paths and system commands +* Validate URLs and external identifiers +* Check parameter sizes and ranges +* Prevent command injection + +### Access control + +* Implement authentication where needed +* Use appropriate authorization checks +* Audit tool usage +* Rate limit requests +* Monitor for abuse + +### Error handling + +* Don't expose internal errors to clients +* Log security-relevant errors +* Handle timeouts appropriately +* Clean up resources after errors +* Validate return values + +## Tool discovery and updates + +MCP supports dynamic tool discovery: + +1. Clients can list available tools at any time +2. Servers can notify clients when tools change using `notifications/tools/list_changed` +3. Tools can be added or removed during runtime +4. Tool definitions can be updated (though this should be done carefully) + +## Error handling + +Tool errors should be reported within the result object, not as MCP protocol-level errors. This allows the LLM to see and potentially handle the error. When a tool encounters an error: + +1. Set `isError` to `true` in the result +2. Include error details in the `content` array + +Here's an example of proper error handling for tools: + +<Tabs> + <Tab title="TypeScript"> + ```typescript + try { + // Tool operation + const result = performOperation(); + return { + content: [ + { + type: "text", + text: `Operation successful: ${result}` + } + ] + }; + } catch (error) { + return { + isError: true, + content: [ + { + type: "text", + text: `Error: ${error.message}` + } + ] + }; + } + ``` + </Tab> + + <Tab title="Python"> + ```python + try: + # Tool operation + result = perform_operation() + return types.CallToolResult( + content=[ + types.TextContent( + type="text", + text=f"Operation successful: {result}" + ) + ] + ) + except Exception as error: + return types.CallToolResult( + isError=True, + content=[ + types.TextContent( + type="text", + text=f"Error: {str(error)}" + ) + ] + ) + ``` + </Tab> +</Tabs> + +This approach allows the LLM to see that an error occurred and potentially take corrective action or request human intervention. + +## Tool annotations + +Tool annotations provide additional metadata about a tool's behavior, helping clients understand how to present and manage tools. These annotations are hints that describe the nature and impact of a tool, but should not be relied upon for security decisions. + +### Purpose of tool annotations + +Tool annotations serve several key purposes: + +1. Provide UX-specific information without affecting model context +2. Help clients categorize and present tools appropriately +3. Convey information about a tool's potential side effects +4. Assist in developing intuitive interfaces for tool approval + +### Available tool annotations + +The MCP specification defines the following annotations for tools: + +| Annotation | Type | Default | Description | +| ----------------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ | +| `title` | string | - | A human-readable title for the tool, useful for UI display | +| `readOnlyHint` | boolean | false | If true, indicates the tool does not modify its environment | +| `destructiveHint` | boolean | true | If true, the tool may perform destructive updates (only meaningful when `readOnlyHint` is false) | +| `idempotentHint` | boolean | false | If true, calling the tool repeatedly with the same arguments has no additional effect (only meaningful when `readOnlyHint` is false) | +| `openWorldHint` | boolean | true | If true, the tool may interact with an "open world" of external entities | + +### Example usage + +Here's how to define tools with annotations for different scenarios: + +```typescript +// A read-only search tool +{ + name: "web_search", + description: "Search the web for information", + inputSchema: { + type: "object", + properties: { + query: { type: "string" } + }, + required: ["query"] + }, + annotations: { + title: "Web Search", + readOnlyHint: true, + openWorldHint: true + } +} + +// A destructive file deletion tool +{ + name: "delete_file", + description: "Delete a file from the filesystem", + inputSchema: { + type: "object", + properties: { + path: { type: "string" } + }, + required: ["path"] + }, + annotations: { + title: "Delete File", + readOnlyHint: false, + destructiveHint: true, + idempotentHint: true, + openWorldHint: false + } +} + +// A non-destructive database record creation tool +{ + name: "create_record", + description: "Create a new record in the database", + inputSchema: { + type: "object", + properties: { + table: { type: "string" }, + data: { type: "object" } + }, + required: ["table", "data"] + }, + annotations: { + title: "Create Database Record", + readOnlyHint: false, + destructiveHint: false, + idempotentHint: false, + openWorldHint: false + } +} +``` + +### Integrating annotations in server implementation + +<Tabs> + <Tab title="TypeScript"> + ```typescript + server.setRequestHandler(ListToolsRequestSchema, async () => { + return { + tools: [{ + name: "calculate_sum", + description: "Add two numbers together", + inputSchema: { + type: "object", + properties: { + a: { type: "number" }, + b: { type: "number" } + }, + required: ["a", "b"] + }, + annotations: { + title: "Calculate Sum", + readOnlyHint: true, + openWorldHint: false + } + }] + }; + }); + ``` + </Tab> + + <Tab title="Python"> + ```python + from mcp.server.fastmcp import FastMCP + + mcp = FastMCP("example-server") + + @mcp.tool( + annotations={ + "title": "Calculate Sum", + "readOnlyHint": True, + "openWorldHint": False + } + ) + async def calculate_sum(a: float, b: float) -> str: + """Add two numbers together. + + Args: + a: First number to add + b: Second number to add + """ + result = a + b + return str(result) + ``` + </Tab> +</Tabs> + +### Best practices for tool annotations + +1. **Be accurate about side effects**: Clearly indicate whether a tool modifies its environment and whether those modifications are destructive. + +2. **Use descriptive titles**: Provide human-friendly titles that clearly describe the tool's purpose. + +3. **Indicate idempotency properly**: Mark tools as idempotent only if repeated calls with the same arguments truly have no additional effect. + +4. **Set appropriate open/closed world hints**: Indicate whether a tool interacts with a closed system (like a database) or an open system (like the web). + +5. **Remember annotations are hints**: All properties in ToolAnnotations are hints and not guaranteed to provide a faithful description of tool behavior. Clients should never make security-critical decisions based solely on annotations. + +## Testing tools + +A comprehensive testing strategy for MCP tools should cover: + +* **Functional testing**: Verify tools execute correctly with valid inputs and handle invalid inputs appropriately +* **Integration testing**: Test tool interaction with external systems using both real and mocked dependencies +* **Security testing**: Validate authentication, authorization, input sanitization, and rate limiting +* **Performance testing**: Check behavior under load, timeout handling, and resource cleanup +* **Error handling**: Ensure tools properly report errors through the MCP protocol and clean up resources diff --git a/skills/mcp-builder/reference/node_mcp_server.md b/skills/mcp-builder/reference/node_mcp_server.md new file mode 100644 index 0000000..e66a35b --- /dev/null +++ b/skills/mcp-builder/reference/node_mcp_server.md @@ -0,0 +1,916 @@ +# Node/TypeScript MCP Server Implementation Guide + +## Overview + +This document provides Node/TypeScript-specific best practices and examples for implementing MCP servers using the MCP TypeScript SDK. It covers project structure, server setup, tool registration patterns, input validation with Zod, error handling, and complete working examples. + +--- + +## Quick Reference + +### Key Imports +```typescript +import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; +import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"; +import { z } from "zod"; +import axios, { AxiosError } from "axios"; +``` + +### Server Initialization +```typescript +const server = new McpServer({ + name: "service-mcp-server", + version: "1.0.0" +}); +``` + +### Tool Registration Pattern +```typescript +server.registerTool("tool_name", {...config}, async (params) => { + // Implementation +}); +``` + +--- + +## MCP TypeScript SDK + +The official MCP TypeScript SDK provides: +- `McpServer` class for server initialization +- `registerTool` method for tool registration +- Zod schema integration for runtime input validation +- Type-safe tool handler implementations + +See the MCP SDK documentation in the references for complete details. + +## Server Naming Convention + +Node/TypeScript MCP servers must follow this naming pattern: +- **Format**: `{service}-mcp-server` (lowercase with hyphens) +- **Examples**: `github-mcp-server`, `jira-mcp-server`, `stripe-mcp-server` + +The name should be: +- General (not tied to specific features) +- Descriptive of the service/API being integrated +- Easy to infer from the task description +- Without version numbers or dates + +## Project Structure + +Create the following structure for Node/TypeScript MCP servers: + +``` +{service}-mcp-server/ +├── package.json +├── tsconfig.json +├── README.md +├── src/ +│ ├── index.ts # Main entry point with McpServer initialization +│ ├── types.ts # TypeScript type definitions and interfaces +│ ├── tools/ # Tool implementations (one file per domain) +│ ├── services/ # API clients and shared utilities +│ ├── schemas/ # Zod validation schemas +│ └── constants.ts # Shared constants (API_URL, CHARACTER_LIMIT, etc.) +└── dist/ # Built JavaScript files (entry point: dist/index.js) +``` + +## Tool Implementation + +### Tool Naming + +Use snake_case for tool names (e.g., "search_users", "create_project", "get_channel_info") with clear, action-oriented names. + +**Avoid Naming Conflicts**: Include the service context to prevent overlaps: +- Use "slack_send_message" instead of just "send_message" +- Use "github_create_issue" instead of just "create_issue" +- Use "asana_list_tasks" instead of just "list_tasks" + +### Tool Structure + +Tools are registered using the `registerTool` method with the following requirements: +- Use Zod schemas for runtime input validation and type safety +- The `description` field must be explicitly provided - JSDoc comments are NOT automatically extracted +- Explicitly provide `title`, `description`, `inputSchema`, and `annotations` +- The `inputSchema` must be a Zod schema object (not a JSON schema) +- Type all parameters and return values explicitly + +```typescript +import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; +import { z } from "zod"; + +const server = new McpServer({ + name: "example-mcp", + version: "1.0.0" +}); + +// Zod schema for input validation +const UserSearchInputSchema = z.object({ + query: z.string() + .min(2, "Query must be at least 2 characters") + .max(200, "Query must not exceed 200 characters") + .describe("Search string to match against names/emails"), + limit: z.number() + .int() + .min(1) + .max(100) + .default(20) + .describe("Maximum results to return"), + offset: z.number() + .int() + .min(0) + .default(0) + .describe("Number of results to skip for pagination"), + response_format: z.nativeEnum(ResponseFormat) + .default(ResponseFormat.MARKDOWN) + .describe("Output format: 'markdown' for human-readable or 'json' for machine-readable") +}).strict(); + +// Type definition from Zod schema +type UserSearchInput = z.infer<typeof UserSearchInputSchema>; + +server.registerTool( + "example_search_users", + { + title: "Search Example Users", + description: `Search for users in the Example system by name, email, or team. + +This tool searches across all user profiles in the Example platform, supporting partial matches and various search filters. It does NOT create or modify users, only searches existing ones. + +Args: + - query (string): Search string to match against names/emails + - limit (number): Maximum results to return, between 1-100 (default: 20) + - offset (number): Number of results to skip for pagination (default: 0) + - response_format ('markdown' | 'json'): Output format (default: 'markdown') + +Returns: + For JSON format: Structured data with schema: + { + "total": number, // Total number of matches found + "count": number, // Number of results in this response + "offset": number, // Current pagination offset + "users": [ + { + "id": string, // User ID (e.g., "U123456789") + "name": string, // Full name (e.g., "John Doe") + "email": string, // Email address + "team": string, // Team name (optional) + "active": boolean // Whether user is active + } + ], + "has_more": boolean, // Whether more results are available + "next_offset": number // Offset for next page (if has_more is true) + } + +Examples: + - Use when: "Find all marketing team members" -> params with query="team:marketing" + - Use when: "Search for John's account" -> params with query="john" + - Don't use when: You need to create a user (use example_create_user instead) + +Error Handling: + - Returns "Error: Rate limit exceeded" if too many requests (429 status) + - Returns "No users found matching '<query>'" if search returns empty`, + inputSchema: UserSearchInputSchema, + annotations: { + readOnlyHint: true, + destructiveHint: false, + idempotentHint: true, + openWorldHint: true + } + }, + async (params: UserSearchInput) => { + try { + // Input validation is handled by Zod schema + // Make API request using validated parameters + const data = await makeApiRequest<any>( + "users/search", + "GET", + undefined, + { + q: params.query, + limit: params.limit, + offset: params.offset + } + ); + + const users = data.users || []; + const total = data.total || 0; + + if (!users.length) { + return { + content: [{ + type: "text", + text: `No users found matching '${params.query}'` + }] + }; + } + + // Format response based on requested format + let result: string; + + if (params.response_format === ResponseFormat.MARKDOWN) { + // Human-readable markdown format + const lines: string[] = [`# User Search Results: '${params.query}'`, ""]; + lines.push(`Found ${total} users (showing ${users.length})`); + lines.push(""); + + for (const user of users) { + lines.push(`## ${user.name} (${user.id})`); + lines.push(`- **Email**: ${user.email}`); + if (user.team) { + lines.push(`- **Team**: ${user.team}`); + } + lines.push(""); + } + + result = lines.join("\n"); + + } else { + // Machine-readable JSON format + const response: any = { + total, + count: users.length, + offset: params.offset, + users: users.map((user: any) => ({ + id: user.id, + name: user.name, + email: user.email, + ...(user.team ? { team: user.team } : {}), + active: user.active ?? true + })) + }; + + // Add pagination info if there are more results + if (total > params.offset + users.length) { + response.has_more = true; + response.next_offset = params.offset + users.length; + } + + result = JSON.stringify(response, null, 2); + } + + return { + content: [{ + type: "text", + text: result + }] + }; + } catch (error) { + return { + content: [{ + type: "text", + text: handleApiError(error) + }] + }; + } + } +); +``` + +## Zod Schemas for Input Validation + +Zod provides runtime type validation: + +```typescript +import { z } from "zod"; + +// Basic schema with validation +const CreateUserSchema = z.object({ + name: z.string() + .min(1, "Name is required") + .max(100, "Name must not exceed 100 characters"), + email: z.string() + .email("Invalid email format"), + age: z.number() + .int("Age must be a whole number") + .min(0, "Age cannot be negative") + .max(150, "Age cannot be greater than 150") +}).strict(); // Use .strict() to forbid extra fields + +// Enums +enum ResponseFormat { + MARKDOWN = "markdown", + JSON = "json" +} + +const SearchSchema = z.object({ + response_format: z.nativeEnum(ResponseFormat) + .default(ResponseFormat.MARKDOWN) + .describe("Output format") +}); + +// Optional fields with defaults +const PaginationSchema = z.object({ + limit: z.number() + .int() + .min(1) + .max(100) + .default(20) + .describe("Maximum results to return"), + offset: z.number() + .int() + .min(0) + .default(0) + .describe("Number of results to skip") +}); +``` + +## Response Format Options + +Support multiple output formats for flexibility: + +```typescript +enum ResponseFormat { + MARKDOWN = "markdown", + JSON = "json" +} + +const inputSchema = z.object({ + query: z.string(), + response_format: z.nativeEnum(ResponseFormat) + .default(ResponseFormat.MARKDOWN) + .describe("Output format: 'markdown' for human-readable or 'json' for machine-readable") +}); +``` + +**Markdown format**: +- Use headers, lists, and formatting for clarity +- Convert timestamps to human-readable format +- Show display names with IDs in parentheses +- Omit verbose metadata +- Group related information logically + +**JSON format**: +- Return complete, structured data suitable for programmatic processing +- Include all available fields and metadata +- Use consistent field names and types + +## Pagination Implementation + +For tools that list resources: + +```typescript +const ListSchema = z.object({ + limit: z.number().int().min(1).max(100).default(20), + offset: z.number().int().min(0).default(0) +}); + +async function listItems(params: z.infer<typeof ListSchema>) { + const data = await apiRequest(params.limit, params.offset); + + const response = { + total: data.total, + count: data.items.length, + offset: params.offset, + items: data.items, + has_more: data.total > params.offset + data.items.length, + next_offset: data.total > params.offset + data.items.length + ? params.offset + data.items.length + : undefined + }; + + return JSON.stringify(response, null, 2); +} +``` + +## Character Limits and Truncation + +Add a CHARACTER_LIMIT constant to prevent overwhelming responses: + +```typescript +// At module level in constants.ts +export const CHARACTER_LIMIT = 25000; // Maximum response size in characters + +async function searchTool(params: SearchInput) { + let result = generateResponse(data); + + // Check character limit and truncate if needed + if (result.length > CHARACTER_LIMIT) { + const truncatedData = data.slice(0, Math.max(1, data.length / 2)); + response.data = truncatedData; + response.truncated = true; + response.truncation_message = + `Response truncated from ${data.length} to ${truncatedData.length} items. ` + + `Use 'offset' parameter or add filters to see more results.`; + result = JSON.stringify(response, null, 2); + } + + return result; +} +``` + +## Error Handling + +Provide clear, actionable error messages: + +```typescript +import axios, { AxiosError } from "axios"; + +function handleApiError(error: unknown): string { + if (error instanceof AxiosError) { + if (error.response) { + switch (error.response.status) { + case 404: + return "Error: Resource not found. Please check the ID is correct."; + case 403: + return "Error: Permission denied. You don't have access to this resource."; + case 429: + return "Error: Rate limit exceeded. Please wait before making more requests."; + default: + return `Error: API request failed with status ${error.response.status}`; + } + } else if (error.code === "ECONNABORTED") { + return "Error: Request timed out. Please try again."; + } + } + return `Error: Unexpected error occurred: ${error instanceof Error ? error.message : String(error)}`; +} +``` + +## Shared Utilities + +Extract common functionality into reusable functions: + +```typescript +// Shared API request function +async function makeApiRequest<T>( + endpoint: string, + method: "GET" | "POST" | "PUT" | "DELETE" = "GET", + data?: any, + params?: any +): Promise<T> { + try { + const response = await axios({ + method, + url: `${API_BASE_URL}/${endpoint}`, + data, + params, + timeout: 30000, + headers: { + "Content-Type": "application/json", + "Accept": "application/json" + } + }); + return response.data; + } catch (error) { + throw error; + } +} +``` + +## Async/Await Best Practices + +Always use async/await for network requests and I/O operations: + +```typescript +// Good: Async network request +async function fetchData(resourceId: string): Promise<ResourceData> { + const response = await axios.get(`${API_URL}/resource/${resourceId}`); + return response.data; +} + +// Bad: Promise chains +function fetchData(resourceId: string): Promise<ResourceData> { + return axios.get(`${API_URL}/resource/${resourceId}`) + .then(response => response.data); // Harder to read and maintain +} +``` + +## TypeScript Best Practices + +1. **Use Strict TypeScript**: Enable strict mode in tsconfig.json +2. **Define Interfaces**: Create clear interface definitions for all data structures +3. **Avoid `any`**: Use proper types or `unknown` instead of `any` +4. **Zod for Runtime Validation**: Use Zod schemas to validate external data +5. **Type Guards**: Create type guard functions for complex type checking +6. **Error Handling**: Always use try-catch with proper error type checking +7. **Null Safety**: Use optional chaining (`?.`) and nullish coalescing (`??`) + +```typescript +// Good: Type-safe with Zod and interfaces +interface UserResponse { + id: string; + name: string; + email: string; + team?: string; + active: boolean; +} + +const UserSchema = z.object({ + id: z.string(), + name: z.string(), + email: z.string().email(), + team: z.string().optional(), + active: z.boolean() +}); + +type User = z.infer<typeof UserSchema>; + +async function getUser(id: string): Promise<User> { + const data = await apiCall(`/users/${id}`); + return UserSchema.parse(data); // Runtime validation +} + +// Bad: Using any +async function getUser(id: string): Promise<any> { + return await apiCall(`/users/${id}`); // No type safety +} +``` + +## Package Configuration + +### package.json + +```json +{ + "name": "{service}-mcp-server", + "version": "1.0.0", + "description": "MCP server for {Service} API integration", + "type": "module", + "main": "dist/index.js", + "scripts": { + "start": "node dist/index.js", + "dev": "tsx watch src/index.ts", + "build": "tsc", + "clean": "rm -rf dist" + }, + "engines": { + "node": ">=18" + }, + "dependencies": { + "@modelcontextprotocol/sdk": "^1.6.1", + "axios": "^1.7.9", + "zod": "^3.23.8" + }, + "devDependencies": { + "@types/node": "^22.10.0", + "tsx": "^4.19.2", + "typescript": "^5.7.2" + } +} +``` + +### tsconfig.json + +```json +{ + "compilerOptions": { + "target": "ES2022", + "module": "Node16", + "moduleResolution": "Node16", + "lib": ["ES2022"], + "outDir": "./dist", + "rootDir": "./src", + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "declaration": true, + "declarationMap": true, + "sourceMap": true, + "allowSyntheticDefaultImports": true + }, + "include": ["src/**/*"], + "exclude": ["node_modules", "dist"] +} +``` + +## Complete Example + +```typescript +#!/usr/bin/env node +/** + * MCP Server for Example Service. + * + * This server provides tools to interact with Example API, including user search, + * project management, and data export capabilities. + */ + +import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; +import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"; +import { z } from "zod"; +import axios, { AxiosError } from "axios"; + +// Constants +const API_BASE_URL = "https://api.example.com/v1"; +const CHARACTER_LIMIT = 25000; + +// Enums +enum ResponseFormat { + MARKDOWN = "markdown", + JSON = "json" +} + +// Zod schemas +const UserSearchInputSchema = z.object({ + query: z.string() + .min(2, "Query must be at least 2 characters") + .max(200, "Query must not exceed 200 characters") + .describe("Search string to match against names/emails"), + limit: z.number() + .int() + .min(1) + .max(100) + .default(20) + .describe("Maximum results to return"), + offset: z.number() + .int() + .min(0) + .default(0) + .describe("Number of results to skip for pagination"), + response_format: z.nativeEnum(ResponseFormat) + .default(ResponseFormat.MARKDOWN) + .describe("Output format: 'markdown' for human-readable or 'json' for machine-readable") +}).strict(); + +type UserSearchInput = z.infer<typeof UserSearchInputSchema>; + +// Shared utility functions +async function makeApiRequest<T>( + endpoint: string, + method: "GET" | "POST" | "PUT" | "DELETE" = "GET", + data?: any, + params?: any +): Promise<T> { + try { + const response = await axios({ + method, + url: `${API_BASE_URL}/${endpoint}`, + data, + params, + timeout: 30000, + headers: { + "Content-Type": "application/json", + "Accept": "application/json" + } + }); + return response.data; + } catch (error) { + throw error; + } +} + +function handleApiError(error: unknown): string { + if (error instanceof AxiosError) { + if (error.response) { + switch (error.response.status) { + case 404: + return "Error: Resource not found. Please check the ID is correct."; + case 403: + return "Error: Permission denied. You don't have access to this resource."; + case 429: + return "Error: Rate limit exceeded. Please wait before making more requests."; + default: + return `Error: API request failed with status ${error.response.status}`; + } + } else if (error.code === "ECONNABORTED") { + return "Error: Request timed out. Please try again."; + } + } + return `Error: Unexpected error occurred: ${error instanceof Error ? error.message : String(error)}`; +} + +// Create MCP server instance +const server = new McpServer({ + name: "example-mcp", + version: "1.0.0" +}); + +// Register tools +server.registerTool( + "example_search_users", + { + title: "Search Example Users", + description: `[Full description as shown above]`, + inputSchema: UserSearchInputSchema, + annotations: { + readOnlyHint: true, + destructiveHint: false, + idempotentHint: true, + openWorldHint: true + } + }, + async (params: UserSearchInput) => { + // Implementation as shown above + } +); + +// Main function +async function main() { + // Verify environment variables if needed + if (!process.env.EXAMPLE_API_KEY) { + console.error("ERROR: EXAMPLE_API_KEY environment variable is required"); + process.exit(1); + } + + // Create transport + const transport = new StdioServerTransport(); + + // Connect server to transport + await server.connect(transport); + + console.error("Example MCP server running via stdio"); +} + +// Run the server +main().catch((error) => { + console.error("Server error:", error); + process.exit(1); +}); +``` + +--- + +## Advanced MCP Features + +### Resource Registration + +Expose data as resources for efficient, URI-based access: + +```typescript +import { ResourceTemplate } from "@modelcontextprotocol/sdk/types.js"; + +// Register a resource with URI template +server.registerResource( + { + uri: "file://documents/{name}", + name: "Document Resource", + description: "Access documents by name", + mimeType: "text/plain" + }, + async (uri: string) => { + // Extract parameter from URI + const match = uri.match(/^file:\/\/documents\/(.+)$/); + if (!match) { + throw new Error("Invalid URI format"); + } + + const documentName = match[1]; + const content = await loadDocument(documentName); + + return { + contents: [{ + uri, + mimeType: "text/plain", + text: content + }] + }; + } +); + +// List available resources dynamically +server.registerResourceList(async () => { + const documents = await getAvailableDocuments(); + return { + resources: documents.map(doc => ({ + uri: `file://documents/${doc.name}`, + name: doc.name, + mimeType: "text/plain", + description: doc.description + })) + }; +}); +``` + +**When to use Resources vs Tools:** +- **Resources**: For data access with simple URI-based parameters +- **Tools**: For complex operations requiring validation and business logic +- **Resources**: When data is relatively static or template-based +- **Tools**: When operations have side effects or complex workflows + +### Multiple Transport Options + +The TypeScript SDK supports different transport mechanisms: + +```typescript +import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"; +import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js"; + +// Stdio transport (default - for CLI tools) +const stdioTransport = new StdioServerTransport(); +await server.connect(stdioTransport); + +// SSE transport (for real-time web updates) +const sseTransport = new SSEServerTransport("/message", response); +await server.connect(sseTransport); + +// HTTP transport (for web services) +// Configure based on your HTTP framework integration +``` + +**Transport selection guide:** +- **Stdio**: Command-line tools, subprocess integration, local development +- **HTTP**: Web services, remote access, multiple simultaneous clients +- **SSE**: Real-time updates, server-push notifications, web dashboards + +### Notification Support + +Notify clients when server state changes: + +```typescript +// Notify when tools list changes +server.notification({ + method: "notifications/tools/list_changed" +}); + +// Notify when resources change +server.notification({ + method: "notifications/resources/list_changed" +}); +``` + +Use notifications sparingly - only when server capabilities genuinely change. + +--- + +## Code Best Practices + +### Code Composability and Reusability + +Your implementation MUST prioritize composability and code reuse: + +1. **Extract Common Functionality**: + - Create reusable helper functions for operations used across multiple tools + - Build shared API clients for HTTP requests instead of duplicating code + - Centralize error handling logic in utility functions + - Extract business logic into dedicated functions that can be composed + - Extract shared markdown or JSON field selection & formatting functionality + +2. **Avoid Duplication**: + - NEVER copy-paste similar code between tools + - If you find yourself writing similar logic twice, extract it into a function + - Common operations like pagination, filtering, field selection, and formatting should be shared + - Authentication/authorization logic should be centralized + +## Building and Running + +Always build your TypeScript code before running: + +```bash +# Build the project +npm run build + +# Run the server +npm start + +# Development with auto-reload +npm run dev +``` + +Always ensure `npm run build` completes successfully before considering the implementation complete. + +## Quality Checklist + +Before finalizing your Node/TypeScript MCP server implementation, ensure: + +### Strategic Design +- [ ] Tools enable complete workflows, not just API endpoint wrappers +- [ ] Tool names reflect natural task subdivisions +- [ ] Response formats optimize for agent context efficiency +- [ ] Human-readable identifiers used where appropriate +- [ ] Error messages guide agents toward correct usage + +### Implementation Quality +- [ ] FOCUSED IMPLEMENTATION: Most important and valuable tools implemented +- [ ] All tools registered using `registerTool` with complete configuration +- [ ] All tools include `title`, `description`, `inputSchema`, and `annotations` +- [ ] Annotations correctly set (readOnlyHint, destructiveHint, idempotentHint, openWorldHint) +- [ ] All tools use Zod schemas for runtime input validation with `.strict()` enforcement +- [ ] All Zod schemas have proper constraints and descriptive error messages +- [ ] All tools have comprehensive descriptions with explicit input/output types +- [ ] Descriptions include return value examples and complete schema documentation +- [ ] Error messages are clear, actionable, and educational + +### TypeScript Quality +- [ ] TypeScript interfaces are defined for all data structures +- [ ] Strict TypeScript is enabled in tsconfig.json +- [ ] No use of `any` type - use `unknown` or proper types instead +- [ ] All async functions have explicit Promise<T> return types +- [ ] Error handling uses proper type guards (e.g., `axios.isAxiosError`, `z.ZodError`) + +### Advanced Features (where applicable) +- [ ] Resources registered for appropriate data endpoints +- [ ] Appropriate transport configured (stdio, HTTP, SSE) +- [ ] Notifications implemented for dynamic server capabilities +- [ ] Type-safe with SDK interfaces + +### Project Configuration +- [ ] Package.json includes all necessary dependencies +- [ ] Build script produces working JavaScript in dist/ directory +- [ ] Main entry point is properly configured as dist/index.js +- [ ] Server name follows format: `{service}-mcp-server` +- [ ] tsconfig.json properly configured with strict mode + +### Code Quality +- [ ] Pagination is properly implemented where applicable +- [ ] Large responses check CHARACTER_LIMIT constant and truncate with clear messages +- [ ] Filtering options are provided for potentially large result sets +- [ ] All network operations handle timeouts and connection errors gracefully +- [ ] Common functionality is extracted into reusable functions +- [ ] Return types are consistent across similar operations + +### Testing and Build +- [ ] `npm run build` completes successfully without errors +- [ ] dist/index.js created and executable +- [ ] Server runs: `node dist/index.js --help` +- [ ] All imports resolve correctly +- [ ] Sample tool calls work as expected \ No newline at end of file diff --git a/skills/mcp-builder/reference/python_mcp_server.md b/skills/mcp-builder/reference/python_mcp_server.md new file mode 100644 index 0000000..38fa3a1 --- /dev/null +++ b/skills/mcp-builder/reference/python_mcp_server.md @@ -0,0 +1,752 @@ +# Python MCP Server Implementation Guide + +## Overview + +This document provides Python-specific best practices and examples for implementing MCP servers using the MCP Python SDK. It covers server setup, tool registration patterns, input validation with Pydantic, error handling, and complete working examples. + +--- + +## Quick Reference + +### Key Imports +```python +from mcp.server.fastmcp import FastMCP +from pydantic import BaseModel, Field, field_validator, ConfigDict +from typing import Optional, List, Dict, Any +from enum import Enum +import httpx +``` + +### Server Initialization +```python +mcp = FastMCP("service_mcp") +``` + +### Tool Registration Pattern +```python +@mcp.tool(name="tool_name", annotations={...}) +async def tool_function(params: InputModel) -> str: + # Implementation + pass +``` + +--- + +## MCP Python SDK and FastMCP + +The official MCP Python SDK provides FastMCP, a high-level framework for building MCP servers. It provides: +- Automatic description and inputSchema generation from function signatures and docstrings +- Pydantic model integration for input validation +- Decorator-based tool registration with `@mcp.tool` + +**For complete SDK documentation, use WebFetch to load:** +`https://raw.githubusercontent.com/modelcontextprotocol/python-sdk/main/README.md` + +## Server Naming Convention + +Python MCP servers must follow this naming pattern: +- **Format**: `{service}_mcp` (lowercase with underscores) +- **Examples**: `github_mcp`, `jira_mcp`, `stripe_mcp` + +The name should be: +- General (not tied to specific features) +- Descriptive of the service/API being integrated +- Easy to infer from the task description +- Without version numbers or dates + +## Tool Implementation + +### Tool Naming + +Use snake_case for tool names (e.g., "search_users", "create_project", "get_channel_info") with clear, action-oriented names. + +**Avoid Naming Conflicts**: Include the service context to prevent overlaps: +- Use "slack_send_message" instead of just "send_message" +- Use "github_create_issue" instead of just "create_issue" +- Use "asana_list_tasks" instead of just "list_tasks" + +### Tool Structure with FastMCP + +Tools are defined using the `@mcp.tool` decorator with Pydantic models for input validation: + +```python +from pydantic import BaseModel, Field, ConfigDict +from mcp.server.fastmcp import FastMCP + +# Initialize the MCP server +mcp = FastMCP("example_mcp") + +# Define Pydantic model for input validation +class ServiceToolInput(BaseModel): + '''Input model for service tool operation.''' + model_config = ConfigDict( + str_strip_whitespace=True, # Auto-strip whitespace from strings + validate_assignment=True, # Validate on assignment + extra='forbid' # Forbid extra fields + ) + + param1: str = Field(..., description="First parameter description (e.g., 'user123', 'project-abc')", min_length=1, max_length=100) + param2: Optional[int] = Field(default=None, description="Optional integer parameter with constraints", ge=0, le=1000) + tags: Optional[List[str]] = Field(default_factory=list, description="List of tags to apply", max_items=10) + +@mcp.tool( + name="service_tool_name", + annotations={ + "title": "Human-Readable Tool Title", + "readOnlyHint": True, # Tool does not modify environment + "destructiveHint": False, # Tool does not perform destructive operations + "idempotentHint": True, # Repeated calls have no additional effect + "openWorldHint": False # Tool does not interact with external entities + } +) +async def service_tool_name(params: ServiceToolInput) -> str: + '''Tool description automatically becomes the 'description' field. + + This tool performs a specific operation on the service. It validates all inputs + using the ServiceToolInput Pydantic model before processing. + + Args: + params (ServiceToolInput): Validated input parameters containing: + - param1 (str): First parameter description + - param2 (Optional[int]): Optional parameter with default + - tags (Optional[List[str]]): List of tags + + Returns: + str: JSON-formatted response containing operation results + ''' + # Implementation here + pass +``` + +## Pydantic v2 Key Features + +- Use `model_config` instead of nested `Config` class +- Use `field_validator` instead of deprecated `validator` +- Use `model_dump()` instead of deprecated `dict()` +- Validators require `@classmethod` decorator +- Type hints are required for validator methods + +```python +from pydantic import BaseModel, Field, field_validator, ConfigDict + +class CreateUserInput(BaseModel): + model_config = ConfigDict( + str_strip_whitespace=True, + validate_assignment=True + ) + + name: str = Field(..., description="User's full name", min_length=1, max_length=100) + email: str = Field(..., description="User's email address", pattern=r'^[\w\.-]+@[\w\.-]+\.\w+$') + age: int = Field(..., description="User's age", ge=0, le=150) + + @field_validator('email') + @classmethod + def validate_email(cls, v: str) -> str: + if not v.strip(): + raise ValueError("Email cannot be empty") + return v.lower() +``` + +## Response Format Options + +Support multiple output formats for flexibility: + +```python +from enum import Enum + +class ResponseFormat(str, Enum): + '''Output format for tool responses.''' + MARKDOWN = "markdown" + JSON = "json" + +class UserSearchInput(BaseModel): + query: str = Field(..., description="Search query") + response_format: ResponseFormat = Field( + default=ResponseFormat.MARKDOWN, + description="Output format: 'markdown' for human-readable or 'json' for machine-readable" + ) +``` + +**Markdown format**: +- Use headers, lists, and formatting for clarity +- Convert timestamps to human-readable format (e.g., "2024-01-15 10:30:00 UTC" instead of epoch) +- Show display names with IDs in parentheses (e.g., "@john.doe (U123456)") +- Omit verbose metadata (e.g., show only one profile image URL, not all sizes) +- Group related information logically + +**JSON format**: +- Return complete, structured data suitable for programmatic processing +- Include all available fields and metadata +- Use consistent field names and types + +## Pagination Implementation + +For tools that list resources: + +```python +class ListInput(BaseModel): + limit: Optional[int] = Field(default=20, description="Maximum results to return", ge=1, le=100) + offset: Optional[int] = Field(default=0, description="Number of results to skip for pagination", ge=0) + +async def list_items(params: ListInput) -> str: + # Make API request with pagination + data = await api_request(limit=params.limit, offset=params.offset) + + # Return pagination info + response = { + "total": data["total"], + "count": len(data["items"]), + "offset": params.offset, + "items": data["items"], + "has_more": data["total"] > params.offset + len(data["items"]), + "next_offset": params.offset + len(data["items"]) if data["total"] > params.offset + len(data["items"]) else None + } + return json.dumps(response, indent=2) +``` + +## Character Limits and Truncation + +Add a CHARACTER_LIMIT constant to prevent overwhelming responses: + +```python +# At module level +CHARACTER_LIMIT = 25000 # Maximum response size in characters + +async def search_tool(params: SearchInput) -> str: + result = generate_response(data) + + # Check character limit and truncate if needed + if len(result) > CHARACTER_LIMIT: + # Truncate data and add notice + truncated_data = data[:max(1, len(data) // 2)] + response["data"] = truncated_data + response["truncated"] = True + response["truncation_message"] = ( + f"Response truncated from {len(data)} to {len(truncated_data)} items. " + f"Use 'offset' parameter or add filters to see more results." + ) + result = json.dumps(response, indent=2) + + return result +``` + +## Error Handling + +Provide clear, actionable error messages: + +```python +def _handle_api_error(e: Exception) -> str: + '''Consistent error formatting across all tools.''' + if isinstance(e, httpx.HTTPStatusError): + if e.response.status_code == 404: + return "Error: Resource not found. Please check the ID is correct." + elif e.response.status_code == 403: + return "Error: Permission denied. You don't have access to this resource." + elif e.response.status_code == 429: + return "Error: Rate limit exceeded. Please wait before making more requests." + return f"Error: API request failed with status {e.response.status_code}" + elif isinstance(e, httpx.TimeoutException): + return "Error: Request timed out. Please try again." + return f"Error: Unexpected error occurred: {type(e).__name__}" +``` + +## Shared Utilities + +Extract common functionality into reusable functions: + +```python +# Shared API request function +async def _make_api_request(endpoint: str, method: str = "GET", **kwargs) -> dict: + '''Reusable function for all API calls.''' + async with httpx.AsyncClient() as client: + response = await client.request( + method, + f"{API_BASE_URL}/{endpoint}", + timeout=30.0, + **kwargs + ) + response.raise_for_status() + return response.json() +``` + +## Async/Await Best Practices + +Always use async/await for network requests and I/O operations: + +```python +# Good: Async network request +async def fetch_data(resource_id: str) -> dict: + async with httpx.AsyncClient() as client: + response = await client.get(f"{API_URL}/resource/{resource_id}") + response.raise_for_status() + return response.json() + +# Bad: Synchronous request +def fetch_data(resource_id: str) -> dict: + response = requests.get(f"{API_URL}/resource/{resource_id}") # Blocks + return response.json() +``` + +## Type Hints + +Use type hints throughout: + +```python +from typing import Optional, List, Dict, Any + +async def get_user(user_id: str) -> Dict[str, Any]: + data = await fetch_user(user_id) + return {"id": data["id"], "name": data["name"]} +``` + +## Tool Docstrings + +Every tool must have comprehensive docstrings with explicit type information: + +```python +async def search_users(params: UserSearchInput) -> str: + ''' + Search for users in the Example system by name, email, or team. + + This tool searches across all user profiles in the Example platform, + supporting partial matches and various search filters. It does NOT + create or modify users, only searches existing ones. + + Args: + params (UserSearchInput): Validated input parameters containing: + - query (str): Search string to match against names/emails (e.g., "john", "@example.com", "team:marketing") + - limit (Optional[int]): Maximum results to return, between 1-100 (default: 20) + - offset (Optional[int]): Number of results to skip for pagination (default: 0) + + Returns: + str: JSON-formatted string containing search results with the following schema: + + Success response: + { + "total": int, # Total number of matches found + "count": int, # Number of results in this response + "offset": int, # Current pagination offset + "users": [ + { + "id": str, # User ID (e.g., "U123456789") + "name": str, # Full name (e.g., "John Doe") + "email": str, # Email address (e.g., "john@example.com") + "team": str # Team name (e.g., "Marketing") - optional + } + ] + } + + Error response: + "Error: <error message>" or "No users found matching '<query>'" + + Examples: + - Use when: "Find all marketing team members" -> params with query="team:marketing" + - Use when: "Search for John's account" -> params with query="john" + - Don't use when: You need to create a user (use example_create_user instead) + - Don't use when: You have a user ID and need full details (use example_get_user instead) + + Error Handling: + - Input validation errors are handled by Pydantic model + - Returns "Error: Rate limit exceeded" if too many requests (429 status) + - Returns "Error: Invalid API authentication" if API key is invalid (401 status) + - Returns formatted list of results or "No users found matching 'query'" + ''' +``` + +## Complete Example + +See below for a complete Python MCP server example: + +```python +#!/usr/bin/env python3 +''' +MCP Server for Example Service. + +This server provides tools to interact with Example API, including user search, +project management, and data export capabilities. +''' + +from typing import Optional, List, Dict, Any +from enum import Enum +import httpx +from pydantic import BaseModel, Field, field_validator, ConfigDict +from mcp.server.fastmcp import FastMCP + +# Initialize the MCP server +mcp = FastMCP("example_mcp") + +# Constants +API_BASE_URL = "https://api.example.com/v1" +CHARACTER_LIMIT = 25000 # Maximum response size in characters + +# Enums +class ResponseFormat(str, Enum): + '''Output format for tool responses.''' + MARKDOWN = "markdown" + JSON = "json" + +# Pydantic Models for Input Validation +class UserSearchInput(BaseModel): + '''Input model for user search operations.''' + model_config = ConfigDict( + str_strip_whitespace=True, + validate_assignment=True + ) + + query: str = Field(..., description="Search string to match against names/emails", min_length=2, max_length=200) + limit: Optional[int] = Field(default=20, description="Maximum results to return", ge=1, le=100) + offset: Optional[int] = Field(default=0, description="Number of results to skip for pagination", ge=0) + response_format: ResponseFormat = Field(default=ResponseFormat.MARKDOWN, description="Output format") + + @field_validator('query') + @classmethod + def validate_query(cls, v: str) -> str: + if not v.strip(): + raise ValueError("Query cannot be empty or whitespace only") + return v.strip() + +# Shared utility functions +async def _make_api_request(endpoint: str, method: str = "GET", **kwargs) -> dict: + '''Reusable function for all API calls.''' + async with httpx.AsyncClient() as client: + response = await client.request( + method, + f"{API_BASE_URL}/{endpoint}", + timeout=30.0, + **kwargs + ) + response.raise_for_status() + return response.json() + +def _handle_api_error(e: Exception) -> str: + '''Consistent error formatting across all tools.''' + if isinstance(e, httpx.HTTPStatusError): + if e.response.status_code == 404: + return "Error: Resource not found. Please check the ID is correct." + elif e.response.status_code == 403: + return "Error: Permission denied. You don't have access to this resource." + elif e.response.status_code == 429: + return "Error: Rate limit exceeded. Please wait before making more requests." + return f"Error: API request failed with status {e.response.status_code}" + elif isinstance(e, httpx.TimeoutException): + return "Error: Request timed out. Please try again." + return f"Error: Unexpected error occurred: {type(e).__name__}" + +# Tool definitions +@mcp.tool( + name="example_search_users", + annotations={ + "title": "Search Example Users", + "readOnlyHint": True, + "destructiveHint": False, + "idempotentHint": True, + "openWorldHint": True + } +) +async def example_search_users(params: UserSearchInput) -> str: + '''Search for users in the Example system by name, email, or team. + + [Full docstring as shown above] + ''' + try: + # Make API request using validated parameters + data = await _make_api_request( + "users/search", + params={ + "q": params.query, + "limit": params.limit, + "offset": params.offset + } + ) + + users = data.get("users", []) + total = data.get("total", 0) + + if not users: + return f"No users found matching '{params.query}'" + + # Format response based on requested format + if params.response_format == ResponseFormat.MARKDOWN: + lines = [f"# User Search Results: '{params.query}'", ""] + lines.append(f"Found {total} users (showing {len(users)})") + lines.append("") + + for user in users: + lines.append(f"## {user['name']} ({user['id']})") + lines.append(f"- **Email**: {user['email']}") + if user.get('team'): + lines.append(f"- **Team**: {user['team']}") + lines.append("") + + return "\n".join(lines) + + else: + # Machine-readable JSON format + import json + response = { + "total": total, + "count": len(users), + "offset": params.offset, + "users": users + } + return json.dumps(response, indent=2) + + except Exception as e: + return _handle_api_error(e) + +if __name__ == "__main__": + mcp.run() +``` + +--- + +## Advanced FastMCP Features + +### Context Parameter Injection + +FastMCP can automatically inject a `Context` parameter into tools for advanced capabilities like logging, progress reporting, resource reading, and user interaction: + +```python +from mcp.server.fastmcp import FastMCP, Context + +mcp = FastMCP("example_mcp") + +@mcp.tool() +async def advanced_search(query: str, ctx: Context) -> str: + '''Advanced tool with context access for logging and progress.''' + + # Report progress for long operations + await ctx.report_progress(0.25, "Starting search...") + + # Log information for debugging + await ctx.log_info("Processing query", {"query": query, "timestamp": datetime.now()}) + + # Perform search + results = await search_api(query) + await ctx.report_progress(0.75, "Formatting results...") + + # Access server configuration + server_name = ctx.fastmcp.name + + return format_results(results) + +@mcp.tool() +async def interactive_tool(resource_id: str, ctx: Context) -> str: + '''Tool that can request additional input from users.''' + + # Request sensitive information when needed + api_key = await ctx.elicit( + prompt="Please provide your API key:", + input_type="password" + ) + + # Use the provided key + return await api_call(resource_id, api_key) +``` + +**Context capabilities:** +- `ctx.report_progress(progress, message)` - Report progress for long operations +- `ctx.log_info(message, data)` / `ctx.log_error()` / `ctx.log_debug()` - Logging +- `ctx.elicit(prompt, input_type)` - Request input from users +- `ctx.fastmcp.name` - Access server configuration +- `ctx.read_resource(uri)` - Read MCP resources + +### Resource Registration + +Expose data as resources for efficient, template-based access: + +```python +@mcp.resource("file://documents/{name}") +async def get_document(name: str) -> str: + '''Expose documents as MCP resources. + + Resources are useful for static or semi-static data that doesn't + require complex parameters. They use URI templates for flexible access. + ''' + document_path = f"./docs/{name}" + with open(document_path, "r") as f: + return f.read() + +@mcp.resource("config://settings/{key}") +async def get_setting(key: str, ctx: Context) -> str: + '''Expose configuration as resources with context.''' + settings = await load_settings() + return json.dumps(settings.get(key, {})) +``` + +**When to use Resources vs Tools:** +- **Resources**: For data access with simple parameters (URI templates) +- **Tools**: For complex operations with validation and business logic + +### Structured Output Types + +FastMCP supports multiple return types beyond strings: + +```python +from typing import TypedDict +from dataclasses import dataclass +from pydantic import BaseModel + +# TypedDict for structured returns +class UserData(TypedDict): + id: str + name: str + email: str + +@mcp.tool() +async def get_user_typed(user_id: str) -> UserData: + '''Returns structured data - FastMCP handles serialization.''' + return {"id": user_id, "name": "John Doe", "email": "john@example.com"} + +# Pydantic models for complex validation +class DetailedUser(BaseModel): + id: str + name: str + email: str + created_at: datetime + metadata: Dict[str, Any] + +@mcp.tool() +async def get_user_detailed(user_id: str) -> DetailedUser: + '''Returns Pydantic model - automatically generates schema.''' + user = await fetch_user(user_id) + return DetailedUser(**user) +``` + +### Lifespan Management + +Initialize resources that persist across requests: + +```python +from contextlib import asynccontextmanager + +@asynccontextmanager +async def app_lifespan(): + '''Manage resources that live for the server's lifetime.''' + # Initialize connections, load config, etc. + db = await connect_to_database() + config = load_configuration() + + # Make available to all tools + yield {"db": db, "config": config} + + # Cleanup on shutdown + await db.close() + +mcp = FastMCP("example_mcp", lifespan=app_lifespan) + +@mcp.tool() +async def query_data(query: str, ctx: Context) -> str: + '''Access lifespan resources through context.''' + db = ctx.request_context.lifespan_state["db"] + results = await db.query(query) + return format_results(results) +``` + +### Multiple Transport Options + +FastMCP supports different transport mechanisms: + +```python +# Default: Stdio transport (for CLI tools) +if __name__ == "__main__": + mcp.run() + +# HTTP transport (for web services) +if __name__ == "__main__": + mcp.run(transport="streamable_http", port=8000) + +# SSE transport (for real-time updates) +if __name__ == "__main__": + mcp.run(transport="sse", port=8000) +``` + +**Transport selection:** +- **Stdio**: Command-line tools, subprocess integration +- **HTTP**: Web services, remote access, multiple clients +- **SSE**: Real-time updates, push notifications + +--- + +## Code Best Practices + +### Code Composability and Reusability + +Your implementation MUST prioritize composability and code reuse: + +1. **Extract Common Functionality**: + - Create reusable helper functions for operations used across multiple tools + - Build shared API clients for HTTP requests instead of duplicating code + - Centralize error handling logic in utility functions + - Extract business logic into dedicated functions that can be composed + - Extract shared markdown or JSON field selection & formatting functionality + +2. **Avoid Duplication**: + - NEVER copy-paste similar code between tools + - If you find yourself writing similar logic twice, extract it into a function + - Common operations like pagination, filtering, field selection, and formatting should be shared + - Authentication/authorization logic should be centralized + +### Python-Specific Best Practices + +1. **Use Type Hints**: Always include type annotations for function parameters and return values +2. **Pydantic Models**: Define clear Pydantic models for all input validation +3. **Avoid Manual Validation**: Let Pydantic handle input validation with constraints +4. **Proper Imports**: Group imports (standard library, third-party, local) +5. **Error Handling**: Use specific exception types (httpx.HTTPStatusError, not generic Exception) +6. **Async Context Managers**: Use `async with` for resources that need cleanup +7. **Constants**: Define module-level constants in UPPER_CASE + +## Quality Checklist + +Before finalizing your Python MCP server implementation, ensure: + +### Strategic Design +- [ ] Tools enable complete workflows, not just API endpoint wrappers +- [ ] Tool names reflect natural task subdivisions +- [ ] Response formats optimize for agent context efficiency +- [ ] Human-readable identifiers used where appropriate +- [ ] Error messages guide agents toward correct usage + +### Implementation Quality +- [ ] FOCUSED IMPLEMENTATION: Most important and valuable tools implemented +- [ ] All tools have descriptive names and documentation +- [ ] Return types are consistent across similar operations +- [ ] Error handling is implemented for all external calls +- [ ] Server name follows format: `{service}_mcp` +- [ ] All network operations use async/await +- [ ] Common functionality is extracted into reusable functions +- [ ] Error messages are clear, actionable, and educational +- [ ] Outputs are properly validated and formatted + +### Tool Configuration +- [ ] All tools implement 'name' and 'annotations' in the decorator +- [ ] Annotations correctly set (readOnlyHint, destructiveHint, idempotentHint, openWorldHint) +- [ ] All tools use Pydantic BaseModel for input validation with Field() definitions +- [ ] All Pydantic Fields have explicit types and descriptions with constraints +- [ ] All tools have comprehensive docstrings with explicit input/output types +- [ ] Docstrings include complete schema structure for dict/JSON returns +- [ ] Pydantic models handle input validation (no manual validation needed) + +### Advanced Features (where applicable) +- [ ] Context injection used for logging, progress, or elicitation +- [ ] Resources registered for appropriate data endpoints +- [ ] Lifespan management implemented for persistent connections +- [ ] Structured output types used (TypedDict, Pydantic models) +- [ ] Appropriate transport configured (stdio, HTTP, SSE) + +### Code Quality +- [ ] File includes proper imports including Pydantic imports +- [ ] Pagination is properly implemented where applicable +- [ ] Large responses check CHARACTER_LIMIT and truncate with clear messages +- [ ] Filtering options are provided for potentially large result sets +- [ ] All async functions are properly defined with `async def` +- [ ] HTTP client usage follows async patterns with proper context managers +- [ ] Type hints are used throughout the code +- [ ] Constants are defined at module level in UPPER_CASE + +### Testing +- [ ] Server runs successfully: `python your_server.py --help` +- [ ] All imports resolve correctly +- [ ] Sample tool calls work as expected +- [ ] Error scenarios handled gracefully \ No newline at end of file diff --git a/skills/mcp-builder/scripts/connections.py b/skills/mcp-builder/scripts/connections.py new file mode 100644 index 0000000..ffcd0da --- /dev/null +++ b/skills/mcp-builder/scripts/connections.py @@ -0,0 +1,151 @@ +"""Lightweight connection handling for MCP servers.""" + +from abc import ABC, abstractmethod +from contextlib import AsyncExitStack +from typing import Any + +from mcp import ClientSession, StdioServerParameters +from mcp.client.sse import sse_client +from mcp.client.stdio import stdio_client +from mcp.client.streamable_http import streamablehttp_client + + +class MCPConnection(ABC): + """Base class for MCP server connections.""" + + def __init__(self): + self.session = None + self._stack = None + + @abstractmethod + def _create_context(self): + """Create the connection context based on connection type.""" + + async def __aenter__(self): + """Initialize MCP server connection.""" + self._stack = AsyncExitStack() + await self._stack.__aenter__() + + try: + ctx = self._create_context() + result = await self._stack.enter_async_context(ctx) + + if len(result) == 2: + read, write = result + elif len(result) == 3: + read, write, _ = result + else: + raise ValueError(f"Unexpected context result: {result}") + + session_ctx = ClientSession(read, write) + self.session = await self._stack.enter_async_context(session_ctx) + await self.session.initialize() + return self + except BaseException: + await self._stack.__aexit__(None, None, None) + raise + + async def __aexit__(self, exc_type, exc_val, exc_tb): + """Clean up MCP server connection resources.""" + if self._stack: + await self._stack.__aexit__(exc_type, exc_val, exc_tb) + self.session = None + self._stack = None + + async def list_tools(self) -> list[dict[str, Any]]: + """Retrieve available tools from the MCP server.""" + response = await self.session.list_tools() + return [ + { + "name": tool.name, + "description": tool.description, + "input_schema": tool.inputSchema, + } + for tool in response.tools + ] + + async def call_tool(self, tool_name: str, arguments: dict[str, Any]) -> Any: + """Call a tool on the MCP server with provided arguments.""" + result = await self.session.call_tool(tool_name, arguments=arguments) + return result.content + + +class MCPConnectionStdio(MCPConnection): + """MCP connection using standard input/output.""" + + def __init__(self, command: str, args: list[str] = None, env: dict[str, str] = None): + super().__init__() + self.command = command + self.args = args or [] + self.env = env + + def _create_context(self): + return stdio_client( + StdioServerParameters(command=self.command, args=self.args, env=self.env) + ) + + +class MCPConnectionSSE(MCPConnection): + """MCP connection using Server-Sent Events.""" + + def __init__(self, url: str, headers: dict[str, str] = None): + super().__init__() + self.url = url + self.headers = headers or {} + + def _create_context(self): + return sse_client(url=self.url, headers=self.headers) + + +class MCPConnectionHTTP(MCPConnection): + """MCP connection using Streamable HTTP.""" + + def __init__(self, url: str, headers: dict[str, str] = None): + super().__init__() + self.url = url + self.headers = headers or {} + + def _create_context(self): + return streamablehttp_client(url=self.url, headers=self.headers) + + +def create_connection( + transport: str, + command: str = None, + args: list[str] = None, + env: dict[str, str] = None, + url: str = None, + headers: dict[str, str] = None, +) -> MCPConnection: + """Factory function to create the appropriate MCP connection. + + Args: + transport: Connection type ("stdio", "sse", or "http") + command: Command to run (stdio only) + args: Command arguments (stdio only) + env: Environment variables (stdio only) + url: Server URL (sse and http only) + headers: HTTP headers (sse and http only) + + Returns: + MCPConnection instance + """ + transport = transport.lower() + + if transport == "stdio": + if not command: + raise ValueError("Command is required for stdio transport") + return MCPConnectionStdio(command=command, args=args, env=env) + + elif transport == "sse": + if not url: + raise ValueError("URL is required for sse transport") + return MCPConnectionSSE(url=url, headers=headers) + + elif transport in ["http", "streamable_http", "streamable-http"]: + if not url: + raise ValueError("URL is required for http transport") + return MCPConnectionHTTP(url=url, headers=headers) + + else: + raise ValueError(f"Unsupported transport type: {transport}. Use 'stdio', 'sse', or 'http'") diff --git a/skills/mcp-builder/scripts/evaluation.py b/skills/mcp-builder/scripts/evaluation.py new file mode 100644 index 0000000..4177856 --- /dev/null +++ b/skills/mcp-builder/scripts/evaluation.py @@ -0,0 +1,373 @@ +"""MCP Server Evaluation Harness + +This script evaluates MCP servers by running test questions against them using Claude. +""" + +import argparse +import asyncio +import json +import re +import sys +import time +import traceback +import xml.etree.ElementTree as ET +from pathlib import Path +from typing import Any + +from anthropic import Anthropic + +from connections import create_connection + +EVALUATION_PROMPT = """You are an AI assistant with access to tools. + +When given a task, you MUST: +1. Use the available tools to complete the task +2. Provide summary of each step in your approach, wrapped in <summary> tags +3. Provide feedback on the tools provided, wrapped in <feedback> tags +4. Provide your final response, wrapped in <response> tags + +Summary Requirements: +- In your <summary> tags, you must explain: + - The steps you took to complete the task + - Which tools you used, in what order, and why + - The inputs you provided to each tool + - The outputs you received from each tool + - A summary for how you arrived at the response + +Feedback Requirements: +- In your <feedback> tags, provide constructive feedback on the tools: + - Comment on tool names: Are they clear and descriptive? + - Comment on input parameters: Are they well-documented? Are required vs optional parameters clear? + - Comment on descriptions: Do they accurately describe what the tool does? + - Comment on any errors encountered during tool usage: Did the tool fail to execute? Did the tool return too many tokens? + - Identify specific areas for improvement and explain WHY they would help + - Be specific and actionable in your suggestions + +Response Requirements: +- Your response should be concise and directly address what was asked +- Always wrap your final response in <response> tags +- If you cannot solve the task return <response>NOT_FOUND</response> +- For numeric responses, provide just the number +- For IDs, provide just the ID +- For names or text, provide the exact text requested +- Your response should go last""" + + +def parse_evaluation_file(file_path: Path) -> list[dict[str, Any]]: + """Parse XML evaluation file with qa_pair elements.""" + try: + tree = ET.parse(file_path) + root = tree.getroot() + evaluations = [] + + for qa_pair in root.findall(".//qa_pair"): + question_elem = qa_pair.find("question") + answer_elem = qa_pair.find("answer") + + if question_elem is not None and answer_elem is not None: + evaluations.append({ + "question": (question_elem.text or "").strip(), + "answer": (answer_elem.text or "").strip(), + }) + + return evaluations + except Exception as e: + print(f"Error parsing evaluation file {file_path}: {e}") + return [] + + +def extract_xml_content(text: str, tag: str) -> str | None: + """Extract content from XML tags.""" + pattern = rf"<{tag}>(.*?)</{tag}>" + matches = re.findall(pattern, text, re.DOTALL) + return matches[-1].strip() if matches else None + + +async def agent_loop( + client: Anthropic, + model: str, + question: str, + tools: list[dict[str, Any]], + connection: Any, +) -> tuple[str, dict[str, Any]]: + """Run the agent loop with MCP tools.""" + messages = [{"role": "user", "content": question}] + + response = await asyncio.to_thread( + client.messages.create, + model=model, + max_tokens=4096, + system=EVALUATION_PROMPT, + messages=messages, + tools=tools, + ) + + messages.append({"role": "assistant", "content": response.content}) + + tool_metrics = {} + + while response.stop_reason == "tool_use": + tool_use = next(block for block in response.content if block.type == "tool_use") + tool_name = tool_use.name + tool_input = tool_use.input + + tool_start_ts = time.time() + try: + tool_result = await connection.call_tool(tool_name, tool_input) + tool_response = json.dumps(tool_result) if isinstance(tool_result, (dict, list)) else str(tool_result) + except Exception as e: + tool_response = f"Error executing tool {tool_name}: {str(e)}\n" + tool_response += traceback.format_exc() + tool_duration = time.time() - tool_start_ts + + if tool_name not in tool_metrics: + tool_metrics[tool_name] = {"count": 0, "durations": []} + tool_metrics[tool_name]["count"] += 1 + tool_metrics[tool_name]["durations"].append(tool_duration) + + messages.append({ + "role": "user", + "content": [{ + "type": "tool_result", + "tool_use_id": tool_use.id, + "content": tool_response, + }] + }) + + response = await asyncio.to_thread( + client.messages.create, + model=model, + max_tokens=4096, + system=EVALUATION_PROMPT, + messages=messages, + tools=tools, + ) + messages.append({"role": "assistant", "content": response.content}) + + response_text = next( + (block.text for block in response.content if hasattr(block, "text")), + None, + ) + return response_text, tool_metrics + + +async def evaluate_single_task( + client: Anthropic, + model: str, + qa_pair: dict[str, Any], + tools: list[dict[str, Any]], + connection: Any, + task_index: int, +) -> dict[str, Any]: + """Evaluate a single QA pair with the given tools.""" + start_time = time.time() + + print(f"Task {task_index + 1}: Running task with question: {qa_pair['question']}") + response, tool_metrics = await agent_loop(client, model, qa_pair["question"], tools, connection) + + response_value = extract_xml_content(response, "response") + summary = extract_xml_content(response, "summary") + feedback = extract_xml_content(response, "feedback") + + duration_seconds = time.time() - start_time + + return { + "question": qa_pair["question"], + "expected": qa_pair["answer"], + "actual": response_value, + "score": int(response_value == qa_pair["answer"]) if response_value else 0, + "total_duration": duration_seconds, + "tool_calls": tool_metrics, + "num_tool_calls": sum(len(metrics["durations"]) for metrics in tool_metrics.values()), + "summary": summary, + "feedback": feedback, + } + + +REPORT_HEADER = """ +# Evaluation Report + +## Summary + +- **Accuracy**: {correct}/{total} ({accuracy:.1f}%) +- **Average Task Duration**: {average_duration_s:.2f}s +- **Average Tool Calls per Task**: {average_tool_calls:.2f} +- **Total Tool Calls**: {total_tool_calls} + +--- +""" + +TASK_TEMPLATE = """ +### Task {task_num} + +**Question**: {question} +**Ground Truth Answer**: `{expected_answer}` +**Actual Answer**: `{actual_answer}` +**Correct**: {correct_indicator} +**Duration**: {total_duration:.2f}s +**Tool Calls**: {tool_calls} + +**Summary** +{summary} + +**Feedback** +{feedback} + +--- +""" + + +async def run_evaluation( + eval_path: Path, + connection: Any, + model: str = "claude-3-7-sonnet-20250219", +) -> str: + """Run evaluation with MCP server tools.""" + print("🚀 Starting Evaluation") + + client = Anthropic() + + tools = await connection.list_tools() + print(f"📋 Loaded {len(tools)} tools from MCP server") + + qa_pairs = parse_evaluation_file(eval_path) + print(f"📋 Loaded {len(qa_pairs)} evaluation tasks") + + results = [] + for i, qa_pair in enumerate(qa_pairs): + print(f"Processing task {i + 1}/{len(qa_pairs)}") + result = await evaluate_single_task(client, model, qa_pair, tools, connection, i) + results.append(result) + + correct = sum(r["score"] for r in results) + accuracy = (correct / len(results)) * 100 if results else 0 + average_duration_s = sum(r["total_duration"] for r in results) / len(results) if results else 0 + average_tool_calls = sum(r["num_tool_calls"] for r in results) / len(results) if results else 0 + total_tool_calls = sum(r["num_tool_calls"] for r in results) + + report = REPORT_HEADER.format( + correct=correct, + total=len(results), + accuracy=accuracy, + average_duration_s=average_duration_s, + average_tool_calls=average_tool_calls, + total_tool_calls=total_tool_calls, + ) + + report += "".join([ + TASK_TEMPLATE.format( + task_num=i + 1, + question=qa_pair["question"], + expected_answer=qa_pair["answer"], + actual_answer=result["actual"] or "N/A", + correct_indicator="✅" if result["score"] else "❌", + total_duration=result["total_duration"], + tool_calls=json.dumps(result["tool_calls"], indent=2), + summary=result["summary"] or "N/A", + feedback=result["feedback"] or "N/A", + ) + for i, (qa_pair, result) in enumerate(zip(qa_pairs, results)) + ]) + + return report + + +def parse_headers(header_list: list[str]) -> dict[str, str]: + """Parse header strings in format 'Key: Value' into a dictionary.""" + headers = {} + if not header_list: + return headers + + for header in header_list: + if ":" in header: + key, value = header.split(":", 1) + headers[key.strip()] = value.strip() + else: + print(f"Warning: Ignoring malformed header: {header}") + return headers + + +def parse_env_vars(env_list: list[str]) -> dict[str, str]: + """Parse environment variable strings in format 'KEY=VALUE' into a dictionary.""" + env = {} + if not env_list: + return env + + for env_var in env_list: + if "=" in env_var: + key, value = env_var.split("=", 1) + env[key.strip()] = value.strip() + else: + print(f"Warning: Ignoring malformed environment variable: {env_var}") + return env + + +async def main(): + parser = argparse.ArgumentParser( + description="Evaluate MCP servers using test questions", + formatter_class=argparse.RawDescriptionHelpFormatter, + epilog=""" +Examples: + # Evaluate a local stdio MCP server + python evaluation.py -t stdio -c python -a my_server.py eval.xml + + # Evaluate an SSE MCP server + python evaluation.py -t sse -u https://example.com/mcp -H "Authorization: Bearer token" eval.xml + + # Evaluate an HTTP MCP server with custom model + python evaluation.py -t http -u https://example.com/mcp -m claude-3-5-sonnet-20241022 eval.xml + """, + ) + + parser.add_argument("eval_file", type=Path, help="Path to evaluation XML file") + parser.add_argument("-t", "--transport", choices=["stdio", "sse", "http"], default="stdio", help="Transport type (default: stdio)") + parser.add_argument("-m", "--model", default="claude-3-7-sonnet-20250219", help="Claude model to use (default: claude-3-7-sonnet-20250219)") + + stdio_group = parser.add_argument_group("stdio options") + stdio_group.add_argument("-c", "--command", help="Command to run MCP server (stdio only)") + stdio_group.add_argument("-a", "--args", nargs="+", help="Arguments for the command (stdio only)") + stdio_group.add_argument("-e", "--env", nargs="+", help="Environment variables in KEY=VALUE format (stdio only)") + + remote_group = parser.add_argument_group("sse/http options") + remote_group.add_argument("-u", "--url", help="MCP server URL (sse/http only)") + remote_group.add_argument("-H", "--header", nargs="+", dest="headers", help="HTTP headers in 'Key: Value' format (sse/http only)") + + parser.add_argument("-o", "--output", type=Path, help="Output file for evaluation report (default: stdout)") + + args = parser.parse_args() + + if not args.eval_file.exists(): + print(f"Error: Evaluation file not found: {args.eval_file}") + sys.exit(1) + + headers = parse_headers(args.headers) if args.headers else None + env_vars = parse_env_vars(args.env) if args.env else None + + try: + connection = create_connection( + transport=args.transport, + command=args.command, + args=args.args, + env=env_vars, + url=args.url, + headers=headers, + ) + except ValueError as e: + print(f"Error: {e}") + sys.exit(1) + + print(f"🔗 Connecting to MCP server via {args.transport}...") + + async with connection: + print("✅ Connected successfully") + report = await run_evaluation(args.eval_file, connection, args.model) + + if args.output: + args.output.write_text(report) + print(f"\n✅ Report saved to {args.output}") + else: + print("\n" + report) + + +if __name__ == "__main__": + asyncio.run(main()) diff --git a/skills/mcp-builder/scripts/example_evaluation.xml b/skills/mcp-builder/scripts/example_evaluation.xml new file mode 100644 index 0000000..41e4459 --- /dev/null +++ b/skills/mcp-builder/scripts/example_evaluation.xml @@ -0,0 +1,22 @@ +<evaluation> + <qa_pair> + <question>Calculate the compound interest on $10,000 invested at 5% annual interest rate, compounded monthly for 3 years. What is the final amount in dollars (rounded to 2 decimal places)?</question> + <answer>11614.72</answer> + </qa_pair> + <qa_pair> + <question>A projectile is launched at a 45-degree angle with an initial velocity of 50 m/s. Calculate the total distance (in meters) it has traveled from the launch point after 2 seconds, assuming g=9.8 m/s². Round to 2 decimal places.</question> + <answer>87.25</answer> + </qa_pair> + <qa_pair> + <question>A sphere has a volume of 500 cubic meters. Calculate its surface area in square meters. Round to 2 decimal places.</question> + <answer>304.65</answer> + </qa_pair> + <qa_pair> + <question>Calculate the population standard deviation of this dataset: [12, 15, 18, 22, 25, 30, 35]. Round to 2 decimal places.</question> + <answer>7.61</answer> + </qa_pair> + <qa_pair> + <question>Calculate the pH of a solution with a hydrogen ion concentration of 3.5 × 10^-5 M. Round to 2 decimal places.</question> + <answer>4.46</answer> + </qa_pair> +</evaluation> diff --git a/skills/mcp-builder/scripts/requirements.txt b/skills/mcp-builder/scripts/requirements.txt new file mode 100644 index 0000000..e73e5d1 --- /dev/null +++ b/skills/mcp-builder/scripts/requirements.txt @@ -0,0 +1,2 @@ +anthropic>=0.39.0 +mcp>=1.1.0 diff --git a/skills/skill-creator/LICENSE.txt b/skills/skill-creator/LICENSE.txt new file mode 100644 index 0000000..7a4a3ea --- /dev/null +++ b/skills/skill-creator/LICENSE.txt @@ -0,0 +1,202 @@ + + 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/skill-creator/SKILL.md b/skills/skill-creator/SKILL.md new file mode 100644 index 0000000..4069935 --- /dev/null +++ b/skills/skill-creator/SKILL.md @@ -0,0 +1,209 @@ +--- +name: skill-creator +description: Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations. +license: Complete terms in LICENSE.txt +--- + +# Skill Creator + +This skill provides guidance for creating effective skills. + +## About Skills + +Skills are modular, self-contained packages that extend Claude's capabilities by providing +specialized knowledge, workflows, and tools. Think of them as "onboarding guides" for specific +domains or tasks—they transform Claude from a general-purpose agent into a specialized agent +equipped with procedural knowledge that no model can fully possess. + +### What Skills Provide + +1. Specialized workflows - Multi-step procedures for specific domains +2. Tool integrations - Instructions for working with specific file formats or APIs +3. Domain expertise - Company-specific knowledge, schemas, business logic +4. Bundled resources - Scripts, references, and assets for complex and repetitive tasks + +### Anatomy of a Skill + +Every skill consists of a required SKILL.md file and optional bundled resources: + +``` +skill-name/ +├── SKILL.md (required) +│ ├── YAML frontmatter metadata (required) +│ │ ├── name: (required) +│ │ └── description: (required) +│ └── Markdown instructions (required) +└── Bundled Resources (optional) + ├── scripts/ - Executable code (Python/Bash/etc.) + ├── references/ - Documentation intended to be loaded into context as needed + └── assets/ - Files used in output (templates, icons, fonts, etc.) +``` + +#### SKILL.md (required) + +**Metadata Quality:** The `name` and `description` in YAML frontmatter determine when Claude will use the skill. Be specific about what the skill does and when to use it. Use the third-person (e.g. "This skill should be used when..." instead of "Use this skill when..."). + +#### Bundled Resources (optional) + +##### Scripts (`scripts/`) + +Executable code (Python/Bash/etc.) for tasks that require deterministic reliability or are repeatedly rewritten. + +- **When to include**: When the same code is being rewritten repeatedly or deterministic reliability is needed +- **Example**: `scripts/rotate_pdf.py` for PDF rotation tasks +- **Benefits**: Token efficient, deterministic, may be executed without loading into context +- **Note**: Scripts may still need to be read by Claude for patching or environment-specific adjustments + +##### References (`references/`) + +Documentation and reference material intended to be loaded as needed into context to inform Claude's process and thinking. + +- **When to include**: For documentation that Claude should reference while working +- **Examples**: `references/finance.md` for financial schemas, `references/mnda.md` for company NDA template, `references/policies.md` for company policies, `references/api_docs.md` for API specifications +- **Use cases**: Database schemas, API documentation, domain knowledge, company policies, detailed workflow guides +- **Benefits**: Keeps SKILL.md lean, loaded only when Claude determines it's needed +- **Best practice**: If files are large (>10k words), include grep search patterns in SKILL.md +- **Avoid duplication**: Information should live in either SKILL.md or references files, not both. Prefer references files for detailed information unless it's truly core to the skill—this keeps SKILL.md lean while making information discoverable without hogging the context window. Keep only essential procedural instructions and workflow guidance in SKILL.md; move detailed reference material, schemas, and examples to references files. + +##### Assets (`assets/`) + +Files not intended to be loaded into context, but rather used within the output Claude produces. + +- **When to include**: When the skill needs files that will be used in the final output +- **Examples**: `assets/logo.png` for brand assets, `assets/slides.pptx` for PowerPoint templates, `assets/frontend-template/` for HTML/React boilerplate, `assets/font.ttf` for typography +- **Use cases**: Templates, images, icons, boilerplate code, fonts, sample documents that get copied or modified +- **Benefits**: Separates output resources from documentation, enables Claude to use files without loading them into context + +### Progressive Disclosure Design Principle + +Skills use a three-level loading system to manage context efficiently: + +1. **Metadata (name + description)** - Always in context (~100 words) +2. **SKILL.md body** - When skill triggers (<5k words) +3. **Bundled resources** - As needed by Claude (Unlimited*) + +*Unlimited because scripts can be executed without reading into context window. + +## Skill Creation Process + +To create a skill, follow the "Skill Creation Process" in order, skipping steps only if there is a clear reason why they are not applicable. + +### Step 1: Understanding the Skill with Concrete Examples + +Skip this step only when the skill's usage patterns are already clearly understood. It remains valuable even when working with an existing skill. + +To create an effective skill, clearly understand concrete examples of how the skill will be used. This understanding can come from either direct user examples or generated examples that are validated with user feedback. + +For example, when building an image-editor skill, relevant questions include: + +- "What functionality should the image-editor skill support? Editing, rotating, anything else?" +- "Can you give some examples of how this skill would be used?" +- "I can imagine users asking for things like 'Remove the red-eye from this image' or 'Rotate this image'. Are there other ways you imagine this skill being used?" +- "What would a user say that should trigger this skill?" + +To avoid overwhelming users, avoid asking too many questions in a single message. Start with the most important questions and follow up as needed for better effectiveness. + +Conclude this step when there is a clear sense of the functionality the skill should support. + +### Step 2: Planning the Reusable Skill Contents + +To turn concrete examples into an effective skill, analyze each example by: + +1. Considering how to execute on the example from scratch +2. Identifying what scripts, references, and assets would be helpful when executing these workflows repeatedly + +Example: When building a `pdf-editor` skill to handle queries like "Help me rotate this PDF," the analysis shows: + +1. Rotating a PDF requires re-writing the same code each time +2. A `scripts/rotate_pdf.py` script would be helpful to store in the skill + +Example: When designing a `frontend-webapp-builder` skill for queries like "Build me a todo app" or "Build me a dashboard to track my steps," the analysis shows: + +1. Writing a frontend webapp requires the same boilerplate HTML/React each time +2. An `assets/hello-world/` template containing the boilerplate HTML/React project files would be helpful to store in the skill + +Example: When building a `big-query` skill to handle queries like "How many users have logged in today?" the analysis shows: + +1. Querying BigQuery requires re-discovering the table schemas and relationships each time +2. A `references/schema.md` file documenting the table schemas would be helpful to store in the skill + +To establish the skill's contents, analyze each concrete example to create a list of the reusable resources to include: scripts, references, and assets. + +### Step 3: Initializing the Skill + +At this point, it is time to actually create the skill. + +Skip this step only if the skill being developed already exists, and iteration or packaging is needed. In this case, continue to the next step. + +When creating a new skill from scratch, always run the `init_skill.py` script. The script conveniently generates a new template skill directory that automatically includes everything a skill requires, making the skill creation process much more efficient and reliable. + +Usage: + +```bash +scripts/init_skill.py <skill-name> --path <output-directory> +``` + +The script: + +- Creates the skill directory at the specified path +- Generates a SKILL.md template with proper frontmatter and TODO placeholders +- Creates example resource directories: `scripts/`, `references/`, and `assets/` +- Adds example files in each directory that can be customized or deleted + +After initialization, customize or remove the generated SKILL.md and example files as needed. + +### Step 4: Edit the Skill + +When editing the (newly-generated or existing) skill, remember that the skill is being created for another instance of Claude to use. Focus on including information that would be beneficial and non-obvious to Claude. Consider what procedural knowledge, domain-specific details, or reusable assets would help another Claude instance execute these tasks more effectively. + +#### Start with Reusable Skill Contents + +To begin implementation, start with the reusable resources identified above: `scripts/`, `references/`, and `assets/` files. Note that this step may require user input. For example, when implementing a `brand-guidelines` skill, the user may need to provide brand assets or templates to store in `assets/`, or documentation to store in `references/`. + +Also, delete any example files and directories not needed for the skill. The initialization script creates example files in `scripts/`, `references/`, and `assets/` to demonstrate structure, but most skills won't need all of them. + +#### Update SKILL.md + +**Writing Style:** Write the entire skill using **imperative/infinitive form** (verb-first instructions), not second person. Use objective, instructional language (e.g., "To accomplish X, do Y" rather than "You should do X" or "If you need to do X"). This maintains consistency and clarity for AI consumption. + +To complete SKILL.md, answer the following questions: + +1. What is the purpose of the skill, in a few sentences? +2. When should the skill be used? +3. In practice, how should Claude use the skill? All reusable skill contents developed above should be referenced so that Claude knows how to use them. + +### Step 5: Packaging a Skill + +Once the skill is ready, it should be packaged into a distributable zip file that gets shared with the user. The packaging process automatically validates the skill first to ensure it meets all requirements: + +```bash +scripts/package_skill.py <path/to/skill-folder> +``` + +Optional output directory specification: + +```bash +scripts/package_skill.py <path/to/skill-folder> ./dist +``` + +The packaging script will: + +1. **Validate** the skill automatically, checking: + - YAML frontmatter format and required fields + - Skill naming conventions and directory structure + - Description completeness and quality + - File organization and resource references + +2. **Package** the skill if validation passes, creating a zip file named after the skill (e.g., `my-skill.zip`) that includes all files and maintains the proper directory structure for distribution. + +If validation fails, the script will report the errors and exit without creating a package. Fix any validation errors and run the packaging command again. + +### Step 6: Iterate + +After testing the skill, users may request improvements. Often this happens right after using the skill, with fresh context of how the skill performed. + +**Iteration workflow:** +1. Use the skill on real tasks +2. Notice struggles or inefficiencies +3. Identify how SKILL.md or bundled resources should be updated +4. Implement changes and test again diff --git a/skills/skill-creator/scripts/init_skill.py b/skills/skill-creator/scripts/init_skill.py new file mode 100644 index 0000000..329ad4e --- /dev/null +++ b/skills/skill-creator/scripts/init_skill.py @@ -0,0 +1,303 @@ +#!/usr/bin/env python3 +""" +Skill Initializer - Creates a new skill from template + +Usage: + init_skill.py <skill-name> --path <path> + +Examples: + init_skill.py my-new-skill --path skills/public + init_skill.py my-api-helper --path skills/private + init_skill.py custom-skill --path /custom/location +""" + +import sys +from pathlib import Path + + +SKILL_TEMPLATE = """--- +name: {skill_name} +description: [TODO: Complete and informative explanation of what the skill does and when to use it. Include WHEN to use this skill - specific scenarios, file types, or tasks that trigger it.] +--- + +# {skill_title} + +## Overview + +[TODO: 1-2 sentences explaining what this skill enables] + +## Structuring This Skill + +[TODO: Choose the structure that best fits this skill's purpose. Common patterns: + +**1. Workflow-Based** (best for sequential processes) +- Works well when there are clear step-by-step procedures +- Example: DOCX skill with "Workflow Decision Tree" → "Reading" → "Creating" → "Editing" +- Structure: ## Overview → ## Workflow Decision Tree → ## Step 1 → ## Step 2... + +**2. Task-Based** (best for tool collections) +- Works well when the skill offers different operations/capabilities +- Example: PDF skill with "Quick Start" → "Merge PDFs" → "Split PDFs" → "Extract Text" +- Structure: ## Overview → ## Quick Start → ## Task Category 1 → ## Task Category 2... + +**3. Reference/Guidelines** (best for standards or specifications) +- Works well for brand guidelines, coding standards, or requirements +- Example: Brand styling with "Brand Guidelines" → "Colors" → "Typography" → "Features" +- Structure: ## Overview → ## Guidelines → ## Specifications → ## Usage... + +**4. Capabilities-Based** (best for integrated systems) +- Works well when the skill provides multiple interrelated features +- Example: Product Management with "Core Capabilities" → numbered capability list +- Structure: ## Overview → ## Core Capabilities → ### 1. Feature → ### 2. Feature... + +Patterns can be mixed and matched as needed. Most skills combine patterns (e.g., start with task-based, add workflow for complex operations). + +Delete this entire "Structuring This Skill" section when done - it's just guidance.] + +## [TODO: Replace with the first main section based on chosen structure] + +[TODO: Add content here. See examples in existing skills: +- Code samples for technical skills +- Decision trees for complex workflows +- Concrete examples with realistic user requests +- References to scripts/templates/references as needed] + +## Resources + +This skill includes example resource directories that demonstrate how to organize different types of bundled resources: + +### scripts/ +Executable code (Python/Bash/etc.) that can be run directly to perform specific operations. + +**Examples from other skills:** +- PDF skill: `fill_fillable_fields.py`, `extract_form_field_info.py` - utilities for PDF manipulation +- DOCX skill: `document.py`, `utilities.py` - Python modules for document processing + +**Appropriate for:** Python scripts, shell scripts, or any executable code that performs automation, data processing, or specific operations. + +**Note:** Scripts may be executed without loading into context, but can still be read by Claude for patching or environment adjustments. + +### references/ +Documentation and reference material intended to be loaded into context to inform Claude's process and thinking. + +**Examples from other skills:** +- Product management: `communication.md`, `context_building.md` - detailed workflow guides +- BigQuery: API reference documentation and query examples +- Finance: Schema documentation, company policies + +**Appropriate for:** In-depth documentation, API references, database schemas, comprehensive guides, or any detailed information that Claude should reference while working. + +### assets/ +Files not intended to be loaded into context, but rather used within the output Claude produces. + +**Examples from other skills:** +- Brand styling: PowerPoint template files (.pptx), logo files +- Frontend builder: HTML/React boilerplate project directories +- Typography: Font files (.ttf, .woff2) + +**Appropriate for:** Templates, boilerplate code, document templates, images, icons, fonts, or any files meant to be copied or used in the final output. + +--- + +**Any unneeded directories can be deleted.** Not every skill requires all three types of resources. +""" + +EXAMPLE_SCRIPT = '''#!/usr/bin/env python3 +""" +Example helper script for {skill_name} + +This is a placeholder script that can be executed directly. +Replace with actual implementation or delete if not needed. + +Example real scripts from other skills: +- pdf/scripts/fill_fillable_fields.py - Fills PDF form fields +- pdf/scripts/convert_pdf_to_images.py - Converts PDF pages to images +""" + +def main(): + print("This is an example script for {skill_name}") + # TODO: Add actual script logic here + # This could be data processing, file conversion, API calls, etc. + +if __name__ == "__main__": + main() +''' + +EXAMPLE_REFERENCE = """# Reference Documentation for {skill_title} + +This is a placeholder for detailed reference documentation. +Replace with actual reference content or delete if not needed. + +Example real reference docs from other skills: +- product-management/references/communication.md - Comprehensive guide for status updates +- product-management/references/context_building.md - Deep-dive on gathering context +- bigquery/references/ - API references and query examples + +## When Reference Docs Are Useful + +Reference docs are ideal for: +- Comprehensive API documentation +- Detailed workflow guides +- Complex multi-step processes +- Information too lengthy for main SKILL.md +- Content that's only needed for specific use cases + +## Structure Suggestions + +### API Reference Example +- Overview +- Authentication +- Endpoints with examples +- Error codes +- Rate limits + +### Workflow Guide Example +- Prerequisites +- Step-by-step instructions +- Common patterns +- Troubleshooting +- Best practices +""" + +EXAMPLE_ASSET = """# Example Asset File + +This placeholder represents where asset files would be stored. +Replace with actual asset files (templates, images, fonts, etc.) or delete if not needed. + +Asset files are NOT intended to be loaded into context, but rather used within +the output Claude produces. + +Example asset files from other skills: +- Brand guidelines: logo.png, slides_template.pptx +- Frontend builder: hello-world/ directory with HTML/React boilerplate +- Typography: custom-font.ttf, font-family.woff2 +- Data: sample_data.csv, test_dataset.json + +## Common Asset Types + +- Templates: .pptx, .docx, boilerplate directories +- Images: .png, .jpg, .svg, .gif +- Fonts: .ttf, .otf, .woff, .woff2 +- Boilerplate code: Project directories, starter files +- Icons: .ico, .svg +- Data files: .csv, .json, .xml, .yaml + +Note: This is a text placeholder. Actual assets can be any file type. +""" + + +def title_case_skill_name(skill_name): + """Convert hyphenated skill name to Title Case for display.""" + return ' '.join(word.capitalize() for word in skill_name.split('-')) + + +def init_skill(skill_name, path): + """ + Initialize a new skill directory with template SKILL.md. + + Args: + skill_name: Name of the skill + path: Path where the skill directory should be created + + Returns: + Path to created skill directory, or None if error + """ + # Determine skill directory path + skill_dir = Path(path).resolve() / skill_name + + # Check if directory already exists + if skill_dir.exists(): + print(f"❌ Error: Skill directory already exists: {skill_dir}") + return None + + # Create skill directory + try: + skill_dir.mkdir(parents=True, exist_ok=False) + print(f"✅ Created skill directory: {skill_dir}") + except Exception as e: + print(f"❌ Error creating directory: {e}") + return None + + # Create SKILL.md from template + skill_title = title_case_skill_name(skill_name) + skill_content = SKILL_TEMPLATE.format( + skill_name=skill_name, + skill_title=skill_title + ) + + skill_md_path = skill_dir / 'SKILL.md' + try: + skill_md_path.write_text(skill_content) + print("✅ Created SKILL.md") + except Exception as e: + print(f"❌ Error creating SKILL.md: {e}") + return None + + # Create resource directories with example files + try: + # Create scripts/ directory with example script + scripts_dir = skill_dir / 'scripts' + scripts_dir.mkdir(exist_ok=True) + example_script = scripts_dir / 'example.py' + example_script.write_text(EXAMPLE_SCRIPT.format(skill_name=skill_name)) + example_script.chmod(0o755) + print("✅ Created scripts/example.py") + + # Create references/ directory with example reference doc + references_dir = skill_dir / 'references' + references_dir.mkdir(exist_ok=True) + example_reference = references_dir / 'api_reference.md' + example_reference.write_text(EXAMPLE_REFERENCE.format(skill_title=skill_title)) + print("✅ Created references/api_reference.md") + + # Create assets/ directory with example asset placeholder + assets_dir = skill_dir / 'assets' + assets_dir.mkdir(exist_ok=True) + example_asset = assets_dir / 'example_asset.txt' + example_asset.write_text(EXAMPLE_ASSET) + print("✅ Created assets/example_asset.txt") + except Exception as e: + print(f"❌ Error creating resource directories: {e}") + return None + + # Print next steps + print(f"\n✅ Skill '{skill_name}' initialized successfully at {skill_dir}") + print("\nNext steps:") + print("1. Edit SKILL.md to complete the TODO items and update the description") + print("2. Customize or delete the example files in scripts/, references/, and assets/") + print("3. Run the validator when ready to check the skill structure") + + return skill_dir + + +def main(): + if len(sys.argv) < 4 or sys.argv[2] != '--path': + print("Usage: init_skill.py <skill-name> --path <path>") + print("\nSkill name requirements:") + print(" - Hyphen-case identifier (e.g., 'data-analyzer')") + print(" - Lowercase letters, digits, and hyphens only") + print(" - Max 40 characters") + print(" - Must match directory name exactly") + print("\nExamples:") + print(" init_skill.py my-new-skill --path skills/public") + print(" init_skill.py my-api-helper --path skills/private") + print(" init_skill.py custom-skill --path /custom/location") + sys.exit(1) + + skill_name = sys.argv[1] + path = sys.argv[3] + + print(f"🚀 Initializing skill: {skill_name}") + print(f" Location: {path}") + print() + + result = init_skill(skill_name, path) + + if result: + sys.exit(0) + else: + sys.exit(1) + + +if __name__ == "__main__": + main() diff --git a/skills/skill-creator/scripts/package_skill.py b/skills/skill-creator/scripts/package_skill.py new file mode 100644 index 0000000..3ee8e8e --- /dev/null +++ b/skills/skill-creator/scripts/package_skill.py @@ -0,0 +1,110 @@ +#!/usr/bin/env python3 +""" +Skill Packager - Creates a distributable zip file of a skill folder + +Usage: + python utils/package_skill.py <path/to/skill-folder> [output-directory] + +Example: + python utils/package_skill.py skills/public/my-skill + python utils/package_skill.py skills/public/my-skill ./dist +""" + +import sys +import zipfile +from pathlib import Path +from quick_validate import validate_skill + + +def package_skill(skill_path, output_dir=None): + """ + Package a skill folder into a zip file. + + Args: + skill_path: Path to the skill folder + output_dir: Optional output directory for the zip file (defaults to current directory) + + Returns: + Path to the created zip file, or None if error + """ + skill_path = Path(skill_path).resolve() + + # Validate skill folder exists + if not skill_path.exists(): + print(f"❌ Error: Skill folder not found: {skill_path}") + return None + + if not skill_path.is_dir(): + print(f"❌ Error: Path is not a directory: {skill_path}") + return None + + # Validate SKILL.md exists + skill_md = skill_path / "SKILL.md" + if not skill_md.exists(): + print(f"❌ Error: SKILL.md not found in {skill_path}") + return None + + # Run validation before packaging + print("🔍 Validating skill...") + valid, message = validate_skill(skill_path) + if not valid: + print(f"❌ Validation failed: {message}") + print(" Please fix the validation errors before packaging.") + return None + print(f"✅ {message}\n") + + # Determine output location + skill_name = skill_path.name + if output_dir: + output_path = Path(output_dir).resolve() + output_path.mkdir(parents=True, exist_ok=True) + else: + output_path = Path.cwd() + + zip_filename = output_path / f"{skill_name}.zip" + + # Create the zip file + try: + with zipfile.ZipFile(zip_filename, 'w', zipfile.ZIP_DEFLATED) as zipf: + # Walk through the skill directory + for file_path in skill_path.rglob('*'): + if file_path.is_file(): + # Calculate the relative path within the zip + arcname = file_path.relative_to(skill_path.parent) + zipf.write(file_path, arcname) + print(f" Added: {arcname}") + + print(f"\n✅ Successfully packaged skill to: {zip_filename}") + return zip_filename + + except Exception as e: + print(f"❌ Error creating zip file: {e}") + return None + + +def main(): + if len(sys.argv) < 2: + print("Usage: python utils/package_skill.py <path/to/skill-folder> [output-directory]") + print("\nExample:") + print(" python utils/package_skill.py skills/public/my-skill") + print(" python utils/package_skill.py skills/public/my-skill ./dist") + sys.exit(1) + + skill_path = sys.argv[1] + output_dir = sys.argv[2] if len(sys.argv) > 2 else None + + print(f"📦 Packaging skill: {skill_path}") + if output_dir: + print(f" Output directory: {output_dir}") + print() + + result = package_skill(skill_path, output_dir) + + if result: + sys.exit(0) + else: + sys.exit(1) + + +if __name__ == "__main__": + main() diff --git a/skills/skill-creator/scripts/quick_validate.py b/skills/skill-creator/scripts/quick_validate.py new file mode 100644 index 0000000..6fa6c63 --- /dev/null +++ b/skills/skill-creator/scripts/quick_validate.py @@ -0,0 +1,65 @@ +#!/usr/bin/env python3 +""" +Quick validation script for skills - minimal version +""" + +import sys +import os +import re +from pathlib import Path + +def validate_skill(skill_path): + """Basic validation of a skill""" + skill_path = Path(skill_path) + + # Check SKILL.md exists + skill_md = skill_path / 'SKILL.md' + if not skill_md.exists(): + return False, "SKILL.md not found" + + # Read and validate frontmatter + content = skill_md.read_text() + if not content.startswith('---'): + return False, "No YAML frontmatter found" + + # Extract frontmatter + match = re.match(r'^---\n(.*?)\n---', content, re.DOTALL) + if not match: + return False, "Invalid frontmatter format" + + frontmatter = match.group(1) + + # Check required fields + if 'name:' not in frontmatter: + return False, "Missing 'name' in frontmatter" + if 'description:' not in frontmatter: + return False, "Missing 'description' in frontmatter" + + # Extract name for validation + name_match = re.search(r'name:\s*(.+)', frontmatter) + if name_match: + name = name_match.group(1).strip() + # Check naming convention (hyphen-case: lowercase with hyphens) + if not re.match(r'^[a-z0-9-]+$', name): + return False, f"Name '{name}' should be hyphen-case (lowercase letters, digits, and hyphens only)" + if name.startswith('-') or name.endswith('-') or '--' in name: + return False, f"Name '{name}' cannot start/end with hyphen or contain consecutive hyphens" + + # Extract and validate description + desc_match = re.search(r'description:\s*(.+)', frontmatter) + if desc_match: + description = desc_match.group(1).strip() + # Check for angle brackets + if '<' in description or '>' in description: + return False, "Description cannot contain angle brackets (< or >)" + + return True, "Skill is valid!" + +if __name__ == "__main__": + if len(sys.argv) != 2: + print("Usage: python quick_validate.py <skill_directory>") + sys.exit(1) + + valid, message = validate_skill(sys.argv[1]) + print(message) + sys.exit(0 if valid else 1) \ No newline at end of file diff --git a/skills/slack-gif-creator/LICENSE.txt b/skills/slack-gif-creator/LICENSE.txt new file mode 100644 index 0000000..7a4a3ea --- /dev/null +++ b/skills/slack-gif-creator/LICENSE.txt @@ -0,0 +1,202 @@ + + 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/slack-gif-creator/SKILL.md b/skills/slack-gif-creator/SKILL.md new file mode 100644 index 0000000..5b1dcc4 --- /dev/null +++ b/skills/slack-gif-creator/SKILL.md @@ -0,0 +1,646 @@ +--- +name: slack-gif-creator +description: Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives. This skill applies when users request animated GIFs or emoji animations for Slack from descriptions like "make me a GIF for Slack of X doing Y". +license: Complete terms in LICENSE.txt +--- + +# Slack GIF Creator - Flexible Toolkit + +A toolkit for creating animated GIFs optimized for Slack. Provides validators for Slack's constraints, composable animation primitives, and optional helper utilities. **Apply these tools however needed to achieve the creative vision.** + +## Slack's Requirements + +Slack has specific requirements for GIFs based on their use: + +**Message GIFs:** +- Max size: ~2MB +- Optimal dimensions: 480x480 +- Typical FPS: 15-20 +- Color limit: 128-256 +- Duration: 2-5s + +**Emoji GIFs:** +- Max size: 64KB (strict limit) +- Optimal dimensions: 128x128 +- Typical FPS: 10-12 +- Color limit: 32-48 +- Duration: 1-2s + +**Emoji GIFs are challenging** - the 64KB limit is strict. Strategies that help: +- Limit to 10-15 frames total +- Use 32-48 colors maximum +- Keep designs simple +- Avoid gradients +- Validate file size frequently + +## Toolkit Structure + +This skill provides three types of tools: + +1. **Validators** - Check if a GIF meets Slack's requirements +2. **Animation Primitives** - Composable building blocks for motion (shake, bounce, move, kaleidoscope) +3. **Helper Utilities** - Optional functions for common needs (text, colors, effects) + +**Complete creative freedom is available in how these tools are applied.** + +## Core Validators + +To ensure a GIF meets Slack's constraints, use these validators: + +```python +from core.gif_builder import GIFBuilder + +# After creating your GIF, check if it meets requirements +builder = GIFBuilder(width=128, height=128, fps=10) +# ... add your frames however you want ... + +# Save and check size +info = builder.save('emoji.gif', num_colors=48, optimize_for_emoji=True) + +# The save method automatically warns if file exceeds limits +# info dict contains: size_kb, size_mb, frame_count, duration_seconds +``` + +**File size validator**: +```python +from core.validators import check_slack_size + +# Check if GIF meets size limits +passes, info = check_slack_size('emoji.gif', is_emoji=True) +# Returns: (True/False, dict with size details) +``` + +**Dimension validator**: +```python +from core.validators import validate_dimensions + +# Check dimensions +passes, info = validate_dimensions(128, 128, is_emoji=True) +# Returns: (True/False, dict with dimension details) +``` + +**Complete validation**: +```python +from core.validators import validate_gif, is_slack_ready + +# Run all validations +all_pass, results = validate_gif('emoji.gif', is_emoji=True) + +# Or quick check +if is_slack_ready('emoji.gif', is_emoji=True): + print("Ready to upload!") +``` + +## Animation Primitives + +These are composable building blocks for motion. Apply these to any object in any combination: + +### Shake +```python +from templates.shake import create_shake_animation + +# Shake an emoji +frames = create_shake_animation( + object_type='emoji', + object_data={'emoji': '😱', 'size': 80}, + num_frames=20, + shake_intensity=15, + direction='both' # or 'horizontal', 'vertical' +) +``` + +### Bounce +```python +from templates.bounce import create_bounce_animation + +# Bounce a circle +frames = create_bounce_animation( + object_type='circle', + object_data={'radius': 40, 'color': (255, 100, 100)}, + num_frames=30, + bounce_height=150 +) +``` + +### Spin / Rotate +```python +from templates.spin import create_spin_animation, create_loading_spinner + +# Clockwise spin +frames = create_spin_animation( + object_type='emoji', + object_data={'emoji': '🔄', 'size': 100}, + rotation_type='clockwise', + full_rotations=2 +) + +# Wobble rotation +frames = create_spin_animation(rotation_type='wobble', full_rotations=3) + +# Loading spinner +frames = create_loading_spinner(spinner_type='dots') +``` + +### Pulse / Heartbeat +```python +from templates.pulse import create_pulse_animation, create_attention_pulse + +# Smooth pulse +frames = create_pulse_animation( + object_data={'emoji': '❤️', 'size': 100}, + pulse_type='smooth', + scale_range=(0.8, 1.2) +) + +# Heartbeat (double-pump) +frames = create_pulse_animation(pulse_type='heartbeat') + +# Attention pulse for emoji GIFs +frames = create_attention_pulse(emoji='⚠️', num_frames=20) +``` + +### Fade +```python +from templates.fade import create_fade_animation, create_crossfade + +# Fade in +frames = create_fade_animation(fade_type='in') + +# Fade out +frames = create_fade_animation(fade_type='out') + +# Crossfade between two emojis +frames = create_crossfade( + object1_data={'emoji': '😊', 'size': 100}, + object2_data={'emoji': '😂', 'size': 100} +) +``` + +### Zoom +```python +from templates.zoom import create_zoom_animation, create_explosion_zoom + +# Zoom in dramatically +frames = create_zoom_animation( + zoom_type='in', + scale_range=(0.1, 2.0), + add_motion_blur=True +) + +# Zoom out +frames = create_zoom_animation(zoom_type='out') + +# Explosion zoom +frames = create_explosion_zoom(emoji='💥') +``` + +### Explode / Shatter +```python +from templates.explode import create_explode_animation, create_particle_burst + +# Burst explosion +frames = create_explode_animation( + explode_type='burst', + num_pieces=25 +) + +# Shatter effect +frames = create_explode_animation(explode_type='shatter') + +# Dissolve into particles +frames = create_explode_animation(explode_type='dissolve') + +# Particle burst +frames = create_particle_burst(particle_count=30) +``` + +### Wiggle / Jiggle +```python +from templates.wiggle import create_wiggle_animation, create_excited_wiggle + +# Jello wobble +frames = create_wiggle_animation( + wiggle_type='jello', + intensity=1.0, + cycles=2 +) + +# Wave motion +frames = create_wiggle_animation(wiggle_type='wave') + +# Excited wiggle for emoji GIFs +frames = create_excited_wiggle(emoji='🎉') +``` + +### Slide +```python +from templates.slide import create_slide_animation, create_multi_slide + +# Slide in from left with overshoot +frames = create_slide_animation( + direction='left', + slide_type='in', + overshoot=True +) + +# Slide across +frames = create_slide_animation(direction='left', slide_type='across') + +# Multiple objects sliding in sequence +objects = [ + {'data': {'emoji': '🎯', 'size': 60}, 'direction': 'left', 'final_pos': (120, 240)}, + {'data': {'emoji': '🎪', 'size': 60}, 'direction': 'right', 'final_pos': (240, 240)} +] +frames = create_multi_slide(objects, stagger_delay=5) +``` + +### Flip +```python +from templates.flip import create_flip_animation, create_quick_flip + +# Horizontal flip between two emojis +frames = create_flip_animation( + object1_data={'emoji': '😊', 'size': 120}, + object2_data={'emoji': '😂', 'size': 120}, + flip_axis='horizontal' +) + +# Vertical flip +frames = create_flip_animation(flip_axis='vertical') + +# Quick flip for emoji GIFs +frames = create_quick_flip('👍', '👎') +``` + +### Morph / Transform +```python +from templates.morph import create_morph_animation, create_reaction_morph + +# Crossfade morph +frames = create_morph_animation( + object1_data={'emoji': '😊', 'size': 100}, + object2_data={'emoji': '😂', 'size': 100}, + morph_type='crossfade' +) + +# Scale morph (shrink while other grows) +frames = create_morph_animation(morph_type='scale') + +# Spin morph (3D flip-like) +frames = create_morph_animation(morph_type='spin_morph') +``` + +### Move Effect +```python +from templates.move import create_move_animation + +# Linear movement +frames = create_move_animation( + object_type='emoji', + object_data={'emoji': '🚀', 'size': 60}, + start_pos=(50, 240), + end_pos=(430, 240), + motion_type='linear', + easing='ease_out' +) + +# Arc movement (parabolic trajectory) +frames = create_move_animation( + object_type='emoji', + object_data={'emoji': '⚽', 'size': 60}, + start_pos=(50, 350), + end_pos=(430, 350), + motion_type='arc', + motion_params={'arc_height': 150} +) + +# Circular movement +frames = create_move_animation( + object_type='emoji', + object_data={'emoji': '🌍', 'size': 50}, + motion_type='circle', + motion_params={ + 'center': (240, 240), + 'radius': 120, + 'angle_range': 360 # full circle + } +) + +# Wave movement +frames = create_move_animation( + motion_type='wave', + motion_params={ + 'wave_amplitude': 50, + 'wave_frequency': 2 + } +) + +# Or use low-level easing functions +from core.easing import interpolate, calculate_arc_motion + +for i in range(num_frames): + t = i / (num_frames - 1) + x = interpolate(start_x, end_x, t, easing='ease_out') + # Or: x, y = calculate_arc_motion(start, end, height, t) +``` + +### Kaleidoscope Effect +```python +from templates.kaleidoscope import apply_kaleidoscope, create_kaleidoscope_animation + +# Apply to a single frame +kaleido_frame = apply_kaleidoscope(frame, segments=8) + +# Or create animated kaleidoscope +frames = create_kaleidoscope_animation( + base_frame=my_frame, # or None for demo pattern + num_frames=30, + segments=8, + rotation_speed=1.0 +) + +# Simple mirror effects (faster) +from templates.kaleidoscope import apply_simple_mirror + +mirrored = apply_simple_mirror(frame, mode='quad') # 4-way mirror +# modes: 'horizontal', 'vertical', 'quad', 'radial' +``` + +**To compose primitives freely, follow these patterns:** +```python +# Example: Bounce + shake for impact +for i in range(num_frames): + frame = create_blank_frame(480, 480, bg_color) + + # Bounce motion + t_bounce = i / (num_frames - 1) + y = interpolate(start_y, ground_y, t_bounce, 'bounce_out') + + # Add shake on impact (when y reaches ground) + if y >= ground_y - 5: + shake_x = math.sin(i * 2) * 10 + x = center_x + shake_x + else: + x = center_x + + draw_emoji(frame, '⚽', (x, y), size=60) + builder.add_frame(frame) +``` + +## Helper Utilities + +These are optional helpers for common needs. **Use, modify, or replace these with custom implementations as needed.** + +### GIF Builder (Assembly & Optimization) + +```python +from core.gif_builder import GIFBuilder + +# Create builder with your chosen settings +builder = GIFBuilder(width=480, height=480, fps=20) + +# Add frames (however you created them) +for frame in my_frames: + builder.add_frame(frame) + +# Save with optimization +builder.save('output.gif', + num_colors=128, + optimize_for_emoji=False) +``` + +Key features: +- Automatic color quantization +- Duplicate frame removal +- Size warnings for Slack limits +- Emoji mode (aggressive optimization) + +### Text Rendering + +For small GIFs like emojis, text readability is challenging. A common solution involves adding outlines: + +```python +from core.typography import draw_text_with_outline, TYPOGRAPHY_SCALE + +# Text with outline (helps readability) +draw_text_with_outline( + frame, "BONK!", + position=(240, 100), + font_size=TYPOGRAPHY_SCALE['h1'], # 60px + text_color=(255, 68, 68), + outline_color=(0, 0, 0), + outline_width=4, + centered=True +) +``` + +To implement custom text rendering, use PIL's `ImageDraw.text()` which works fine for larger GIFs. + +### Color Management + +Professional-looking GIFs often use cohesive color palettes: + +```python +from core.color_palettes import get_palette + +# Get a pre-made palette +palette = get_palette('vibrant') # or 'pastel', 'dark', 'neon', 'professional' + +bg_color = palette['background'] +text_color = palette['primary'] +accent_color = palette['accent'] +``` + +To work with colors directly, use RGB tuples - whatever works for the use case. + +### Visual Effects + +Optional effects for impact moments: + +```python +from core.visual_effects import ParticleSystem, create_impact_flash, create_shockwave_rings + +# Particle system +particles = ParticleSystem() +particles.emit_sparkles(x=240, y=200, count=15) +particles.emit_confetti(x=240, y=200, count=20) + +# Update and render each frame +particles.update() +particles.render(frame) + +# Flash effect +frame = create_impact_flash(frame, position=(240, 200), radius=100) + +# Shockwave rings +frame = create_shockwave_rings(frame, position=(240, 200), radii=[30, 60, 90]) +``` + +### Easing Functions + +Smooth motion uses easing instead of linear interpolation: + +```python +from core.easing import interpolate + +# Object falling (accelerates) +y = interpolate(start=0, end=400, t=progress, easing='ease_in') + +# Object landing (decelerates) +y = interpolate(start=0, end=400, t=progress, easing='ease_out') + +# Bouncing +y = interpolate(start=0, end=400, t=progress, easing='bounce_out') + +# Overshoot (elastic) +scale = interpolate(start=0.5, end=1.0, t=progress, easing='elastic_out') +``` + +Available easings: `linear`, `ease_in`, `ease_out`, `ease_in_out`, `bounce_out`, `elastic_out`, `back_out` (overshoot), and more in `core/easing.py`. + +### Frame Composition + +Basic drawing utilities if you need them: + +```python +from core.frame_composer import ( + create_gradient_background, # Gradient backgrounds + draw_emoji_enhanced, # Emoji with optional shadow + draw_circle_with_shadow, # Shapes with depth + draw_star # 5-pointed stars +) + +# Gradient background +frame = create_gradient_background(480, 480, top_color, bottom_color) + +# Emoji with shadow +draw_emoji_enhanced(frame, '🎉', position=(200, 200), size=80, shadow=True) +``` + +## Optimization Strategies + +When your GIF is too large: + +**For Message GIFs (>2MB):** +1. Reduce frames (lower FPS or shorter duration) +2. Reduce colors (128 → 64 colors) +3. Reduce dimensions (480x480 → 320x320) +4. Enable duplicate frame removal + +**For Emoji GIFs (>64KB) - be aggressive:** +1. Limit to 10-12 frames total +2. Use 32-40 colors maximum +3. Avoid gradients (solid colors compress better) +4. Simplify design (fewer elements) +5. Use `optimize_for_emoji=True` in save method + +## Example Composition Patterns + +### Simple Reaction (Pulsing) +```python +builder = GIFBuilder(128, 128, 10) + +for i in range(12): + frame = Image.new('RGB', (128, 128), (240, 248, 255)) + + # Pulsing scale + scale = 1.0 + math.sin(i * 0.5) * 0.15 + size = int(60 * scale) + + draw_emoji_enhanced(frame, '😱', position=(64-size//2, 64-size//2), + size=size, shadow=False) + builder.add_frame(frame) + +builder.save('reaction.gif', num_colors=40, optimize_for_emoji=True) + +# Validate +from core.validators import check_slack_size +check_slack_size('reaction.gif', is_emoji=True) +``` + +### Action with Impact (Bounce + Flash) +```python +builder = GIFBuilder(480, 480, 20) + +# Phase 1: Object falls +for i in range(15): + frame = create_gradient_background(480, 480, (240, 248, 255), (200, 230, 255)) + t = i / 14 + y = interpolate(0, 350, t, 'ease_in') + draw_emoji_enhanced(frame, '⚽', position=(220, int(y)), size=80) + builder.add_frame(frame) + +# Phase 2: Impact + flash +for i in range(8): + frame = create_gradient_background(480, 480, (240, 248, 255), (200, 230, 255)) + + # Flash on first frames + if i < 3: + frame = create_impact_flash(frame, (240, 350), radius=120, intensity=0.6) + + draw_emoji_enhanced(frame, '⚽', position=(220, 350), size=80) + + # Text appears + if i > 2: + draw_text_with_outline(frame, "GOAL!", position=(240, 150), + font_size=60, text_color=(255, 68, 68), + outline_color=(0, 0, 0), outline_width=4, centered=True) + + builder.add_frame(frame) + +builder.save('goal.gif', num_colors=128) +``` + +### Combining Primitives (Move + Shake) +```python +from templates.shake import create_shake_animation + +# Create shake animation +shake_frames = create_shake_animation( + object_type='emoji', + object_data={'emoji': '😰', 'size': 70}, + num_frames=20, + shake_intensity=12 +) + +# Create moving element that triggers the shake +builder = GIFBuilder(480, 480, 20) +for i in range(40): + t = i / 39 + + if i < 20: + # Before trigger - use blank frame with moving object + frame = create_blank_frame(480, 480, (255, 255, 255)) + x = interpolate(50, 300, t * 2, 'linear') + draw_emoji_enhanced(frame, '🚗', position=(int(x), 300), size=60) + draw_emoji_enhanced(frame, '😰', position=(350, 200), size=70) + else: + # After trigger - use shake frame + frame = shake_frames[i - 20] + # Add the car in final position + draw_emoji_enhanced(frame, '🚗', position=(300, 300), size=60) + + builder.add_frame(frame) + +builder.save('scare.gif') +``` + +## Philosophy + +This toolkit provides building blocks, not rigid recipes. To work with a GIF request: + +1. **Understand the creative vision** - What should happen? What's the mood? +2. **Design the animation** - Break it into phases (anticipation, action, reaction) +3. **Apply primitives as needed** - Shake, bounce, move, effects - mix freely +4. **Validate constraints** - Check file size, especially for emoji GIFs +5. **Iterate if needed** - Reduce frames/colors if over size limits + +**The goal is creative freedom within Slack's technical constraints.** + +## Dependencies + +To use this toolkit, install these dependencies only if they aren't already present: + +```bash +pip install pillow imageio numpy +``` diff --git a/skills/slack-gif-creator/core/color_palettes.py b/skills/slack-gif-creator/core/color_palettes.py new file mode 100644 index 0000000..8593ad7 --- /dev/null +++ b/skills/slack-gif-creator/core/color_palettes.py @@ -0,0 +1,302 @@ +#!/usr/bin/env python3 +""" +Color Palettes - Professional, harmonious color schemes for GIFs. + +Using consistent, well-designed color palettes makes GIFs look professional +and polished instead of random and amateurish. +""" + +from typing import Optional +import colorsys + + +# Professional color palettes - hand-picked for GIF compression and visual appeal + +VIBRANT = { + 'primary': (255, 68, 68), # Bright red + 'secondary': (255, 168, 0), # Bright orange + 'accent': (0, 168, 255), # Bright blue + 'success': (68, 255, 68), # Bright green + 'background': (240, 248, 255), # Alice blue + 'text': (30, 30, 30), # Almost black + 'text_light': (255, 255, 255), # White +} + +PASTEL = { + 'primary': (255, 179, 186), # Pastel pink + 'secondary': (255, 223, 186), # Pastel peach + 'accent': (186, 225, 255), # Pastel blue + 'success': (186, 255, 201), # Pastel green + 'background': (255, 250, 240), # Floral white + 'text': (80, 80, 80), # Dark gray + 'text_light': (255, 255, 255), # White +} + +DARK = { + 'primary': (255, 100, 100), # Muted red + 'secondary': (100, 200, 255), # Muted blue + 'accent': (255, 200, 100), # Muted gold + 'success': (100, 255, 150), # Muted green + 'background': (30, 30, 35), # Almost black + 'text': (220, 220, 220), # Light gray + 'text_light': (255, 255, 255), # White +} + +NEON = { + 'primary': (255, 16, 240), # Neon pink + 'secondary': (0, 255, 255), # Cyan + 'accent': (255, 255, 0), # Yellow + 'success': (57, 255, 20), # Neon green + 'background': (20, 20, 30), # Dark blue-black + 'text': (255, 255, 255), # White + 'text_light': (255, 255, 255), # White +} + +PROFESSIONAL = { + 'primary': (0, 122, 255), # System blue + 'secondary': (88, 86, 214), # System purple + 'accent': (255, 149, 0), # System orange + 'success': (52, 199, 89), # System green + 'background': (255, 255, 255), # White + 'text': (0, 0, 0), # Black + 'text_light': (255, 255, 255), # White +} + +WARM = { + 'primary': (255, 107, 107), # Coral red + 'secondary': (255, 159, 64), # Orange + 'accent': (255, 218, 121), # Yellow + 'success': (106, 176, 76), # Olive green + 'background': (255, 246, 229), # Warm white + 'text': (51, 51, 51), # Charcoal + 'text_light': (255, 255, 255), # White +} + +COOL = { + 'primary': (107, 185, 240), # Sky blue + 'secondary': (130, 202, 157), # Mint + 'accent': (162, 155, 254), # Lavender + 'success': (86, 217, 150), # Aqua green + 'background': (240, 248, 255), # Alice blue + 'text': (45, 55, 72), # Dark slate + 'text_light': (255, 255, 255), # White +} + +MONOCHROME = { + 'primary': (80, 80, 80), # Dark gray + 'secondary': (130, 130, 130), # Medium gray + 'accent': (180, 180, 180), # Light gray + 'success': (100, 100, 100), # Gray + 'background': (245, 245, 245), # Off-white + 'text': (30, 30, 30), # Almost black + 'text_light': (255, 255, 255), # White +} + +# Map of palette names +PALETTES = { + 'vibrant': VIBRANT, + 'pastel': PASTEL, + 'dark': DARK, + 'neon': NEON, + 'professional': PROFESSIONAL, + 'warm': WARM, + 'cool': COOL, + 'monochrome': MONOCHROME, +} + + +def get_palette(name: str = 'vibrant') -> dict: + """ + Get a color palette by name. + + Args: + name: Palette name (vibrant, pastel, dark, neon, professional, warm, cool, monochrome) + + Returns: + Dictionary of color roles to RGB tuples + """ + return PALETTES.get(name.lower(), VIBRANT) + + +def get_text_color_for_background(bg_color: tuple[int, int, int]) -> tuple[int, int, int]: + """ + Get the best text color (black or white) for a given background. + + Uses luminance calculation to ensure readability. + + Args: + bg_color: Background RGB color + + Returns: + Text color (black or white) that contrasts well + """ + # Calculate relative luminance + r, g, b = bg_color + luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255 + + # Return black for light backgrounds, white for dark + return (0, 0, 0) if luminance > 0.5 else (255, 255, 255) + + +def get_complementary_color(color: tuple[int, int, int]) -> tuple[int, int, int]: + """ + Get the complementary (opposite) color on the color wheel. + + Args: + color: RGB color tuple + + Returns: + Complementary RGB color + """ + # Convert to HSV + r, g, b = [x / 255.0 for x in color] + h, s, v = colorsys.rgb_to_hsv(r, g, b) + + # Rotate hue by 180 degrees (0.5 in 0-1 scale) + h_comp = (h + 0.5) % 1.0 + + # Convert back to RGB + r_comp, g_comp, b_comp = colorsys.hsv_to_rgb(h_comp, s, v) + return (int(r_comp * 255), int(g_comp * 255), int(b_comp * 255)) + + +def lighten_color(color: tuple[int, int, int], amount: float = 0.3) -> tuple[int, int, int]: + """ + Lighten a color by a given amount. + + Args: + color: RGB color tuple + amount: Amount to lighten (0.0-1.0) + + Returns: + Lightened RGB color + """ + r, g, b = color + r = min(255, int(r + (255 - r) * amount)) + g = min(255, int(g + (255 - g) * amount)) + b = min(255, int(b + (255 - b) * amount)) + return (r, g, b) + + +def darken_color(color: tuple[int, int, int], amount: float = 0.3) -> tuple[int, int, int]: + """ + Darken a color by a given amount. + + Args: + color: RGB color tuple + amount: Amount to darken (0.0-1.0) + + Returns: + Darkened RGB color + """ + r, g, b = color + r = max(0, int(r * (1 - amount))) + g = max(0, int(g * (1 - amount))) + b = max(0, int(b * (1 - amount))) + return (r, g, b) + + +def blend_colors(color1: tuple[int, int, int], color2: tuple[int, int, int], + ratio: float = 0.5) -> tuple[int, int, int]: + """ + Blend two colors together. + + Args: + color1: First RGB color + color2: Second RGB color + ratio: Blend ratio (0.0 = all color1, 1.0 = all color2) + + Returns: + Blended RGB color + """ + r1, g1, b1 = color1 + r2, g2, b2 = color2 + + r = int(r1 * (1 - ratio) + r2 * ratio) + g = int(g1 * (1 - ratio) + g2 * ratio) + b = int(b1 * (1 - ratio) + b2 * ratio) + + return (r, g, b) + + +def create_gradient_colors(start_color: tuple[int, int, int], + end_color: tuple[int, int, int], + steps: int) -> list[tuple[int, int, int]]: + """ + Create a gradient of colors between two colors. + + Args: + start_color: Starting RGB color + end_color: Ending RGB color + steps: Number of gradient steps + + Returns: + List of RGB colors forming gradient + """ + colors = [] + for i in range(steps): + ratio = i / (steps - 1) if steps > 1 else 0 + colors.append(blend_colors(start_color, end_color, ratio)) + return colors + + +# Impact/emphasis colors that work well across palettes +IMPACT_COLORS = { + 'flash': (255, 255, 240), # Bright flash (cream) + 'explosion': (255, 150, 0), # Orange explosion + 'electricity': (100, 200, 255), # Electric blue + 'fire': (255, 100, 0), # Fire orange-red + 'success': (50, 255, 100), # Success green + 'error': (255, 50, 50), # Error red + 'warning': (255, 200, 0), # Warning yellow + 'magic': (200, 100, 255), # Magic purple +} + + +def get_impact_color(effect_type: str = 'flash') -> tuple[int, int, int]: + """ + Get a color for impact/emphasis effects. + + Args: + effect_type: Type of effect (flash, explosion, electricity, etc.) + + Returns: + RGB color for effect + """ + return IMPACT_COLORS.get(effect_type, IMPACT_COLORS['flash']) + + +# Emoji-safe palettes (work well at 128x128 with 32-64 colors) +EMOJI_PALETTES = { + 'simple': [ + (255, 255, 255), # White + (0, 0, 0), # Black + (255, 100, 100), # Red + (100, 255, 100), # Green + (100, 100, 255), # Blue + (255, 255, 100), # Yellow + ], + 'vibrant_emoji': [ + (255, 255, 255), # White + (30, 30, 30), # Black + (255, 68, 68), # Red + (68, 255, 68), # Green + (68, 68, 255), # Blue + (255, 200, 68), # Gold + (255, 68, 200), # Pink + (68, 255, 200), # Cyan + ] +} + + +def get_emoji_palette(name: str = 'simple') -> list[tuple[int, int, int]]: + """ + Get a limited color palette optimized for emoji GIFs (<64KB). + + Args: + name: Palette name (simple, vibrant_emoji) + + Returns: + List of RGB colors (6-8 colors) + """ + return EMOJI_PALETTES.get(name, EMOJI_PALETTES['simple']) \ No newline at end of file diff --git a/skills/slack-gif-creator/core/easing.py b/skills/slack-gif-creator/core/easing.py new file mode 100644 index 0000000..53ef888 --- /dev/null +++ b/skills/slack-gif-creator/core/easing.py @@ -0,0 +1,230 @@ +#!/usr/bin/env python3 +""" +Easing Functions - Timing functions for smooth animations. + +Provides various easing functions for natural motion and timing. +All functions take a value t (0.0 to 1.0) and return eased value (0.0 to 1.0). +""" + +import math + + +def linear(t: float) -> float: + """Linear interpolation (no easing).""" + return t + + +def ease_in_quad(t: float) -> float: + """Quadratic ease-in (slow start, accelerating).""" + return t * t + + +def ease_out_quad(t: float) -> float: + """Quadratic ease-out (fast start, decelerating).""" + return t * (2 - t) + + +def ease_in_out_quad(t: float) -> float: + """Quadratic ease-in-out (slow start and end).""" + if t < 0.5: + return 2 * t * t + return -1 + (4 - 2 * t) * t + + +def ease_in_cubic(t: float) -> float: + """Cubic ease-in (slow start).""" + return t * t * t + + +def ease_out_cubic(t: float) -> float: + """Cubic ease-out (fast start).""" + return (t - 1) * (t - 1) * (t - 1) + 1 + + +def ease_in_out_cubic(t: float) -> float: + """Cubic ease-in-out.""" + if t < 0.5: + return 4 * t * t * t + return (t - 1) * (2 * t - 2) * (2 * t - 2) + 1 + + +def ease_in_bounce(t: float) -> float: + """Bounce ease-in (bouncy start).""" + return 1 - ease_out_bounce(1 - t) + + +def ease_out_bounce(t: float) -> float: + """Bounce ease-out (bouncy end).""" + if t < 1 / 2.75: + return 7.5625 * t * t + elif t < 2 / 2.75: + t -= 1.5 / 2.75 + return 7.5625 * t * t + 0.75 + elif t < 2.5 / 2.75: + t -= 2.25 / 2.75 + return 7.5625 * t * t + 0.9375 + else: + t -= 2.625 / 2.75 + return 7.5625 * t * t + 0.984375 + + +def ease_in_out_bounce(t: float) -> float: + """Bounce ease-in-out.""" + if t < 0.5: + return ease_in_bounce(t * 2) * 0.5 + return ease_out_bounce(t * 2 - 1) * 0.5 + 0.5 + + +def ease_in_elastic(t: float) -> float: + """Elastic ease-in (spring effect).""" + if t == 0 or t == 1: + return t + return -math.pow(2, 10 * (t - 1)) * math.sin((t - 1.1) * 5 * math.pi) + + +def ease_out_elastic(t: float) -> float: + """Elastic ease-out (spring effect).""" + if t == 0 or t == 1: + return t + return math.pow(2, -10 * t) * math.sin((t - 0.1) * 5 * math.pi) + 1 + + +def ease_in_out_elastic(t: float) -> float: + """Elastic ease-in-out.""" + if t == 0 or t == 1: + return t + t = t * 2 - 1 + if t < 0: + return -0.5 * math.pow(2, 10 * t) * math.sin((t - 0.1) * 5 * math.pi) + return math.pow(2, -10 * t) * math.sin((t - 0.1) * 5 * math.pi) * 0.5 + 1 + + +# Convenience mapping +EASING_FUNCTIONS = { + 'linear': linear, + 'ease_in': ease_in_quad, + 'ease_out': ease_out_quad, + 'ease_in_out': ease_in_out_quad, + 'bounce_in': ease_in_bounce, + 'bounce_out': ease_out_bounce, + 'bounce': ease_in_out_bounce, + 'elastic_in': ease_in_elastic, + 'elastic_out': ease_out_elastic, + 'elastic': ease_in_out_elastic, +} + + +def get_easing(name: str = 'linear'): + """Get easing function by name.""" + return EASING_FUNCTIONS.get(name, linear) + + +def interpolate(start: float, end: float, t: float, easing: str = 'linear') -> float: + """ + Interpolate between two values with easing. + + Args: + start: Start value + end: End value + t: Progress from 0.0 to 1.0 + easing: Name of easing function + + Returns: + Interpolated value + """ + ease_func = get_easing(easing) + eased_t = ease_func(t) + return start + (end - start) * eased_t + + +def ease_back_in(t: float) -> float: + """Back ease-in (slight overshoot backward before forward motion).""" + c1 = 1.70158 + c3 = c1 + 1 + return c3 * t * t * t - c1 * t * t + + +def ease_back_out(t: float) -> float: + """Back ease-out (overshoot forward then settle back).""" + c1 = 1.70158 + c3 = c1 + 1 + return 1 + c3 * pow(t - 1, 3) + c1 * pow(t - 1, 2) + + +def ease_back_in_out(t: float) -> float: + """Back ease-in-out (overshoot at both ends).""" + c1 = 1.70158 + c2 = c1 * 1.525 + if t < 0.5: + return (pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2)) / 2 + return (pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2 + + +def apply_squash_stretch(base_scale: tuple[float, float], intensity: float, + direction: str = 'vertical') -> tuple[float, float]: + """ + Calculate squash and stretch scales for more dynamic animation. + + Args: + base_scale: (width_scale, height_scale) base scales + intensity: Squash/stretch intensity (0.0-1.0) + direction: 'vertical', 'horizontal', or 'both' + + Returns: + (width_scale, height_scale) with squash/stretch applied + """ + width_scale, height_scale = base_scale + + if direction == 'vertical': + # Compress vertically, expand horizontally (preserve volume) + height_scale *= (1 - intensity * 0.5) + width_scale *= (1 + intensity * 0.5) + elif direction == 'horizontal': + # Compress horizontally, expand vertically + width_scale *= (1 - intensity * 0.5) + height_scale *= (1 + intensity * 0.5) + elif direction == 'both': + # General squash (both dimensions) + width_scale *= (1 - intensity * 0.3) + height_scale *= (1 - intensity * 0.3) + + return (width_scale, height_scale) + + +def calculate_arc_motion(start: tuple[float, float], end: tuple[float, float], + height: float, t: float) -> tuple[float, float]: + """ + Calculate position along a parabolic arc (natural motion path). + + Args: + start: (x, y) starting position + end: (x, y) ending position + height: Arc height at midpoint (positive = upward) + t: Progress (0.0-1.0) + + Returns: + (x, y) position along arc + """ + x1, y1 = start + x2, y2 = end + + # Linear interpolation for x + x = x1 + (x2 - x1) * t + + # Parabolic interpolation for y + # y = start + progress * (end - start) + arc_offset + # Arc offset peaks at t=0.5 + arc_offset = 4 * height * t * (1 - t) + y = y1 + (y2 - y1) * t - arc_offset + + return (x, y) + + +# Add new easing functions to the convenience mapping +EASING_FUNCTIONS.update({ + 'back_in': ease_back_in, + 'back_out': ease_back_out, + 'back_in_out': ease_back_in_out, + 'anticipate': ease_back_in, # Alias + 'overshoot': ease_back_out, # Alias +}) \ No newline at end of file diff --git a/skills/slack-gif-creator/core/frame_composer.py b/skills/slack-gif-creator/core/frame_composer.py new file mode 100644 index 0000000..aed3c50 --- /dev/null +++ b/skills/slack-gif-creator/core/frame_composer.py @@ -0,0 +1,469 @@ +#!/usr/bin/env python3 +""" +Frame Composer - Utilities for composing visual elements into frames. + +Provides functions for drawing shapes, text, emojis, and compositing elements +together to create animation frames. +""" + +from PIL import Image, ImageDraw, ImageFont +import numpy as np +from typing import Optional + + +def create_blank_frame(width: int, height: int, color: tuple[int, int, int] = (255, 255, 255)) -> Image.Image: + """ + Create a blank frame with solid color background. + + Args: + width: Frame width + height: Frame height + color: RGB color tuple (default: white) + + Returns: + PIL Image + """ + return Image.new('RGB', (width, height), color) + + +def draw_circle(frame: Image.Image, center: tuple[int, int], radius: int, + fill_color: Optional[tuple[int, int, int]] = None, + outline_color: Optional[tuple[int, int, int]] = None, + outline_width: int = 1) -> Image.Image: + """ + Draw a circle on a frame. + + Args: + frame: PIL Image to draw on + center: (x, y) center position + radius: Circle radius + fill_color: RGB fill color (None for no fill) + outline_color: RGB outline color (None for no outline) + outline_width: Outline width in pixels + + Returns: + Modified frame + """ + draw = ImageDraw.Draw(frame) + x, y = center + bbox = [x - radius, y - radius, x + radius, y + radius] + draw.ellipse(bbox, fill=fill_color, outline=outline_color, width=outline_width) + return frame + + +def draw_rectangle(frame: Image.Image, top_left: tuple[int, int], bottom_right: tuple[int, int], + fill_color: Optional[tuple[int, int, int]] = None, + outline_color: Optional[tuple[int, int, int]] = None, + outline_width: int = 1) -> Image.Image: + """ + Draw a rectangle on a frame. + + Args: + frame: PIL Image to draw on + top_left: (x, y) top-left corner + bottom_right: (x, y) bottom-right corner + fill_color: RGB fill color (None for no fill) + outline_color: RGB outline color (None for no outline) + outline_width: Outline width in pixels + + Returns: + Modified frame + """ + draw = ImageDraw.Draw(frame) + draw.rectangle([top_left, bottom_right], fill=fill_color, outline=outline_color, width=outline_width) + return frame + + +def draw_line(frame: Image.Image, start: tuple[int, int], end: tuple[int, int], + color: tuple[int, int, int] = (0, 0, 0), width: int = 2) -> Image.Image: + """ + Draw a line on a frame. + + Args: + frame: PIL Image to draw on + start: (x, y) start position + end: (x, y) end position + color: RGB line color + width: Line width in pixels + + Returns: + Modified frame + """ + draw = ImageDraw.Draw(frame) + draw.line([start, end], fill=color, width=width) + return frame + + +def draw_text(frame: Image.Image, text: str, position: tuple[int, int], + font_size: int = 40, color: tuple[int, int, int] = (0, 0, 0), + centered: bool = False) -> Image.Image: + """ + Draw text on a frame. + + Args: + frame: PIL Image to draw on + text: Text to draw + position: (x, y) position (top-left unless centered=True) + font_size: Font size in pixels + color: RGB text color + centered: If True, center text at position + + Returns: + Modified frame + """ + draw = ImageDraw.Draw(frame) + + # Try to use default font, fall back to basic if not available + try: + font = ImageFont.truetype("/System/Library/Fonts/Helvetica.ttc", font_size) + except: + font = ImageFont.load_default() + + if centered: + bbox = draw.textbbox((0, 0), text, font=font) + text_width = bbox[2] - bbox[0] + text_height = bbox[3] - bbox[1] + x = position[0] - text_width // 2 + y = position[1] - text_height // 2 + position = (x, y) + + draw.text(position, text, fill=color, font=font) + return frame + + +def draw_emoji(frame: Image.Image, emoji: str, position: tuple[int, int], size: int = 60) -> Image.Image: + """ + Draw emoji text on a frame (requires system emoji support). + + Args: + frame: PIL Image to draw on + emoji: Emoji character(s) + position: (x, y) position + size: Emoji size in pixels + + Returns: + Modified frame + """ + draw = ImageDraw.Draw(frame) + + # Use Apple Color Emoji font on macOS + try: + font = ImageFont.truetype("/System/Library/Fonts/Apple Color Emoji.ttc", size) + except: + # Fallback to text-based emoji + font = ImageFont.truetype("/System/Library/Fonts/Helvetica.ttc", size) + + draw.text(position, emoji, font=font, embedded_color=True) + return frame + + +def composite_layers(base: Image.Image, overlay: Image.Image, + position: tuple[int, int] = (0, 0), alpha: float = 1.0) -> Image.Image: + """ + Composite one image on top of another. + + Args: + base: Base image + overlay: Image to overlay on top + position: (x, y) position to place overlay + alpha: Opacity of overlay (0.0 = transparent, 1.0 = opaque) + + Returns: + Composite image + """ + # Convert to RGBA for transparency support + base_rgba = base.convert('RGBA') + overlay_rgba = overlay.convert('RGBA') + + # Apply alpha + if alpha < 1.0: + overlay_rgba = overlay_rgba.copy() + overlay_rgba.putalpha(int(255 * alpha)) + + # Paste overlay onto base + base_rgba.paste(overlay_rgba, position, overlay_rgba) + + # Convert back to RGB + return base_rgba.convert('RGB') + + +def draw_stick_figure(frame: Image.Image, position: tuple[int, int], scale: float = 1.0, + color: tuple[int, int, int] = (0, 0, 0), line_width: int = 3) -> Image.Image: + """ + Draw a simple stick figure. + + Args: + frame: PIL Image to draw on + position: (x, y) center position of head + scale: Size multiplier + color: RGB line color + line_width: Line width in pixels + + Returns: + Modified frame + """ + draw = ImageDraw.Draw(frame) + x, y = position + + # Scale dimensions + head_radius = int(15 * scale) + body_length = int(40 * scale) + arm_length = int(25 * scale) + leg_length = int(35 * scale) + leg_spread = int(15 * scale) + + # Head + draw.ellipse([x - head_radius, y - head_radius, x + head_radius, y + head_radius], + outline=color, width=line_width) + + # Body + body_start = y + head_radius + body_end = body_start + body_length + draw.line([(x, body_start), (x, body_end)], fill=color, width=line_width) + + # Arms + arm_y = body_start + int(body_length * 0.3) + draw.line([(x - arm_length, arm_y), (x + arm_length, arm_y)], fill=color, width=line_width) + + # Legs + draw.line([(x, body_end), (x - leg_spread, body_end + leg_length)], fill=color, width=line_width) + draw.line([(x, body_end), (x + leg_spread, body_end + leg_length)], fill=color, width=line_width) + + return frame + + +def create_gradient_background(width: int, height: int, + top_color: tuple[int, int, int], + bottom_color: tuple[int, int, int]) -> Image.Image: + """ + Create a vertical gradient background. + + Args: + width: Frame width + height: Frame height + top_color: RGB color at top + bottom_color: RGB color at bottom + + Returns: + PIL Image with gradient + """ + frame = Image.new('RGB', (width, height)) + draw = ImageDraw.Draw(frame) + + # Calculate color step for each row + r1, g1, b1 = top_color + r2, g2, b2 = bottom_color + + for y in range(height): + # Interpolate color + ratio = y / height + r = int(r1 * (1 - ratio) + r2 * ratio) + g = int(g1 * (1 - ratio) + g2 * ratio) + b = int(b1 * (1 - ratio) + b2 * ratio) + + # Draw horizontal line + draw.line([(0, y), (width, y)], fill=(r, g, b)) + + return frame + + +def draw_emoji_enhanced(frame: Image.Image, emoji: str, position: tuple[int, int], + size: int = 60, shadow: bool = True, + shadow_offset: tuple[int, int] = (2, 2)) -> Image.Image: + """ + Draw emoji with optional shadow for better visual quality. + + Args: + frame: PIL Image to draw on + emoji: Emoji character(s) + position: (x, y) position + size: Emoji size in pixels (minimum 12) + shadow: Whether to add drop shadow + shadow_offset: Shadow offset + + Returns: + Modified frame + """ + draw = ImageDraw.Draw(frame) + + # Ensure minimum size to avoid font rendering errors + size = max(12, size) + + # Use Apple Color Emoji font on macOS + try: + font = ImageFont.truetype("/System/Library/Fonts/Apple Color Emoji.ttc", size) + except: + # Fallback to text-based emoji + try: + font = ImageFont.truetype("/System/Library/Fonts/Helvetica.ttc", size) + except: + font = ImageFont.load_default() + + # Draw shadow first if enabled + if shadow and size >= 20: # Only draw shadow for larger emojis + shadow_pos = (position[0] + shadow_offset[0], position[1] + shadow_offset[1]) + # Draw semi-transparent shadow (simulated by drawing multiple times) + for offset in range(1, 3): + try: + draw.text((shadow_pos[0] + offset, shadow_pos[1] + offset), + emoji, font=font, embedded_color=True, fill=(0, 0, 0, 100)) + except: + pass # Skip shadow if it fails + + # Draw main emoji + try: + draw.text(position, emoji, font=font, embedded_color=True) + except: + # Fallback to basic drawing if embedded color fails + draw.text(position, emoji, font=font, fill=(0, 0, 0)) + + return frame + + +def draw_circle_with_shadow(frame: Image.Image, center: tuple[int, int], radius: int, + fill_color: tuple[int, int, int], + shadow_offset: tuple[int, int] = (3, 3), + shadow_color: tuple[int, int, int] = (0, 0, 0)) -> Image.Image: + """ + Draw a circle with drop shadow. + + Args: + frame: PIL Image to draw on + center: (x, y) center position + radius: Circle radius + fill_color: RGB fill color + shadow_offset: (x, y) shadow offset + shadow_color: RGB shadow color + + Returns: + Modified frame + """ + draw = ImageDraw.Draw(frame) + x, y = center + + # Draw shadow + shadow_center = (x + shadow_offset[0], y + shadow_offset[1]) + shadow_bbox = [ + shadow_center[0] - radius, + shadow_center[1] - radius, + shadow_center[0] + radius, + shadow_center[1] + radius + ] + draw.ellipse(shadow_bbox, fill=shadow_color) + + # Draw main circle + bbox = [x - radius, y - radius, x + radius, y + radius] + draw.ellipse(bbox, fill=fill_color) + + return frame + + +def draw_rounded_rectangle(frame: Image.Image, top_left: tuple[int, int], + bottom_right: tuple[int, int], radius: int, + fill_color: Optional[tuple[int, int, int]] = None, + outline_color: Optional[tuple[int, int, int]] = None, + outline_width: int = 1) -> Image.Image: + """ + Draw a rectangle with rounded corners. + + Args: + frame: PIL Image to draw on + top_left: (x, y) top-left corner + bottom_right: (x, y) bottom-right corner + radius: Corner radius + fill_color: RGB fill color (None for no fill) + outline_color: RGB outline color (None for no outline) + outline_width: Outline width + + Returns: + Modified frame + """ + draw = ImageDraw.Draw(frame) + x1, y1 = top_left + x2, y2 = bottom_right + + # Draw rounded rectangle using PIL's built-in method + draw.rounded_rectangle([x1, y1, x2, y2], radius=radius, + fill=fill_color, outline=outline_color, width=outline_width) + + return frame + + +def add_vignette(frame: Image.Image, strength: float = 0.5) -> Image.Image: + """ + Add a vignette effect (darkened edges) to frame. + + Args: + frame: PIL Image + strength: Vignette strength (0.0-1.0) + + Returns: + Frame with vignette + """ + width, height = frame.size + + # Create radial gradient mask + center_x, center_y = width // 2, height // 2 + max_dist = ((width / 2) ** 2 + (height / 2) ** 2) ** 0.5 + + # Create overlay + overlay = Image.new('RGB', (width, height), (0, 0, 0)) + pixels = overlay.load() + + for y in range(height): + for x in range(width): + # Calculate distance from center + dx = x - center_x + dy = y - center_y + dist = (dx ** 2 + dy ** 2) ** 0.5 + + # Calculate vignette value + vignette = min(1, (dist / max_dist) * strength) + value = int(255 * (1 - vignette)) + pixels[x, y] = (value, value, value) + + # Blend with original using multiply + frame_array = np.array(frame, dtype=np.float32) / 255 + overlay_array = np.array(overlay, dtype=np.float32) / 255 + + result = frame_array * overlay_array + result = (result * 255).astype(np.uint8) + + return Image.fromarray(result) + + +def draw_star(frame: Image.Image, center: tuple[int, int], size: int, + fill_color: tuple[int, int, int], + outline_color: Optional[tuple[int, int, int]] = None, + outline_width: int = 1) -> Image.Image: + """ + Draw a 5-pointed star. + + Args: + frame: PIL Image to draw on + center: (x, y) center position + size: Star size (outer radius) + fill_color: RGB fill color + outline_color: RGB outline color (None for no outline) + outline_width: Outline width + + Returns: + Modified frame + """ + import math + draw = ImageDraw.Draw(frame) + x, y = center + + # Calculate star points + points = [] + for i in range(10): + angle = (i * 36 - 90) * math.pi / 180 # 36 degrees per point, start at top + radius = size if i % 2 == 0 else size * 0.4 # Alternate between outer and inner + px = x + radius * math.cos(angle) + py = y + radius * math.sin(angle) + points.append((px, py)) + + # Draw star + draw.polygon(points, fill=fill_color, outline=outline_color, width=outline_width) + + return frame \ No newline at end of file diff --git a/skills/slack-gif-creator/core/gif_builder.py b/skills/slack-gif-creator/core/gif_builder.py new file mode 100644 index 0000000..fae52b2 --- /dev/null +++ b/skills/slack-gif-creator/core/gif_builder.py @@ -0,0 +1,246 @@ +#!/usr/bin/env python3 +""" +GIF Builder - Core module for assembling frames into GIFs optimized for Slack. + +This module provides the main interface for creating GIFs from programmatically +generated frames, with automatic optimization for Slack's requirements. +""" + +from pathlib import Path +from typing import Optional +import imageio.v3 as imageio +from PIL import Image +import numpy as np + + +class GIFBuilder: + """Builder for creating optimized GIFs from frames.""" + + def __init__(self, width: int = 480, height: int = 480, fps: int = 15): + """ + Initialize GIF builder. + + Args: + width: Frame width in pixels + height: Frame height in pixels + fps: Frames per second + """ + self.width = width + self.height = height + self.fps = fps + self.frames: list[np.ndarray] = [] + + def add_frame(self, frame: np.ndarray | Image.Image): + """ + Add a frame to the GIF. + + Args: + frame: Frame as numpy array or PIL Image (will be converted to RGB) + """ + if isinstance(frame, Image.Image): + frame = np.array(frame.convert('RGB')) + + # Ensure frame is correct size + if frame.shape[:2] != (self.height, self.width): + pil_frame = Image.fromarray(frame) + pil_frame = pil_frame.resize((self.width, self.height), Image.Resampling.LANCZOS) + frame = np.array(pil_frame) + + self.frames.append(frame) + + def add_frames(self, frames: list[np.ndarray | Image.Image]): + """Add multiple frames at once.""" + for frame in frames: + self.add_frame(frame) + + def optimize_colors(self, num_colors: int = 128, use_global_palette: bool = True) -> list[np.ndarray]: + """ + Reduce colors in all frames using quantization. + + Args: + num_colors: Target number of colors (8-256) + use_global_palette: Use a single palette for all frames (better compression) + + Returns: + List of color-optimized frames + """ + optimized = [] + + if use_global_palette and len(self.frames) > 1: + # Create a global palette from all frames + # Sample frames to build palette + sample_size = min(5, len(self.frames)) + sample_indices = [int(i * len(self.frames) / sample_size) for i in range(sample_size)] + sample_frames = [self.frames[i] for i in sample_indices] + + # Combine sample frames into a single image for palette generation + # Flatten each frame to get all pixels, then stack them + all_pixels = np.vstack([f.reshape(-1, 3) for f in sample_frames]) # (total_pixels, 3) + + # Create a properly-shaped RGB image from the pixel data + # We'll make a roughly square image from all the pixels + total_pixels = len(all_pixels) + width = min(512, int(np.sqrt(total_pixels))) # Reasonable width, max 512 + height = (total_pixels + width - 1) // width # Ceiling division + + # Pad if necessary to fill the rectangle + pixels_needed = width * height + if pixels_needed > total_pixels: + padding = np.zeros((pixels_needed - total_pixels, 3), dtype=np.uint8) + all_pixels = np.vstack([all_pixels, padding]) + + # Reshape to proper RGB image format (H, W, 3) + img_array = all_pixels[:pixels_needed].reshape(height, width, 3).astype(np.uint8) + combined_img = Image.fromarray(img_array, mode='RGB') + + # Generate global palette + global_palette = combined_img.quantize(colors=num_colors, method=2) + + # Apply global palette to all frames + for frame in self.frames: + pil_frame = Image.fromarray(frame) + quantized = pil_frame.quantize(palette=global_palette, dither=1) + optimized.append(np.array(quantized.convert('RGB'))) + else: + # Use per-frame quantization + for frame in self.frames: + pil_frame = Image.fromarray(frame) + quantized = pil_frame.quantize(colors=num_colors, method=2, dither=1) + optimized.append(np.array(quantized.convert('RGB'))) + + return optimized + + def deduplicate_frames(self, threshold: float = 0.995) -> int: + """ + Remove duplicate or near-duplicate consecutive frames. + + Args: + threshold: Similarity threshold (0.0-1.0). Higher = more strict (0.995 = very similar). + + Returns: + Number of frames removed + """ + if len(self.frames) < 2: + return 0 + + deduplicated = [self.frames[0]] + removed_count = 0 + + for i in range(1, len(self.frames)): + # Compare with previous frame + prev_frame = np.array(deduplicated[-1], dtype=np.float32) + curr_frame = np.array(self.frames[i], dtype=np.float32) + + # Calculate similarity (normalized) + diff = np.abs(prev_frame - curr_frame) + similarity = 1.0 - (np.mean(diff) / 255.0) + + # Keep frame if sufficiently different + # High threshold (0.995) means only remove truly identical frames + if similarity < threshold: + deduplicated.append(self.frames[i]) + else: + removed_count += 1 + + self.frames = deduplicated + return removed_count + + def save(self, output_path: str | Path, num_colors: int = 128, + optimize_for_emoji: bool = False, remove_duplicates: bool = True) -> dict: + """ + Save frames as optimized GIF for Slack. + + Args: + output_path: Where to save the GIF + num_colors: Number of colors to use (fewer = smaller file) + optimize_for_emoji: If True, optimize for <64KB emoji size + remove_duplicates: Remove duplicate consecutive frames + + Returns: + Dictionary with file info (path, size, dimensions, frame_count) + """ + if not self.frames: + raise ValueError("No frames to save. Add frames with add_frame() first.") + + output_path = Path(output_path) + original_frame_count = len(self.frames) + + # Remove duplicate frames to reduce file size + if remove_duplicates: + removed = self.deduplicate_frames(threshold=0.98) + if removed > 0: + print(f" Removed {removed} duplicate frames") + + # Optimize for emoji if requested + if optimize_for_emoji: + if self.width > 128 or self.height > 128: + print(f" Resizing from {self.width}x{self.height} to 128x128 for emoji") + self.width = 128 + self.height = 128 + # Resize all frames + resized_frames = [] + for frame in self.frames: + pil_frame = Image.fromarray(frame) + pil_frame = pil_frame.resize((128, 128), Image.Resampling.LANCZOS) + resized_frames.append(np.array(pil_frame)) + self.frames = resized_frames + num_colors = min(num_colors, 48) # More aggressive color limit for emoji + + # More aggressive FPS reduction for emoji + if len(self.frames) > 12: + print(f" Reducing frames from {len(self.frames)} to ~12 for emoji size") + # Keep every nth frame to get close to 12 frames + keep_every = max(1, len(self.frames) // 12) + self.frames = [self.frames[i] for i in range(0, len(self.frames), keep_every)] + + # Optimize colors with global palette + optimized_frames = self.optimize_colors(num_colors, use_global_palette=True) + + # Calculate frame duration in milliseconds + frame_duration = 1000 / self.fps + + # Save GIF + imageio.imwrite( + output_path, + optimized_frames, + duration=frame_duration, + loop=0 # Infinite loop + ) + + # Get file info + file_size_kb = output_path.stat().st_size / 1024 + file_size_mb = file_size_kb / 1024 + + info = { + 'path': str(output_path), + 'size_kb': file_size_kb, + 'size_mb': file_size_mb, + 'dimensions': f'{self.width}x{self.height}', + 'frame_count': len(optimized_frames), + 'fps': self.fps, + 'duration_seconds': len(optimized_frames) / self.fps, + 'colors': num_colors + } + + # Print info + print(f"\n✓ GIF created successfully!") + print(f" Path: {output_path}") + print(f" Size: {file_size_kb:.1f} KB ({file_size_mb:.2f} MB)") + print(f" Dimensions: {self.width}x{self.height}") + print(f" Frames: {len(optimized_frames)} @ {self.fps} fps") + print(f" Duration: {info['duration_seconds']:.1f}s") + print(f" Colors: {num_colors}") + + # Warnings + if optimize_for_emoji and file_size_kb > 64: + print(f"\n⚠️ WARNING: Emoji file size ({file_size_kb:.1f} KB) exceeds 64 KB limit") + print(" Try: fewer frames, fewer colors, or simpler design") + elif not optimize_for_emoji and file_size_kb > 2048: + print(f"\n⚠️ WARNING: File size ({file_size_kb:.1f} KB) is large for Slack") + print(" Try: fewer frames, smaller dimensions, or fewer colors") + + return info + + def clear(self): + """Clear all frames (useful for creating multiple GIFs).""" + self.frames = [] \ No newline at end of file diff --git a/skills/slack-gif-creator/core/typography.py b/skills/slack-gif-creator/core/typography.py new file mode 100644 index 0000000..6ba35fc --- /dev/null +++ b/skills/slack-gif-creator/core/typography.py @@ -0,0 +1,357 @@ +#!/usr/bin/env python3 +""" +Typography System - Professional text rendering with outlines, shadows, and effects. + +This module provides high-quality text rendering that looks crisp and professional +in GIFs, with outlines for readability and effects for visual impact. +""" + +from PIL import Image, ImageDraw, ImageFont +from typing import Optional + + +# Typography scale - proportional sizing system +TYPOGRAPHY_SCALE = { + 'h1': 60, # Large headers + 'h2': 48, # Medium headers + 'h3': 36, # Small headers + 'title': 50, # Title text + 'body': 28, # Body text + 'small': 20, # Small text + 'tiny': 16, # Tiny text +} + + +def get_font(size: int, bold: bool = False) -> ImageFont.FreeTypeFont: + """ + Get a font with fallback support. + + Args: + size: Font size in pixels + bold: Use bold variant if available + + Returns: + ImageFont object + """ + # Try multiple font paths for cross-platform support + font_paths = [ + # macOS fonts + "/System/Library/Fonts/Helvetica.ttc", + "/System/Library/Fonts/SF-Pro.ttf", + "/Library/Fonts/Arial Bold.ttf" if bold else "/Library/Fonts/Arial.ttf", + # Linux fonts + "/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf" if bold else "/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf", + # Windows fonts + "C:\\Windows\\Fonts\\arialbd.ttf" if bold else "C:\\Windows\\Fonts\\arial.ttf", + ] + + for font_path in font_paths: + try: + return ImageFont.truetype(font_path, size) + except: + continue + + # Ultimate fallback + return ImageFont.load_default() + + +def draw_text_with_outline( + frame: Image.Image, + text: str, + position: tuple[int, int], + font_size: int = 40, + text_color: tuple[int, int, int] = (255, 255, 255), + outline_color: tuple[int, int, int] = (0, 0, 0), + outline_width: int = 3, + centered: bool = False, + bold: bool = True +) -> Image.Image: + """ + Draw text with outline for maximum readability. + + This is THE most important function for professional-looking text in GIFs. + The outline ensures text is readable on any background. + + Args: + frame: PIL Image to draw on + text: Text to draw + position: (x, y) position + font_size: Font size in pixels + text_color: RGB color for text fill + outline_color: RGB color for outline + outline_width: Width of outline in pixels (2-4 recommended) + centered: If True, center text at position + bold: Use bold font variant + + Returns: + Modified frame + """ + draw = ImageDraw.Draw(frame) + font = get_font(font_size, bold=bold) + + # Calculate position for centering + if centered: + bbox = draw.textbbox((0, 0), text, font=font) + text_width = bbox[2] - bbox[0] + text_height = bbox[3] - bbox[1] + x = position[0] - text_width // 2 + y = position[1] - text_height // 2 + position = (x, y) + + # Draw outline by drawing text multiple times offset in all directions + x, y = position + for offset_x in range(-outline_width, outline_width + 1): + for offset_y in range(-outline_width, outline_width + 1): + if offset_x != 0 or offset_y != 0: + draw.text((x + offset_x, y + offset_y), text, fill=outline_color, font=font) + + # Draw main text on top + draw.text(position, text, fill=text_color, font=font) + + return frame + + +def draw_text_with_shadow( + frame: Image.Image, + text: str, + position: tuple[int, int], + font_size: int = 40, + text_color: tuple[int, int, int] = (255, 255, 255), + shadow_color: tuple[int, int, int] = (0, 0, 0), + shadow_offset: tuple[int, int] = (3, 3), + centered: bool = False, + bold: bool = True +) -> Image.Image: + """ + Draw text with drop shadow for depth. + + Args: + frame: PIL Image to draw on + text: Text to draw + position: (x, y) position + font_size: Font size in pixels + text_color: RGB color for text + shadow_color: RGB color for shadow + shadow_offset: (x, y) offset for shadow + centered: If True, center text at position + bold: Use bold font variant + + Returns: + Modified frame + """ + draw = ImageDraw.Draw(frame) + font = get_font(font_size, bold=bold) + + # Calculate position for centering + if centered: + bbox = draw.textbbox((0, 0), text, font=font) + text_width = bbox[2] - bbox[0] + text_height = bbox[3] - bbox[1] + x = position[0] - text_width // 2 + y = position[1] - text_height // 2 + position = (x, y) + + # Draw shadow + shadow_pos = (position[0] + shadow_offset[0], position[1] + shadow_offset[1]) + draw.text(shadow_pos, text, fill=shadow_color, font=font) + + # Draw main text + draw.text(position, text, fill=text_color, font=font) + + return frame + + +def draw_text_with_glow( + frame: Image.Image, + text: str, + position: tuple[int, int], + font_size: int = 40, + text_color: tuple[int, int, int] = (255, 255, 255), + glow_color: tuple[int, int, int] = (255, 200, 0), + glow_radius: int = 5, + centered: bool = False, + bold: bool = True +) -> Image.Image: + """ + Draw text with glow effect for emphasis. + + Args: + frame: PIL Image to draw on + text: Text to draw + position: (x, y) position + font_size: Font size in pixels + text_color: RGB color for text + glow_color: RGB color for glow + glow_radius: Radius of glow effect + centered: If True, center text at position + bold: Use bold font variant + + Returns: + Modified frame + """ + draw = ImageDraw.Draw(frame) + font = get_font(font_size, bold=bold) + + # Calculate position for centering + if centered: + bbox = draw.textbbox((0, 0), text, font=font) + text_width = bbox[2] - bbox[0] + text_height = bbox[3] - bbox[1] + x = position[0] - text_width // 2 + y = position[1] - text_height // 2 + position = (x, y) + + # Draw glow layers with decreasing opacity (simulated with same color at different offsets) + x, y = position + for radius in range(glow_radius, 0, -1): + for offset_x in range(-radius, radius + 1): + for offset_y in range(-radius, radius + 1): + if offset_x != 0 or offset_y != 0: + draw.text((x + offset_x, y + offset_y), text, fill=glow_color, font=font) + + # Draw main text + draw.text(position, text, fill=text_color, font=font) + + return frame + + +def draw_text_in_box( + frame: Image.Image, + text: str, + position: tuple[int, int], + font_size: int = 40, + text_color: tuple[int, int, int] = (255, 255, 255), + box_color: tuple[int, int, int] = (0, 0, 0), + box_alpha: float = 0.7, + padding: int = 10, + centered: bool = True, + bold: bool = True +) -> Image.Image: + """ + Draw text in a semi-transparent box for guaranteed readability. + + Args: + frame: PIL Image to draw on + text: Text to draw + position: (x, y) position + font_size: Font size in pixels + text_color: RGB color for text + box_color: RGB color for background box + box_alpha: Opacity of box (0.0-1.0) + padding: Padding around text in pixels + centered: If True, center at position + bold: Use bold font variant + + Returns: + Modified frame + """ + # Create a separate layer for the box with alpha + overlay = Image.new('RGBA', frame.size, (0, 0, 0, 0)) + draw_overlay = ImageDraw.Draw(overlay) + draw = ImageDraw.Draw(frame) + + font = get_font(font_size, bold=bold) + + # Get text dimensions + bbox = draw.textbbox((0, 0), text, font=font) + text_width = bbox[2] - bbox[0] + text_height = bbox[3] - bbox[1] + + # Calculate box position + if centered: + box_x = position[0] - (text_width + padding * 2) // 2 + box_y = position[1] - (text_height + padding * 2) // 2 + text_x = position[0] - text_width // 2 + text_y = position[1] - text_height // 2 + else: + box_x = position[0] - padding + box_y = position[1] - padding + text_x = position[0] + text_y = position[1] + + # Draw semi-transparent box + box_coords = [ + box_x, + box_y, + box_x + text_width + padding * 2, + box_y + text_height + padding * 2 + ] + alpha_value = int(255 * box_alpha) + draw_overlay.rectangle(box_coords, fill=(*box_color, alpha_value)) + + # Composite overlay onto frame + frame_rgba = frame.convert('RGBA') + frame_rgba = Image.alpha_composite(frame_rgba, overlay) + frame = frame_rgba.convert('RGB') + + # Draw text on top + draw = ImageDraw.Draw(frame) + draw.text((text_x, text_y), text, fill=text_color, font=font) + + return frame + + +def get_text_size(text: str, font_size: int, bold: bool = True) -> tuple[int, int]: + """ + Get the dimensions of text without drawing it. + + Args: + text: Text to measure + font_size: Font size in pixels + bold: Use bold font variant + + Returns: + (width, height) tuple + """ + font = get_font(font_size, bold=bold) + # Create temporary image to measure + temp_img = Image.new('RGB', (1, 1)) + draw = ImageDraw.Draw(temp_img) + bbox = draw.textbbox((0, 0), text, font=font) + width = bbox[2] - bbox[0] + height = bbox[3] - bbox[1] + return (width, height) + + +def get_optimal_font_size(text: str, max_width: int, max_height: int, + start_size: int = 60) -> int: + """ + Find the largest font size that fits within given dimensions. + + Args: + text: Text to size + max_width: Maximum width in pixels + max_height: Maximum height in pixels + start_size: Starting font size to try + + Returns: + Optimal font size + """ + font_size = start_size + while font_size > 10: + width, height = get_text_size(text, font_size) + if width <= max_width and height <= max_height: + return font_size + font_size -= 2 + return 10 # Minimum font size + + +def scale_font_for_frame(base_size: int, frame_width: int, frame_height: int) -> int: + """ + Scale font size proportionally to frame dimensions. + + Useful for maintaining relative text size across different GIF dimensions. + + Args: + base_size: Base font size for 480x480 frame + frame_width: Actual frame width + frame_height: Actual frame height + + Returns: + Scaled font size + """ + # Use average dimension for scaling + avg_dimension = (frame_width + frame_height) / 2 + base_dimension = 480 # Reference dimension + scale_factor = avg_dimension / base_dimension + return max(10, int(base_size * scale_factor)) \ No newline at end of file diff --git a/skills/slack-gif-creator/core/validators.py b/skills/slack-gif-creator/core/validators.py new file mode 100644 index 0000000..7622d4b --- /dev/null +++ b/skills/slack-gif-creator/core/validators.py @@ -0,0 +1,264 @@ +#!/usr/bin/env python3 +""" +Validators - Check if GIFs meet Slack's requirements. + +These validators help ensure your GIFs meet Slack's size and dimension constraints. +""" + +from pathlib import Path + + +def check_slack_size(gif_path: str | Path, is_emoji: bool = True) -> tuple[bool, dict]: + """ + Check if GIF meets Slack size limits. + + Args: + gif_path: Path to GIF file + is_emoji: True for emoji GIF (64KB limit), False for message GIF (2MB limit) + + Returns: + Tuple of (passes: bool, info: dict with details) + """ + gif_path = Path(gif_path) + + if not gif_path.exists(): + return False, {'error': f'File not found: {gif_path}'} + + size_bytes = gif_path.stat().st_size + size_kb = size_bytes / 1024 + size_mb = size_kb / 1024 + + limit_kb = 64 if is_emoji else 2048 + limit_mb = limit_kb / 1024 + + passes = size_kb <= limit_kb + + info = { + 'size_bytes': size_bytes, + 'size_kb': size_kb, + 'size_mb': size_mb, + 'limit_kb': limit_kb, + 'limit_mb': limit_mb, + 'passes': passes, + 'type': 'emoji' if is_emoji else 'message' + } + + # Print feedback + if passes: + print(f"✓ {size_kb:.1f} KB - within {limit_kb} KB limit") + else: + print(f"✗ {size_kb:.1f} KB - exceeds {limit_kb} KB limit") + overage_kb = size_kb - limit_kb + overage_percent = (overage_kb / limit_kb) * 100 + print(f" Over by: {overage_kb:.1f} KB ({overage_percent:.1f}%)") + print(f" Try: fewer frames, fewer colors, or simpler design") + + return passes, info + + +def validate_dimensions(width: int, height: int, is_emoji: bool = True) -> tuple[bool, dict]: + """ + Check if dimensions are suitable for Slack. + + Args: + width: Frame width in pixels + height: Frame height in pixels + is_emoji: True for emoji GIF, False for message GIF + + Returns: + Tuple of (passes: bool, info: dict with details) + """ + info = { + 'width': width, + 'height': height, + 'is_square': width == height, + 'type': 'emoji' if is_emoji else 'message' + } + + if is_emoji: + # Emoji GIFs should be 128x128 + optimal = width == height == 128 + acceptable = width == height and 64 <= width <= 128 + + info['optimal'] = optimal + info['acceptable'] = acceptable + + if optimal: + print(f"✓ {width}x{height} - optimal for emoji") + passes = True + elif acceptable: + print(f"⚠ {width}x{height} - acceptable but 128x128 is optimal") + passes = True + else: + print(f"✗ {width}x{height} - emoji should be square, 128x128 recommended") + passes = False + else: + # Message GIFs should be square-ish and reasonable size + aspect_ratio = max(width, height) / min(width, height) if min(width, height) > 0 else float('inf') + reasonable_size = 320 <= min(width, height) <= 640 + + info['aspect_ratio'] = aspect_ratio + info['reasonable_size'] = reasonable_size + + # Check if roughly square (within 2:1 ratio) + is_square_ish = aspect_ratio <= 2.0 + + if is_square_ish and reasonable_size: + print(f"✓ {width}x{height} - good for message GIF") + passes = True + elif is_square_ish: + print(f"⚠ {width}x{height} - square-ish but unusual size") + passes = True + elif reasonable_size: + print(f"⚠ {width}x{height} - good size but not square-ish") + passes = True + else: + print(f"✗ {width}x{height} - unusual dimensions for Slack") + passes = False + + return passes, info + + +def validate_gif(gif_path: str | Path, is_emoji: bool = True) -> tuple[bool, dict]: + """ + Run all validations on a GIF file. + + Args: + gif_path: Path to GIF file + is_emoji: True for emoji GIF, False for message GIF + + Returns: + Tuple of (all_pass: bool, results: dict) + """ + from PIL import Image + + gif_path = Path(gif_path) + + if not gif_path.exists(): + return False, {'error': f'File not found: {gif_path}'} + + print(f"\nValidating {gif_path.name} as {'emoji' if is_emoji else 'message'} GIF:") + print("=" * 60) + + # Check file size + size_pass, size_info = check_slack_size(gif_path, is_emoji) + + # Check dimensions + try: + with Image.open(gif_path) as img: + width, height = img.size + dim_pass, dim_info = validate_dimensions(width, height, is_emoji) + + # Count frames + frame_count = 0 + try: + while True: + img.seek(frame_count) + frame_count += 1 + except EOFError: + pass + + # Get duration if available + try: + duration_ms = img.info.get('duration', 100) + total_duration = (duration_ms * frame_count) / 1000 + fps = frame_count / total_duration if total_duration > 0 else 0 + except: + duration_ms = None + total_duration = None + fps = None + + except Exception as e: + return False, {'error': f'Failed to read GIF: {e}'} + + print(f"\nFrames: {frame_count}") + if total_duration: + print(f"Duration: {total_duration:.1f}s @ {fps:.1f} fps") + + all_pass = size_pass and dim_pass + + results = { + 'file': str(gif_path), + 'passes': all_pass, + 'size': size_info, + 'dimensions': dim_info, + 'frame_count': frame_count, + 'duration_seconds': total_duration, + 'fps': fps + } + + print("=" * 60) + if all_pass: + print("✓ All validations passed!") + else: + print("✗ Some validations failed") + print() + + return all_pass, results + + +def get_optimization_suggestions(results: dict) -> list[str]: + """ + Get suggestions for optimizing a GIF based on validation results. + + Args: + results: Results dict from validate_gif() + + Returns: + List of suggestion strings + """ + suggestions = [] + + if not results.get('passes', False): + size_info = results.get('size', {}) + dim_info = results.get('dimensions', {}) + + # Size suggestions + if not size_info.get('passes', True): + overage = size_info['size_kb'] - size_info['limit_kb'] + if size_info['type'] == 'emoji': + suggestions.append(f"Reduce file size by {overage:.1f} KB:") + suggestions.append(" - Limit to 10-12 frames") + suggestions.append(" - Use 32-40 colors maximum") + suggestions.append(" - Remove gradients (solid colors compress better)") + suggestions.append(" - Simplify design") + else: + suggestions.append(f"Reduce file size by {overage:.1f} KB:") + suggestions.append(" - Reduce frame count or FPS") + suggestions.append(" - Use fewer colors (128 → 64)") + suggestions.append(" - Reduce dimensions") + + # Dimension suggestions + if not dim_info.get('optimal', True) and dim_info.get('type') == 'emoji': + suggestions.append("For optimal emoji GIF:") + suggestions.append(" - Use 128x128 dimensions") + suggestions.append(" - Ensure square aspect ratio") + + return suggestions + + +# Convenience function for quick checks +def is_slack_ready(gif_path: str | Path, is_emoji: bool = True, verbose: bool = True) -> bool: + """ + Quick check if GIF is ready for Slack. + + Args: + gif_path: Path to GIF file + is_emoji: True for emoji GIF, False for message GIF + verbose: Print detailed feedback + + Returns: + True if ready, False otherwise + """ + if verbose: + passes, results = validate_gif(gif_path, is_emoji) + if not passes: + suggestions = get_optimization_suggestions(results) + if suggestions: + print("\nSuggestions:") + for suggestion in suggestions: + print(suggestion) + return passes + else: + size_pass, _ = check_slack_size(gif_path, is_emoji) + return size_pass diff --git a/skills/slack-gif-creator/core/visual_effects.py b/skills/slack-gif-creator/core/visual_effects.py new file mode 100644 index 0000000..2ecbbbd --- /dev/null +++ b/skills/slack-gif-creator/core/visual_effects.py @@ -0,0 +1,494 @@ +#!/usr/bin/env python3 +""" +Visual Effects - Particles, motion blur, impacts, and other effects for GIFs. + +This module provides high-impact visual effects that make animations feel +professional and dynamic while keeping file sizes reasonable. +""" + +from PIL import Image, ImageDraw, ImageFilter +import numpy as np +import math +import random +from typing import Optional + + +class Particle: + """A single particle in a particle system.""" + + def __init__(self, x: float, y: float, vx: float, vy: float, + lifetime: float, color: tuple[int, int, int], + size: int = 3, shape: str = 'circle'): + """ + Initialize a particle. + + Args: + x, y: Starting position + vx, vy: Velocity + lifetime: How long particle lives (in frames) + color: RGB color + size: Particle size in pixels + shape: 'circle', 'square', or 'star' + """ + self.x = x + self.y = y + self.vx = vx + self.vy = vy + self.lifetime = lifetime + self.max_lifetime = lifetime + self.color = color + self.size = size + self.shape = shape + self.gravity = 0.5 # Pixels per frame squared + self.drag = 0.98 # Velocity multiplier per frame + + def update(self): + """Update particle position and lifetime.""" + # Apply physics + self.vy += self.gravity + self.vx *= self.drag + self.vy *= self.drag + + # Update position + self.x += self.vx + self.y += self.vy + + # Decrease lifetime + self.lifetime -= 1 + + def is_alive(self) -> bool: + """Check if particle is still alive.""" + return self.lifetime > 0 + + def get_alpha(self) -> float: + """Get particle opacity based on lifetime.""" + return max(0, min(1, self.lifetime / self.max_lifetime)) + + def render(self, frame: Image.Image): + """ + Render particle to frame. + + Args: + frame: PIL Image to draw on + """ + if not self.is_alive(): + return + + draw = ImageDraw.Draw(frame) + alpha = self.get_alpha() + + # Calculate faded color + color = tuple(int(c * alpha) for c in self.color) + + # Draw based on shape + x, y = int(self.x), int(self.y) + size = max(1, int(self.size * alpha)) + + if self.shape == 'circle': + bbox = [x - size, y - size, x + size, y + size] + draw.ellipse(bbox, fill=color) + elif self.shape == 'square': + bbox = [x - size, y - size, x + size, y + size] + draw.rectangle(bbox, fill=color) + elif self.shape == 'star': + # Simple 4-point star + points = [ + (x, y - size), + (x - size // 2, y), + (x, y), + (x, y + size), + (x, y), + (x + size // 2, y), + ] + draw.line(points, fill=color, width=2) + + +class ParticleSystem: + """Manages a collection of particles.""" + + def __init__(self): + """Initialize particle system.""" + self.particles: list[Particle] = [] + + def emit(self, x: int, y: int, count: int = 10, + spread: float = 2.0, speed: float = 5.0, + color: tuple[int, int, int] = (255, 200, 0), + lifetime: float = 20.0, size: int = 3, shape: str = 'circle'): + """ + Emit a burst of particles. + + Args: + x, y: Emission position + count: Number of particles to emit + spread: Angle spread (radians) + speed: Initial speed + color: Particle color + lifetime: Particle lifetime in frames + size: Particle size + shape: Particle shape + """ + for _ in range(count): + # Random angle and speed + angle = random.uniform(0, 2 * math.pi) + vel_mag = random.uniform(speed * 0.5, speed * 1.5) + vx = math.cos(angle) * vel_mag + vy = math.sin(angle) * vel_mag + + # Random lifetime variation + life = random.uniform(lifetime * 0.7, lifetime * 1.3) + + particle = Particle(x, y, vx, vy, life, color, size, shape) + self.particles.append(particle) + + def emit_confetti(self, x: int, y: int, count: int = 20, + colors: Optional[list[tuple[int, int, int]]] = None): + """ + Emit confetti particles (colorful, falling). + + Args: + x, y: Emission position + count: Number of confetti pieces + colors: List of colors (random if None) + """ + if colors is None: + colors = [ + (255, 107, 107), (255, 159, 64), (255, 218, 121), + (107, 185, 240), (162, 155, 254), (255, 182, 193) + ] + + for _ in range(count): + color = random.choice(colors) + vx = random.uniform(-3, 3) + vy = random.uniform(-8, -2) + shape = random.choice(['square', 'circle']) + size = random.randint(2, 4) + lifetime = random.uniform(40, 60) + + particle = Particle(x, y, vx, vy, lifetime, color, size, shape) + particle.gravity = 0.3 # Lighter gravity for confetti + self.particles.append(particle) + + def emit_sparkles(self, x: int, y: int, count: int = 15): + """ + Emit sparkle particles (twinkling stars). + + Args: + x, y: Emission position + count: Number of sparkles + """ + colors = [(255, 255, 200), (255, 255, 255), (255, 255, 150)] + + for _ in range(count): + color = random.choice(colors) + angle = random.uniform(0, 2 * math.pi) + speed = random.uniform(1, 3) + vx = math.cos(angle) * speed + vy = math.sin(angle) * speed + lifetime = random.uniform(15, 30) + + particle = Particle(x, y, vx, vy, lifetime, color, 2, 'star') + particle.gravity = 0 + particle.drag = 0.95 + self.particles.append(particle) + + def update(self): + """Update all particles.""" + # Update alive particles + for particle in self.particles: + particle.update() + + # Remove dead particles + self.particles = [p for p in self.particles if p.is_alive()] + + def render(self, frame: Image.Image): + """Render all particles to frame.""" + for particle in self.particles: + particle.render(frame) + + def get_particle_count(self) -> int: + """Get number of active particles.""" + return len(self.particles) + + +def add_motion_blur(frame: Image.Image, prev_frame: Optional[Image.Image], + blur_amount: float = 0.5) -> Image.Image: + """ + Add motion blur by blending with previous frame. + + Args: + frame: Current frame + prev_frame: Previous frame (None for first frame) + blur_amount: Amount of blur (0.0-1.0) + + Returns: + Frame with motion blur applied + """ + if prev_frame is None: + return frame + + # Blend current frame with previous frame + frame_array = np.array(frame, dtype=np.float32) + prev_array = np.array(prev_frame, dtype=np.float32) + + blended = frame_array * (1 - blur_amount) + prev_array * blur_amount + blended = np.clip(blended, 0, 255).astype(np.uint8) + + return Image.fromarray(blended) + + +def create_impact_flash(frame: Image.Image, position: tuple[int, int], + radius: int = 100, intensity: float = 0.7) -> Image.Image: + """ + Create a bright flash effect at impact point. + + Args: + frame: PIL Image to draw on + position: Center of flash + radius: Flash radius + intensity: Flash intensity (0.0-1.0) + + Returns: + Modified frame + """ + # Create overlay + overlay = Image.new('RGBA', frame.size, (0, 0, 0, 0)) + draw = ImageDraw.Draw(overlay) + + x, y = position + + # Draw concentric circles with decreasing opacity + num_circles = 5 + for i in range(num_circles): + alpha = int(255 * intensity * (1 - i / num_circles)) + r = radius * (1 - i / num_circles) + color = (255, 255, 240, alpha) # Warm white + + bbox = [x - r, y - r, x + r, y + r] + draw.ellipse(bbox, fill=color) + + # Composite onto frame + frame_rgba = frame.convert('RGBA') + frame_rgba = Image.alpha_composite(frame_rgba, overlay) + return frame_rgba.convert('RGB') + + +def create_shockwave_rings(frame: Image.Image, position: tuple[int, int], + radii: list[int], color: tuple[int, int, int] = (255, 200, 0), + width: int = 3) -> Image.Image: + """ + Create expanding ring effects. + + Args: + frame: PIL Image to draw on + position: Center of rings + radii: List of ring radii + color: Ring color + width: Ring width + + Returns: + Modified frame + """ + draw = ImageDraw.Draw(frame) + x, y = position + + for radius in radii: + bbox = [x - radius, y - radius, x + radius, y + radius] + draw.ellipse(bbox, outline=color, width=width) + + return frame + + +def create_explosion_effect(frame: Image.Image, position: tuple[int, int], + radius: int, progress: float, + color: tuple[int, int, int] = (255, 150, 0)) -> Image.Image: + """ + Create an explosion effect that expands and fades. + + Args: + frame: PIL Image to draw on + position: Explosion center + radius: Maximum radius + progress: Animation progress (0.0-1.0) + color: Explosion color + + Returns: + Modified frame + """ + current_radius = int(radius * progress) + fade = 1 - progress + + # Create overlay + overlay = Image.new('RGBA', frame.size, (0, 0, 0, 0)) + draw = ImageDraw.Draw(overlay) + + x, y = position + + # Draw expanding circle with fade + alpha = int(255 * fade) + r, g, b = color + circle_color = (r, g, b, alpha) + + bbox = [x - current_radius, y - current_radius, x + current_radius, y + current_radius] + draw.ellipse(bbox, fill=circle_color) + + # Composite + frame_rgba = frame.convert('RGBA') + frame_rgba = Image.alpha_composite(frame_rgba, overlay) + return frame_rgba.convert('RGB') + + +def add_glow_effect(frame: Image.Image, mask_color: tuple[int, int, int], + glow_color: tuple[int, int, int], + blur_radius: int = 10) -> Image.Image: + """ + Add a glow effect to areas of a specific color. + + Args: + frame: PIL Image + mask_color: Color to create glow around + glow_color: Color of glow + blur_radius: Blur amount + + Returns: + Frame with glow + """ + # Create mask of target color + frame_array = np.array(frame) + mask = np.all(frame_array == mask_color, axis=-1) + + # Create glow layer + glow = Image.new('RGB', frame.size, (0, 0, 0)) + glow_array = np.array(glow) + glow_array[mask] = glow_color + glow = Image.fromarray(glow_array) + + # Blur the glow + glow = glow.filter(ImageFilter.GaussianBlur(blur_radius)) + + # Blend with original + blended = Image.blend(frame, glow, 0.5) + return blended + + +def add_drop_shadow(frame: Image.Image, object_bounds: tuple[int, int, int, int], + shadow_offset: tuple[int, int] = (5, 5), + shadow_color: tuple[int, int, int] = (0, 0, 0), + blur: int = 5) -> Image.Image: + """ + Add drop shadow to an object. + + Args: + frame: PIL Image + object_bounds: (x1, y1, x2, y2) bounds of object + shadow_offset: (x, y) offset of shadow + shadow_color: Shadow color + blur: Shadow blur amount + + Returns: + Frame with shadow + """ + # Extract object + x1, y1, x2, y2 = object_bounds + obj = frame.crop((x1, y1, x2, y2)) + + # Create shadow + shadow = Image.new('RGBA', obj.size, (*shadow_color, 180)) + + # Create frame with alpha + frame_rgba = frame.convert('RGBA') + + # Paste shadow + shadow_pos = (x1 + shadow_offset[0], y1 + shadow_offset[1]) + frame_rgba.paste(shadow, shadow_pos, shadow) + + # Paste object on top + frame_rgba.paste(obj, (x1, y1)) + + return frame_rgba.convert('RGB') + + +def create_speed_lines(frame: Image.Image, position: tuple[int, int], + direction: float, length: int = 50, + count: int = 5, color: tuple[int, int, int] = (200, 200, 200)) -> Image.Image: + """ + Create speed lines for motion effect. + + Args: + frame: PIL Image to draw on + position: Center position + direction: Angle in radians (0 = right, pi/2 = down) + length: Line length + count: Number of lines + color: Line color + + Returns: + Modified frame + """ + draw = ImageDraw.Draw(frame) + x, y = position + + # Opposite direction (lines trail behind) + trail_angle = direction + math.pi + + for i in range(count): + # Offset from center + offset_angle = trail_angle + random.uniform(-0.3, 0.3) + offset_dist = random.uniform(10, 30) + start_x = x + math.cos(offset_angle) * offset_dist + start_y = y + math.sin(offset_angle) * offset_dist + + # End point + line_length = random.uniform(length * 0.7, length * 1.3) + end_x = start_x + math.cos(trail_angle) * line_length + end_y = start_y + math.sin(trail_angle) * line_length + + # Draw line with varying opacity + alpha = random.randint(100, 200) + width = random.randint(1, 3) + + # Simple line (full opacity simulation) + draw.line([(start_x, start_y), (end_x, end_y)], fill=color, width=width) + + return frame + + +def create_screen_shake_offset(intensity: int, frame_index: int) -> tuple[int, int]: + """ + Calculate screen shake offset for a frame. + + Args: + intensity: Shake intensity in pixels + frame_index: Current frame number + + Returns: + (x, y) offset tuple + """ + # Use frame index for deterministic but random-looking shake + random.seed(frame_index) + offset_x = random.randint(-intensity, intensity) + offset_y = random.randint(-intensity, intensity) + random.seed() # Reset seed + return (offset_x, offset_y) + + +def apply_screen_shake(frame: Image.Image, intensity: int, frame_index: int) -> Image.Image: + """ + Apply screen shake effect to entire frame. + + Args: + frame: PIL Image + intensity: Shake intensity + frame_index: Current frame number + + Returns: + Shaken frame + """ + offset_x, offset_y = create_screen_shake_offset(intensity, frame_index) + + # Create new frame with background + shaken = Image.new('RGB', frame.size, (0, 0, 0)) + + # Paste original frame with offset + shaken.paste(frame, (offset_x, offset_y)) + + return shaken \ No newline at end of file diff --git a/skills/slack-gif-creator/requirements.txt b/skills/slack-gif-creator/requirements.txt new file mode 100644 index 0000000..8bc4493 --- /dev/null +++ b/skills/slack-gif-creator/requirements.txt @@ -0,0 +1,4 @@ +pillow>=10.0.0 +imageio>=2.31.0 +imageio-ffmpeg>=0.4.9 +numpy>=1.24.0 \ No newline at end of file diff --git a/skills/slack-gif-creator/templates/bounce.py b/skills/slack-gif-creator/templates/bounce.py new file mode 100644 index 0000000..effbb82 --- /dev/null +++ b/skills/slack-gif-creator/templates/bounce.py @@ -0,0 +1,106 @@ +#!/usr/bin/env python3 +""" +Bounce Animation Template - Creates bouncing motion for objects. + +Use this to make objects bounce up and down or horizontally with realistic physics. +""" + +import sys +from pathlib import Path + +# Add parent directory to path +sys.path.append(str(Path(__file__).parent.parent)) + +from core.gif_builder import GIFBuilder +from core.frame_composer import create_blank_frame, draw_circle, draw_emoji +from core.easing import ease_out_bounce, interpolate + + +def create_bounce_animation( + object_type: str = 'circle', + object_data: dict = None, + num_frames: int = 30, + bounce_height: int = 150, + ground_y: int = 350, + start_x: int = 240, + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list: + """ + Create frames for a bouncing animation. + + Args: + object_type: 'circle', 'emoji', or 'custom' + object_data: Data for the object (e.g., {'radius': 30, 'color': (255, 0, 0)}) + num_frames: Number of frames in the animation + bounce_height: Maximum height of bounce + ground_y: Y position of ground + start_x: X position (or starting X if moving horizontally) + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + frames = [] + + # Default object data + if object_data is None: + if object_type == 'circle': + object_data = {'radius': 30, 'color': (255, 100, 100)} + elif object_type == 'emoji': + object_data = {'emoji': '⚽', 'size': 60} + + for i in range(num_frames): + # Create blank frame + frame = create_blank_frame(frame_width, frame_height, bg_color) + + # Calculate progress (0.0 to 1.0) + t = i / (num_frames - 1) if num_frames > 1 else 0 + + # Calculate Y position using bounce easing + y = ground_y - int(ease_out_bounce(t) * bounce_height) + + # Draw object + if object_type == 'circle': + draw_circle( + frame, + center=(start_x, y), + radius=object_data['radius'], + fill_color=object_data['color'] + ) + elif object_type == 'emoji': + draw_emoji( + frame, + emoji=object_data['emoji'], + position=(start_x - object_data['size'] // 2, y - object_data['size'] // 2), + size=object_data['size'] + ) + + frames.append(frame) + + return frames + + +# Example usage +if __name__ == '__main__': + print("Creating bouncing ball GIF...") + + # Create GIF builder + builder = GIFBuilder(width=480, height=480, fps=20) + + # Generate bounce animation + frames = create_bounce_animation( + object_type='circle', + object_data={'radius': 40, 'color': (255, 100, 100)}, + num_frames=40, + bounce_height=200 + ) + + # Add frames to builder + builder.add_frames(frames) + + # Save GIF + builder.save('bounce_test.gif', num_colors=64) \ No newline at end of file diff --git a/skills/slack-gif-creator/templates/explode.py b/skills/slack-gif-creator/templates/explode.py new file mode 100644 index 0000000..b03a1bd --- /dev/null +++ b/skills/slack-gif-creator/templates/explode.py @@ -0,0 +1,331 @@ +#!/usr/bin/env python3 +""" +Explode Animation - Break objects into pieces that fly outward. + +Creates explosion, shatter, and particle burst effects. +""" + +import sys +from pathlib import Path +import math +import random + +sys.path.append(str(Path(__file__).parent.parent)) + +from PIL import Image, ImageDraw +import numpy as np +from core.gif_builder import GIFBuilder +from core.frame_composer import create_blank_frame, draw_emoji_enhanced +from core.visual_effects import ParticleSystem +from core.easing import interpolate + + +def create_explode_animation( + object_type: str = 'emoji', + object_data: dict | None = None, + num_frames: int = 30, + explode_type: str = 'burst', # 'burst', 'shatter', 'dissolve', 'implode' + num_pieces: int = 20, + explosion_speed: float = 5.0, + center_pos: tuple[int, int] = (240, 240), + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list[Image.Image]: + """ + Create explosion animation. + + Args: + object_type: 'emoji', 'circle', 'text' + object_data: Object configuration + num_frames: Number of frames + explode_type: Type of explosion + num_pieces: Number of pieces/particles + explosion_speed: Speed of explosion + center_pos: Center position + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + frames = [] + + # Default object data + if object_data is None: + if object_type == 'emoji': + object_data = {'emoji': '💣', 'size': 100} + + # Generate pieces/particles + pieces = [] + for _ in range(num_pieces): + angle = random.uniform(0, 2 * math.pi) + speed = random.uniform(explosion_speed * 0.5, explosion_speed * 1.5) + vx = math.cos(angle) * speed + vy = math.sin(angle) * speed + size = random.randint(3, 12) + color = ( + random.randint(100, 255), + random.randint(100, 255), + random.randint(100, 255) + ) + rotation_speed = random.uniform(-20, 20) + + pieces.append({ + 'vx': vx, + 'vy': vy, + 'size': size, + 'color': color, + 'rotation': 0, + 'rotation_speed': rotation_speed + }) + + for i in range(num_frames): + t = i / (num_frames - 1) if num_frames > 1 else 0 + frame = create_blank_frame(frame_width, frame_height, bg_color) + draw = ImageDraw.Draw(frame) + + if explode_type == 'burst': + # Show object at start, then explode + if t < 0.2: + # Object still intact + scale = interpolate(1.0, 1.2, t / 0.2, 'ease_out') + if object_type == 'emoji': + size = int(object_data['size'] * scale) + draw_emoji_enhanced( + frame, + emoji=object_data['emoji'], + position=(center_pos[0] - size // 2, center_pos[1] - size // 2), + size=size, + shadow=False + ) + else: + # Exploded - draw pieces + explosion_t = (t - 0.2) / 0.8 + for piece in pieces: + # Update position + x = center_pos[0] + piece['vx'] * explosion_t * 50 + y = center_pos[1] + piece['vy'] * explosion_t * 50 + 0.5 * 300 * explosion_t ** 2 # Gravity + + # Fade out + alpha = 1.0 - explosion_t + if alpha > 0: + color = tuple(int(c * alpha) for c in piece['color']) + size = int(piece['size'] * (1 - explosion_t * 0.5)) + + draw.ellipse( + [x - size, y - size, x + size, y + size], + fill=color + ) + + elif explode_type == 'shatter': + # Break into geometric pieces + if t < 0.15: + # Object intact + if object_type == 'emoji': + draw_emoji_enhanced( + frame, + emoji=object_data['emoji'], + position=(center_pos[0] - object_data['size'] // 2, + center_pos[1] - object_data['size'] // 2), + size=object_data['size'], + shadow=False + ) + else: + # Shattered + shatter_t = (t - 0.15) / 0.85 + + # Draw triangular shards + for piece in pieces[:min(10, len(pieces))]: + x = center_pos[0] + piece['vx'] * shatter_t * 30 + y = center_pos[1] + piece['vy'] * shatter_t * 30 + 0.5 * 200 * shatter_t ** 2 + + # Update rotation + rotation = piece['rotation_speed'] * shatter_t * 100 + + # Draw triangle shard + shard_size = piece['size'] * 2 + points = [] + for j in range(3): + angle = (rotation + j * 120) * math.pi / 180 + px = x + shard_size * math.cos(angle) + py = y + shard_size * math.sin(angle) + points.append((px, py)) + + alpha = 1.0 - shatter_t + if alpha > 0: + color = tuple(int(c * alpha) for c in piece['color']) + draw.polygon(points, fill=color) + + elif explode_type == 'dissolve': + # Dissolve into particles + dissolve_scale = interpolate(1.0, 0.0, t, 'ease_in') + + if dissolve_scale > 0.1: + # Draw fading object + if object_type == 'emoji': + size = int(object_data['size'] * dissolve_scale) + size = max(12, size) + + emoji_canvas = Image.new('RGBA', (frame_width, frame_height), (0, 0, 0, 0)) + draw_emoji_enhanced( + emoji_canvas, + emoji=object_data['emoji'], + position=(center_pos[0] - size // 2, center_pos[1] - size // 2), + size=size, + shadow=False + ) + + # Apply opacity + from templates.fade import apply_opacity + emoji_canvas = apply_opacity(emoji_canvas, dissolve_scale) + + frame_rgba = frame.convert('RGBA') + frame = Image.alpha_composite(frame_rgba, emoji_canvas) + frame = frame.convert('RGB') + draw = ImageDraw.Draw(frame) + + # Draw outward-moving particles + for piece in pieces: + x = center_pos[0] + piece['vx'] * t * 40 + y = center_pos[1] + piece['vy'] * t * 40 + + alpha = 1.0 - t + if alpha > 0: + color = tuple(int(c * alpha) for c in piece['color']) + size = int(piece['size'] * (1 - t * 0.5)) + draw.ellipse( + [x - size, y - size, x + size, y + size], + fill=color + ) + + elif explode_type == 'implode': + # Reverse explosion - pieces fly inward + if t < 0.7: + # Pieces converging + implode_t = 1.0 - (t / 0.7) + for piece in pieces: + x = center_pos[0] + piece['vx'] * implode_t * 50 + y = center_pos[1] + piece['vy'] * implode_t * 50 + + alpha = 1.0 - (1.0 - implode_t) * 0.5 + color = tuple(int(c * alpha) for c in piece['color']) + size = int(piece['size'] * alpha) + + draw.ellipse( + [x - size, y - size, x + size, y + size], + fill=color + ) + else: + # Object reforms + reform_t = (t - 0.7) / 0.3 + scale = interpolate(0.5, 1.0, reform_t, 'elastic_out') + + if object_type == 'emoji': + size = int(object_data['size'] * scale) + draw_emoji_enhanced( + frame, + emoji=object_data['emoji'], + position=(center_pos[0] - size // 2, center_pos[1] - size // 2), + size=size, + shadow=False + ) + + frames.append(frame) + + return frames + + +def create_particle_burst( + num_frames: int = 25, + particle_count: int = 30, + center_pos: tuple[int, int] = (240, 240), + colors: list[tuple[int, int, int]] | None = None, + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list[Image.Image]: + """ + Create simple particle burst effect. + + Args: + num_frames: Number of frames + particle_count: Number of particles + center_pos: Burst center + colors: Particle colors (None for random) + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + particles = ParticleSystem() + + # Emit particles + if colors is None: + from core.color_palettes import get_palette + palette = get_palette('vibrant') + colors = [palette['primary'], palette['secondary'], palette['accent']] + + for _ in range(particle_count): + color = random.choice(colors) + particles.emit( + center_pos[0], center_pos[1], + count=1, + speed=random.uniform(3, 8), + color=color, + lifetime=random.uniform(20, 30), + size=random.randint(3, 8), + shape='star' + ) + + frames = [] + for _ in range(num_frames): + frame = create_blank_frame(frame_width, frame_height, bg_color) + + particles.update() + particles.render(frame) + + frames.append(frame) + + return frames + + +# Example usage +if __name__ == '__main__': + print("Creating explode animations...") + + builder = GIFBuilder(width=480, height=480, fps=20) + + # Example 1: Burst + frames = create_explode_animation( + object_type='emoji', + object_data={'emoji': '💣', 'size': 100}, + num_frames=30, + explode_type='burst', + num_pieces=25 + ) + builder.add_frames(frames) + builder.save('explode_burst.gif', num_colors=128) + + # Example 2: Shatter + builder.clear() + frames = create_explode_animation( + object_type='emoji', + object_data={'emoji': '🪟', 'size': 100}, + num_frames=30, + explode_type='shatter', + num_pieces=12 + ) + builder.add_frames(frames) + builder.save('explode_shatter.gif', num_colors=128) + + # Example 3: Particle burst + builder.clear() + frames = create_particle_burst(num_frames=25, particle_count=40) + builder.add_frames(frames) + builder.save('explode_particles.gif', num_colors=128) + + print("Created explode animations!") diff --git a/skills/slack-gif-creator/templates/fade.py b/skills/slack-gif-creator/templates/fade.py new file mode 100644 index 0000000..fc7d0e3 --- /dev/null +++ b/skills/slack-gif-creator/templates/fade.py @@ -0,0 +1,329 @@ +#!/usr/bin/env python3 +""" +Fade Animation - Fade in, fade out, and crossfade effects. + +Creates smooth opacity transitions for appearing, disappearing, and transitioning. +""" + +import sys +from pathlib import Path + +sys.path.append(str(Path(__file__).parent.parent)) + +from PIL import Image, ImageDraw +import numpy as np +from core.gif_builder import GIFBuilder +from core.frame_composer import create_blank_frame, draw_emoji_enhanced +from core.easing import interpolate + + +def create_fade_animation( + object_type: str = 'emoji', + object_data: dict | None = None, + num_frames: int = 30, + fade_type: str = 'in', # 'in', 'out', 'in_out', 'blink' + easing: str = 'ease_in_out', + center_pos: tuple[int, int] = (240, 240), + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list[Image.Image]: + """ + Create fade animation. + + Args: + object_type: 'emoji', 'text', 'image' + object_data: Object configuration + num_frames: Number of frames + fade_type: Type of fade effect + easing: Easing function + center_pos: Center position + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + frames = [] + + # Default object data + if object_data is None: + if object_type == 'emoji': + object_data = {'emoji': '✨', 'size': 100} + + for i in range(num_frames): + t = i / (num_frames - 1) if num_frames > 1 else 0 + + # Calculate opacity based on fade type + if fade_type == 'in': + opacity = interpolate(0, 1, t, easing) + elif fade_type == 'out': + opacity = interpolate(1, 0, t, easing) + elif fade_type == 'in_out': + if t < 0.5: + opacity = interpolate(0, 1, t * 2, easing) + else: + opacity = interpolate(1, 0, (t - 0.5) * 2, easing) + elif fade_type == 'blink': + # Quick fade out and back in + if t < 0.2: + opacity = interpolate(1, 0, t / 0.2, 'ease_in') + elif t < 0.4: + opacity = interpolate(0, 1, (t - 0.2) / 0.2, 'ease_out') + else: + opacity = 1.0 + else: + opacity = interpolate(0, 1, t, easing) + + # Create background + frame_bg = create_blank_frame(frame_width, frame_height, bg_color) + + # Create object layer with transparency + if object_type == 'emoji': + # Create RGBA canvas for emoji + emoji_canvas = Image.new('RGBA', (frame_width, frame_height), (0, 0, 0, 0)) + emoji_size = object_data['size'] + draw_emoji_enhanced( + emoji_canvas, + emoji=object_data['emoji'], + position=(center_pos[0] - emoji_size // 2, center_pos[1] - emoji_size // 2), + size=emoji_size, + shadow=object_data.get('shadow', False) + ) + + # Apply opacity + emoji_canvas = apply_opacity(emoji_canvas, opacity) + + # Composite onto background + frame_bg_rgba = frame_bg.convert('RGBA') + frame = Image.alpha_composite(frame_bg_rgba, emoji_canvas) + frame = frame.convert('RGB') + + elif object_type == 'text': + from core.typography import draw_text_with_outline + + # Create text on separate layer + text_canvas = Image.new('RGBA', (frame_width, frame_height), (0, 0, 0, 0)) + text_canvas_rgb = text_canvas.convert('RGB') + text_canvas_rgb.paste(bg_color, (0, 0, frame_width, frame_height)) + + draw_text_with_outline( + text_canvas_rgb, + text=object_data.get('text', 'FADE'), + position=center_pos, + font_size=object_data.get('font_size', 60), + text_color=object_data.get('text_color', (0, 0, 0)), + outline_color=object_data.get('outline_color', (255, 255, 255)), + outline_width=3, + centered=True + ) + + # Convert to RGBA and make background transparent + text_canvas = text_canvas_rgb.convert('RGBA') + data = text_canvas.getdata() + new_data = [] + for item in data: + if item[:3] == bg_color: + new_data.append((255, 255, 255, 0)) + else: + new_data.append(item) + text_canvas.putdata(new_data) + + # Apply opacity + text_canvas = apply_opacity(text_canvas, opacity) + + # Composite + frame_bg_rgba = frame_bg.convert('RGBA') + frame = Image.alpha_composite(frame_bg_rgba, text_canvas) + frame = frame.convert('RGB') + + else: + frame = frame_bg + + frames.append(frame) + + return frames + + +def apply_opacity(image: Image.Image, opacity: float) -> Image.Image: + """ + Apply opacity to an RGBA image. + + Args: + image: RGBA image + opacity: Opacity value (0.0 to 1.0) + + Returns: + Image with adjusted opacity + """ + if image.mode != 'RGBA': + image = image.convert('RGBA') + + # Get alpha channel + r, g, b, a = image.split() + + # Multiply alpha by opacity + a_array = np.array(a, dtype=np.float32) + a_array = a_array * opacity + a = Image.fromarray(a_array.astype(np.uint8)) + + # Merge back + return Image.merge('RGBA', (r, g, b, a)) + + +def create_crossfade( + object1_data: dict, + object2_data: dict, + num_frames: int = 30, + easing: str = 'ease_in_out', + object_type: str = 'emoji', + center_pos: tuple[int, int] = (240, 240), + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list[Image.Image]: + """ + Crossfade between two objects. + + Args: + object1_data: First object configuration + object2_data: Second object configuration + num_frames: Number of frames + easing: Easing function + object_type: Type of objects + center_pos: Center position + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + frames = [] + + for i in range(num_frames): + t = i / (num_frames - 1) if num_frames > 1 else 0 + + # Calculate opacities + opacity1 = interpolate(1, 0, t, easing) + opacity2 = interpolate(0, 1, t, easing) + + # Create background + frame = create_blank_frame(frame_width, frame_height, bg_color) + + if object_type == 'emoji': + # Create first emoji + emoji1_canvas = Image.new('RGBA', (frame_width, frame_height), (0, 0, 0, 0)) + size1 = object1_data['size'] + draw_emoji_enhanced( + emoji1_canvas, + emoji=object1_data['emoji'], + position=(center_pos[0] - size1 // 2, center_pos[1] - size1 // 2), + size=size1, + shadow=False + ) + emoji1_canvas = apply_opacity(emoji1_canvas, opacity1) + + # Create second emoji + emoji2_canvas = Image.new('RGBA', (frame_width, frame_height), (0, 0, 0, 0)) + size2 = object2_data['size'] + draw_emoji_enhanced( + emoji2_canvas, + emoji=object2_data['emoji'], + position=(center_pos[0] - size2 // 2, center_pos[1] - size2 // 2), + size=size2, + shadow=False + ) + emoji2_canvas = apply_opacity(emoji2_canvas, opacity2) + + # Composite both + frame_rgba = frame.convert('RGBA') + frame_rgba = Image.alpha_composite(frame_rgba, emoji1_canvas) + frame_rgba = Image.alpha_composite(frame_rgba, emoji2_canvas) + frame = frame_rgba.convert('RGB') + + frames.append(frame) + + return frames + + +def create_fade_to_color( + start_color: tuple[int, int, int], + end_color: tuple[int, int, int], + num_frames: int = 20, + easing: str = 'linear', + frame_width: int = 480, + frame_height: int = 480 +) -> list[Image.Image]: + """ + Fade from one solid color to another. + + Args: + start_color: Starting RGB color + end_color: Ending RGB color + num_frames: Number of frames + easing: Easing function + frame_width: Frame width + frame_height: Frame height + + Returns: + List of frames + """ + frames = [] + + for i in range(num_frames): + t = i / (num_frames - 1) if num_frames > 1 else 0 + + # Interpolate each color channel + r = int(interpolate(start_color[0], end_color[0], t, easing)) + g = int(interpolate(start_color[1], end_color[1], t, easing)) + b = int(interpolate(start_color[2], end_color[2], t, easing)) + + color = (r, g, b) + frame = create_blank_frame(frame_width, frame_height, color) + frames.append(frame) + + return frames + + +# Example usage +if __name__ == '__main__': + print("Creating fade animations...") + + builder = GIFBuilder(width=480, height=480, fps=20) + + # Example 1: Fade in + frames = create_fade_animation( + object_type='emoji', + object_data={'emoji': '✨', 'size': 120}, + num_frames=30, + fade_type='in', + easing='ease_out' + ) + builder.add_frames(frames) + builder.save('fade_in.gif', num_colors=128) + + # Example 2: Crossfade + builder.clear() + frames = create_crossfade( + object1_data={'emoji': '😊', 'size': 100}, + object2_data={'emoji': '😂', 'size': 100}, + num_frames=30, + object_type='emoji' + ) + builder.add_frames(frames) + builder.save('fade_crossfade.gif', num_colors=128) + + # Example 3: Blink + builder.clear() + frames = create_fade_animation( + object_type='emoji', + object_data={'emoji': '👀', 'size': 100}, + num_frames=20, + fade_type='blink' + ) + builder.add_frames(frames) + builder.save('fade_blink.gif', num_colors=128) + + print("Created fade animations!") diff --git a/skills/slack-gif-creator/templates/flip.py b/skills/slack-gif-creator/templates/flip.py new file mode 100644 index 0000000..371d393 --- /dev/null +++ b/skills/slack-gif-creator/templates/flip.py @@ -0,0 +1,291 @@ +#!/usr/bin/env python3 +""" +Flip Animation - 3D-style card flip and rotation effects. + +Creates horizontal and vertical flips with perspective. +""" + +import sys +from pathlib import Path +import math + +sys.path.append(str(Path(__file__).parent.parent)) + +from PIL import Image +from core.gif_builder import GIFBuilder +from core.frame_composer import create_blank_frame, draw_emoji_enhanced +from core.easing import interpolate + + +def create_flip_animation( + object1_data: dict, + object2_data: dict | None = None, + num_frames: int = 30, + flip_axis: str = 'horizontal', # 'horizontal', 'vertical' + easing: str = 'ease_in_out', + object_type: str = 'emoji', + center_pos: tuple[int, int] = (240, 240), + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list[Image.Image]: + """ + Create 3D-style flip animation. + + Args: + object1_data: First object (front side) + object2_data: Second object (back side, None = same as front) + num_frames: Number of frames + flip_axis: Axis to flip around + easing: Easing function + object_type: Type of objects + center_pos: Center position + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + frames = [] + + if object2_data is None: + object2_data = object1_data + + for i in range(num_frames): + t = i / (num_frames - 1) if num_frames > 1 else 0 + frame = create_blank_frame(frame_width, frame_height, bg_color) + + # Calculate rotation angle (0 to 180 degrees) + angle = interpolate(0, 180, t, easing) + + # Determine which side is visible and calculate scale + if angle < 90: + # Front side visible + current_object = object1_data + scale_factor = math.cos(math.radians(angle)) + else: + # Back side visible + current_object = object2_data + scale_factor = abs(math.cos(math.radians(angle))) + + # Don't draw when edge-on (very thin) + if scale_factor < 0.05: + frames.append(frame) + continue + + if object_type == 'emoji': + size = current_object['size'] + + # Create emoji on canvas + canvas_size = size * 2 + emoji_canvas = Image.new('RGBA', (canvas_size, canvas_size), (0, 0, 0, 0)) + + draw_emoji_enhanced( + emoji_canvas, + emoji=current_object['emoji'], + position=(canvas_size // 2 - size // 2, canvas_size // 2 - size // 2), + size=size, + shadow=False + ) + + # Apply flip scaling + if flip_axis == 'horizontal': + # Scale horizontally for horizontal flip + new_width = max(1, int(canvas_size * scale_factor)) + new_height = canvas_size + else: + # Scale vertically for vertical flip + new_width = canvas_size + new_height = max(1, int(canvas_size * scale_factor)) + + # Resize to simulate 3D rotation + emoji_scaled = emoji_canvas.resize((new_width, new_height), Image.LANCZOS) + + # Position centered + paste_x = center_pos[0] - new_width // 2 + paste_y = center_pos[1] - new_height // 2 + + # Composite onto frame + frame_rgba = frame.convert('RGBA') + frame_rgba.paste(emoji_scaled, (paste_x, paste_y), emoji_scaled) + frame = frame_rgba.convert('RGB') + + elif object_type == 'text': + from core.typography import draw_text_with_outline + + # Create text on canvas + text = current_object.get('text', 'FLIP') + font_size = current_object.get('font_size', 50) + + canvas_size = max(frame_width, frame_height) + text_canvas = Image.new('RGBA', (canvas_size, canvas_size), (0, 0, 0, 0)) + + # Draw on RGB for text rendering + text_canvas_rgb = text_canvas.convert('RGB') + text_canvas_rgb.paste(bg_color, (0, 0, canvas_size, canvas_size)) + + draw_text_with_outline( + text_canvas_rgb, + text=text, + position=(canvas_size // 2, canvas_size // 2), + font_size=font_size, + text_color=current_object.get('text_color', (0, 0, 0)), + outline_color=current_object.get('outline_color', (255, 255, 255)), + outline_width=3, + centered=True + ) + + # Make background transparent + text_canvas = text_canvas_rgb.convert('RGBA') + data = text_canvas.getdata() + new_data = [] + for item in data: + if item[:3] == bg_color: + new_data.append((255, 255, 255, 0)) + else: + new_data.append(item) + text_canvas.putdata(new_data) + + # Apply flip scaling + if flip_axis == 'horizontal': + new_width = max(1, int(canvas_size * scale_factor)) + new_height = canvas_size + else: + new_width = canvas_size + new_height = max(1, int(canvas_size * scale_factor)) + + text_scaled = text_canvas.resize((new_width, new_height), Image.LANCZOS) + + # Center and crop + if flip_axis == 'horizontal': + left = (new_width - frame_width) // 2 if new_width > frame_width else 0 + top = (canvas_size - frame_height) // 2 + paste_x = center_pos[0] - min(new_width, frame_width) // 2 + paste_y = 0 + + text_cropped = text_scaled.crop(( + left, + top, + left + min(new_width, frame_width), + top + frame_height + )) + else: + left = (canvas_size - frame_width) // 2 + top = (new_height - frame_height) // 2 if new_height > frame_height else 0 + paste_x = 0 + paste_y = center_pos[1] - min(new_height, frame_height) // 2 + + text_cropped = text_scaled.crop(( + left, + top, + left + frame_width, + top + min(new_height, frame_height) + )) + + frame_rgba = frame.convert('RGBA') + frame_rgba.paste(text_cropped, (paste_x, paste_y), text_cropped) + frame = frame_rgba.convert('RGB') + + frames.append(frame) + + return frames + + +def create_quick_flip( + emoji_front: str, + emoji_back: str, + num_frames: int = 20, + frame_size: int = 128 +) -> list[Image.Image]: + """ + Create quick flip for emoji GIFs. + + Args: + emoji_front: Front emoji + emoji_back: Back emoji + num_frames: Number of frames + frame_size: Frame size (square) + + Returns: + List of frames + """ + return create_flip_animation( + object1_data={'emoji': emoji_front, 'size': 80}, + object2_data={'emoji': emoji_back, 'size': 80}, + num_frames=num_frames, + flip_axis='horizontal', + easing='ease_in_out', + object_type='emoji', + center_pos=(frame_size // 2, frame_size // 2), + frame_width=frame_size, + frame_height=frame_size, + bg_color=(255, 255, 255) + ) + + +def create_nope_flip( + num_frames: int = 25, + frame_width: int = 480, + frame_height: int = 480 +) -> list[Image.Image]: + """ + Create "nope" reaction flip (like flipping table). + + Args: + num_frames: Number of frames + frame_width: Frame width + frame_height: Frame height + + Returns: + List of frames + """ + return create_flip_animation( + object1_data={'text': 'NOPE', 'font_size': 80, 'text_color': (255, 50, 50)}, + object2_data={'text': 'NOPE', 'font_size': 80, 'text_color': (255, 50, 50)}, + num_frames=num_frames, + flip_axis='horizontal', + easing='ease_out', + object_type='text', + frame_width=frame_width, + frame_height=frame_height, + bg_color=(255, 255, 255) + ) + + +# Example usage +if __name__ == '__main__': + print("Creating flip animations...") + + builder = GIFBuilder(width=480, height=480, fps=20) + + # Example 1: Emoji flip + frames = create_flip_animation( + object1_data={'emoji': '😊', 'size': 120}, + object2_data={'emoji': '😂', 'size': 120}, + num_frames=30, + flip_axis='horizontal', + object_type='emoji' + ) + builder.add_frames(frames) + builder.save('flip_emoji.gif', num_colors=128) + + # Example 2: Text flip + builder.clear() + frames = create_flip_animation( + object1_data={'text': 'YES', 'font_size': 80, 'text_color': (100, 200, 100)}, + object2_data={'text': 'NO', 'font_size': 80, 'text_color': (200, 100, 100)}, + num_frames=30, + flip_axis='vertical', + object_type='text' + ) + builder.add_frames(frames) + builder.save('flip_text.gif', num_colors=128) + + # Example 3: Quick flip (emoji size) + builder = GIFBuilder(width=128, height=128, fps=15) + frames = create_quick_flip('👍', '👎', num_frames=20) + builder.add_frames(frames) + builder.save('flip_quick.gif', num_colors=48, optimize_for_emoji=True) + + print("Created flip animations!") diff --git a/skills/slack-gif-creator/templates/kaleidoscope.py b/skills/slack-gif-creator/templates/kaleidoscope.py new file mode 100644 index 0000000..4cdcdf0 --- /dev/null +++ b/skills/slack-gif-creator/templates/kaleidoscope.py @@ -0,0 +1,211 @@ +#!/usr/bin/env python3 +""" +Kaleidoscope Effect - Create mirror/rotation effects. + +Apply kaleidoscope effects to frames or objects for psychedelic visuals. +""" + +import sys +from pathlib import Path +import math + +sys.path.append(str(Path(__file__).parent.parent)) + +from PIL import Image, ImageOps, ImageDraw +import numpy as np + + +def apply_kaleidoscope(frame: Image.Image, segments: int = 8, + center: tuple[int, int] | None = None) -> Image.Image: + """ + Apply kaleidoscope effect by mirroring/rotating frame sections. + + Args: + frame: Input frame + segments: Number of mirror segments (4, 6, 8, 12 work well) + center: Center point for effect (None = frame center) + + Returns: + Frame with kaleidoscope effect + """ + width, height = frame.size + + if center is None: + center = (width // 2, height // 2) + + # Create output frame + output = Image.new('RGB', (width, height)) + + # Calculate angle per segment + angle_per_segment = 360 / segments + + # For simplicity, we'll create a radial mirror effect + # A full implementation would rotate and mirror properly + # This is a simplified version that creates interesting patterns + + # Convert to numpy for easier manipulation + frame_array = np.array(frame) + output_array = np.zeros_like(frame_array) + + center_x, center_y = center + + # Create wedge mask and mirror it + for y in range(height): + for x in range(width): + # Calculate angle from center + dx = x - center_x + dy = y - center_y + + angle = (math.degrees(math.atan2(dy, dx)) + 180) % 360 + distance = math.sqrt(dx * dx + dy * dy) + + # Which segment does this pixel belong to? + segment = int(angle / angle_per_segment) + + # Mirror angle within segment + segment_angle = angle % angle_per_segment + if segment % 2 == 1: # Mirror every other segment + segment_angle = angle_per_segment - segment_angle + + # Calculate source position + source_angle = segment_angle + (segment // 2) * angle_per_segment * 2 + source_angle_rad = math.radians(source_angle - 180) + + source_x = int(center_x + distance * math.cos(source_angle_rad)) + source_y = int(center_y + distance * math.sin(source_angle_rad)) + + # Bounds check + if 0 <= source_x < width and 0 <= source_y < height: + output_array[y, x] = frame_array[source_y, source_x] + else: + output_array[y, x] = frame_array[y, x] + + return Image.fromarray(output_array) + + +def apply_simple_mirror(frame: Image.Image, mode: str = 'quad') -> Image.Image: + """ + Apply simple mirror effect (faster than full kaleidoscope). + + Args: + frame: Input frame + mode: 'horizontal', 'vertical', 'quad' (4-way), 'radial' + + Returns: + Mirrored frame + """ + width, height = frame.size + center_x, center_y = width // 2, height // 2 + + if mode == 'horizontal': + # Mirror left half to right + left_half = frame.crop((0, 0, center_x, height)) + left_flipped = ImageOps.mirror(left_half) + result = frame.copy() + result.paste(left_flipped, (center_x, 0)) + return result + + elif mode == 'vertical': + # Mirror top half to bottom + top_half = frame.crop((0, 0, width, center_y)) + top_flipped = ImageOps.flip(top_half) + result = frame.copy() + result.paste(top_flipped, (0, center_y)) + return result + + elif mode == 'quad': + # 4-way mirror (top-left quadrant mirrored to all) + quad = frame.crop((0, 0, center_x, center_y)) + + result = Image.new('RGB', (width, height)) + + # Top-left (original) + result.paste(quad, (0, 0)) + + # Top-right (horizontal mirror) + result.paste(ImageOps.mirror(quad), (center_x, 0)) + + # Bottom-left (vertical mirror) + result.paste(ImageOps.flip(quad), (0, center_y)) + + # Bottom-right (both mirrors) + result.paste(ImageOps.flip(ImageOps.mirror(quad)), (center_x, center_y)) + + return result + + else: + return frame + + +def create_kaleidoscope_animation( + base_frame: Image.Image | None = None, + num_frames: int = 30, + segments: int = 8, + rotation_speed: float = 1.0, + width: int = 480, + height: int = 480 +) -> list[Image.Image]: + """ + Create animated kaleidoscope effect. + + Args: + base_frame: Frame to apply effect to (or None for demo pattern) + num_frames: Number of frames + segments: Kaleidoscope segments + rotation_speed: How fast pattern rotates (0.5-2.0) + width: Frame width if generating demo + height: Frame height if generating demo + + Returns: + List of frames with kaleidoscope effect + """ + frames = [] + + # Create demo pattern if no base frame + if base_frame is None: + base_frame = Image.new('RGB', (width, height), (255, 255, 255)) + draw = ImageDraw.Draw(base_frame) + + # Draw some colored shapes + from core.color_palettes import get_palette + palette = get_palette('vibrant') + + colors = [palette['primary'], palette['secondary'], palette['accent']] + + for i, color in enumerate(colors): + x = width // 2 + int(100 * math.cos(i * 2 * math.pi / 3)) + y = height // 2 + int(100 * math.sin(i * 2 * math.pi / 3)) + draw.ellipse([x - 40, y - 40, x + 40, y + 40], fill=color) + + # Rotate base frame and apply kaleidoscope + for i in range(num_frames): + angle = (i / num_frames) * 360 * rotation_speed + + # Rotate base frame + rotated = base_frame.rotate(angle, resample=Image.BICUBIC) + + # Apply kaleidoscope + kaleido_frame = apply_kaleidoscope(rotated, segments=segments) + + frames.append(kaleido_frame) + + return frames + + +# Example usage +if __name__ == '__main__': + from core.gif_builder import GIFBuilder + + print("Creating kaleidoscope GIF...") + + builder = GIFBuilder(width=480, height=480, fps=20) + + # Create kaleidoscope animation + frames = create_kaleidoscope_animation( + num_frames=40, + segments=8, + rotation_speed=0.5 + ) + + builder.add_frames(frames) + builder.save('kaleidoscope_test.gif', num_colors=128) diff --git a/skills/slack-gif-creator/templates/morph.py b/skills/slack-gif-creator/templates/morph.py new file mode 100644 index 0000000..3c8c46e --- /dev/null +++ b/skills/slack-gif-creator/templates/morph.py @@ -0,0 +1,329 @@ +#!/usr/bin/env python3 +""" +Morph Animation - Transform between different emojis or shapes. + +Creates smooth transitions and transformations. +""" + +import sys +from pathlib import Path + +sys.path.append(str(Path(__file__).parent.parent)) + +from PIL import Image +import numpy as np +from core.gif_builder import GIFBuilder +from core.frame_composer import create_blank_frame, draw_emoji_enhanced, draw_circle +from core.easing import interpolate + + +def create_morph_animation( + object1_data: dict, + object2_data: dict, + num_frames: int = 30, + morph_type: str = 'crossfade', # 'crossfade', 'scale', 'spin_morph' + easing: str = 'ease_in_out', + object_type: str = 'emoji', + center_pos: tuple[int, int] = (240, 240), + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list[Image.Image]: + """ + Create morphing animation between two objects. + + Args: + object1_data: First object configuration + object2_data: Second object configuration + num_frames: Number of frames + morph_type: Type of morph effect + easing: Easing function + object_type: Type of objects + center_pos: Center position + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + frames = [] + + for i in range(num_frames): + t = i / (num_frames - 1) if num_frames > 1 else 0 + frame = create_blank_frame(frame_width, frame_height, bg_color) + + if morph_type == 'crossfade': + # Simple crossfade between two objects + opacity1 = interpolate(1, 0, t, easing) + opacity2 = interpolate(0, 1, t, easing) + + if object_type == 'emoji': + # Create first emoji + emoji1_canvas = Image.new('RGBA', (frame_width, frame_height), (0, 0, 0, 0)) + size1 = object1_data['size'] + draw_emoji_enhanced( + emoji1_canvas, + emoji=object1_data['emoji'], + position=(center_pos[0] - size1 // 2, center_pos[1] - size1 // 2), + size=size1, + shadow=False + ) + + # Apply opacity + from templates.fade import apply_opacity + emoji1_canvas = apply_opacity(emoji1_canvas, opacity1) + + # Create second emoji + emoji2_canvas = Image.new('RGBA', (frame_width, frame_height), (0, 0, 0, 0)) + size2 = object2_data['size'] + draw_emoji_enhanced( + emoji2_canvas, + emoji=object2_data['emoji'], + position=(center_pos[0] - size2 // 2, center_pos[1] - size2 // 2), + size=size2, + shadow=False + ) + + emoji2_canvas = apply_opacity(emoji2_canvas, opacity2) + + # Composite both + frame_rgba = frame.convert('RGBA') + frame_rgba = Image.alpha_composite(frame_rgba, emoji1_canvas) + frame_rgba = Image.alpha_composite(frame_rgba, emoji2_canvas) + frame = frame_rgba.convert('RGB') + + elif object_type == 'circle': + # Morph between two circles + radius1 = object1_data['radius'] + radius2 = object2_data['radius'] + color1 = object1_data['color'] + color2 = object2_data['color'] + + # Interpolate properties + current_radius = int(interpolate(radius1, radius2, t, easing)) + current_color = tuple( + int(interpolate(color1[i], color2[i], t, easing)) + for i in range(3) + ) + + draw_circle(frame, center_pos, current_radius, fill_color=current_color) + + elif morph_type == 'scale': + # First object scales down as second scales up + if object_type == 'emoji': + scale1 = interpolate(1.0, 0.0, t, easing) + scale2 = interpolate(0.0, 1.0, t, easing) + + # Draw first emoji (shrinking) + if scale1 > 0.05: + size1 = int(object1_data['size'] * scale1) + size1 = max(12, size1) + emoji1_canvas = Image.new('RGBA', (frame_width, frame_height), (0, 0, 0, 0)) + draw_emoji_enhanced( + emoji1_canvas, + emoji=object1_data['emoji'], + position=(center_pos[0] - size1 // 2, center_pos[1] - size1 // 2), + size=size1, + shadow=False + ) + + frame_rgba = frame.convert('RGBA') + frame = Image.alpha_composite(frame_rgba, emoji1_canvas) + frame = frame.convert('RGB') + + # Draw second emoji (growing) + if scale2 > 0.05: + size2 = int(object2_data['size'] * scale2) + size2 = max(12, size2) + emoji2_canvas = Image.new('RGBA', (frame_width, frame_height), (0, 0, 0, 0)) + draw_emoji_enhanced( + emoji2_canvas, + emoji=object2_data['emoji'], + position=(center_pos[0] - size2 // 2, center_pos[1] - size2 // 2), + size=size2, + shadow=False + ) + + frame_rgba = frame.convert('RGBA') + frame = Image.alpha_composite(frame_rgba, emoji2_canvas) + frame = frame.convert('RGB') + + elif morph_type == 'spin_morph': + # Spin while morphing (flip-like) + import math + + # Calculate rotation (0 to 180 degrees) + angle = interpolate(0, 180, t, easing) + scale_factor = abs(math.cos(math.radians(angle))) + + # Determine which object to show + if angle < 90: + current_object = object1_data + else: + current_object = object2_data + + # Skip when edge-on + if scale_factor < 0.05: + frames.append(frame) + continue + + if object_type == 'emoji': + size = current_object['size'] + canvas_size = size * 2 + emoji_canvas = Image.new('RGBA', (canvas_size, canvas_size), (0, 0, 0, 0)) + + draw_emoji_enhanced( + emoji_canvas, + emoji=current_object['emoji'], + position=(canvas_size // 2 - size // 2, canvas_size // 2 - size // 2), + size=size, + shadow=False + ) + + # Scale horizontally for spin effect + new_width = max(1, int(canvas_size * scale_factor)) + emoji_scaled = emoji_canvas.resize((new_width, canvas_size), Image.LANCZOS) + + paste_x = center_pos[0] - new_width // 2 + paste_y = center_pos[1] - canvas_size // 2 + + frame_rgba = frame.convert('RGBA') + frame_rgba.paste(emoji_scaled, (paste_x, paste_y), emoji_scaled) + frame = frame_rgba.convert('RGB') + + frames.append(frame) + + return frames + + +def create_reaction_morph( + emoji_start: str, + emoji_end: str, + num_frames: int = 20, + frame_size: int = 128 +) -> list[Image.Image]: + """ + Create quick emoji reaction morph (for emoji GIFs). + + Args: + emoji_start: Starting emoji + emoji_end: Ending emoji + num_frames: Number of frames + frame_size: Frame size (square) + + Returns: + List of frames + """ + return create_morph_animation( + object1_data={'emoji': emoji_start, 'size': 80}, + object2_data={'emoji': emoji_end, 'size': 80}, + num_frames=num_frames, + morph_type='crossfade', + easing='ease_in_out', + object_type='emoji', + center_pos=(frame_size // 2, frame_size // 2), + frame_width=frame_size, + frame_height=frame_size, + bg_color=(255, 255, 255) + ) + + +def create_shape_morph( + shapes: list[dict], + num_frames: int = 60, + frames_per_shape: int = 20, + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list[Image.Image]: + """ + Morph through a sequence of shapes. + + Args: + shapes: List of shape dicts with 'radius' and 'color' + num_frames: Total number of frames + frames_per_shape: Frames to spend on each morph + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + frames = [] + center = (frame_width // 2, frame_height // 2) + + for i in range(num_frames): + # Determine which shapes we're morphing between + cycle_progress = (i % (frames_per_shape * len(shapes))) / frames_per_shape + shape_idx = int(cycle_progress) % len(shapes) + next_shape_idx = (shape_idx + 1) % len(shapes) + + # Progress between these two shapes + t = cycle_progress - shape_idx + + shape1 = shapes[shape_idx] + shape2 = shapes[next_shape_idx] + + # Interpolate properties + radius = int(interpolate(shape1['radius'], shape2['radius'], t, 'ease_in_out')) + color = tuple( + int(interpolate(shape1['color'][j], shape2['color'][j], t, 'ease_in_out')) + for j in range(3) + ) + + # Draw frame + frame = create_blank_frame(frame_width, frame_height, bg_color) + draw_circle(frame, center, radius, fill_color=color) + + frames.append(frame) + + return frames + + +# Example usage +if __name__ == '__main__': + print("Creating morph animations...") + + builder = GIFBuilder(width=480, height=480, fps=20) + + # Example 1: Crossfade morph + frames = create_morph_animation( + object1_data={'emoji': '😊', 'size': 100}, + object2_data={'emoji': '😂', 'size': 100}, + num_frames=30, + morph_type='crossfade', + object_type='emoji' + ) + builder.add_frames(frames) + builder.save('morph_crossfade.gif', num_colors=128) + + # Example 2: Scale morph + builder.clear() + frames = create_morph_animation( + object1_data={'emoji': '🌙', 'size': 100}, + object2_data={'emoji': '☀️', 'size': 100}, + num_frames=40, + morph_type='scale', + object_type='emoji' + ) + builder.add_frames(frames) + builder.save('morph_scale.gif', num_colors=128) + + # Example 3: Shape morph cycle + builder.clear() + from core.color_palettes import get_palette + palette = get_palette('vibrant') + + shapes = [ + {'radius': 60, 'color': palette['primary']}, + {'radius': 80, 'color': palette['secondary']}, + {'radius': 50, 'color': palette['accent']}, + {'radius': 70, 'color': palette['success']} + ] + frames = create_shape_morph(shapes, num_frames=80, frames_per_shape=20) + builder.add_frames(frames) + builder.save('morph_shapes.gif', num_colors=64) + + print("Created morph animations!") diff --git a/skills/slack-gif-creator/templates/move.py b/skills/slack-gif-creator/templates/move.py new file mode 100644 index 0000000..e569cc7 --- /dev/null +++ b/skills/slack-gif-creator/templates/move.py @@ -0,0 +1,293 @@ +#!/usr/bin/env python3 +""" +Move Animation - Move objects along paths with various motion types. + +Provides flexible movement primitives for objects along linear, arc, or custom paths. +""" + +import sys +from pathlib import Path +import math + +sys.path.append(str(Path(__file__).parent.parent)) + +from core.gif_builder import GIFBuilder +from core.frame_composer import create_blank_frame, draw_circle, draw_emoji_enhanced +from core.easing import interpolate, calculate_arc_motion + + +def create_move_animation( + object_type: str = 'emoji', + object_data: dict | None = None, + start_pos: tuple[int, int] = (50, 240), + end_pos: tuple[int, int] = (430, 240), + num_frames: int = 30, + motion_type: str = 'linear', # 'linear', 'arc', 'bezier', 'circle', 'wave' + easing: str = 'ease_out', + motion_params: dict | None = None, + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list: + """ + Create frames showing object moving along a path. + + Args: + object_type: 'circle', 'emoji', or 'custom' + object_data: Data for the object + start_pos: Starting (x, y) position + end_pos: Ending (x, y) position + num_frames: Number of frames + motion_type: Type of motion path + easing: Easing function name + motion_params: Additional parameters for motion (e.g., {'arc_height': 100}) + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + frames = [] + + # Default object data + if object_data is None: + if object_type == 'circle': + object_data = {'radius': 30, 'color': (100, 150, 255)} + elif object_type == 'emoji': + object_data = {'emoji': '🚀', 'size': 60} + + # Default motion params + if motion_params is None: + motion_params = {} + + for i in range(num_frames): + frame = create_blank_frame(frame_width, frame_height, bg_color) + + t = i / (num_frames - 1) if num_frames > 1 else 0 + + # Calculate position based on motion type + if motion_type == 'linear': + # Straight line with easing + x = interpolate(start_pos[0], end_pos[0], t, easing) + y = interpolate(start_pos[1], end_pos[1], t, easing) + + elif motion_type == 'arc': + # Parabolic arc + arc_height = motion_params.get('arc_height', 100) + x, y = calculate_arc_motion(start_pos, end_pos, arc_height, t) + + elif motion_type == 'circle': + # Circular motion around a center + center = motion_params.get('center', (frame_width // 2, frame_height // 2)) + radius = motion_params.get('radius', 150) + start_angle = motion_params.get('start_angle', 0) + angle_range = motion_params.get('angle_range', 360) # Full circle + + angle = start_angle + (angle_range * t) + angle_rad = math.radians(angle) + + x = center[0] + radius * math.cos(angle_rad) + y = center[1] + radius * math.sin(angle_rad) + + elif motion_type == 'wave': + # Move in straight line but add wave motion + wave_amplitude = motion_params.get('wave_amplitude', 50) + wave_frequency = motion_params.get('wave_frequency', 2) + + # Base linear motion + base_x = interpolate(start_pos[0], end_pos[0], t, easing) + base_y = interpolate(start_pos[1], end_pos[1], t, easing) + + # Add wave offset perpendicular to motion direction + dx = end_pos[0] - start_pos[0] + dy = end_pos[1] - start_pos[1] + length = math.sqrt(dx * dx + dy * dy) + + if length > 0: + # Perpendicular direction + perp_x = -dy / length + perp_y = dx / length + + # Wave offset + wave_offset = math.sin(t * wave_frequency * 2 * math.pi) * wave_amplitude + + x = base_x + perp_x * wave_offset + y = base_y + perp_y * wave_offset + else: + x, y = base_x, base_y + + elif motion_type == 'bezier': + # Quadratic bezier curve + control_point = motion_params.get('control_point', ( + (start_pos[0] + end_pos[0]) // 2, + (start_pos[1] + end_pos[1]) // 2 - 100 + )) + + # Quadratic Bezier formula: B(t) = (1-t)²P0 + 2(1-t)tP1 + t²P2 + x = (1 - t) ** 2 * start_pos[0] + 2 * (1 - t) * t * control_point[0] + t ** 2 * end_pos[0] + y = (1 - t) ** 2 * start_pos[1] + 2 * (1 - t) * t * control_point[1] + t ** 2 * end_pos[1] + + else: + # Default to linear + x = interpolate(start_pos[0], end_pos[0], t, easing) + y = interpolate(start_pos[1], end_pos[1], t, easing) + + # Draw object at calculated position + x, y = int(x), int(y) + + if object_type == 'circle': + draw_circle( + frame, + center=(x, y), + radius=object_data['radius'], + fill_color=object_data['color'] + ) + elif object_type == 'emoji': + draw_emoji_enhanced( + frame, + emoji=object_data['emoji'], + position=(x - object_data['size'] // 2, y - object_data['size'] // 2), + size=object_data['size'], + shadow=object_data.get('shadow', True) + ) + + frames.append(frame) + + return frames + + +def create_path_from_points(points: list[tuple[int, int]], + num_frames: int = 60, + easing: str = 'ease_in_out') -> list[tuple[int, int]]: + """ + Create a smooth path through multiple points. + + Args: + points: List of (x, y) waypoints + num_frames: Total number of frames + easing: Easing between points + + Returns: + List of (x, y) positions for each frame + """ + if len(points) < 2: + return points * num_frames + + path = [] + frames_per_segment = num_frames // (len(points) - 1) + + for i in range(len(points) - 1): + start = points[i] + end = points[i + 1] + + # Last segment gets remaining frames + if i == len(points) - 2: + segment_frames = num_frames - len(path) + else: + segment_frames = frames_per_segment + + for j in range(segment_frames): + t = j / segment_frames if segment_frames > 0 else 0 + x = interpolate(start[0], end[0], t, easing) + y = interpolate(start[1], end[1], t, easing) + path.append((int(x), int(y))) + + return path + + +def apply_trail_effect(frames: list, trail_length: int = 5, + fade_alpha: float = 0.3) -> list: + """ + Add motion trail effect to moving object. + + Args: + frames: List of frames with moving object + trail_length: Number of previous frames to blend + fade_alpha: Opacity of trail frames + + Returns: + List of frames with trail effect + """ + from PIL import Image, ImageChops + import numpy as np + + trailed_frames = [] + + for i, frame in enumerate(frames): + # Start with current frame + result = frame.copy() + + # Blend previous frames + for j in range(1, min(trail_length + 1, i + 1)): + prev_frame = frames[i - j] + + # Calculate fade + alpha = fade_alpha ** j + + # Blend + result_array = np.array(result, dtype=np.float32) + prev_array = np.array(prev_frame, dtype=np.float32) + + blended = result_array * (1 - alpha) + prev_array * alpha + result = Image.fromarray(blended.astype(np.uint8)) + + trailed_frames.append(result) + + return trailed_frames + + +# Example usage +if __name__ == '__main__': + print("Creating movement examples...") + + # Example 1: Linear movement + builder = GIFBuilder(width=480, height=480, fps=20) + frames = create_move_animation( + object_type='emoji', + object_data={'emoji': '🚀', 'size': 60}, + start_pos=(50, 240), + end_pos=(430, 240), + num_frames=30, + motion_type='linear', + easing='ease_out' + ) + builder.add_frames(frames) + builder.save('move_linear.gif', num_colors=128) + + # Example 2: Arc movement + builder.clear() + frames = create_move_animation( + object_type='emoji', + object_data={'emoji': '⚽', 'size': 60}, + start_pos=(50, 350), + end_pos=(430, 350), + num_frames=30, + motion_type='arc', + motion_params={'arc_height': 150}, + easing='linear' + ) + builder.add_frames(frames) + builder.save('move_arc.gif', num_colors=128) + + # Example 3: Circular movement + builder.clear() + frames = create_move_animation( + object_type='emoji', + object_data={'emoji': '🌍', 'size': 50}, + start_pos=(0, 0), # Ignored for circle + end_pos=(0, 0), # Ignored for circle + num_frames=40, + motion_type='circle', + motion_params={ + 'center': (240, 240), + 'radius': 120, + 'start_angle': 0, + 'angle_range': 360 + }, + easing='linear' + ) + builder.add_frames(frames) + builder.save('move_circle.gif', num_colors=128) + + print("Created movement examples!") diff --git a/skills/slack-gif-creator/templates/pulse.py b/skills/slack-gif-creator/templates/pulse.py new file mode 100644 index 0000000..084ea01 --- /dev/null +++ b/skills/slack-gif-creator/templates/pulse.py @@ -0,0 +1,268 @@ +#!/usr/bin/env python3 +""" +Pulse Animation - Scale objects rhythmically for emphasis. + +Creates pulsing, heartbeat, and throbbing effects. +""" + +import sys +from pathlib import Path +import math + +sys.path.append(str(Path(__file__).parent.parent)) + +from PIL import Image +from core.gif_builder import GIFBuilder +from core.frame_composer import create_blank_frame, draw_emoji_enhanced, draw_circle +from core.easing import interpolate + + +def create_pulse_animation( + object_type: str = 'emoji', + object_data: dict | None = None, + num_frames: int = 30, + pulse_type: str = 'smooth', # 'smooth', 'heartbeat', 'throb', 'pop' + scale_range: tuple[float, float] = (0.8, 1.2), + pulses: float = 2.0, + center_pos: tuple[int, int] = (240, 240), + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list[Image.Image]: + """ + Create pulsing/scaling animation. + + Args: + object_type: 'emoji', 'circle', 'text' + object_data: Object configuration + num_frames: Number of frames + pulse_type: Type of pulsing motion + scale_range: (min_scale, max_scale) tuple + pulses: Number of pulses in animation + center_pos: Center position + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + frames = [] + + # Default object data + if object_data is None: + if object_type == 'emoji': + object_data = {'emoji': '❤️', 'size': 100} + elif object_type == 'circle': + object_data = {'radius': 50, 'color': (255, 100, 100)} + + min_scale, max_scale = scale_range + + for i in range(num_frames): + frame = create_blank_frame(frame_width, frame_height, bg_color) + t = i / (num_frames - 1) if num_frames > 1 else 0 + + # Calculate scale based on pulse type + if pulse_type == 'smooth': + # Simple sinusoidal pulse + scale = min_scale + (max_scale - min_scale) * ( + 0.5 + 0.5 * math.sin(t * pulses * 2 * math.pi - math.pi / 2) + ) + + elif pulse_type == 'heartbeat': + # Double pump like a heartbeat + phase = (t * pulses) % 1.0 + if phase < 0.15: + # First pump + scale = interpolate(min_scale, max_scale, phase / 0.15, 'ease_out') + elif phase < 0.25: + # First release + scale = interpolate(max_scale, min_scale, (phase - 0.15) / 0.10, 'ease_in') + elif phase < 0.35: + # Second pump (smaller) + scale = interpolate(min_scale, (min_scale + max_scale) / 2, (phase - 0.25) / 0.10, 'ease_out') + elif phase < 0.45: + # Second release + scale = interpolate((min_scale + max_scale) / 2, min_scale, (phase - 0.35) / 0.10, 'ease_in') + else: + # Rest period + scale = min_scale + + elif pulse_type == 'throb': + # Sharp pulse with quick return + phase = (t * pulses) % 1.0 + if phase < 0.2: + scale = interpolate(min_scale, max_scale, phase / 0.2, 'ease_out') + else: + scale = interpolate(max_scale, min_scale, (phase - 0.2) / 0.8, 'ease_in') + + elif pulse_type == 'pop': + # Pop out and back with overshoot + phase = (t * pulses) % 1.0 + if phase < 0.3: + # Pop out with overshoot + scale = interpolate(min_scale, max_scale * 1.1, phase / 0.3, 'elastic_out') + else: + # Settle back + scale = interpolate(max_scale * 1.1, min_scale, (phase - 0.3) / 0.7, 'ease_out') + + else: + scale = min_scale + (max_scale - min_scale) * ( + 0.5 + 0.5 * math.sin(t * pulses * 2 * math.pi) + ) + + # Draw object at calculated scale + if object_type == 'emoji': + base_size = object_data['size'] + current_size = int(base_size * scale) + draw_emoji_enhanced( + frame, + emoji=object_data['emoji'], + position=(center_pos[0] - current_size // 2, center_pos[1] - current_size // 2), + size=current_size, + shadow=object_data.get('shadow', True) + ) + + elif object_type == 'circle': + base_radius = object_data['radius'] + current_radius = int(base_radius * scale) + draw_circle( + frame, + center=center_pos, + radius=current_radius, + fill_color=object_data['color'] + ) + + elif object_type == 'text': + from core.typography import draw_text_with_outline + base_size = object_data.get('font_size', 50) + current_size = int(base_size * scale) + draw_text_with_outline( + frame, + text=object_data.get('text', 'PULSE'), + position=center_pos, + font_size=current_size, + text_color=object_data.get('text_color', (255, 100, 100)), + outline_color=object_data.get('outline_color', (0, 0, 0)), + outline_width=3, + centered=True + ) + + frames.append(frame) + + return frames + + +def create_attention_pulse( + emoji: str = '⚠️', + num_frames: int = 20, + frame_size: int = 128, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list[Image.Image]: + """ + Create attention-grabbing pulse (good for emoji GIFs). + + Args: + emoji: Emoji to pulse + num_frames: Number of frames + frame_size: Frame size (square) + bg_color: Background color + + Returns: + List of frames optimized for emoji size + """ + return create_pulse_animation( + object_type='emoji', + object_data={'emoji': emoji, 'size': 80, 'shadow': False}, + num_frames=num_frames, + pulse_type='throb', + scale_range=(0.85, 1.15), + pulses=2, + center_pos=(frame_size // 2, frame_size // 2), + frame_width=frame_size, + frame_height=frame_size, + bg_color=bg_color + ) + + +def create_breathing_animation( + object_type: str = 'emoji', + object_data: dict | None = None, + num_frames: int = 60, + breaths: float = 2.0, + scale_range: tuple[float, float] = (0.9, 1.1), + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (240, 248, 255) +) -> list[Image.Image]: + """ + Create slow, calming breathing animation (in and out). + + Args: + object_type: Type of object + object_data: Object configuration + num_frames: Number of frames + breaths: Number of breathing cycles + scale_range: Min/max scale + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + if object_data is None: + object_data = {'emoji': '😌', 'size': 100} + + return create_pulse_animation( + object_type=object_type, + object_data=object_data, + num_frames=num_frames, + pulse_type='smooth', + scale_range=scale_range, + pulses=breaths, + center_pos=(frame_width // 2, frame_height // 2), + frame_width=frame_width, + frame_height=frame_height, + bg_color=bg_color + ) + + +# Example usage +if __name__ == '__main__': + print("Creating pulse animations...") + + builder = GIFBuilder(width=480, height=480, fps=20) + + # Example 1: Smooth pulse + frames = create_pulse_animation( + object_type='emoji', + object_data={'emoji': '❤️', 'size': 100}, + num_frames=40, + pulse_type='smooth', + scale_range=(0.8, 1.2), + pulses=2 + ) + builder.add_frames(frames) + builder.save('pulse_smooth.gif', num_colors=128) + + # Example 2: Heartbeat + builder.clear() + frames = create_pulse_animation( + object_type='emoji', + object_data={'emoji': '💓', 'size': 100}, + num_frames=60, + pulse_type='heartbeat', + scale_range=(0.85, 1.2), + pulses=3 + ) + builder.add_frames(frames) + builder.save('pulse_heartbeat.gif', num_colors=128) + + # Example 3: Attention pulse (emoji size) + builder = GIFBuilder(width=128, height=128, fps=15) + frames = create_attention_pulse(emoji='⚠️', num_frames=20) + builder.add_frames(frames) + builder.save('pulse_attention.gif', num_colors=48, optimize_for_emoji=True) + + print("Created pulse animations!") diff --git a/skills/slack-gif-creator/templates/shake.py b/skills/slack-gif-creator/templates/shake.py new file mode 100644 index 0000000..5c68738 --- /dev/null +++ b/skills/slack-gif-creator/templates/shake.py @@ -0,0 +1,127 @@ +#!/usr/bin/env python3 +""" +Shake Animation Template - Creates shaking/vibrating motion. + +Use this for impact effects, emphasis, or nervous/excited reactions. +""" + +import sys +import math +from pathlib import Path + +sys.path.append(str(Path(__file__).parent.parent)) + +from core.gif_builder import GIFBuilder +from core.frame_composer import create_blank_frame, draw_circle, draw_emoji, draw_text +from core.easing import ease_out_quad + + +def create_shake_animation( + object_type: str = 'emoji', + object_data: dict = None, + num_frames: int = 20, + shake_intensity: int = 15, + center_x: int = 240, + center_y: int = 240, + direction: str = 'horizontal', # 'horizontal', 'vertical', or 'both' + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list: + """ + Create frames for a shaking animation. + + Args: + object_type: 'circle', 'emoji', 'text', or 'custom' + object_data: Data for the object + num_frames: Number of frames + shake_intensity: Maximum shake displacement in pixels + center_x: Center X position + center_y: Center Y position + direction: 'horizontal', 'vertical', or 'both' + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + frames = [] + + # Default object data + if object_data is None: + if object_type == 'emoji': + object_data = {'emoji': '😱', 'size': 80} + elif object_type == 'text': + object_data = {'text': 'SHAKE!', 'font_size': 50, 'color': (255, 0, 0)} + + for i in range(num_frames): + frame = create_blank_frame(frame_width, frame_height, bg_color) + + # Calculate progress + t = i / (num_frames - 1) if num_frames > 1 else 0 + + # Decay shake intensity over time + intensity = shake_intensity * (1 - ease_out_quad(t)) + + # Calculate shake offset using sine wave for smooth oscillation + freq = 3 # Oscillation frequency + offset_x = 0 + offset_y = 0 + + if direction in ['horizontal', 'both']: + offset_x = int(math.sin(t * freq * 2 * math.pi) * intensity) + + if direction in ['vertical', 'both']: + offset_y = int(math.cos(t * freq * 2 * math.pi) * intensity) + + # Apply offset + x = center_x + offset_x + y = center_y + offset_y + + # Draw object + if object_type == 'emoji': + draw_emoji( + frame, + emoji=object_data['emoji'], + position=(x - object_data['size'] // 2, y - object_data['size'] // 2), + size=object_data['size'] + ) + elif object_type == 'text': + draw_text( + frame, + text=object_data['text'], + position=(x, y), + font_size=object_data['font_size'], + color=object_data['color'], + centered=True + ) + elif object_type == 'circle': + draw_circle( + frame, + center=(x, y), + radius=object_data.get('radius', 30), + fill_color=object_data.get('color', (100, 100, 255)) + ) + + frames.append(frame) + + return frames + + +# Example usage +if __name__ == '__main__': + print("Creating shake GIF...") + + builder = GIFBuilder(width=480, height=480, fps=24) + + frames = create_shake_animation( + object_type='emoji', + object_data={'emoji': '😱', 'size': 100}, + num_frames=30, + shake_intensity=20, + direction='both' + ) + + builder.add_frames(frames) + builder.save('shake_test.gif', num_colors=128) \ No newline at end of file diff --git a/skills/slack-gif-creator/templates/slide.py b/skills/slack-gif-creator/templates/slide.py new file mode 100644 index 0000000..0f441cd --- /dev/null +++ b/skills/slack-gif-creator/templates/slide.py @@ -0,0 +1,291 @@ +#!/usr/bin/env python3 +""" +Slide Animation - Slide elements in from edges with overshoot/bounce. + +Creates smooth entrance and exit animations. +""" + +import sys +from pathlib import Path + +sys.path.append(str(Path(__file__).parent.parent)) + +from PIL import Image +from core.gif_builder import GIFBuilder +from core.frame_composer import create_blank_frame, draw_emoji_enhanced +from core.easing import interpolate + + +def create_slide_animation( + object_type: str = 'emoji', + object_data: dict | None = None, + num_frames: int = 30, + direction: str = 'left', # 'left', 'right', 'top', 'bottom' + slide_type: str = 'in', # 'in', 'out', 'across' + easing: str = 'ease_out', + overshoot: bool = False, + final_pos: tuple[int, int] | None = None, + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list[Image.Image]: + """ + Create slide animation. + + Args: + object_type: 'emoji', 'text' + object_data: Object configuration + num_frames: Number of frames + direction: Direction of slide + slide_type: Type of slide (in/out/across) + easing: Easing function + overshoot: Add overshoot/bounce at end + final_pos: Final position (None = center) + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + frames = [] + + # Default object data + if object_data is None: + if object_type == 'emoji': + object_data = {'emoji': '➡️', 'size': 100} + + if final_pos is None: + final_pos = (frame_width // 2, frame_height // 2) + + # Calculate start and end positions based on direction + size = object_data.get('size', 100) if object_type == 'emoji' else 100 + margin = size + + if direction == 'left': + start_pos = (-margin, final_pos[1]) + end_pos = final_pos if slide_type == 'in' else (frame_width + margin, final_pos[1]) + elif direction == 'right': + start_pos = (frame_width + margin, final_pos[1]) + end_pos = final_pos if slide_type == 'in' else (-margin, final_pos[1]) + elif direction == 'top': + start_pos = (final_pos[0], -margin) + end_pos = final_pos if slide_type == 'in' else (final_pos[0], frame_height + margin) + elif direction == 'bottom': + start_pos = (final_pos[0], frame_height + margin) + end_pos = final_pos if slide_type == 'in' else (final_pos[0], -margin) + else: + start_pos = (-margin, final_pos[1]) + end_pos = final_pos + + # For 'out' type, swap start and end + if slide_type == 'out': + start_pos, end_pos = final_pos, end_pos + elif slide_type == 'across': + # Slide all the way across + if direction == 'left': + start_pos = (-margin, final_pos[1]) + end_pos = (frame_width + margin, final_pos[1]) + elif direction == 'right': + start_pos = (frame_width + margin, final_pos[1]) + end_pos = (-margin, final_pos[1]) + elif direction == 'top': + start_pos = (final_pos[0], -margin) + end_pos = (final_pos[0], frame_height + margin) + elif direction == 'bottom': + start_pos = (final_pos[0], frame_height + margin) + end_pos = (final_pos[0], -margin) + + # Use overshoot easing if requested + if overshoot and slide_type == 'in': + easing = 'back_out' + + for i in range(num_frames): + t = i / (num_frames - 1) if num_frames > 1 else 0 + frame = create_blank_frame(frame_width, frame_height, bg_color) + + # Calculate current position + x = int(interpolate(start_pos[0], end_pos[0], t, easing)) + y = int(interpolate(start_pos[1], end_pos[1], t, easing)) + + # Draw object + if object_type == 'emoji': + size = object_data['size'] + draw_emoji_enhanced( + frame, + emoji=object_data['emoji'], + position=(x - size // 2, y - size // 2), + size=size, + shadow=object_data.get('shadow', True) + ) + + elif object_type == 'text': + from core.typography import draw_text_with_outline + draw_text_with_outline( + frame, + text=object_data.get('text', 'SLIDE'), + position=(x, y), + font_size=object_data.get('font_size', 50), + text_color=object_data.get('text_color', (0, 0, 0)), + outline_color=object_data.get('outline_color', (255, 255, 255)), + outline_width=3, + centered=True + ) + + frames.append(frame) + + return frames + + +def create_multi_slide( + objects: list[dict], + num_frames: int = 30, + stagger_delay: int = 3, + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list[Image.Image]: + """ + Create animation with multiple objects sliding in sequence. + + Args: + objects: List of object configs with 'type', 'data', 'direction', 'final_pos' + num_frames: Number of frames + stagger_delay: Frames between each object starting + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + frames = [] + + for i in range(num_frames): + frame = create_blank_frame(frame_width, frame_height, bg_color) + + for idx, obj in enumerate(objects): + # Calculate when this object starts moving + start_frame = idx * stagger_delay + if i < start_frame: + continue # Object hasn't started yet + + # Calculate progress for this object + obj_frame = i - start_frame + obj_duration = num_frames - start_frame + if obj_duration <= 0: + continue + + t = obj_frame / obj_duration + + # Get object properties + obj_type = obj.get('type', 'emoji') + obj_data = obj.get('data', {'emoji': '➡️', 'size': 80}) + direction = obj.get('direction', 'left') + final_pos = obj.get('final_pos', (frame_width // 2, frame_height // 2)) + easing = obj.get('easing', 'back_out') + + # Calculate position + size = obj_data.get('size', 80) + margin = size + + if direction == 'left': + start_x = -margin + end_x = final_pos[0] + y = final_pos[1] + elif direction == 'right': + start_x = frame_width + margin + end_x = final_pos[0] + y = final_pos[1] + elif direction == 'top': + x = final_pos[0] + start_y = -margin + end_y = final_pos[1] + elif direction == 'bottom': + x = final_pos[0] + start_y = frame_height + margin + end_y = final_pos[1] + else: + start_x = -margin + end_x = final_pos[0] + y = final_pos[1] + + # Interpolate position + if direction in ['left', 'right']: + x = int(interpolate(start_x, end_x, t, easing)) + else: + y = int(interpolate(start_y, end_y, t, easing)) + + # Draw object + if obj_type == 'emoji': + draw_emoji_enhanced( + frame, + emoji=obj_data['emoji'], + position=(x - size // 2, y - size // 2), + size=size, + shadow=False + ) + + frames.append(frame) + + return frames + + +# Example usage +if __name__ == '__main__': + print("Creating slide animations...") + + builder = GIFBuilder(width=480, height=480, fps=20) + + # Example 1: Slide in from left with overshoot + frames = create_slide_animation( + object_type='emoji', + object_data={'emoji': '➡️', 'size': 100}, + num_frames=30, + direction='left', + slide_type='in', + overshoot=True + ) + builder.add_frames(frames) + builder.save('slide_in_left.gif', num_colors=128) + + # Example 2: Slide across + builder.clear() + frames = create_slide_animation( + object_type='emoji', + object_data={'emoji': '🚀', 'size': 80}, + num_frames=40, + direction='left', + slide_type='across', + easing='ease_in_out' + ) + builder.add_frames(frames) + builder.save('slide_across.gif', num_colors=128) + + # Example 3: Multiple objects sliding in + builder.clear() + objects = [ + { + 'type': 'emoji', + 'data': {'emoji': '🎯', 'size': 60}, + 'direction': 'left', + 'final_pos': (120, 240) + }, + { + 'type': 'emoji', + 'data': {'emoji': '🎪', 'size': 60}, + 'direction': 'right', + 'final_pos': (240, 240) + }, + { + 'type': 'emoji', + 'data': {'emoji': '🎨', 'size': 60}, + 'direction': 'top', + 'final_pos': (360, 240) + } + ] + frames = create_multi_slide(objects, num_frames=50, stagger_delay=5) + builder.add_frames(frames) + builder.save('slide_multi.gif', num_colors=128) + + print("Created slide animations!") diff --git a/skills/slack-gif-creator/templates/spin.py b/skills/slack-gif-creator/templates/spin.py new file mode 100644 index 0000000..804bf4b --- /dev/null +++ b/skills/slack-gif-creator/templates/spin.py @@ -0,0 +1,269 @@ +#!/usr/bin/env python3 +""" +Spin Animation - Rotate objects continuously or with variation. + +Creates spinning, rotating, and wobbling effects. +""" + +import sys +from pathlib import Path +import math + +sys.path.append(str(Path(__file__).parent.parent)) + +from PIL import Image +from core.gif_builder import GIFBuilder +from core.frame_composer import create_blank_frame, draw_emoji_enhanced, draw_circle +from core.easing import interpolate + + +def create_spin_animation( + object_type: str = 'emoji', + object_data: dict | None = None, + num_frames: int = 30, + rotation_type: str = 'clockwise', # 'clockwise', 'counterclockwise', 'wobble', 'pendulum' + full_rotations: float = 1.0, + easing: str = 'linear', + center_pos: tuple[int, int] = (240, 240), + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list[Image.Image]: + """ + Create spinning/rotating animation. + + Args: + object_type: 'emoji', 'image', 'text' + object_data: Object configuration + num_frames: Number of frames + rotation_type: Type of rotation + full_rotations: Number of complete 360° rotations + easing: Easing function for rotation speed + center_pos: Center position for rotation + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + frames = [] + + # Default object data + if object_data is None: + if object_type == 'emoji': + object_data = {'emoji': '🔄', 'size': 100} + + for i in range(num_frames): + frame = create_blank_frame(frame_width, frame_height, bg_color) + t = i / (num_frames - 1) if num_frames > 1 else 0 + + # Calculate rotation angle + if rotation_type == 'clockwise': + angle = interpolate(0, 360 * full_rotations, t, easing) + elif rotation_type == 'counterclockwise': + angle = interpolate(0, -360 * full_rotations, t, easing) + elif rotation_type == 'wobble': + # Back and forth rotation + angle = math.sin(t * full_rotations * 2 * math.pi) * 45 + elif rotation_type == 'pendulum': + # Smooth pendulum swing + angle = math.sin(t * full_rotations * 2 * math.pi) * 90 + else: + angle = interpolate(0, 360 * full_rotations, t, easing) + + # Create object on transparent background to rotate + if object_type == 'emoji': + # For emoji, we need to create a larger canvas to avoid clipping during rotation + emoji_size = object_data['size'] + canvas_size = int(emoji_size * 1.5) + emoji_canvas = Image.new('RGBA', (canvas_size, canvas_size), (0, 0, 0, 0)) + + # Draw emoji in center of canvas + from core.frame_composer import draw_emoji_enhanced + draw_emoji_enhanced( + emoji_canvas, + emoji=object_data['emoji'], + position=(canvas_size // 2 - emoji_size // 2, canvas_size // 2 - emoji_size // 2), + size=emoji_size, + shadow=False + ) + + # Rotate the canvas + rotated = emoji_canvas.rotate(angle, resample=Image.BICUBIC, expand=False) + + # Paste onto frame + paste_x = center_pos[0] - canvas_size // 2 + paste_y = center_pos[1] - canvas_size // 2 + frame.paste(rotated, (paste_x, paste_y), rotated) + + elif object_type == 'text': + from core.typography import draw_text_with_outline + # Similar approach - create canvas, draw text, rotate + text = object_data.get('text', 'SPIN!') + font_size = object_data.get('font_size', 50) + + canvas_size = max(frame_width, frame_height) + text_canvas = Image.new('RGBA', (canvas_size, canvas_size), (0, 0, 0, 0)) + + # Draw text + text_canvas_rgb = text_canvas.convert('RGB') + text_canvas_rgb.paste(bg_color, (0, 0, canvas_size, canvas_size)) + draw_text_with_outline( + text_canvas_rgb, + text, + position=(canvas_size // 2, canvas_size // 2), + font_size=font_size, + text_color=object_data.get('text_color', (0, 0, 0)), + outline_color=object_data.get('outline_color', (255, 255, 255)), + outline_width=3, + centered=True + ) + + # Convert back to RGBA for rotation + text_canvas = text_canvas_rgb.convert('RGBA') + + # Make background transparent + data = text_canvas.getdata() + new_data = [] + for item in data: + if item[:3] == bg_color: + new_data.append((255, 255, 255, 0)) + else: + new_data.append(item) + text_canvas.putdata(new_data) + + # Rotate + rotated = text_canvas.rotate(angle, resample=Image.BICUBIC, expand=False) + + # Composite onto frame + frame_rgba = frame.convert('RGBA') + frame_rgba = Image.alpha_composite(frame_rgba, rotated) + frame = frame_rgba.convert('RGB') + + frames.append(frame) + + return frames + + +def create_loading_spinner( + num_frames: int = 20, + spinner_type: str = 'dots', # 'dots', 'arc', 'emoji' + size: int = 100, + color: tuple[int, int, int] = (100, 150, 255), + frame_width: int = 128, + frame_height: int = 128, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list[Image.Image]: + """ + Create a loading spinner animation. + + Args: + num_frames: Number of frames + spinner_type: Type of spinner + size: Spinner size + color: Spinner color + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + from PIL import ImageDraw + frames = [] + center = (frame_width // 2, frame_height // 2) + + for i in range(num_frames): + frame = create_blank_frame(frame_width, frame_height, bg_color) + draw = ImageDraw.Draw(frame) + + angle_offset = (i / num_frames) * 360 + + if spinner_type == 'dots': + # Circular dots + num_dots = 8 + for j in range(num_dots): + angle = (j / num_dots * 360 + angle_offset) * math.pi / 180 + x = center[0] + size * 0.4 * math.cos(angle) + y = center[1] + size * 0.4 * math.sin(angle) + + # Fade based on position + alpha = 1.0 - (j / num_dots) + dot_color = tuple(int(c * alpha) for c in color) + dot_radius = int(size * 0.1) + + draw.ellipse( + [x - dot_radius, y - dot_radius, x + dot_radius, y + dot_radius], + fill=dot_color + ) + + elif spinner_type == 'arc': + # Rotating arc + start_angle = angle_offset + end_angle = angle_offset + 270 + arc_width = int(size * 0.15) + + bbox = [ + center[0] - size // 2, + center[1] - size // 2, + center[0] + size // 2, + center[1] + size // 2 + ] + draw.arc(bbox, start_angle, end_angle, fill=color, width=arc_width) + + elif spinner_type == 'emoji': + # Rotating emoji spinner + angle = angle_offset + emoji_canvas = Image.new('RGBA', (frame_width, frame_height), (0, 0, 0, 0)) + draw_emoji_enhanced( + emoji_canvas, + emoji='⏳', + position=(center[0] - size // 2, center[1] - size // 2), + size=size, + shadow=False + ) + rotated = emoji_canvas.rotate(angle, center=center, resample=Image.BICUBIC) + frame.paste(rotated, (0, 0), rotated) + + frames.append(frame) + + return frames + + +# Example usage +if __name__ == '__main__': + print("Creating spin animations...") + + builder = GIFBuilder(width=480, height=480, fps=20) + + # Example 1: Clockwise spin + frames = create_spin_animation( + object_type='emoji', + object_data={'emoji': '🔄', 'size': 100}, + num_frames=30, + rotation_type='clockwise', + full_rotations=2 + ) + builder.add_frames(frames) + builder.save('spin_clockwise.gif', num_colors=128) + + # Example 2: Wobble + builder.clear() + frames = create_spin_animation( + object_type='emoji', + object_data={'emoji': '🎯', 'size': 100}, + num_frames=30, + rotation_type='wobble', + full_rotations=3 + ) + builder.add_frames(frames) + builder.save('spin_wobble.gif', num_colors=128) + + # Example 3: Loading spinner + builder = GIFBuilder(width=128, height=128, fps=15) + frames = create_loading_spinner(num_frames=20, spinner_type='dots') + builder.add_frames(frames) + builder.save('loading_spinner.gif', num_colors=64, optimize_for_emoji=True) + + print("Created spin animations!") diff --git a/skills/slack-gif-creator/templates/wiggle.py b/skills/slack-gif-creator/templates/wiggle.py new file mode 100644 index 0000000..9cff5af --- /dev/null +++ b/skills/slack-gif-creator/templates/wiggle.py @@ -0,0 +1,300 @@ +#!/usr/bin/env python3 +""" +Wiggle Animation - Smooth, organic wobbling and jiggling motions. + +Creates playful, elastic movements that are smoother than shake. +""" + +import sys +from pathlib import Path +import math + +sys.path.append(str(Path(__file__).parent.parent)) + +from PIL import Image +from core.gif_builder import GIFBuilder +from core.frame_composer import create_blank_frame, draw_emoji_enhanced +from core.easing import interpolate + + +def create_wiggle_animation( + object_type: str = 'emoji', + object_data: dict | None = None, + num_frames: int = 30, + wiggle_type: str = 'jello', # 'jello', 'wave', 'bounce', 'sway' + intensity: float = 1.0, + cycles: float = 2.0, + center_pos: tuple[int, int] = (240, 240), + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list[Image.Image]: + """ + Create wiggle/wobble animation. + + Args: + object_type: 'emoji', 'text' + object_data: Object configuration + num_frames: Number of frames + wiggle_type: Type of wiggle motion + intensity: Wiggle intensity multiplier + cycles: Number of wiggle cycles + center_pos: Center position + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + frames = [] + + # Default object data + if object_data is None: + if object_type == 'emoji': + object_data = {'emoji': '🎈', 'size': 100} + + for i in range(num_frames): + t = i / (num_frames - 1) if num_frames > 1 else 0 + frame = create_blank_frame(frame_width, frame_height, bg_color) + + # Calculate wiggle transformations + offset_x = 0 + offset_y = 0 + rotation = 0 + scale_x = 1.0 + scale_y = 1.0 + + if wiggle_type == 'jello': + # Jello wobble - multiple frequencies + freq1 = cycles * 2 * math.pi + freq2 = cycles * 3 * math.pi + freq3 = cycles * 5 * math.pi + + decay = 1.0 - t if cycles < 1.5 else 1.0 # Decay for single wiggles + + offset_x = ( + math.sin(freq1 * t) * 15 + + math.sin(freq2 * t) * 8 + + math.sin(freq3 * t) * 3 + ) * intensity * decay + + rotation = ( + math.sin(freq1 * t) * 10 + + math.cos(freq2 * t) * 5 + ) * intensity * decay + + # Squash and stretch + scale_y = 1.0 + math.sin(freq1 * t) * 0.1 * intensity * decay + scale_x = 1.0 / scale_y # Preserve volume + + elif wiggle_type == 'wave': + # Wave motion + freq = cycles * 2 * math.pi + offset_y = math.sin(freq * t) * 20 * intensity + rotation = math.sin(freq * t + math.pi / 4) * 8 * intensity + + elif wiggle_type == 'bounce': + # Bouncy wiggle + freq = cycles * 2 * math.pi + bounce = abs(math.sin(freq * t)) + + scale_y = 1.0 + bounce * 0.2 * intensity + scale_x = 1.0 - bounce * 0.1 * intensity + offset_y = -bounce * 10 * intensity + + elif wiggle_type == 'sway': + # Gentle sway back and forth + freq = cycles * 2 * math.pi + offset_x = math.sin(freq * t) * 25 * intensity + rotation = math.sin(freq * t) * 12 * intensity + + # Subtle scale change + scale = 1.0 + math.sin(freq * t) * 0.05 * intensity + scale_x = scale + scale_y = scale + + elif wiggle_type == 'tail_wag': + # Like a wagging tail - base stays, tip moves + freq = cycles * 2 * math.pi + wag = math.sin(freq * t) * intensity + + # Rotation focused at one end + rotation = wag * 20 + offset_x = wag * 15 + + # Apply transformations + if object_type == 'emoji': + size = object_data['size'] + size_x = int(size * scale_x) + size_y = int(size * scale_y) + + # For non-uniform scaling or rotation, we need to use PIL transforms + if abs(scale_x - scale_y) > 0.01 or abs(rotation) > 0.1: + # Create emoji on transparent canvas + canvas_size = int(size * 2) + emoji_canvas = Image.new('RGBA', (canvas_size, canvas_size), (0, 0, 0, 0)) + + # Draw emoji + draw_emoji_enhanced( + emoji_canvas, + emoji=object_data['emoji'], + position=(canvas_size // 2 - size // 2, canvas_size // 2 - size // 2), + size=size, + shadow=False + ) + + # Scale + if abs(scale_x - scale_y) > 0.01: + new_size = (int(canvas_size * scale_x), int(canvas_size * scale_y)) + emoji_canvas = emoji_canvas.resize(new_size, Image.LANCZOS) + canvas_size_x, canvas_size_y = new_size + else: + canvas_size_x = canvas_size_y = canvas_size + + # Rotate + if abs(rotation) > 0.1: + emoji_canvas = emoji_canvas.rotate( + rotation, + resample=Image.BICUBIC, + expand=False + ) + + # Position with offset + paste_x = int(center_pos[0] - canvas_size_x // 2 + offset_x) + paste_y = int(center_pos[1] - canvas_size_y // 2 + offset_y) + + frame_rgba = frame.convert('RGBA') + frame_rgba.paste(emoji_canvas, (paste_x, paste_y), emoji_canvas) + frame = frame_rgba.convert('RGB') + else: + # Simple case - just offset + pos_x = int(center_pos[0] - size // 2 + offset_x) + pos_y = int(center_pos[1] - size // 2 + offset_y) + draw_emoji_enhanced( + frame, + emoji=object_data['emoji'], + position=(pos_x, pos_y), + size=size, + shadow=object_data.get('shadow', True) + ) + + elif object_type == 'text': + from core.typography import draw_text_with_outline + + # Create text on canvas for transformation + canvas_size = max(frame_width, frame_height) + text_canvas = Image.new('RGBA', (canvas_size, canvas_size), (0, 0, 0, 0)) + + # Convert to RGB for drawing + text_canvas_rgb = text_canvas.convert('RGB') + text_canvas_rgb.paste(bg_color, (0, 0, canvas_size, canvas_size)) + + draw_text_with_outline( + text_canvas_rgb, + text=object_data.get('text', 'WIGGLE'), + position=(canvas_size // 2, canvas_size // 2), + font_size=object_data.get('font_size', 50), + text_color=object_data.get('text_color', (0, 0, 0)), + outline_color=object_data.get('outline_color', (255, 255, 255)), + outline_width=3, + centered=True + ) + + # Make transparent + text_canvas = text_canvas_rgb.convert('RGBA') + data = text_canvas.getdata() + new_data = [] + for item in data: + if item[:3] == bg_color: + new_data.append((255, 255, 255, 0)) + else: + new_data.append(item) + text_canvas.putdata(new_data) + + # Apply rotation + if abs(rotation) > 0.1: + text_canvas = text_canvas.rotate(rotation, center=(canvas_size // 2, canvas_size // 2), resample=Image.BICUBIC) + + # Crop to frame with offset + left = (canvas_size - frame_width) // 2 - int(offset_x) + top = (canvas_size - frame_height) // 2 - int(offset_y) + text_cropped = text_canvas.crop((left, top, left + frame_width, top + frame_height)) + + frame_rgba = frame.convert('RGBA') + frame = Image.alpha_composite(frame_rgba, text_cropped) + frame = frame.convert('RGB') + + frames.append(frame) + + return frames + + +def create_excited_wiggle( + emoji: str = '🎉', + num_frames: int = 20, + frame_size: int = 128 +) -> list[Image.Image]: + """ + Create excited wiggle for emoji GIFs. + + Args: + emoji: Emoji to wiggle + num_frames: Number of frames + frame_size: Frame size (square) + + Returns: + List of frames + """ + return create_wiggle_animation( + object_type='emoji', + object_data={'emoji': emoji, 'size': 80, 'shadow': False}, + num_frames=num_frames, + wiggle_type='jello', + intensity=0.8, + cycles=2, + center_pos=(frame_size // 2, frame_size // 2), + frame_width=frame_size, + frame_height=frame_size, + bg_color=(255, 255, 255) + ) + + +# Example usage +if __name__ == '__main__': + print("Creating wiggle animations...") + + builder = GIFBuilder(width=480, height=480, fps=20) + + # Example 1: Jello wiggle + frames = create_wiggle_animation( + object_type='emoji', + object_data={'emoji': '🎈', 'size': 100}, + num_frames=40, + wiggle_type='jello', + intensity=1.0, + cycles=2 + ) + builder.add_frames(frames) + builder.save('wiggle_jello.gif', num_colors=128) + + # Example 2: Wave + builder.clear() + frames = create_wiggle_animation( + object_type='emoji', + object_data={'emoji': '🌊', 'size': 100}, + num_frames=30, + wiggle_type='wave', + intensity=1.2, + cycles=3 + ) + builder.add_frames(frames) + builder.save('wiggle_wave.gif', num_colors=128) + + # Example 3: Excited wiggle (emoji size) + builder = GIFBuilder(width=128, height=128, fps=15) + frames = create_excited_wiggle(emoji='🎉', num_frames=20) + builder.add_frames(frames) + builder.save('wiggle_excited.gif', num_colors=48, optimize_for_emoji=True) + + print("Created wiggle animations!") diff --git a/skills/slack-gif-creator/templates/zoom.py b/skills/slack-gif-creator/templates/zoom.py new file mode 100644 index 0000000..e45176a --- /dev/null +++ b/skills/slack-gif-creator/templates/zoom.py @@ -0,0 +1,312 @@ +#!/usr/bin/env python3 +""" +Zoom Animation - Scale objects dramatically for emphasis. + +Creates zoom in, zoom out, and dramatic scaling effects. +""" + +import sys +from pathlib import Path +import math + +sys.path.append(str(Path(__file__).parent.parent)) + +from PIL import Image, ImageFilter +from core.gif_builder import GIFBuilder +from core.frame_composer import create_blank_frame, draw_emoji_enhanced +from core.easing import interpolate + + +def create_zoom_animation( + object_type: str = 'emoji', + object_data: dict | None = None, + num_frames: int = 30, + zoom_type: str = 'in', # 'in', 'out', 'in_out', 'punch' + scale_range: tuple[float, float] = (0.1, 2.0), + easing: str = 'ease_out', + add_motion_blur: bool = False, + center_pos: tuple[int, int] = (240, 240), + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list[Image.Image]: + """ + Create zoom animation. + + Args: + object_type: 'emoji', 'text', 'image' + object_data: Object configuration + num_frames: Number of frames + zoom_type: Type of zoom effect + scale_range: (start_scale, end_scale) tuple + easing: Easing function + add_motion_blur: Add blur for speed effect + center_pos: Center position + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + frames = [] + + # Default object data + if object_data is None: + if object_type == 'emoji': + object_data = {'emoji': '🔍', 'size': 100} + + base_size = object_data.get('size', 100) if object_type == 'emoji' else object_data.get('font_size', 60) + start_scale, end_scale = scale_range + + for i in range(num_frames): + t = i / (num_frames - 1) if num_frames > 1 else 0 + + # Calculate scale based on zoom type + if zoom_type == 'in': + scale = interpolate(start_scale, end_scale, t, easing) + elif zoom_type == 'out': + scale = interpolate(end_scale, start_scale, t, easing) + elif zoom_type == 'in_out': + if t < 0.5: + scale = interpolate(start_scale, end_scale, t * 2, easing) + else: + scale = interpolate(end_scale, start_scale, (t - 0.5) * 2, easing) + elif zoom_type == 'punch': + # Quick zoom in with overshoot then settle + if t < 0.3: + scale = interpolate(start_scale, end_scale * 1.2, t / 0.3, 'ease_out') + else: + scale = interpolate(end_scale * 1.2, end_scale, (t - 0.3) / 0.7, 'elastic_out') + else: + scale = interpolate(start_scale, end_scale, t, easing) + + # Create frame + frame = create_blank_frame(frame_width, frame_height, bg_color) + + if object_type == 'emoji': + current_size = int(base_size * scale) + + # Clamp size to reasonable bounds + current_size = max(12, min(current_size, frame_width * 2)) + + # Create emoji on transparent background + canvas_size = max(frame_width, frame_height, current_size) * 2 + emoji_canvas = Image.new('RGBA', (canvas_size, canvas_size), (0, 0, 0, 0)) + + draw_emoji_enhanced( + emoji_canvas, + emoji=object_data['emoji'], + position=(canvas_size // 2 - current_size // 2, canvas_size // 2 - current_size // 2), + size=current_size, + shadow=False + ) + + # Optional motion blur for fast zooms + if add_motion_blur and abs(scale - 1.0) > 0.5: + blur_amount = min(5, int(abs(scale - 1.0) * 3)) + emoji_canvas = emoji_canvas.filter(ImageFilter.GaussianBlur(blur_amount)) + + # Crop to frame size centered + left = (canvas_size - frame_width) // 2 + top = (canvas_size - frame_height) // 2 + emoji_cropped = emoji_canvas.crop((left, top, left + frame_width, top + frame_height)) + + # Composite + frame_rgba = frame.convert('RGBA') + frame = Image.alpha_composite(frame_rgba, emoji_cropped) + frame = frame.convert('RGB') + + elif object_type == 'text': + from core.typography import draw_text_with_outline + + current_size = int(base_size * scale) + current_size = max(10, min(current_size, 500)) + + # Create oversized canvas for large text + canvas_size = max(frame_width, frame_height, current_size * 10) + text_canvas = Image.new('RGB', (canvas_size, canvas_size), bg_color) + + draw_text_with_outline( + text_canvas, + text=object_data.get('text', 'ZOOM'), + position=(canvas_size // 2, canvas_size // 2), + font_size=current_size, + text_color=object_data.get('text_color', (0, 0, 0)), + outline_color=object_data.get('outline_color', (255, 255, 255)), + outline_width=max(2, int(current_size * 0.05)), + centered=True + ) + + # Crop to frame + left = (canvas_size - frame_width) // 2 + top = (canvas_size - frame_height) // 2 + frame = text_canvas.crop((left, top, left + frame_width, top + frame_height)) + + frames.append(frame) + + return frames + + +def create_explosion_zoom( + emoji: str = '💥', + num_frames: int = 20, + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list[Image.Image]: + """ + Create dramatic explosion zoom effect. + + Args: + emoji: Emoji to explode + num_frames: Number of frames + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + frames = [] + + for i in range(num_frames): + t = i / (num_frames - 1) if num_frames > 1 else 0 + + # Exponential zoom + scale = 0.1 * math.exp(t * 5) + + # Add rotation for drama + angle = t * 360 * 2 + + frame = create_blank_frame(frame_width, frame_height, bg_color) + + current_size = int(100 * scale) + current_size = max(12, min(current_size, frame_width * 3)) + + # Create emoji + canvas_size = max(frame_width, frame_height, current_size) * 2 + emoji_canvas = Image.new('RGBA', (canvas_size, canvas_size), (0, 0, 0, 0)) + + draw_emoji_enhanced( + emoji_canvas, + emoji=emoji, + position=(canvas_size // 2 - current_size // 2, canvas_size // 2 - current_size // 2), + size=current_size, + shadow=False + ) + + # Rotate + emoji_canvas = emoji_canvas.rotate(angle, center=(canvas_size // 2, canvas_size // 2), resample=Image.BICUBIC) + + # Add motion blur for later frames + if t > 0.5: + blur_amount = int((t - 0.5) * 10) + emoji_canvas = emoji_canvas.filter(ImageFilter.GaussianBlur(blur_amount)) + + # Crop and composite + left = (canvas_size - frame_width) // 2 + top = (canvas_size - frame_height) // 2 + emoji_cropped = emoji_canvas.crop((left, top, left + frame_width, top + frame_height)) + + frame_rgba = frame.convert('RGBA') + frame = Image.alpha_composite(frame_rgba, emoji_cropped) + frame = frame.convert('RGB') + + frames.append(frame) + + return frames + + +def create_mind_blown_zoom( + emoji: str = '🤯', + num_frames: int = 30, + frame_width: int = 480, + frame_height: int = 480, + bg_color: tuple[int, int, int] = (255, 255, 255) +) -> list[Image.Image]: + """ + Create "mind blown" dramatic zoom with shake. + + Args: + emoji: Emoji to use + num_frames: Number of frames + frame_width: Frame width + frame_height: Frame height + bg_color: Background color + + Returns: + List of frames + """ + frames = [] + + for i in range(num_frames): + t = i / (num_frames - 1) if num_frames > 1 else 0 + + # Zoom in then shake + if t < 0.5: + scale = interpolate(0.3, 1.2, t * 2, 'ease_out') + shake_x = 0 + shake_y = 0 + else: + scale = 1.2 + # Shake intensifies + shake_intensity = (t - 0.5) * 40 + shake_x = int(math.sin(t * 50) * shake_intensity) + shake_y = int(math.cos(t * 45) * shake_intensity) + + frame = create_blank_frame(frame_width, frame_height, bg_color) + + current_size = int(100 * scale) + center_x = frame_width // 2 + shake_x + center_y = frame_height // 2 + shake_y + + emoji_canvas = Image.new('RGBA', (frame_width, frame_height), (0, 0, 0, 0)) + draw_emoji_enhanced( + emoji_canvas, + emoji=emoji, + position=(center_x - current_size // 2, center_y - current_size // 2), + size=current_size, + shadow=False + ) + + frame_rgba = frame.convert('RGBA') + frame = Image.alpha_composite(frame_rgba, emoji_canvas) + frame = frame.convert('RGB') + + frames.append(frame) + + return frames + + +# Example usage +if __name__ == '__main__': + print("Creating zoom animations...") + + builder = GIFBuilder(width=480, height=480, fps=20) + + # Example 1: Zoom in + frames = create_zoom_animation( + object_type='emoji', + object_data={'emoji': '🔍', 'size': 100}, + num_frames=30, + zoom_type='in', + scale_range=(0.1, 1.5), + easing='ease_out' + ) + builder.add_frames(frames) + builder.save('zoom_in.gif', num_colors=128) + + # Example 2: Explosion zoom + builder.clear() + frames = create_explosion_zoom(emoji='💥', num_frames=20) + builder.add_frames(frames) + builder.save('zoom_explosion.gif', num_colors=128) + + # Example 3: Mind blown + builder.clear() + frames = create_mind_blown_zoom(emoji='🤯', num_frames=30) + builder.add_frames(frames) + builder.save('zoom_mind_blown.gif', num_colors=128) + + print("Created zoom animations!") diff --git a/skills/theme-factory/LICENSE.txt b/skills/theme-factory/LICENSE.txt new file mode 100644 index 0000000..7a4a3ea --- /dev/null +++ b/skills/theme-factory/LICENSE.txt @@ -0,0 +1,202 @@ + + 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/theme-factory/SKILL.md b/skills/theme-factory/SKILL.md new file mode 100644 index 0000000..90dfcea --- /dev/null +++ b/skills/theme-factory/SKILL.md @@ -0,0 +1,59 @@ +--- +name: theme-factory +description: Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly. +license: Complete terms in LICENSE.txt +--- + + +# Theme Factory Skill + +This skill provides a curated collection of professional font and color themes themes, each with carefully selected color palettes and font pairings. Once a theme is chosen, it can be applied to any artifact. + +## Purpose + +To apply consistent, professional styling to presentation slide decks, use this skill. Each theme includes: +- A cohesive color palette with hex codes +- Complementary font pairings for headers and body text +- A distinct visual identity suitable for different contexts and audiences + +## Usage Instructions + +To apply styling to a slide deck or other artifact: + +1. **Show the theme showcase**: Display the `theme-showcase.pdf` file to allow users to see all available themes visually. Do not make any modifications to it; simply show the file for viewing. +2. **Ask for their choice**: Ask which theme to apply to the deck +3. **Wait for selection**: Get explicit confirmation about the chosen theme +4. **Apply the theme**: Once a theme has been chosen, apply the selected theme's colors and fonts to the deck/artifact + +## Themes Available + +The following 10 themes are available, each showcased in `theme-showcase.pdf`: + +1. **Ocean Depths** - Professional and calming maritime theme +2. **Sunset Boulevard** - Warm and vibrant sunset colors +3. **Forest Canopy** - Natural and grounded earth tones +4. **Modern Minimalist** - Clean and contemporary grayscale +5. **Golden Hour** - Rich and warm autumnal palette +6. **Arctic Frost** - Cool and crisp winter-inspired theme +7. **Desert Rose** - Soft and sophisticated dusty tones +8. **Tech Innovation** - Bold and modern tech aesthetic +9. **Botanical Garden** - Fresh and organic garden colors +10. **Midnight Galaxy** - Dramatic and cosmic deep tones + +## Theme Details + +Each theme is defined in the `themes/` directory with complete specifications including: +- Cohesive color palette with hex codes +- Complementary font pairings for headers and body text +- Distinct visual identity suitable for different contexts and audiences + +## Application Process + +After a preferred theme is selected: +1. Read the corresponding theme file from the `themes/` directory +2. Apply the specified colors and fonts consistently throughout the deck +3. Ensure proper contrast and readability +4. Maintain the theme's visual identity across all slides + +## Create your Own Theme +To handle cases where none of the existing themes work for an artifact, create a custom theme. Based on provided inputs, generate a new theme similar to the ones above. Give the theme a similar name describing what the font/color combinations represent. Use any basic description provided to choose appropriate colors/fonts. After generating the theme, show it for review and verification. Following that, apply the theme as described above. diff --git a/skills/theme-factory/theme-showcase.pdf b/skills/theme-factory/theme-showcase.pdf new file mode 100644 index 0000000..24495d1 Binary files /dev/null and b/skills/theme-factory/theme-showcase.pdf differ diff --git a/skills/theme-factory/themes/arctic-frost.md b/skills/theme-factory/themes/arctic-frost.md new file mode 100644 index 0000000..e9f1eb0 --- /dev/null +++ b/skills/theme-factory/themes/arctic-frost.md @@ -0,0 +1,19 @@ +# Arctic Frost + +A cool and crisp winter-inspired theme that conveys clarity, precision, and professionalism. + +## Color Palette + +- **Ice Blue**: `#d4e4f7` - Light backgrounds and highlights +- **Steel Blue**: `#4a6fa5` - Primary accent color +- **Silver**: `#c0c0c0` - Metallic accent elements +- **Crisp White**: `#fafafa` - Clean backgrounds and text + +## Typography + +- **Headers**: DejaVu Sans Bold +- **Body Text**: DejaVu Sans + +## Best Used For + +Healthcare presentations, technology solutions, winter sports, clean tech, pharmaceutical content. diff --git a/skills/theme-factory/themes/botanical-garden.md b/skills/theme-factory/themes/botanical-garden.md new file mode 100644 index 0000000..0c95bf7 --- /dev/null +++ b/skills/theme-factory/themes/botanical-garden.md @@ -0,0 +1,19 @@ +# Botanical Garden + +A fresh and organic theme featuring vibrant garden-inspired colors for lively presentations. + +## Color Palette + +- **Fern Green**: `#4a7c59` - Rich natural green +- **Marigold**: `#f9a620` - Bright floral accent +- **Terracotta**: `#b7472a` - Earthy warm tone +- **Cream**: `#f5f3ed` - Soft neutral backgrounds + +## Typography + +- **Headers**: DejaVu Serif Bold +- **Body Text**: DejaVu Sans + +## Best Used For + +Garden centers, food presentations, farm-to-table content, botanical brands, natural products. diff --git a/skills/theme-factory/themes/desert-rose.md b/skills/theme-factory/themes/desert-rose.md new file mode 100644 index 0000000..ea7c74e --- /dev/null +++ b/skills/theme-factory/themes/desert-rose.md @@ -0,0 +1,19 @@ +# Desert Rose + +A soft and sophisticated theme with dusty, muted tones perfect for elegant presentations. + +## Color Palette + +- **Dusty Rose**: `#d4a5a5` - Soft primary color +- **Clay**: `#b87d6d` - Earthy accent +- **Sand**: `#e8d5c4` - Warm neutral backgrounds +- **Deep Burgundy**: `#5d2e46` - Rich dark contrast + +## Typography + +- **Headers**: FreeSans Bold +- **Body Text**: FreeSans + +## Best Used For + +Fashion presentations, beauty brands, wedding planning, interior design, boutique businesses. diff --git a/skills/theme-factory/themes/forest-canopy.md b/skills/theme-factory/themes/forest-canopy.md new file mode 100644 index 0000000..90c2b26 --- /dev/null +++ b/skills/theme-factory/themes/forest-canopy.md @@ -0,0 +1,19 @@ +# Forest Canopy + +A natural and grounded theme featuring earth tones inspired by dense forest environments. + +## Color Palette + +- **Forest Green**: `#2d4a2b` - Primary dark green +- **Sage**: `#7d8471` - Muted green accent +- **Olive**: `#a4ac86` - Light accent color +- **Ivory**: `#faf9f6` - Backgrounds and text + +## Typography + +- **Headers**: FreeSerif Bold +- **Body Text**: FreeSans + +## Best Used For + +Environmental presentations, sustainability reports, outdoor brands, wellness content, organic products. diff --git a/skills/theme-factory/themes/golden-hour.md b/skills/theme-factory/themes/golden-hour.md new file mode 100644 index 0000000..ed8fc25 --- /dev/null +++ b/skills/theme-factory/themes/golden-hour.md @@ -0,0 +1,19 @@ +# Golden Hour + +A rich and warm autumnal palette that creates an inviting and sophisticated atmosphere. + +## Color Palette + +- **Mustard Yellow**: `#f4a900` - Bold primary accent +- **Terracotta**: `#c1666b` - Warm secondary color +- **Warm Beige**: `#d4b896` - Neutral backgrounds +- **Chocolate Brown**: `#4a403a` - Dark text and anchors + +## Typography + +- **Headers**: FreeSans Bold +- **Body Text**: FreeSans + +## Best Used For + +Restaurant presentations, hospitality brands, fall campaigns, cozy lifestyle content, artisan products. diff --git a/skills/theme-factory/themes/midnight-galaxy.md b/skills/theme-factory/themes/midnight-galaxy.md new file mode 100644 index 0000000..97e1c5f --- /dev/null +++ b/skills/theme-factory/themes/midnight-galaxy.md @@ -0,0 +1,19 @@ +# Midnight Galaxy + +A dramatic and cosmic theme with deep purples and mystical tones for impactful presentations. + +## Color Palette + +- **Deep Purple**: `#2b1e3e` - Rich dark base +- **Cosmic Blue**: `#4a4e8f` - Mystical mid-tone +- **Lavender**: `#a490c2` - Soft accent color +- **Silver**: `#e6e6fa` - Light highlights and text + +## Typography + +- **Headers**: FreeSans Bold +- **Body Text**: FreeSans + +## Best Used For + +Entertainment industry, gaming presentations, nightlife venues, luxury brands, creative agencies. diff --git a/skills/theme-factory/themes/modern-minimalist.md b/skills/theme-factory/themes/modern-minimalist.md new file mode 100644 index 0000000..6bd26a2 --- /dev/null +++ b/skills/theme-factory/themes/modern-minimalist.md @@ -0,0 +1,19 @@ +# Modern Minimalist + +A clean and contemporary theme with a sophisticated grayscale palette for maximum versatility. + +## Color Palette + +- **Charcoal**: `#36454f` - Primary dark color +- **Slate Gray**: `#708090` - Medium gray for accents +- **Light Gray**: `#d3d3d3` - Backgrounds and dividers +- **White**: `#ffffff` - Text and clean backgrounds + +## Typography + +- **Headers**: DejaVu Sans Bold +- **Body Text**: DejaVu Sans + +## Best Used For + +Tech presentations, architecture portfolios, design showcases, modern business proposals, data visualization. diff --git a/skills/theme-factory/themes/ocean-depths.md b/skills/theme-factory/themes/ocean-depths.md new file mode 100644 index 0000000..b675126 --- /dev/null +++ b/skills/theme-factory/themes/ocean-depths.md @@ -0,0 +1,19 @@ +# Ocean Depths + +A professional and calming maritime theme that evokes the serenity of deep ocean waters. + +## Color Palette + +- **Deep Navy**: `#1a2332` - Primary background color +- **Teal**: `#2d8b8b` - Accent color for highlights and emphasis +- **Seafoam**: `#a8dadc` - Secondary accent for lighter elements +- **Cream**: `#f1faee` - Text and light backgrounds + +## Typography + +- **Headers**: DejaVu Sans Bold +- **Body Text**: DejaVu Sans + +## Best Used For + +Corporate presentations, financial reports, professional consulting decks, trust-building content. diff --git a/skills/theme-factory/themes/sunset-boulevard.md b/skills/theme-factory/themes/sunset-boulevard.md new file mode 100644 index 0000000..df799a0 --- /dev/null +++ b/skills/theme-factory/themes/sunset-boulevard.md @@ -0,0 +1,19 @@ +# Sunset Boulevard + +A warm and vibrant theme inspired by golden hour sunsets, perfect for energetic and creative presentations. + +## Color Palette + +- **Burnt Orange**: `#e76f51` - Primary accent color +- **Coral**: `#f4a261` - Secondary warm accent +- **Warm Sand**: `#e9c46a` - Highlighting and backgrounds +- **Deep Purple**: `#264653` - Dark contrast and text + +## Typography + +- **Headers**: DejaVu Serif Bold +- **Body Text**: DejaVu Sans + +## Best Used For + +Creative pitches, marketing presentations, lifestyle brands, event promotions, inspirational content. diff --git a/skills/theme-factory/themes/tech-innovation.md b/skills/theme-factory/themes/tech-innovation.md new file mode 100644 index 0000000..e029a43 --- /dev/null +++ b/skills/theme-factory/themes/tech-innovation.md @@ -0,0 +1,19 @@ +# Tech Innovation + +A bold and modern theme with high-contrast colors perfect for cutting-edge technology presentations. + +## Color Palette + +- **Electric Blue**: `#0066ff` - Vibrant primary accent +- **Neon Cyan**: `#00ffff` - Bright highlight color +- **Dark Gray**: `#1e1e1e` - Deep backgrounds +- **White**: `#ffffff` - Clean text and contrast + +## Typography + +- **Headers**: DejaVu Sans Bold +- **Body Text**: DejaVu Sans + +## Best Used For + +Tech startups, software launches, innovation showcases, AI/ML presentations, digital transformation content. diff --git a/skills/webapp-testing/SKILL.md b/skills/webapp-testing/SKILL.md new file mode 100644 index 0000000..6c40007 --- /dev/null +++ b/skills/webapp-testing/SKILL.md @@ -0,0 +1,95 @@ +--- +name: webapp-testing +description: Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. +--- + +# Web Application Testing + +When you need to test local web applications, write native Python Playwright scripts. + +**Helper Scripts Available**: +- `scripts/with_server.py` - Manages server lifecycle (supports multiple servers) + +**Always run scripts with `--help` first** to see usage. DO NOT read the source until you try running the script first and find that a customized solution is abslutely necessary. These scripts can be very large and thus pollute your context window. They exist to be called directly as black-box scripts rather than ingested into your context window. + +## Decision Tree: Choosing Your Approach + +``` +User task → Is it static HTML? + ├─ Yes → Read HTML file directly to identify selectors + │ ├─ Success → Write Playwright script using selectors + │ └─ Fails/Incomplete → Treat as dynamic (below) + │ + └─ No (dynamic webapp) → Is the server already running? + ├─ No → Run: python scripts/with_server.py --help + │ Then use the helper + write simplified Playwright script + │ + └─ Yes → Reconnaissance-then-action: + 1. Navigate and wait for networkidle + 2. Take screenshot or inspect DOM + 3. Identify selectors from rendered state + 4. Execute actions with discovered selectors +``` + +## Example: Using with_server.py + +When you need a server, run `--help` first, then use the helper: + +**Single server:** +```bash +python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py +``` + +**Multiple servers (e.g., backend + frontend):** +```bash +python scripts/with_server.py \ + --server "cd backend && python server.py" --port 3000 \ + --server "cd frontend && npm run dev" --port 5173 \ + -- python your_automation.py +``` + +Your automation script only needs Playwright logic (servers are managed for you): +```python +from playwright.sync_api import sync_playwright + +with sync_playwright() as p: + browser = p.chromium.launch(headless=True) # Always launch chromium in headless mode + page = browser.new_page() + page.goto('http://localhost:5173') # Server already running and ready + page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute + # ... your automation logic + browser.close() +``` + +## Reconnaissance-Then-Action Pattern + +1. **Inspect rendered DOM**: + ```python + page.screenshot(path='/tmp/inspect.png', full_page=True) + content = page.content() + page.locator('button').all() + ``` + +2. **Identify selectors** from inspection results + +3. **Execute actions** using discovered selectors + +## Common Pitfall + +❌ **Don't** inspect the DOM before waiting for `networkidle` on dynamic apps +✅ **Do** wait for `page.wait_for_load_state('networkidle')` before inspection + +## Best Practices + +- **Use bundled scripts as black boxes** - When you need to accomplish something, consider whether one of the scripts available in `scripts/` can help. These scripts handle common, complex workflows reliably without cluttering your context window. Use `--help` to see usage, then invoke directly. +- Use `sync_playwright()` for synchronous scripts +- Always close the browser when done +- Use descriptive selectors: `text=`, `role=`, CSS selectors, or IDs +- Add appropriate waits: `page.wait_for_selector()` or `page.wait_for_timeout()` + +## Reference Files + +- **examples/** - Examples showing common patterns: + - `element_discovery.py` - Discovering buttons, links, and inputs on a page + - `static_html_automation.py` - Using file:// URLs for local HTML + - `console_logging.py` - Capturing console logs during automation \ No newline at end of file diff --git a/skills/webapp-testing/examples/console_logging.py b/skills/webapp-testing/examples/console_logging.py new file mode 100644 index 0000000..9329b5e --- /dev/null +++ b/skills/webapp-testing/examples/console_logging.py @@ -0,0 +1,35 @@ +from playwright.sync_api import sync_playwright + +# Example: Capturing console logs during browser automation + +url = 'http://localhost:5173' # Replace with your URL + +console_logs = [] + +with sync_playwright() as p: + browser = p.chromium.launch(headless=True) + page = browser.new_page(viewport={'width': 1920, 'height': 1080}) + + # Set up console log capture + def handle_console_message(msg): + console_logs.append(f"[{msg.type}] {msg.text}") + print(f"Console: [{msg.type}] {msg.text}") + + page.on("console", handle_console_message) + + # Navigate to page + page.goto(url) + page.wait_for_load_state('networkidle') + + # Interact with the page (triggers console logs) + page.click('text=Dashboard') + page.wait_for_timeout(1000) + + browser.close() + +# Save console logs to file +with open('/mnt/user-data/outputs/console.log', 'w') as f: + f.write('\n'.join(console_logs)) + +print(f"\nCaptured {len(console_logs)} console messages") +print(f"Logs saved to: /mnt/user-data/outputs/console.log") \ No newline at end of file diff --git a/skills/webapp-testing/examples/element_discovery.py b/skills/webapp-testing/examples/element_discovery.py new file mode 100644 index 0000000..917ba72 --- /dev/null +++ b/skills/webapp-testing/examples/element_discovery.py @@ -0,0 +1,40 @@ +from playwright.sync_api import sync_playwright + +# Example: Discovering buttons and other elements on a page + +with sync_playwright() as p: + browser = p.chromium.launch(headless=True) + page = browser.new_page() + + # Navigate to page and wait for it to fully load + page.goto('http://localhost:5173') + page.wait_for_load_state('networkidle') + + # Discover all buttons on the page + buttons = page.locator('button').all() + print(f"Found {len(buttons)} buttons:") + for i, button in enumerate(buttons): + text = button.inner_text() if button.is_visible() else "[hidden]" + print(f" [{i}] {text}") + + # Discover links + links = page.locator('a[href]').all() + print(f"\nFound {len(links)} links:") + for link in links[:5]: # Show first 5 + text = link.inner_text().strip() + href = link.get_attribute('href') + print(f" - {text} -> {href}") + + # Discover input fields + inputs = page.locator('input, textarea, select').all() + print(f"\nFound {len(inputs)} input fields:") + for input_elem in inputs: + name = input_elem.get_attribute('name') or input_elem.get_attribute('id') or "[unnamed]" + input_type = input_elem.get_attribute('type') or 'text' + print(f" - {name} ({input_type})") + + # Take screenshot for visual reference + page.screenshot(path='/tmp/page_discovery.png', full_page=True) + print("\nScreenshot saved to /tmp/page_discovery.png") + + browser.close() \ No newline at end of file diff --git a/skills/webapp-testing/examples/static_html_automation.py b/skills/webapp-testing/examples/static_html_automation.py new file mode 100644 index 0000000..90bbedc --- /dev/null +++ b/skills/webapp-testing/examples/static_html_automation.py @@ -0,0 +1,33 @@ +from playwright.sync_api import sync_playwright +import os + +# Example: Automating interaction with static HTML files using file:// URLs + +html_file_path = os.path.abspath('path/to/your/file.html') +file_url = f'file://{html_file_path}' + +with sync_playwright() as p: + browser = p.chromium.launch(headless=True) + page = browser.new_page(viewport={'width': 1920, 'height': 1080}) + + # Navigate to local HTML file + page.goto(file_url) + + # Take screenshot + page.screenshot(path='/mnt/user-data/outputs/static_page.png', full_page=True) + + # Interact with elements + page.click('text=Click Me') + page.fill('#name', 'John Doe') + page.fill('#email', 'john@example.com') + + # Submit form + page.click('button[type="submit"]') + page.wait_for_timeout(500) + + # Take final screenshot + page.screenshot(path='/mnt/user-data/outputs/after_submit.png', full_page=True) + + browser.close() + +print("Static HTML automation completed!") \ No newline at end of file diff --git a/skills/webapp-testing/scripts/with_server.py b/skills/webapp-testing/scripts/with_server.py new file mode 100644 index 0000000..431f2eb --- /dev/null +++ b/skills/webapp-testing/scripts/with_server.py @@ -0,0 +1,106 @@ +#!/usr/bin/env python3 +""" +Start one or more servers, wait for them to be ready, run a command, then clean up. + +Usage: + # Single server + python scripts/with_server.py --server "npm run dev" --port 5173 -- python automation.py + python scripts/with_server.py --server "npm start" --port 3000 -- python test.py + + # Multiple servers + python scripts/with_server.py \ + --server "cd backend && python server.py" --port 3000 \ + --server "cd frontend && npm run dev" --port 5173 \ + -- python test.py +""" + +import subprocess +import socket +import time +import sys +import argparse + +def is_server_ready(port, timeout=30): + """Wait for server to be ready by polling the port.""" + start_time = time.time() + while time.time() - start_time < timeout: + try: + with socket.create_connection(('localhost', port), timeout=1): + return True + except (socket.error, ConnectionRefusedError): + time.sleep(0.5) + return False + + +def main(): + parser = argparse.ArgumentParser(description='Run command with one or more servers') + parser.add_argument('--server', action='append', dest='servers', required=True, help='Server command (can be repeated)') + parser.add_argument('--port', action='append', dest='ports', type=int, required=True, help='Port for each server (must match --server count)') + parser.add_argument('--timeout', type=int, default=30, help='Timeout in seconds per server (default: 30)') + parser.add_argument('command', nargs=argparse.REMAINDER, help='Command to run after server(s) ready') + + args = parser.parse_args() + + # Remove the '--' separator if present + if args.command and args.command[0] == '--': + args.command = args.command[1:] + + if not args.command: + print("Error: No command specified to run") + sys.exit(1) + + # Parse server configurations + if len(args.servers) != len(args.ports): + print("Error: Number of --server and --port arguments must match") + sys.exit(1) + + servers = [] + for cmd, port in zip(args.servers, args.ports): + servers.append({'cmd': cmd, 'port': port}) + + server_processes = [] + + try: + # Start all servers + for i, server in enumerate(servers): + print(f"Starting server {i+1}/{len(servers)}: {server['cmd']}") + + # Use shell=True to support commands with cd and && + process = subprocess.Popen( + server['cmd'], + shell=True, + stdout=subprocess.PIPE, + stderr=subprocess.PIPE + ) + server_processes.append(process) + + # Wait for this server to be ready + print(f"Waiting for server on port {server['port']}...") + if not is_server_ready(server['port'], timeout=args.timeout): + raise RuntimeError(f"Server failed to start on port {server['port']} within {args.timeout}s") + + print(f"Server ready on port {server['port']}") + + print(f"\nAll {len(servers)} server(s) ready") + + # Run the command + print(f"Running: {' '.join(args.command)}\n") + result = subprocess.run(args.command) + sys.exit(result.returncode) + + finally: + # Clean up all servers + print(f"\nStopping {len(server_processes)} server(s)...") + for i, process in enumerate(server_processes): + try: + process.terminate() + process.wait(timeout=5) + except subprocess.TimeoutExpired: + process.kill() + process.wait() + print(f"Server {i+1} stopped") + print("All servers stopped") + + +if __name__ == '__main__': + main() \ No newline at end of file