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 <samujackson1337@gmail.com>
This commit is contained in:
Aras
GitHub
42
CATALOG.md
42
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 |
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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 `<style>` block
|
||||
- Use fonts from Fontshare or Google Fonts — never system fonts
|
||||
@@ -210,10 +227,10 @@ When converting PowerPoint files:
|
||||
|
||||
## Supporting Files
|
||||
|
||||
| File | Purpose | When to Read |
|
||||
|------|---------|-------------|
|
||||
| STYLE_PRESETS.md | 12 curated visual presets with colors, fonts, and signature elements | Phase 2 (style selection) |
|
||||
| viewport-base.css | Mandatory responsive CSS — copy into every presentation | Phase 3 (generation) |
|
||||
| html-template.md | HTML structure, JS features, code quality standards | Phase 3 (generation) |
|
||||
| animation-patterns.md | CSS/JS animation snippets and effect-to-feeling guide | Phase 3 (generation) |
|
||||
| scripts/extract-pptx.py | Python script for PPT content extraction | Phase 4 (conversion) |
|
||||
| File | Purpose | When to Read |
|
||||
| -------------------------------------------------- | -------------------------------------------------------------------- | ------------------------- |
|
||||
| [STYLE_PRESETS.md](STYLE_PRESETS.md) | 12 curated visual presets with colors, fonts, and signature elements | Phase 2 (style selection) |
|
||||
| [viewport-base.css](viewport-base.css) | Mandatory responsive CSS — copy into every presentation | Phase 3 (generation) |
|
||||
| [html-template.md](html-template.md) | HTML structure, JS features, code quality standards | Phase 3 (generation) |
|
||||
| [animation-patterns.md](animation-patterns.md) | CSS/JS animation snippets and effect-to-feeling guide | Phase 3 (generation) |
|
||||
| [scripts/extract-pptx.py](scripts/extract-pptx.py) | Python script for PPT content extraction | Phase 4 (conversion) |
|
||||
|
||||
347
skills/frontend-slides/STYLE_PRESETS.md
Normal file
347
skills/frontend-slides/STYLE_PRESETS.md
Normal file
@@ -0,0 +1,347 @@
|
||||
# Style Presets Reference
|
||||
|
||||
Curated visual styles for Frontend Slides. Each preset is inspired by real design references — no generic "AI slop" aesthetics. **Abstract shapes only — no illustrations.**
|
||||
|
||||
**Viewport CSS:** For mandatory base styles, see [viewport-base.css](viewport-base.css). Include in every presentation.
|
||||
|
||||
---
|
||||
|
||||
## Dark Themes
|
||||
|
||||
### 1. Bold Signal
|
||||
|
||||
**Vibe:** Confident, bold, modern, high-impact
|
||||
|
||||
**Layout:** Colored card on dark gradient. Number top-left, navigation top-right, title bottom-left.
|
||||
|
||||
**Typography:**
|
||||
- Display: `Archivo Black` (900)
|
||||
- Body: `Space Grotesk` (400/500)
|
||||
|
||||
**Colors:**
|
||||
```css
|
||||
:root {
|
||||
--bg-primary: #1a1a1a;
|
||||
--bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
|
||||
--card-bg: #FF5722;
|
||||
--text-primary: #ffffff;
|
||||
--text-on-card: #1a1a1a;
|
||||
}
|
||||
```
|
||||
|
||||
**Signature Elements:**
|
||||
- Bold colored card as focal point (orange, coral, or vibrant accent)
|
||||
- Large section numbers (01, 02, etc.)
|
||||
- Navigation breadcrumbs with active/inactive opacity states
|
||||
- Grid-based layout for precise alignment
|
||||
|
||||
---
|
||||
|
||||
### 2. Electric Studio
|
||||
|
||||
**Vibe:** Bold, clean, professional, high contrast
|
||||
|
||||
**Layout:** Split panel—white top, blue bottom. Brand marks in corners.
|
||||
|
||||
**Typography:**
|
||||
- Display: `Manrope` (800)
|
||||
- Body: `Manrope` (400/500)
|
||||
|
||||
**Colors:**
|
||||
```css
|
||||
:root {
|
||||
--bg-dark: #0a0a0a;
|
||||
--bg-white: #ffffff;
|
||||
--accent-blue: #4361ee;
|
||||
--text-dark: #0a0a0a;
|
||||
--text-light: #ffffff;
|
||||
}
|
||||
```
|
||||
|
||||
**Signature Elements:**
|
||||
- Two-panel vertical split
|
||||
- Accent bar on panel edge
|
||||
- Quote typography as hero element
|
||||
- Minimal, confident spacing
|
||||
|
||||
---
|
||||
|
||||
### 3. Creative Voltage
|
||||
|
||||
**Vibe:** Bold, creative, energetic, retro-modern
|
||||
|
||||
**Layout:** Split panels—electric blue left, dark right. Script accents.
|
||||
|
||||
**Typography:**
|
||||
- Display: `Syne` (700/800)
|
||||
- Mono: `Space Mono` (400/700)
|
||||
|
||||
**Colors:**
|
||||
```css
|
||||
:root {
|
||||
--bg-primary: #0066ff;
|
||||
--bg-dark: #1a1a2e;
|
||||
--accent-neon: #d4ff00;
|
||||
--text-light: #ffffff;
|
||||
}
|
||||
```
|
||||
|
||||
**Signature Elements:**
|
||||
- Electric blue + neon yellow contrast
|
||||
- Halftone texture patterns
|
||||
- Neon badges/callouts
|
||||
- Script typography for creative flair
|
||||
|
||||
---
|
||||
|
||||
### 4. Dark Botanical
|
||||
|
||||
**Vibe:** Elegant, sophisticated, artistic, premium
|
||||
|
||||
**Layout:** Centered content on dark. Abstract soft shapes in corner.
|
||||
|
||||
**Typography:**
|
||||
- Display: `Cormorant` (400/600) — elegant serif
|
||||
- Body: `IBM Plex Sans` (300/400)
|
||||
|
||||
**Colors:**
|
||||
```css
|
||||
:root {
|
||||
--bg-primary: #0f0f0f;
|
||||
--text-primary: #e8e4df;
|
||||
--text-secondary: #9a9590;
|
||||
--accent-warm: #d4a574;
|
||||
--accent-pink: #e8b4b8;
|
||||
--accent-gold: #c9b896;
|
||||
}
|
||||
```
|
||||
|
||||
**Signature Elements:**
|
||||
- Abstract soft gradient circles (blurred, overlapping)
|
||||
- Warm color accents (pink, gold, terracotta)
|
||||
- Thin vertical accent lines
|
||||
- Italic signature typography
|
||||
- **No illustrations—only abstract CSS shapes**
|
||||
|
||||
---
|
||||
|
||||
## Light Themes
|
||||
|
||||
### 5. Notebook Tabs
|
||||
|
||||
**Vibe:** Editorial, organized, elegant, tactile
|
||||
|
||||
**Layout:** Cream paper card on dark background. Colorful tabs on right edge.
|
||||
|
||||
**Typography:**
|
||||
- Display: `Bodoni Moda` (400/700) — classic editorial
|
||||
- Body: `DM Sans` (400/500)
|
||||
|
||||
**Colors:**
|
||||
```css
|
||||
:root {
|
||||
--bg-outer: #2d2d2d;
|
||||
--bg-page: #f8f6f1;
|
||||
--text-primary: #1a1a1a;
|
||||
--tab-1: #98d4bb; /* Mint */
|
||||
--tab-2: #c7b8ea; /* Lavender */
|
||||
--tab-3: #f4b8c5; /* Pink */
|
||||
--tab-4: #a8d8ea; /* Sky */
|
||||
--tab-5: #ffe6a7; /* Cream */
|
||||
}
|
||||
```
|
||||
|
||||
**Signature Elements:**
|
||||
- Paper container with subtle shadow
|
||||
- Colorful section tabs on right edge (vertical text)
|
||||
- Binder hole decorations on left
|
||||
- Tab text must scale with viewport: `font-size: clamp(0.5rem, 1vh, 0.7rem)`
|
||||
|
||||
---
|
||||
|
||||
### 6. Pastel Geometry
|
||||
|
||||
**Vibe:** Friendly, organized, modern, approachable
|
||||
|
||||
**Layout:** White card on pastel background. Vertical pills on right edge.
|
||||
|
||||
**Typography:**
|
||||
- Display: `Plus Jakarta Sans` (700/800)
|
||||
- Body: `Plus Jakarta Sans` (400/500)
|
||||
|
||||
**Colors:**
|
||||
```css
|
||||
:root {
|
||||
--bg-primary: #c8d9e6;
|
||||
--card-bg: #faf9f7;
|
||||
--pill-pink: #f0b4d4;
|
||||
--pill-mint: #a8d4c4;
|
||||
--pill-sage: #5a7c6a;
|
||||
--pill-lavender: #9b8dc4;
|
||||
--pill-violet: #7c6aad;
|
||||
}
|
||||
```
|
||||
|
||||
**Signature Elements:**
|
||||
- Rounded card with soft shadow
|
||||
- **Vertical pills on right edge** with varying heights (like tabs)
|
||||
- Consistent pill width, heights: short → medium → tall → medium → short
|
||||
- Download/action icon in corner
|
||||
|
||||
---
|
||||
|
||||
### 7. Split Pastel
|
||||
|
||||
**Vibe:** Playful, modern, friendly, creative
|
||||
|
||||
**Layout:** Two-color vertical split (peach left, lavender right).
|
||||
|
||||
**Typography:**
|
||||
- Display: `Outfit` (700/800)
|
||||
- Body: `Outfit` (400/500)
|
||||
|
||||
**Colors:**
|
||||
```css
|
||||
:root {
|
||||
--bg-peach: #f5e6dc;
|
||||
--bg-lavender: #e4dff0;
|
||||
--text-dark: #1a1a1a;
|
||||
--badge-mint: #c8f0d8;
|
||||
--badge-yellow: #f0f0c8;
|
||||
--badge-pink: #f0d4e0;
|
||||
}
|
||||
```
|
||||
|
||||
**Signature Elements:**
|
||||
- Split background colors
|
||||
- Playful badge pills with icons
|
||||
- Grid pattern overlay on right panel
|
||||
- Rounded CTA buttons
|
||||
|
||||
---
|
||||
|
||||
### 8. Vintage Editorial
|
||||
|
||||
**Vibe:** Witty, confident, editorial, personality-driven
|
||||
|
||||
**Layout:** Centered content on cream. Abstract geometric shapes as accent.
|
||||
|
||||
**Typography:**
|
||||
- Display: `Fraunces` (700/900) — distinctive serif
|
||||
- Body: `Work Sans` (400/500)
|
||||
|
||||
**Colors:**
|
||||
```css
|
||||
:root {
|
||||
--bg-cream: #f5f3ee;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #555;
|
||||
--accent-warm: #e8d4c0;
|
||||
}
|
||||
```
|
||||
|
||||
**Signature Elements:**
|
||||
- Abstract geometric shapes (circle outline + line + dot)
|
||||
- Bold bordered CTA boxes
|
||||
- Witty, conversational copy style
|
||||
- **No illustrations—only geometric CSS shapes**
|
||||
|
||||
---
|
||||
|
||||
## Specialty Themes
|
||||
|
||||
### 9. Neon Cyber
|
||||
|
||||
**Vibe:** Futuristic, techy, confident
|
||||
|
||||
**Typography:** `Clash Display` + `Satoshi` (Fontshare)
|
||||
|
||||
**Colors:** Deep navy (#0a0f1c), cyan accent (#00ffcc), magenta (#ff00aa)
|
||||
|
||||
**Signature:** Particle backgrounds, neon glow, grid patterns
|
||||
|
||||
---
|
||||
|
||||
### 10. Terminal Green
|
||||
|
||||
**Vibe:** Developer-focused, hacker aesthetic
|
||||
|
||||
**Typography:** `JetBrains Mono` (monospace only)
|
||||
|
||||
**Colors:** GitHub dark (#0d1117), terminal green (#39d353)
|
||||
|
||||
**Signature:** Scan lines, blinking cursor, code syntax styling
|
||||
|
||||
---
|
||||
|
||||
### 11. Swiss Modern
|
||||
|
||||
**Vibe:** Clean, precise, Bauhaus-inspired
|
||||
|
||||
**Typography:** `Archivo` (800) + `Nunito` (400)
|
||||
|
||||
**Colors:** Pure white, pure black, red accent (#ff3300)
|
||||
|
||||
**Signature:** Visible grid, asymmetric layouts, geometric shapes
|
||||
|
||||
---
|
||||
|
||||
### 12. Paper & Ink
|
||||
|
||||
**Vibe:** Editorial, literary, thoughtful
|
||||
|
||||
**Typography:** `Cormorant Garamond` + `Source Serif 4`
|
||||
|
||||
**Colors:** Warm cream (#faf9f7), charcoal (#1a1a1a), crimson accent (#c41e3a)
|
||||
|
||||
**Signature:** Drop caps, pull quotes, elegant horizontal rules
|
||||
|
||||
---
|
||||
|
||||
## Font Pairing Quick Reference
|
||||
|
||||
| Preset | Display Font | Body Font | Source |
|
||||
|--------|--------------|-----------|--------|
|
||||
| Bold Signal | Archivo Black | Space Grotesk | Google |
|
||||
| Electric Studio | Manrope | Manrope | Google |
|
||||
| Creative Voltage | Syne | Space Mono | Google |
|
||||
| Dark Botanical | Cormorant | IBM Plex Sans | Google |
|
||||
| Notebook Tabs | Bodoni Moda | DM Sans | Google |
|
||||
| Pastel Geometry | Plus Jakarta Sans | Plus Jakarta Sans | Google |
|
||||
| Split Pastel | Outfit | Outfit | Google |
|
||||
| Vintage Editorial | Fraunces | Work Sans | Google |
|
||||
| Neon Cyber | Clash Display | Satoshi | Fontshare |
|
||||
| Terminal Green | JetBrains Mono | JetBrains Mono | JetBrains |
|
||||
|
||||
---
|
||||
|
||||
## DO NOT USE (Generic AI Patterns)
|
||||
|
||||
**Fonts:** Inter, Roboto, Arial, system fonts as display
|
||||
|
||||
**Colors:** `#6366f1` (generic indigo), purple gradients on white
|
||||
|
||||
**Layouts:** Everything centered, generic hero sections, identical card grids
|
||||
|
||||
**Decorations:** Realistic illustrations, gratuitous glassmorphism, drop shadows without purpose
|
||||
|
||||
---
|
||||
|
||||
## CSS Gotchas
|
||||
|
||||
### Negating CSS Functions
|
||||
|
||||
**WRONG — silently ignored by browsers (no console error):**
|
||||
```css
|
||||
right: -clamp(28px, 3.5vw, 44px); /* Browser ignores this */
|
||||
margin-left: -min(10vw, 100px); /* Browser ignores this */
|
||||
```
|
||||
|
||||
**CORRECT — wrap in `calc()`:**
|
||||
```css
|
||||
right: calc(-1 * clamp(28px, 3.5vw, 44px)); /* Works */
|
||||
margin-left: calc(-1 * min(10vw, 100px)); /* Works */
|
||||
```
|
||||
|
||||
CSS does not allow a leading `-` before function names. The browser silently discards the entire declaration — no error, the element just appears in the wrong position. **Always use `calc(-1 * ...)` to negate CSS function values.**
|
||||
|
||||
110
skills/frontend-slides/animation-patterns.md
Normal file
110
skills/frontend-slides/animation-patterns.md
Normal file
@@ -0,0 +1,110 @@
|
||||
# Animation Patterns Reference
|
||||
|
||||
Use this reference when generating presentations. Match animations to the intended feeling.
|
||||
|
||||
## Effect-to-Feeling Guide
|
||||
|
||||
| Feeling | Animations | Visual Cues |
|
||||
|---------|-----------|-------------|
|
||||
| **Dramatic / Cinematic** | Slow fade-ins (1-1.5s), large scale transitions (0.9 to 1), parallax scrolling | Dark backgrounds, spotlight effects, full-bleed images |
|
||||
| **Techy / Futuristic** | Neon glow (box-shadow), glitch/scramble text, grid reveals | Particle systems (canvas), grid patterns, monospace accents, cyan/magenta/electric blue |
|
||||
| **Playful / Friendly** | Bouncy easing (spring physics), floating/bobbing | Rounded corners, pastel/bright colors, hand-drawn elements |
|
||||
| **Professional / Corporate** | Subtle fast animations (200-300ms), clean slides | Navy/slate/charcoal, precise spacing, data visualization focus |
|
||||
| **Calm / Minimal** | Very slow subtle motion, gentle fades | High whitespace, muted palette, serif typography, generous padding |
|
||||
| **Editorial / Magazine** | Staggered text reveals, image-text interplay | Strong type hierarchy, pull quotes, grid-breaking layouts, serif headlines + sans body |
|
||||
|
||||
## Entrance Animations
|
||||
|
||||
```css
|
||||
/* Fade + Slide Up (most versatile) */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.6s var(--ease-out-expo),
|
||||
transform 0.6s var(--ease-out-expo);
|
||||
}
|
||||
.visible .reveal {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Scale In */
|
||||
.reveal-scale {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
/* Slide from Left */
|
||||
.reveal-left {
|
||||
opacity: 0;
|
||||
transform: translateX(-50px);
|
||||
transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
/* Blur In */
|
||||
.reveal-blur {
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
transition: opacity 0.8s, filter 0.8s var(--ease-out-expo);
|
||||
}
|
||||
```
|
||||
|
||||
## Background Effects
|
||||
|
||||
```css
|
||||
/* Gradient Mesh — layered radial gradients for depth */
|
||||
.gradient-bg {
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 80%, rgba(120, 0, 255, 0.3) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 20%, rgba(0, 255, 200, 0.2) 0%, transparent 50%),
|
||||
var(--bg-primary);
|
||||
}
|
||||
|
||||
/* Noise Texture — inline SVG for grain */
|
||||
.noise-bg {
|
||||
background-image: url("data:image/svg+xml,..."); /* Inline SVG noise */
|
||||
}
|
||||
|
||||
/* Grid Pattern — subtle structural lines */
|
||||
.grid-bg {
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
}
|
||||
```
|
||||
|
||||
## Interactive Effects
|
||||
|
||||
```javascript
|
||||
/* 3D Tilt on Hover — adds depth to cards/panels */
|
||||
class TiltEffect {
|
||||
constructor(element) {
|
||||
this.element = element;
|
||||
this.element.style.transformStyle = 'preserve-3d';
|
||||
this.element.style.perspective = '1000px';
|
||||
|
||||
this.element.addEventListener('mousemove', (e) => {
|
||||
const rect = this.element.getBoundingClientRect();
|
||||
const x = (e.clientX - rect.left) / rect.width - 0.5;
|
||||
const y = (e.clientY - rect.top) / rect.height - 0.5;
|
||||
this.element.style.transform = `rotateY(${x * 10}deg) rotateX(${-y * 10}deg)`;
|
||||
});
|
||||
|
||||
this.element.addEventListener('mouseleave', () => {
|
||||
this.element.style.transform = 'rotateY(0) rotateX(0)';
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Problem | Fix |
|
||||
|---------|-----|
|
||||
| Fonts not loading | Check Fontshare/Google Fonts URL; ensure font names match in CSS |
|
||||
| Animations not triggering | Verify Intersection Observer is running; check `.visible` class is being added |
|
||||
| Scroll snap not working | Ensure `scroll-snap-type: y mandatory` on html; each slide needs `scroll-snap-align: start` |
|
||||
| Mobile issues | Disable heavy effects at 768px breakpoint; test touch events; reduce particle count |
|
||||
| Performance issues | Use `will-change` sparingly; prefer `transform`/`opacity` animations; throttle scroll handlers |
|
||||
347
skills/frontend-slides/html-template.md
Normal file
347
skills/frontend-slides/html-template.md
Normal file
@@ -0,0 +1,347 @@
|
||||
# HTML Presentation Template
|
||||
|
||||
Reference architecture for generating slide presentations. Every presentation follows this structure.
|
||||
|
||||
## Base HTML Structure
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Presentation Title</title>
|
||||
|
||||
<!-- Fonts: use Fontshare or Google Fonts — never system fonts -->
|
||||
<link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=...">
|
||||
|
||||
<style>
|
||||
/* ===========================================
|
||||
CSS CUSTOM PROPERTIES (THEME)
|
||||
Change these to change the whole look
|
||||
=========================================== */
|
||||
:root {
|
||||
/* Colors — from chosen style preset */
|
||||
--bg-primary: #0a0f1c;
|
||||
--bg-secondary: #111827;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #9ca3af;
|
||||
--accent: #00ffcc;
|
||||
--accent-glow: rgba(0, 255, 204, 0.3);
|
||||
|
||||
/* Typography — MUST use clamp() */
|
||||
--font-display: 'Clash Display', sans-serif;
|
||||
--font-body: 'Satoshi', sans-serif;
|
||||
--title-size: clamp(2rem, 6vw, 5rem);
|
||||
--subtitle-size: clamp(0.875rem, 2vw, 1.25rem);
|
||||
--body-size: clamp(0.75rem, 1.2vw, 1rem);
|
||||
|
||||
/* Spacing — MUST use clamp() */
|
||||
--slide-padding: clamp(1.5rem, 4vw, 4rem);
|
||||
--content-gap: clamp(1rem, 2vw, 2rem);
|
||||
|
||||
/* Animation */
|
||||
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--duration-normal: 0.6s;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
BASE STYLES
|
||||
=========================================== */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
/* --- PASTE viewport-base.css CONTENTS HERE --- */
|
||||
|
||||
/* ===========================================
|
||||
ANIMATIONS
|
||||
Trigger via .visible class (added by JS on scroll)
|
||||
=========================================== */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity var(--duration-normal) var(--ease-out-expo),
|
||||
transform var(--duration-normal) var(--ease-out-expo);
|
||||
}
|
||||
|
||||
.slide.visible .reveal {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Stagger children for sequential reveal */
|
||||
.reveal:nth-child(1) { transition-delay: 0.1s; }
|
||||
.reveal:nth-child(2) { transition-delay: 0.2s; }
|
||||
.reveal:nth-child(3) { transition-delay: 0.3s; }
|
||||
.reveal:nth-child(4) { transition-delay: 0.4s; }
|
||||
|
||||
/* ... preset-specific styles ... */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Optional: Progress bar -->
|
||||
<div class="progress-bar"></div>
|
||||
|
||||
<!-- Optional: Navigation dots -->
|
||||
<nav class="nav-dots"><!-- Generated by JS --></nav>
|
||||
|
||||
<!-- Slides -->
|
||||
<section class="slide title-slide">
|
||||
<h1 class="reveal">Presentation Title</h1>
|
||||
<p class="reveal">Subtitle or author</p>
|
||||
</section>
|
||||
|
||||
<section class="slide">
|
||||
<div class="slide-content">
|
||||
<h2 class="reveal">Slide Title</h2>
|
||||
<p class="reveal">Content...</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- More slides... -->
|
||||
|
||||
<script>
|
||||
/* ===========================================
|
||||
SLIDE PRESENTATION CONTROLLER
|
||||
=========================================== */
|
||||
class SlidePresentation {
|
||||
constructor() {
|
||||
this.slides = document.querySelectorAll('.slide');
|
||||
this.currentSlide = 0;
|
||||
this.setupIntersectionObserver();
|
||||
this.setupKeyboardNav();
|
||||
this.setupTouchNav();
|
||||
this.setupProgressBar();
|
||||
this.setupNavDots();
|
||||
}
|
||||
|
||||
setupIntersectionObserver() {
|
||||
// Add .visible class when slides enter viewport
|
||||
// Triggers CSS animations efficiently
|
||||
}
|
||||
|
||||
setupKeyboardNav() {
|
||||
// Arrow keys, Space, Page Up/Down
|
||||
}
|
||||
|
||||
setupTouchNav() {
|
||||
// Touch/swipe support for mobile
|
||||
}
|
||||
|
||||
setupProgressBar() {
|
||||
// Update progress bar on scroll
|
||||
}
|
||||
|
||||
setupNavDots() {
|
||||
// Generate and manage navigation dots
|
||||
}
|
||||
}
|
||||
|
||||
new SlidePresentation();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## 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
|
||||
<div class="edit-hotzone"></div>
|
||||
<button class="edit-toggle" id="editToggle" title="Edit mode (E)">✏️</button>
|
||||
```
|
||||
|
||||
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
|
||||
<img src="assets/logo_round.png" alt="Logo" class="slide-image logo">
|
||||
<img src="assets/screenshot.png" alt="Screenshot" class="slide-image 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 (`<section>`, `<nav>`, `<main>`)
|
||||
- Keyboard navigation works fully
|
||||
- ARIA labels where needed
|
||||
- `prefers-reduced-motion` support (included in viewport-base.css)
|
||||
|
||||
## File Structure
|
||||
|
||||
Single presentations:
|
||||
```
|
||||
presentation.html # Self-contained, all CSS/JS inline
|
||||
assets/ # Images only, if any
|
||||
```
|
||||
|
||||
Multiple presentations in one project:
|
||||
```
|
||||
[name].html
|
||||
[name]-assets/
|
||||
```
|
||||
96
skills/frontend-slides/scripts/extract-pptx.py
Normal file
96
skills/frontend-slides/scripts/extract-pptx.py
Normal file
@@ -0,0 +1,96 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Extract all content from a PowerPoint file (.pptx).
|
||||
Returns a JSON structure with slides, text, and images.
|
||||
|
||||
Usage:
|
||||
python extract-pptx.py <input.pptx> [output_dir]
|
||||
|
||||
Requires: pip install python-pptx
|
||||
"""
|
||||
|
||||
import json
|
||||
import os
|
||||
import sys
|
||||
from pptx import Presentation
|
||||
|
||||
|
||||
def extract_pptx(file_path, output_dir="."):
|
||||
"""
|
||||
Extract all content from a PowerPoint file.
|
||||
Returns a list of slide data dicts with text, images, and notes.
|
||||
"""
|
||||
prs = Presentation(file_path)
|
||||
slides_data = []
|
||||
|
||||
# Create assets directory for extracted images
|
||||
assets_dir = os.path.join(output_dir, "assets")
|
||||
os.makedirs(assets_dir, exist_ok=True)
|
||||
|
||||
for slide_num, slide in enumerate(prs.slides):
|
||||
slide_data = {
|
||||
"number": slide_num + 1,
|
||||
"title": "",
|
||||
"content": [],
|
||||
"images": [],
|
||||
"notes": "",
|
||||
}
|
||||
|
||||
for shape in slide.shapes:
|
||||
# Extract text content
|
||||
if shape.has_text_frame:
|
||||
if shape == slide.shapes.title:
|
||||
slide_data["title"] = shape.text
|
||||
else:
|
||||
slide_data["content"].append(
|
||||
{"type": "text", "content": shape.text}
|
||||
)
|
||||
|
||||
# Extract images
|
||||
if shape.shape_type == 13: # Picture type
|
||||
image = shape.image
|
||||
image_bytes = image.blob
|
||||
image_ext = image.ext
|
||||
image_name = f"slide{slide_num + 1}_img{len(slide_data['images']) + 1}.{image_ext}"
|
||||
image_path = os.path.join(assets_dir, image_name)
|
||||
|
||||
with open(image_path, "wb") as f:
|
||||
f.write(image_bytes)
|
||||
|
||||
slide_data["images"].append(
|
||||
{
|
||||
"path": f"assets/{image_name}",
|
||||
"width": shape.width,
|
||||
"height": shape.height,
|
||||
}
|
||||
)
|
||||
|
||||
# Extract speaker notes
|
||||
if slide.has_notes_slide:
|
||||
notes_frame = slide.notes_slide.notes_text_frame
|
||||
slide_data["notes"] = notes_frame.text
|
||||
|
||||
slides_data.append(slide_data)
|
||||
|
||||
return slides_data
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
if len(sys.argv) < 2:
|
||||
print("Usage: python extract-pptx.py <input.pptx> [output_dir]")
|
||||
sys.exit(1)
|
||||
|
||||
input_file = sys.argv[1]
|
||||
output_dir = sys.argv[2] if len(sys.argv) > 2 else "."
|
||||
|
||||
slides = extract_pptx(input_file, output_dir)
|
||||
|
||||
# Write extracted data as JSON
|
||||
output_path = os.path.join(output_dir, "extracted-slides.json")
|
||||
with open(output_path, "w") as f:
|
||||
json.dump(slides, f, indent=2)
|
||||
|
||||
print(f"Extracted {len(slides)} slides to {output_path}")
|
||||
for s in slides:
|
||||
img_count = len(s["images"])
|
||||
print(f" Slide {s['number']}: {s['title'] or '(no title)'} — {img_count} image(s)")
|
||||
153
skills/frontend-slides/viewport-base.css
Normal file
153
skills/frontend-slides/viewport-base.css
Normal file
@@ -0,0 +1,153 @@
|
||||
/* ===========================================
|
||||
VIEWPORT FITTING: MANDATORY BASE STYLES
|
||||
Include this ENTIRE file in every presentation.
|
||||
These styles ensure slides fit exactly in the viewport.
|
||||
=========================================== */
|
||||
|
||||
/* 1. Lock html/body to viewport */
|
||||
html, body {
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-snap-type: y mandatory;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* 2. Each slide = exact viewport height */
|
||||
.slide {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: 100dvh; /* Dynamic viewport height for mobile browsers */
|
||||
overflow: hidden; /* CRITICAL: Prevent ANY overflow */
|
||||
scroll-snap-align: start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 3. Content container with flex for centering */
|
||||
.slide-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
max-height: 100%;
|
||||
overflow: hidden; /* Double-protection against overflow */
|
||||
padding: var(--slide-padding);
|
||||
}
|
||||
|
||||
/* 4. ALL typography uses clamp() for responsive scaling */
|
||||
:root {
|
||||
/* Titles scale from mobile to desktop */
|
||||
--title-size: clamp(1.5rem, 5vw, 4rem);
|
||||
--h2-size: clamp(1.25rem, 3.5vw, 2.5rem);
|
||||
--h3-size: clamp(1rem, 2.5vw, 1.75rem);
|
||||
|
||||
/* Body text */
|
||||
--body-size: clamp(0.75rem, 1.5vw, 1.125rem);
|
||||
--small-size: clamp(0.65rem, 1vw, 0.875rem);
|
||||
|
||||
/* Spacing scales with viewport */
|
||||
--slide-padding: clamp(1rem, 4vw, 4rem);
|
||||
--content-gap: clamp(0.5rem, 2vw, 2rem);
|
||||
--element-gap: clamp(0.25rem, 1vw, 1rem);
|
||||
}
|
||||
|
||||
/* 5. Cards/containers use viewport-relative max sizes */
|
||||
.card, .container, .content-box {
|
||||
max-width: min(90vw, 1000px);
|
||||
max-height: min(80vh, 700px);
|
||||
}
|
||||
|
||||
/* 6. Lists auto-scale with viewport */
|
||||
.feature-list, .bullet-list {
|
||||
gap: clamp(0.4rem, 1vh, 1rem);
|
||||
}
|
||||
|
||||
.feature-list li, .bullet-list li {
|
||||
font-size: var(--body-size);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 7. Grids adapt to available space */
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
|
||||
gap: clamp(0.5rem, 1.5vw, 1rem);
|
||||
}
|
||||
|
||||
/* 8. Images constrained to viewport */
|
||||
img, .image-container {
|
||||
max-width: 100%;
|
||||
max-height: min(50vh, 400px);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
RESPONSIVE BREAKPOINTS
|
||||
Aggressive scaling for smaller viewports
|
||||
=========================================== */
|
||||
|
||||
/* Short viewports (< 700px height) */
|
||||
@media (max-height: 700px) {
|
||||
:root {
|
||||
--slide-padding: clamp(0.75rem, 3vw, 2rem);
|
||||
--content-gap: clamp(0.4rem, 1.5vw, 1rem);
|
||||
--title-size: clamp(1.25rem, 4.5vw, 2.5rem);
|
||||
--h2-size: clamp(1rem, 3vw, 1.75rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Very short viewports (< 600px height) */
|
||||
@media (max-height: 600px) {
|
||||
:root {
|
||||
--slide-padding: clamp(0.5rem, 2.5vw, 1.5rem);
|
||||
--content-gap: clamp(0.3rem, 1vw, 0.75rem);
|
||||
--title-size: clamp(1.1rem, 4vw, 2rem);
|
||||
--body-size: clamp(0.7rem, 1.2vw, 0.95rem);
|
||||
}
|
||||
|
||||
/* Hide non-essential elements */
|
||||
.nav-dots, .keyboard-hint, .decorative {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extremely short (landscape phones, < 500px height) */
|
||||
@media (max-height: 500px) {
|
||||
:root {
|
||||
--slide-padding: clamp(0.4rem, 2vw, 1rem);
|
||||
--title-size: clamp(1rem, 3.5vw, 1.5rem);
|
||||
--h2-size: clamp(0.9rem, 2.5vw, 1.25rem);
|
||||
--body-size: clamp(0.65rem, 1vw, 0.85rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Narrow viewports (< 600px width) */
|
||||
@media (max-width: 600px) {
|
||||
:root {
|
||||
--title-size: clamp(1.25rem, 7vw, 2.5rem);
|
||||
}
|
||||
|
||||
/* Stack grids vertically */
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
REDUCED MOTION
|
||||
Respect user preferences
|
||||
=========================================== */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.2s !important;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
@@ -5684,10 +5684,10 @@
|
||||
"path": "skills/frontend-slides",
|
||||
"category": "uncategorized",
|
||||
"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...",
|
||||
"risk": "unknown",
|
||||
"source": "unknown",
|
||||
"date_added": null
|
||||
"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"
|
||||
},
|
||||
{
|
||||
"id": "frontend-ui-dark-ts",
|
||||
|
||||
Reference in New Issue
Block a user