Html

frontend-slides helps you create animation-rich HTML presentations from scratch or by converting PowerPoint files. Use the frontend-slides skill for talks, pitch decks, workshops, internal demos, and frontend-slides for UI Design when you want visual exploration, zero-dependency browser output, and slides that fit one viewport.

Use ckm:slides to turn rough ideas into strategic HTML slide decks with slide strategies, copywriting formulas, layout patterns, and a Chart.js-ready template.

The optimize skill diagnoses and fixes UI performance issues across loading speed, rendering, animations, images, and bundle size. Use it when you need a structured optimize guide for performance optimization, with measurement-first troubleshooting for slow, laggy, or janky web experiences.

baoyu-post-to-wechat is a WeChat Official Account publishing skill with browser and API flows for articles and image-text posts. It supports Markdown, HTML, and plain text input, frontmatter-based title and summary extraction, Markdown-to-WeChat conversion, image handling, and environment checks for Chrome profile automation.

baoyu-markdown-to-html converts Markdown into styled HTML for WeChat-style publishing. It supports themes, code highlighting, math, PlantUML, footnotes, image handling, and optional link citations, with runtime execution through bun or npx -y bun.

guizang-ppt-skill is a presentation skill for building single-file HTML slide decks in an editorial magazine × e-ink style. It helps you create horizontal swipe decks for launches, talks, and demos with strong typography, WebGL backgrounds, and reusable layouts. Use the guizang-ppt-skill guide for faster, repeatable deck generation.

hyperframes-registry helps you install and wire reusable HyperFrames registry items with less guesswork. Use it to run hyperframes add, identify blocks vs. components, merge snippets, wire blocks into index.html, and follow hyperframes.json path mappings for design implementation and registry discovery.

gsap is a practical animation reference for HyperFrames compositions. It helps you choose between gsap.to(), from(), fromTo(), and gsap.timeline(), then apply the right vars, easing, stagger, transforms, and performance patterns. Use this gsap guide when you need implementation-ready motion for entrance animations, transitions, and reusable design effects.

hyperframes is a workflow skill for building HTML-based video compositions in HyperFrames. Use it for title cards, overlays, captions, voiceovers, audio-reactive motion, and scene transitions when you need structured, code-first hyperframes for Video Editing. It favors layout, timing, and animation decisions over generic prompt-only video requests.

hyperframes-cli is the HyperFrames CLI skill for building, validating, previewing, and rendering video projects from the terminal. Use it for project scaffolding, linting compositions, previewing edits, transcription, TTS, diagnostics, and repeatable hyperframes-cli usage in AI-assisted video editing workflows.

infocard helps you create editorial-style information cards in Markdown by embedding HTML and CSS directly in the page. It is useful for summaries, topic snapshots, highlight panels, event cards, comparison blocks, and other UI Design-friendly content that should look intentionally designed. It is not for diagrams or data visualization; use a dedicated diagram or chart skill instead.

Architecture is a diagramming skill for building layered system views in HTML and CSS, with color-coded sections, grid layouts, and clear component hierarchy. It is best for user/application/data/infrastructure diagrams, microservices maps, and enterprise architecture. Use it instead of generic prompts when you want fast, editable architecture for Diagramming output.

ui-web helps you design and style web UI components with WCAG 2.1 AA checks, strong contrast, visible controls, and dark mode-friendly Tailwind patterns. Use this ui-web skill for React-style front ends when you need practical UI Design guidance that improves accessibility and reduces guesswork.

web-design-guidelines is a framework-agnostic guide for building, reviewing, and fixing accessible, responsive web UI. Use it for semantic HTML, WCAG 2.2 checks, forms, focus states, contrast, dark mode, performance, and layout decisions across HTML, CSS, and JS.

Create polished, dark-themed architecture diagrams as standalone HTML files with inline SVG. The architecture-diagram skill is built for system architecture, infrastructure, cloud, security, and network topology diagrams, giving you a browser-ready visual with semantic colors, clear component relationships, and a consistent technical style.

pptx-posters helps create research posters in HTML/CSS for PowerPoint-friendly delivery, PDF export, or PPTX conversion. Use this skill only when the user explicitly needs a PPTX poster or PowerPoint editing. For standard research posters, latex-posters is usually the better fit.

The redesign-existing-projects skill upgrades existing websites and apps to premium quality. It audits current design, spots generic AI patterns, and applies high-end design implementation without breaking functionality. Works with any CSS framework or vanilla CSS.

speed launches a browser-based RSVP speed reader that shows text one word at a time with Spritz-style ORP highlighting. Use it to review assistant output, articles, or notes quickly, with a predictable workflow that strips markdown and opens a local reader file.

frontend-slides is a Claude Code skill for creating animation-rich HTML presentations or converting PPT/PPTX files into browser-ready slide decks. Use it when you need a polished deck fast, want zero-dependency output, and prefer visual style exploration over abstract design guesses. Includes frontend-slides usage guidance, install notes, and workflow tips.

Use wp-block-themes for WordPress block theme work: theme.json, templates, template parts, patterns, style variations, and Site Editor debugging. It is built for design implementation, install-and-usage workflows, and resolving style hierarchy, overrides, caching, and user-customization issues with fewer guesses.

The wp-block-development skill helps you create, update, and debug WordPress Gutenberg blocks with less guesswork. Use it for block.json metadata, register_block_type(_from_metadata), attributes and serialization, supports, dynamic rendering, deprecations, and build tooling. It is especially useful for Frontend Development tasks that affect editor and frontend parity.

netlify-forms guide for HTML form handling on Netlify. Use it to add contact forms, feedback forms, file uploads, spam filtering, AJAX submissions, and a custom thank-you page without server-side code. Helpful for Backend Development workflows and JS-rendered apps that need build-time form detection.