From bcfb712af5220363d7089c07c3c394088a17d4ab Mon Sep 17 00:00:00 2001 From: Aras <72440556+itsmeares@users.noreply.github.com> Date: Sun, 8 Mar 2026 07:40:42 +0000 Subject: [PATCH] docs(skills): update frontend-slides with missing dependencies and formatting (#234) * docs(skills): update frontend-slides with missing dependencies and formatting * chore: rebuild indices for frontend-slides update --------- Co-authored-by: sck_0 --- CATALOG.md | 42 +-- data/catalog.json | 109 +++--- skills/frontend-slides/SKILL.md | 69 ++-- skills/frontend-slides/STYLE_PRESETS.md | 347 ++++++++++++++++++ skills/frontend-slides/animation-patterns.md | 110 ++++++ skills/frontend-slides/html-template.md | 347 ++++++++++++++++++ .../frontend-slides/scripts/extract-pptx.py | 96 +++++ skills/frontend-slides/viewport-base.css | 153 ++++++++ skills_index.json | 8 +- 9 files changed, 1175 insertions(+), 106 deletions(-) create mode 100644 skills/frontend-slides/STYLE_PRESETS.md create mode 100644 skills/frontend-slides/animation-patterns.md create mode 100644 skills/frontend-slides/html-template.md create mode 100644 skills/frontend-slides/scripts/extract-pptx.py create mode 100644 skills/frontend-slides/viewport-base.css diff --git a/CATALOG.md b/CATALOG.md index b8514895..642e4599 100644 --- a/CATALOG.md +++ b/CATALOG.md @@ -45,7 +45,7 @@ Total skills: 1273 | `error-handling-patterns` | Master error handling patterns across languages including exceptions, Result types, error propagation, and graceful degradation to build resilient applicatio... | error, handling | error, handling, languages, including, exceptions, result, types, propagation, graceful, degradation, resilient, applications | | `event-sourcing-architect` | Expert in event sourcing, CQRS, and event-driven architecture patterns. Masters event store design, projection building, saga orchestration, and eventual con... | event, sourcing | event, sourcing, architect, cqrs, driven, architecture, masters, store, projection, building, saga, orchestration | | `event-store-design` | Design and implement event stores for event-sourced systems. Use when building event sourcing infrastructure, choosing event store technologies, or implement... | event, store | event, store, stores, sourced, building, sourcing, infrastructure, choosing, technologies, implementing, persistence | -| `game-development/multiplayer` | Multiplayer game development principles. Architecture, networking, synchronization. | game, development/multiplayer | game, development/multiplayer, multiplayer, development, principles, architecture, networking, synchronization | +| `game-development\multiplayer` | Multiplayer game development principles. Architecture, networking, synchronization. | game, development\multiplayer | game, development\multiplayer, multiplayer, development, principles, architecture, networking, synchronization | | `godot-gdscript-patterns` | Master Godot 4 GDScript patterns including signals, scenes, state machines, and optimization. Use when building Godot games, implementing game systems, or le... | godot, gdscript | godot, gdscript, including, signals, scenes, state, machines, optimization, building, games, implementing, game | | `google-calendar-automation` | Interact with Google Calendar - list calendars, view events, create/update/delete events, and find free time. Use when user asks to: check calendar, schedule... | google, calendar | google, calendar, automation, interact, list, calendars, view, events, update, delete, find, free | @@ -320,9 +320,9 @@ search for spreadsheets, and view metadata. Use wh... | google, sheets | google, | `ios-developer` | Develop native iOS applications with Swift/SwiftUI. Masters iOS 18, SwiftUI, UIKit integration, Core Data, networking, and App Store optimization. | ios | ios, developer, develop, native, applications, swift, swiftui, masters, 18, uikit, integration, core | | `langchain-architecture` | Design LLM applications using the LangChain framework with agents, memory, and tool integration patterns. Use when building LangChain applications, implement... | langchain, architecture | langchain, architecture, llm, applications, framework, agents, memory, integration, building, implementing, ai, creating | | `langgraph` | Expert in LangGraph - the production-grade framework for building stateful, multi-actor AI applications. Covers graph construction, state management, cycles ... | langgraph | langgraph, grade, framework, building, stateful, multi, actor, ai, applications, covers, graph, construction | -| `libreoffice/base` | Database management, forms, reports, and data operations with LibreOffice Base. | libreoffice/base | libreoffice/base, base, database, forms, reports, data, operations, libreoffice | -| `libreoffice/calc` | Spreadsheet creation, format conversion (ODS/XLSX/CSV), formulas, data automation with LibreOffice Calc. | libreoffice/calc | libreoffice/calc, calc, spreadsheet, creation, format, conversion, ods, xlsx, csv, formulas, data, automation | -| `libreoffice/draw` | Vector graphics and diagram creation, format conversion (ODG/SVG/PDF) with LibreOffice Draw. | libreoffice/draw | libreoffice/draw, draw, vector, graphics, diagram, creation, format, conversion, odg, svg, pdf, libreoffice | +| `libreoffice\base` | Database management, forms, reports, and data operations with LibreOffice Base. | libreoffice\base | libreoffice\base, base, database, forms, reports, data, operations, libreoffice | +| `libreoffice\calc` | Spreadsheet creation, format conversion (ODS/XLSX/CSV), formulas, data automation with LibreOffice Calc. | libreoffice\calc | libreoffice\calc, calc, spreadsheet, creation, format, conversion, ods, xlsx, csv, formulas, data, automation | +| `libreoffice\draw` | Vector graphics and diagram creation, format conversion (ODG/SVG/PDF) with LibreOffice Draw. | libreoffice\draw | libreoffice\draw, draw, vector, graphics, diagram, creation, format, conversion, odg, svg, pdf, libreoffice | | `llm-application-dev-ai-assistant` | You are an AI assistant development expert specializing in creating intelligent conversational interfaces, chatbots, and AI-powered applications. Design comp... | llm, application, dev, ai | llm, application, dev, ai, assistant, development, specializing, creating, intelligent, conversational, interfaces, chatbots | | `llm-application-dev-langchain-agent` | You are an expert LangChain agent developer specializing in production-grade AI systems using LangChain 0.1+ and LangGraph. | llm, application, dev, langchain, agent | llm, application, dev, langchain, agent, developer, specializing, grade, ai, langgraph | | `llm-application-dev-prompt-optimize` | You are an expert prompt engineer specializing in crafting effective prompts for LLMs through advanced techniques including constitutional AI, chain-of-thoug... | llm, application, dev, prompt, optimize | llm, application, dev, prompt, optimize, engineer, specializing, crafting, effective, prompts, llms, through | @@ -507,8 +507,8 @@ Scope::with_data, save state, load state, serde, | `frontend-design` | Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styli... | frontend | frontend, distinctive, grade, interfaces, intentional, aesthetics, high, craft, non, generic, visual, identity | | `frontend-developer` | Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. | frontend | frontend, developer, react, components, responsive, layouts, handle, client, side, state, masters, 19 | | `frontend-mobile-development-component-scaffold` | You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete componen... | frontend, mobile, component | frontend, mobile, component, development, scaffold, react, architecture, specializing, scaffolding, accessible, performant, components | -| `frontend-slides` | Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a... | frontend, slides | frontend, slides, stunning, animation, rich, html, presentations, scratch, converting, powerpoint, files, user | -| `game-development/mobile-games` | Mobile game development principles. Touch input, battery, performance, app stores. | game, development/mobile, games | game, development/mobile, games, mobile, development, principles, touch, input, battery, performance, app, stores | +| `frontend-slides` | Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. | frontend, slides | frontend, slides, stunning, animation, rich, html, presentations, scratch, converting, powerpoint, files | +| `game-development\mobile-games` | Mobile game development principles. Touch input, battery, performance, app stores. | game, development\mobile, games | game, development\mobile, games, mobile, development, principles, touch, input, battery, performance, app, stores | | `gemini-api-dev` | Use this skill when building applications with Gemini models, Gemini API, working with multimodal content (text, images, audio, video), implementing function... | gemini, api, dev | gemini, api, dev, skill, building, applications, models, working, multimodal, content, text, images | | `gemini-api-integration` | Use when integrating Google Gemini API into projects. Covers model selection, multimodal inputs, streaming, function calling, and production best practices. | gemini, api, integration | gemini, api, integration, integrating, google, covers, model, selection, multimodal, inputs, streaming, function | | `go-concurrency-patterns` | Master Go concurrency with goroutines, channels, sync primitives, and context. Use when building concurrent Go applications, implementing worker pools, or de... | go, concurrency | go, concurrency, goroutines, channels, sync, primitives, context, building, concurrent, applications, implementing, worker | @@ -612,7 +612,7 @@ no matching field, parse error, widget... | makepad, reference | makepad, refere | `apify-lead-generation` | Generates B2B/B2C leads by scraping Google Maps, websites, Instagram, TikTok, Facebook, LinkedIn, YouTube, and Google Search. Use when user asks to find lead... | apify, lead, generation | apify, lead, generation, generates, b2b, b2c, leads, scraping, google, maps, websites, instagram | | `apify-trend-analysis` | Discover and track emerging trends across Google Trends, Instagram, Facebook, YouTube, and TikTok to inform content strategy. | apify, trend | apify, trend, analysis, discover, track, emerging, trends, google, instagram, facebook, youtube, tiktok | | `app-builder` | Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordina... | app, builder | app, builder, main, application, building, orchestrator, creates, full, stack, applications, natural, language | -| `app-builder/templates` | Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks. | app, builder/templates | app, builder/templates, scaffolding, new, applications, creating, scratch, contains, 12, various, tech, stacks | +| `app-builder\templates` | Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks. | app, builder\templates | app, builder\templates, scaffolding, new, applications, creating, scratch, contains, 12, various, tech, stacks | | `arm-cortex-expert` | Senior embedded software engineer specializing in firmware and driver development for ARM Cortex-M microcontrollers (Teensy, STM32, nRF52, SAMD). | arm, cortex | arm, cortex, senior, embedded, software, engineer, specializing, firmware, driver, development, microcontrollers, teensy | | `ask-questions-if-underspecified` | Clarify requirements before implementing. Use when serious doubts arise. | ask, questions, if, underspecified | ask, questions, if, underspecified, clarify, requirements, before, implementing, serious, doubts, arise | | `automate-whatsapp` | Automate Whatsapp | automate, whatsapp | automate, whatsapp | @@ -711,13 +711,13 @@ a... | evolution | evolution, critical, makepad, skills, self, contribution, tri | `fp-either-ref` | Quick reference for Either type. Use when user needs error handling, validation, or operations that can fail with typed errors. | fp-ts, either, error-handling, validation, quick-reference | fp-ts, either, error-handling, validation, quick-reference, fp, ref, quick, reference, type, user, error | | `framework-migration-code-migrate` | You are a code migration expert specializing in transitioning codebases between frameworks, languages, versions, and platforms. Generate comprehensive migrat... | framework, migration, code, migrate | framework, migration, code, migrate, specializing, transitioning, codebases, between, frameworks, languages, versions, platforms | | `game-development` | Game development orchestrator. Routes to platform-specific skills based on project needs. | game | game, development, orchestrator, routes, platform, specific, skills | -| `game-development/2d-games` | 2D game development principles. Sprites, tilemaps, physics, camera. | game, development/2d, games | game, development/2d, games, 2d, development, principles, sprites, tilemaps, physics, camera | -| `game-development/3d-games` | 3D game development principles. Rendering, shaders, physics, cameras. | game, development/3d, games | game, development/3d, games, 3d, development, principles, rendering, shaders, physics, cameras | -| `game-development/game-audio` | Game audio principles. Sound design, music integration, adaptive audio systems. | game, development/game, audio | game, development/game, audio, principles, sound, music, integration, adaptive | -| `game-development/game-design` | Game design principles. GDD structure, balancing, player psychology, progression. | game, development/game | game, development/game, principles, gdd, structure, balancing, player, psychology, progression | -| `game-development/pc-games` | PC and console game development principles. Engine selection, platform features, optimization strategies. | game, development/pc, games | game, development/pc, games, pc, console, development, principles, engine, selection, platform, features, optimization | -| `game-development/vr-ar` | VR/AR development principles. Comfort, interaction, performance requirements. | game, development/vr, ar | game, development/vr, ar, vr, development, principles, comfort, interaction, performance, requirements | -| `game-development/web-games` | Web browser game development principles. Framework selection, WebGPU, optimization, PWA. | game, development/web, games | game, development/web, games, web, browser, development, principles, framework, selection, webgpu, optimization, pwa | +| `game-development\2d-games` | 2D game development principles. Sprites, tilemaps, physics, camera. | game, development\2d, games | game, development\2d, games, 2d, development, principles, sprites, tilemaps, physics, camera | +| `game-development\3d-games` | 3D game development principles. Rendering, shaders, physics, cameras. | game, development\3d, games | game, development\3d, games, 3d, development, principles, rendering, shaders, physics, cameras | +| `game-development\game-audio` | Game audio principles. Sound design, music integration, adaptive audio systems. | game, development\game, audio | game, development\game, audio, principles, sound, music, integration, adaptive | +| `game-development\game-design` | Game design principles. GDD structure, balancing, player psychology, progression. | game, development\game | game, development\game, principles, gdd, structure, balancing, player, psychology, progression | +| `game-development\pc-games` | PC and console game development principles. Engine selection, platform features, optimization strategies. | game, development\pc, games | game, development\pc, games, pc, console, development, principles, engine, selection, platform, features, optimization | +| `game-development\vr-ar` | VR/AR development principles. Comfort, interaction, performance requirements. | game, development\vr, ar | game, development\vr, ar, vr, development, principles, comfort, interaction, performance, requirements | +| `game-development\web-games` | Web browser game development principles. Framework selection, WebGPU, optimization, PWA. | game, development\web, games | game, development\web, games, web, browser, development, principles, framework, selection, webgpu, optimization, pwa | | `geoffrey-hinton` | Agente que simula Geoffrey Hinton — Godfather of Deep Learning, Prêmio Turing 2018, criador do backpropagation e das Deep Belief Networks. Use quando quiser:... | persona, deep-learning, ai-safety, neural-networks | persona, deep-learning, ai-safety, neural-networks, geoffrey, hinton, agente, que, simula, godfather, deep, learning | | `gh-review-requests` | Fetch unread GitHub notifications for open PRs where review is requested from a specified team or opened by a team member. Use when asked to "find PRs I need... | gh, requests | gh, requests, review, fetch, unread, github, notifications, open, prs, where, requested, specified | | `git-advanced-workflows` | Master advanced Git workflows including rebasing, cherry-picking, bisect, worktrees, and reflog to maintain clean history and recover from any situation. Use... | git, advanced | git, advanced, including, rebasing, cherry, picking, bisect, worktrees, reflog, maintain, clean, history | @@ -1011,7 +1011,7 @@ scripts. | bash | bash, pro, defensive, scripting, automation, ci, cd, pipelines | `file-uploads` | Expert at handling file uploads and cloud storage. Covers S3, Cloudflare R2, presigned URLs, multipart uploads, and image optimization. Knows how to handle l... | file, uploads | file, uploads, handling, cloud, storage, covers, s3, cloudflare, r2, presigned, urls, multipart | | `flutter-expert` | Master Flutter development with Dart 3, advanced widgets, and multi-platform deployment. | flutter | flutter, development, dart, widgets, multi, platform, deployment | | `freshservice-automation` | Automate Freshservice ITSM tasks via Rube MCP (Composio): create/update tickets, bulk operations, service requests, and outbound emails. Always search tools ... | freshservice | freshservice, automation, automate, itsm, tasks, via, rube, mcp, composio, update, tickets, bulk | -| `game-development/game-art` | Game art principles. Visual style selection, asset pipeline, animation workflow. | game, development/game, art | game, development/game, art, principles, visual, style, selection, asset, pipeline, animation | +| `game-development\game-art` | Game art principles. Visual style selection, asset pipeline, animation workflow. | game, development\game, art | game, development\game, art, principles, visual, style, selection, asset, pipeline, animation | | `gcp-cloud-run` | Specialized skill for building production-ready serverless applications on GCP. Covers Cloud Run services (containerized), Cloud Run Functions (event-driven)... | gcp, cloud, run | gcp, cloud, run, specialized, skill, building, serverless, applications, covers, containerized, functions, event | | `git-hooks-automation` | Master Git hooks setup with Husky, lint-staged, pre-commit framework, and commitlint. Automate code quality gates, formatting, linting, and commit message en... | git, hooks | git, hooks, automation, setup, husky, lint, staged, pre, commit, framework, commitlint, automate | | `git-pr-workflows-git-workflow` | Orchestrate a comprehensive git workflow from code review through PR creation, leveraging specialized agents for quality assurance, testing, and deployment r... | git, pr | git, pr, orchestrate, code, review, through, creation, leveraging, specialized, agents, quality, assurance | @@ -1205,10 +1205,10 @@ distri... | makepad, deployment | makepad, deployment, critical, packaging, trig | `security-scanning-security-sast` | Static Application Security Testing (SAST) for code vulnerability analysis across multiple languages and frameworks | security, scanning, sast | security, scanning, sast, static, application, testing, code, vulnerability, analysis, multiple, languages, frameworks | | `security-skill-creator` | Security Skill Creator | security, skill, creator | security, skill, creator | -| `security/aws-compliance-checker` | Automated compliance checking against CIS, PCI-DSS, HIPAA, and SOC 2 benchmarks | [aws, compliance, audit, cis, pci-dss, hipaa, kiro-cli] | [aws, compliance, audit, cis, pci-dss, hipaa, kiro-cli], aws, checker, automated, checking, against | -| `security/aws-iam-best-practices` | IAM policy review, hardening, and least privilege implementation | [aws, iam, security, access-control, kiro-cli, least-privilege] | [aws, iam, security, access-control, kiro-cli, least-privilege], aws, policy, review, hardening, least, privilege | -| `security/aws-secrets-rotation` | Automate AWS secrets rotation for RDS, API keys, and credentials | [aws, secrets-manager, security, automation, kiro-cli, credentials] | [aws, secrets-manager, security, automation, kiro-cli, credentials], aws, secrets, rotation, automate, rds, api | -| `security/aws-security-audit` | Comprehensive AWS security posture assessment using AWS CLI and security best practices | [aws, security, audit, compliance, kiro-cli, security-assessment] | [aws, security, audit, compliance, kiro-cli, security-assessment], aws, posture, assessment, cli | +| `security\aws-compliance-checker` | Automated compliance checking against CIS, PCI-DSS, HIPAA, and SOC 2 benchmarks | [aws, compliance, audit, cis, pci-dss, hipaa, kiro-cli] | [aws, compliance, audit, cis, pci-dss, hipaa, kiro-cli], aws, checker, automated, checking, against | +| `security\aws-iam-best-practices` | IAM policy review, hardening, and least privilege implementation | [aws, iam, security, access-control, kiro-cli, least-privilege] | [aws, iam, security, access-control, kiro-cli, least-privilege], aws, policy, review, hardening, least, privilege | +| `security\aws-secrets-rotation` | Automate AWS secrets rotation for RDS, API keys, and credentials | [aws, secrets-manager, security, automation, kiro-cli, credentials] | [aws, secrets-manager, security, automation, kiro-cli, credentials], aws, secrets, rotation, automate, rds, api | +| `security\aws-security-audit` | Comprehensive AWS security posture assessment using AWS CLI and security best practices | [aws, security, audit, compliance, kiro-cli, security-assessment] | [aws, security, audit, compliance, kiro-cli, security-assessment], aws, posture, assessment, cli | | `semgrep-rule-creator` | Creates custom Semgrep rules for detecting security vulnerabilities, bug patterns, and code patterns. Use when writing Semgrep rules or building custom stati... | semgrep, rule, creator | semgrep, rule, creator, creates, custom, rules, detecting, security, vulnerabilities, bug, code, writing | | `seo-authority-builder` | Analyzes content for E-E-A-T signals and suggests improvements to build authority and trust. Identifies missing credibility elements. Use @@ -1340,8 +1340,8 @@ replace text, and manage slide content. Use when... | google, slides | google, s | `jupyter-workflow` | Jupyter Workflow | jupyter | jupyter | | `kaizen` | Guide for continuous improvement, error proofing, and standardization. Use this skill when the user wants to improve code quality, refactor, or discuss proce... | kaizen | kaizen, continuous, improvement, error, proofing, standardization, skill, user, wants, improve, code, quality | | `klaviyo-automation` | Automate Klaviyo tasks via Rube MCP (Composio): manage email/SMS campaigns, inspect campaign messages, track tags, and monitor send jobs. Always search tools... | klaviyo | klaviyo, automation, automate, tasks, via, rube, mcp, composio, email, sms, campaigns, inspect | -| `libreoffice/impress` | Presentation creation, format conversion (ODP/PPTX/PDF), slide automation with LibreOffice Impress. | libreoffice/impress | libreoffice/impress, impress, presentation, creation, format, conversion, odp, pptx, pdf, slide, automation, libreoffice | -| `libreoffice/writer` | Document creation, format conversion (ODT/DOCX/PDF), mail merge, and automation with LibreOffice Writer. | libreoffice/writer | libreoffice/writer, writer, document, creation, format, conversion, odt, docx, pdf, mail, merge, automation | +| `libreoffice\impress` | Presentation creation, format conversion (ODP/PPTX/PDF), slide automation with LibreOffice Impress. | libreoffice\impress | libreoffice\impress, impress, presentation, creation, format, conversion, odp, pptx, pdf, slide, automation, libreoffice | +| `libreoffice\writer` | Document creation, format conversion (ODT/DOCX/PDF), mail merge, and automation with LibreOffice Writer. | libreoffice\writer | libreoffice\writer, writer, document, creation, format, conversion, odt, docx, pdf, mail, merge, automation | | `linear-automation` | Automate Linear tasks via Rube MCP (Composio): issues, projects, cycles, teams, labels. Always search tools first for current schemas. | linear | linear, automation, automate, tasks, via, rube, mcp, composio, issues, cycles, teams, labels | | `linkedin-automation` | Automate LinkedIn tasks via Rube MCP (Composio): create posts, manage profile, company info, comments, and image uploads. Always search tools first for curre... | linkedin | linkedin, automation, automate, tasks, via, rube, mcp, composio, posts, profile, company, info | | `make-automation` | Automate Make (Integromat) tasks via Rube MCP (Composio): operations, enums, language and timezone lookups. Always search tools first for current schemas. | make | make, automation, automate, integromat, tasks, via, rube, mcp, composio, operations, enums, language | diff --git a/data/catalog.json b/data/catalog.json index 85b82b6d..4d5d5714 100644 --- a/data/catalog.json +++ b/data/catalog.json @@ -1991,17 +1991,17 @@ "path": "skills/app-builder/SKILL.md" }, { - "id": "app-builder/templates", + "id": "app-builder\\templates", "name": "templates", "description": "Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.", "category": "general", "tags": [ "app", - "builder/templates" + "builder\\templates" ], "triggers": [ "app", - "builder/templates", + "builder\\templates", "scaffolding", "new", "applications", @@ -13844,7 +13844,7 @@ { "id": "frontend-slides", "name": "frontend-slides", - "description": "Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual...", + "description": "Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files.", "category": "development", "tags": [ "frontend", @@ -13861,8 +13861,7 @@ "scratch", "converting", "powerpoint", - "files", - "user" + "files" ], "path": "skills/frontend-slides/SKILL.md" }, @@ -13931,18 +13930,18 @@ "path": "skills/game-development/SKILL.md" }, { - "id": "game-development/2d-games", + "id": "game-development\\2d-games", "name": "2d-games", "description": "2D game development principles. Sprites, tilemaps, physics, camera.", "category": "general", "tags": [ "game", - "development/2d", + "development\\2d", "games" ], "triggers": [ "game", - "development/2d", + "development\\2d", "games", "2d", "development", @@ -13955,18 +13954,18 @@ "path": "skills/game-development/2d-games/SKILL.md" }, { - "id": "game-development/3d-games", + "id": "game-development\\3d-games", "name": "3d-games", "description": "3D game development principles. Rendering, shaders, physics, cameras.", "category": "general", "tags": [ "game", - "development/3d", + "development\\3d", "games" ], "triggers": [ "game", - "development/3d", + "development\\3d", "games", "3d", "development", @@ -13979,18 +13978,18 @@ "path": "skills/game-development/3d-games/SKILL.md" }, { - "id": "game-development/game-art", + "id": "game-development\\game-art", "name": "game-art", "description": "Game art principles. Visual style selection, asset pipeline, animation workflow.", "category": "infrastructure", "tags": [ "game", - "development/game", + "development\\game", "art" ], "triggers": [ "game", - "development/game", + "development\\game", "art", "principles", "visual", @@ -14003,18 +14002,18 @@ "path": "skills/game-development/game-art/SKILL.md" }, { - "id": "game-development/game-audio", + "id": "game-development\\game-audio", "name": "game-audio", "description": "Game audio principles. Sound design, music integration, adaptive audio systems.", "category": "general", "tags": [ "game", - "development/game", + "development\\game", "audio" ], "triggers": [ "game", - "development/game", + "development\\game", "audio", "principles", "sound", @@ -14025,17 +14024,17 @@ "path": "skills/game-development/game-audio/SKILL.md" }, { - "id": "game-development/game-design", + "id": "game-development\\game-design", "name": "game-design", "description": "Game design principles. GDD structure, balancing, player psychology, progression.", "category": "general", "tags": [ "game", - "development/game" + "development\\game" ], "triggers": [ "game", - "development/game", + "development\\game", "principles", "gdd", "structure", @@ -14047,18 +14046,18 @@ "path": "skills/game-development/game-design/SKILL.md" }, { - "id": "game-development/mobile-games", + "id": "game-development\\mobile-games", "name": "mobile-games", "description": "Mobile game development principles. Touch input, battery, performance, app stores.", "category": "development", "tags": [ "game", - "development/mobile", + "development\\mobile", "games" ], "triggers": [ "game", - "development/mobile", + "development\\mobile", "games", "mobile", "development", @@ -14073,17 +14072,17 @@ "path": "skills/game-development/mobile-games/SKILL.md" }, { - "id": "game-development/multiplayer", + "id": "game-development\\multiplayer", "name": "multiplayer", "description": "Multiplayer game development principles. Architecture, networking, synchronization.", "category": "architecture", "tags": [ "game", - "development/multiplayer" + "development\\multiplayer" ], "triggers": [ "game", - "development/multiplayer", + "development\\multiplayer", "multiplayer", "development", "principles", @@ -14094,18 +14093,18 @@ "path": "skills/game-development/multiplayer/SKILL.md" }, { - "id": "game-development/pc-games", + "id": "game-development\\pc-games", "name": "pc-games", "description": "PC and console game development principles. Engine selection, platform features, optimization strategies.", "category": "general", "tags": [ "game", - "development/pc", + "development\\pc", "games" ], "triggers": [ "game", - "development/pc", + "development\\pc", "games", "pc", "console", @@ -14120,18 +14119,18 @@ "path": "skills/game-development/pc-games/SKILL.md" }, { - "id": "game-development/vr-ar", + "id": "game-development\\vr-ar", "name": "vr-ar", "description": "VR/AR development principles. Comfort, interaction, performance requirements.", "category": "general", "tags": [ "game", - "development/vr", + "development\\vr", "ar" ], "triggers": [ "game", - "development/vr", + "development\\vr", "ar", "vr", "development", @@ -14144,18 +14143,18 @@ "path": "skills/game-development/vr-ar/SKILL.md" }, { - "id": "game-development/web-games", + "id": "game-development\\web-games", "name": "web-games", "description": "Web browser game development principles. Framework selection, WebGPU, optimization, PWA.", "category": "general", "tags": [ "game", - "development/web", + "development\\web", "games" ], "triggers": [ "game", - "development/web", + "development\\web", "games", "web", "browser", @@ -17471,15 +17470,15 @@ "path": "skills/leiloeiro-risco/SKILL.md" }, { - "id": "libreoffice/base", + "id": "libreoffice\\base", "name": "base", "description": "Database management, forms, reports, and data operations with LibreOffice Base.", "category": "data-ai", "tags": [ - "libreoffice/base" + "libreoffice\\base" ], "triggers": [ - "libreoffice/base", + "libreoffice\\base", "base", "database", "forms", @@ -17491,15 +17490,15 @@ "path": "skills/libreoffice/base/SKILL.md" }, { - "id": "libreoffice/calc", + "id": "libreoffice\\calc", "name": "calc", "description": "Spreadsheet creation, format conversion (ODS/XLSX/CSV), formulas, data automation with LibreOffice Calc.", "category": "data-ai", "tags": [ - "libreoffice/calc" + "libreoffice\\calc" ], "triggers": [ - "libreoffice/calc", + "libreoffice\\calc", "calc", "spreadsheet", "creation", @@ -17515,15 +17514,15 @@ "path": "skills/libreoffice/calc/SKILL.md" }, { - "id": "libreoffice/draw", + "id": "libreoffice\\draw", "name": "draw", "description": "Vector graphics and diagram creation, format conversion (ODG/SVG/PDF) with LibreOffice Draw.", "category": "data-ai", "tags": [ - "libreoffice/draw" + "libreoffice\\draw" ], "triggers": [ - "libreoffice/draw", + "libreoffice\\draw", "draw", "vector", "graphics", @@ -17539,15 +17538,15 @@ "path": "skills/libreoffice/draw/SKILL.md" }, { - "id": "libreoffice/impress", + "id": "libreoffice\\impress", "name": "impress", "description": "Presentation creation, format conversion (ODP/PPTX/PDF), slide automation with LibreOffice Impress.", "category": "workflow", "tags": [ - "libreoffice/impress" + "libreoffice\\impress" ], "triggers": [ - "libreoffice/impress", + "libreoffice\\impress", "impress", "presentation", "creation", @@ -17563,15 +17562,15 @@ "path": "skills/libreoffice/impress/SKILL.md" }, { - "id": "libreoffice/writer", + "id": "libreoffice\\writer", "name": "writer", "description": "Document creation, format conversion (ODT/DOCX/PDF), mail merge, and automation with LibreOffice Writer.", "category": "workflow", "tags": [ - "libreoffice/writer" + "libreoffice\\writer" ], "triggers": [ - "libreoffice/writer", + "libreoffice\\writer", "writer", "document", "creation", @@ -24942,7 +24941,7 @@ "path": "skills/security-skill-creator/SKILL.md" }, { - "id": "security/aws-compliance-checker", + "id": "security\\aws-compliance-checker", "name": "aws-compliance-checker", "description": "Automated compliance checking against CIS, PCI-DSS, HIPAA, and SOC 2 benchmarks", "category": "security", @@ -24972,7 +24971,7 @@ "path": "skills/security/aws-compliance-checker/SKILL.md" }, { - "id": "security/aws-iam-best-practices", + "id": "security\\aws-iam-best-practices", "name": "aws-iam-best-practices", "description": "IAM policy review, hardening, and least privilege implementation", "category": "security", @@ -25001,7 +25000,7 @@ "path": "skills/security/aws-iam-best-practices/SKILL.md" }, { - "id": "security/aws-secrets-rotation", + "id": "security\\aws-secrets-rotation", "name": "aws-secrets-rotation", "description": "Automate AWS secrets rotation for RDS, API keys, and credentials", "category": "security", @@ -25030,7 +25029,7 @@ "path": "skills/security/aws-secrets-rotation/SKILL.md" }, { - "id": "security/aws-security-audit", + "id": "security\\aws-security-audit", "name": "aws-security-audit", "description": "Comprehensive AWS security posture assessment using AWS CLI and security best practices", "category": "security", diff --git a/skills/frontend-slides/SKILL.md b/skills/frontend-slides/SKILL.md index 6cd52765..6746c2fe 100644 --- a/skills/frontend-slides/SKILL.md +++ b/skills/frontend-slides/SKILL.md @@ -1,12 +1,21 @@ --- name: frontend-slides -description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual... +description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. +risk: safe +source: https://github.com/zarazhangrui/frontend-slides +date_added: "2026-03-07" --- # Frontend Slides Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. +## When to Use This Skill + +- Use when the user asks to create a presentation, slide deck, or pitch from scratch. +- Use when the user wants to convert an existing PPT or PPTX file into a web-based presentation. +- Use when designing visually rich, animated HTML content that needs to fit exactly within the viewport. + ## Core Principles 1. **Zero Dependencies** — Single HTML files with inline CSS/JS. No npm, no build tools. @@ -19,12 +28,14 @@ Create zero-dependency, animation-rich HTML presentations that run entirely in t You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight. Focus on: + - Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics. - Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration. - Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. - Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic. Avoid generic AI-generated aesthetics: + - Overused font families (Inter, Roboto, Arial, system fonts) - Cliched color schemes (particularly purple gradients on white backgrounds) - Predictable layouts and component patterns @@ -48,14 +59,14 @@ These invariants apply to EVERY slide in EVERY presentation: ### Content Density Limits Per Slide -| Slide Type | Maximum Content | -|------------|-----------------| -| Title slide | 1 heading + 1 subtitle + optional tagline | +| Slide Type | Maximum Content | +| ------------- | --------------------------------------------------------- | +| Title slide | 1 heading + 1 subtitle + optional tagline | | Content slide | 1 heading + 4-6 bullet points OR 1 heading + 2 paragraphs | -| Feature grid | 1 heading + 6 cards maximum (2x3 or 3x2) | -| Code slide | 1 heading + 8-10 lines of code | -| Quote slide | 1 quote (max 3 lines) + attribution | -| Image slide | 1 heading + 1 image (max 60vh height) | +| Feature grid | 1 heading + 6 cards maximum (2x3 or 3x2) | +| Code slide | 1 heading + 8-10 lines of code | +| Quote slide | 1 quote (max 3 lines) + attribution | +| Image slide | 1 heading + 1 image (max 60vh height) | **Content exceeds limits? Split into multiple slides. Never cram, never scroll.** @@ -98,6 +109,7 @@ Do you have content ready? Options: All content ready / Rough notes / Topic only **Question 4 — Inline Editing** (header: "Editing"): Do you need to edit text directly in the browser after generation? Options: + - "Yes (Recommended)" — Can edit text in-browser, auto-save to localStorage, export file - "No" — Presentation only, keeps file smaller @@ -110,6 +122,7 @@ If user has content, ask them to share it. If user selected "No images" → skip to Phase 2. If user provides an image folder: + 1. **Scan** — List all image files (.png, .jpg, .svg, .webp, etc.) 2. **View each image** — Use the Read tool (Claude is multimodal) 3. **Evaluate** — For each: what it shows, USABLE or NOT USABLE (with reason), what concept it represents, dominant colors @@ -127,15 +140,17 @@ If user provides an image folder: ### Step 2.0: Style Path Ask how they want to choose (header: "Style"): + - "Show me options" (recommended) — Generate 3 previews based on mood - "I know what I want" — Pick from preset list directly -**If direct selection:** Show preset picker and skip to Phase 3. Available presets are defined in STYLE_PRESETS.md. +**If direct selection:** Show preset picker and skip to Phase 3. Available presets are defined in [STYLE_PRESETS.md](STYLE_PRESETS.md). ### Step 2.1: Mood Selection (Guided Discovery) Ask (header: "Vibe", multiSelect: true, max 2): What feeling should the audience have? Options: + - Impressed/Confident — Professional, trustworthy - Excited/Energized — Innovative, bold - Calm/Focused — Clear, thoughtful @@ -143,14 +158,14 @@ What feeling should the audience have? Options: ### Step 2.2: Generate 3 Style Previews -Based on mood, generate 3 distinct single-slide HTML previews showing typography, colors, animation, and overall aesthetic. Read STYLE_PRESETS.md for available presets and their specifications. +Based on mood, generate 3 distinct single-slide HTML previews showing typography, colors, animation, and overall aesthetic. Read [STYLE_PRESETS.md](STYLE_PRESETS.md) for available presets and their specifications. -| Mood | Suggested Presets | -|------|-------------------| -| Impressed/Confident | Bold Signal, Electric Studio, Dark Botanical | -| Excited/Energized | Creative Voltage, Neon Cyber, Split Pastel | -| Calm/Focused | Notebook Tabs, Paper & Ink, Swiss Modern | -| Inspired/Moved | Dark Botanical, Vintage Editorial, Pastel Geometry | +| Mood | Suggested Presets | +| ------------------- | -------------------------------------------------- | +| Impressed/Confident | Bold Signal, Electric Studio, Dark Botanical | +| Excited/Energized | Creative Voltage, Neon Cyber, Split Pastel | +| Calm/Focused | Notebook Tabs, Paper & Ink, Swiss Modern | +| Inspired/Moved | Dark Botanical, Vintage Editorial, Pastel Geometry | Save previews to `.claude-design/slide-previews/` (style-a.html, style-b.html, style-c.html). Each should be self-contained, ~50-100 lines, showing one animated title slide. @@ -172,11 +187,13 @@ Generate the full presentation using content from Phase 1 (text, or text + curat If images were provided, the slide outline already incorporates them from Step 1.2. If not, CSS-generated visuals (gradients, shapes, patterns) provide visual interest — this is a fully supported first-class path. **Before generating, read these supporting files:** -- html-template.md — HTML architecture and JS features -- viewport-base.css — Mandatory CSS (include in full) -- animation-patterns.md — Animation reference for the chosen feeling + +- [html-template.md](html-template.md) — HTML architecture and JS features +- [viewport-base.css](viewport-base.css) — Mandatory CSS (include in full) +- [animation-patterns.md](animation-patterns.md) — Animation reference for the chosen feeling **Key requirements:** + - Single self-contained HTML file, all CSS/JS inline - Include the FULL contents of viewport-base.css in the ` + + + +
+ + + + + +
+

Presentation Title

+

Subtitle or author

+
+ +
+
+

Slide Title

+

Content...

+
+
+ + + + + + +``` + +## Required JavaScript Features + +Every presentation must include: + +1. **SlidePresentation Class** — Main controller with: + - Keyboard navigation (arrows, space, page up/down) + - Touch/swipe support + - Mouse wheel navigation + - Progress bar updates + - Navigation dots + +2. **Intersection Observer** — For scroll-triggered animations: + - Add `.visible` class when slides enter viewport + - Trigger CSS transitions efficiently + +3. **Optional Enhancements** (match to chosen style): + - Custom cursor with trail + - Particle system background (canvas) + - Parallax effects + - 3D tilt on hover + - Magnetic buttons + - Counter animations + +4. **Inline Editing** (only if user opted in during Phase 1 — skip entirely if they said No): + - Edit toggle button (hidden by default, revealed via hover hotzone or `E` key) + - Auto-save to localStorage + - Export/save file functionality + - See "Inline Editing Implementation" section below + +## Inline Editing Implementation (Opt-In Only) + +**If the user chose "No" for inline editing in Phase 1, do NOT generate any edit-related HTML, CSS, or JS.** + +**Do NOT use CSS `~` sibling selector for hover-based show/hide.** The CSS-only approach (`edit-hotzone:hover ~ .edit-toggle`) fails because `pointer-events: none` on the toggle button breaks the hover chain: user hovers hotzone -> button becomes visible -> mouse moves toward button -> leaves hotzone -> button disappears before click. + +**Required approach: JS-based hover with 400ms delay timeout.** + +HTML: +```html +
+ +``` + +CSS (visibility controlled by JS classes only): +```css +/* Do NOT use CSS ~ sibling selector for this! + pointer-events: none breaks the hover chain. + Must use JS with delay timeout. */ +.edit-hotzone { + position: fixed; top: 0; left: 0; + width: 80px; height: 80px; + z-index: 10000; + cursor: pointer; +} +.edit-toggle { + opacity: 0; + pointer-events: none; + transition: opacity 0.3s ease; + z-index: 10001; +} +.edit-toggle.show, +.edit-toggle.active { + opacity: 1; + pointer-events: auto; +} +``` + +JS (three interaction methods): +```javascript +// 1. Click handler on the toggle button +document.getElementById('editToggle').addEventListener('click', () => { + editor.toggleEditMode(); +}); + +// 2. Hotzone hover with 400ms grace period +const hotzone = document.querySelector('.edit-hotzone'); +const editToggle = document.getElementById('editToggle'); +let hideTimeout = null; + +hotzone.addEventListener('mouseenter', () => { + clearTimeout(hideTimeout); + editToggle.classList.add('show'); +}); +hotzone.addEventListener('mouseleave', () => { + hideTimeout = setTimeout(() => { + if (!editor.isActive) editToggle.classList.remove('show'); + }, 400); +}); +editToggle.addEventListener('mouseenter', () => { + clearTimeout(hideTimeout); +}); +editToggle.addEventListener('mouseleave', () => { + hideTimeout = setTimeout(() => { + if (!editor.isActive) editToggle.classList.remove('show'); + }, 400); +}); + +// 3. Hotzone direct click +hotzone.addEventListener('click', () => { + editor.toggleEditMode(); +}); + +// 4. Keyboard shortcut (E key, skip when editing text) +document.addEventListener('keydown', (e) => { + if ((e.key === 'e' || e.key === 'E') && !e.target.getAttribute('contenteditable')) { + editor.toggleEditMode(); + } +}); +``` + +## Image Pipeline (Skip If No Images) + +If user chose "No images" in Phase 1, skip this entirely. If images were provided, process them before generating HTML. + +**Dependency:** `pip install Pillow` + +### Image Processing + +```python +from PIL import Image, ImageDraw + +# Circular crop (for logos on modern/clean styles) +def crop_circle(input_path, output_path): + img = Image.open(input_path).convert('RGBA') + w, h = img.size + size = min(w, h) + left, top = (w - size) // 2, (h - size) // 2 + img = img.crop((left, top, left + size, top + size)) + mask = Image.new('L', (size, size), 0) + ImageDraw.Draw(mask).ellipse([0, 0, size, size], fill=255) + img.putalpha(mask) + img.save(output_path, 'PNG') + +# Resize (for oversized images that inflate HTML) +def resize_max(input_path, output_path, max_dim=1200): + img = Image.open(input_path) + img.thumbnail((max_dim, max_dim), Image.LANCZOS) + img.save(output_path, quality=85) +``` + +| Situation | Operation | +|-----------|-----------| +| Square logo on rounded aesthetic | `crop_circle()` | +| Image > 1MB | `resize_max(max_dim=1200)` | +| Wrong aspect ratio | Manual crop with `img.crop()` | + +Save processed images with `_processed` suffix. Never overwrite originals. + +### Image Placement + +**Use direct file paths** (not base64) — presentations are viewed locally: + +```html + +Screenshot +``` + +```css +.slide-image { + max-width: 100%; + max-height: min(50vh, 400px); + object-fit: contain; + border-radius: 8px; +} +.slide-image.screenshot { + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); +} +.slide-image.logo { + max-height: min(30vh, 200px); +} +``` + +**Adapt border/shadow colors to match the chosen style's accent.** Never repeat the same image on multiple slides (except logos on title + closing). + +**Placement patterns:** Logo centered on title slide. Screenshots in two-column layouts with text. Full-bleed images as slide backgrounds with text overlay (use sparingly). + +--- + +## Code Quality + +**Comments:** Every section needs clear comments explaining what it does and how to modify it. + +**Accessibility:** +- Semantic HTML (`
`, `