These skills help an agent produce polished HTML and CSS, often as standalone artifacts. Examples include HTML slide decks, web artifacts, utility CSS and Markdown conversion.
25 skillsCreate animated HTML presentations with a coding agent. Compare visual style previews, build a single-file deck, or turn an existing PowerPoint into web slides.
Convert Markdown into styled, WeChat-compatible HTML with support for code, math and diagrams.
Configure UnoCSS presets, utility rules and shortcuts in a web project.
Create single-file HTML presentations in editorial magazine or Swiss style, with horizontal navigation, speaker notes, rehearsal timers and a synchronized audience window.
Create explorable HTML diagrams for architectures, workflows, state, schemas, timelines and everyday plans.
Produce browser-route hand-drawn and picturebook videos from an approved plan and reviewed media.
Polish frontend interfaces with concrete rules for typography, nested corners, shadows, icons, hit areas and restrained motion, plus structured quick or full reviews.
Write and validate JSON and CSS plugins that customize supported AI chat interfaces in Voyager.
Analyze a user's Plannotator plan archive to extract denial patterns, feedback taxonomy, evolution over time, and actionable prompt improvements — then produce a polished HTML dashboard report. Falls back to Claude Code ExitPlanMode denial reasons when Plannotator data is unavailable.
Polish interface surfaces, icons and motion using the existing UI system.
Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks. Use whenever the user supplies a brand hex and asks for a palette, mentions setting up a design system, wants Tailwind theme colours from a brand colour, or asks to check colour accessibility / contrast.
Write a self-contained HTML design document that explains a pull request and its before-and-after behavior.
Build multi-component HTML artifacts with React, state management and a bundled delivery workflow.
The official shadcn/ui skill for AI agents. Find, add, compose, customize, and debug UI components using your project configuration, current component docs, and the shadcn CLI.
Work with Tailwind CSS v4 using a locally synchronized documentation snapshot, migration notes and implementation guidance.
Set and review type scales, spacing, font features and text wrapping.
Style responsive interfaces with Tailwind CSS guidance suited to the installed major version.
Build themed HTML plan artifacts, dashboard iframes and Slack attachments for the Open SWE runtime.
Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. Use when creating or restyling any visual HTML deliverable and deciding its palette, type pairing, layout, theming, or overall register, or when the output must not look generically AI-generated.
Adapt grids, overflow, wrapping and tap targets across mobile and desktop layouts.
Convert Markdown into HTML that can be copied into the WeChat Official Account editor, with fifteen built-in visual styles.
Find modern web platform patterns and browser-compatibility guidance for HTML, CSS and client-side JavaScript tasks.
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.
Generate self-contained HTML visualizations with Plannotator theming.
Turn articles or scripts into click-driven web presentations with optional synthesized narration.
Use slide or artifact skills for single-file outputs, UnoCSS or shadcn/ui for app styling, and polish skills for spacing and detail.