CSS & Styling Agent Skills

Converts a markdown deck into a single-file HTML presentation with keyboard navigation, presenter mode, and print-to-PDF support.

Converts long-form markdown documents (specs, RFCs, reports, plans) into a single-file HTML page with sticky table of contents, scrollspy, search filter, code-copy buttons, and customizable design tokens.

Configure Vite build tool, use its plugin API, set up SSR, and migrate to Vite 8 with Rolldown.

Configure and use UnoCSS, an instant atomic CSS engine with presets, rules, shortcuts, and integrations for Vite and Nuxt.

Build interfaces with UnoCSS using semantic tokens, dark mode parity, and design polish for devtools and landing pages.

Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations for dashboards, admin panels, or data-rich interfaces.

Transforms source materials (URLs, PDFs, DOCX, Markdown, text, screenshots) into a single-file HTML web article that is visually polished, offline-accessible, and shareable, using a structured editorial workflow with checkpoints and quality reviews.

Provides guidance on using the new .NET 10 cross-platform safe area API for edge-to-edge layouts, keyboard avoidance, and migration from legacy iOS-only APIs.

Encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

Converts Markdown to styled HTML with WeChat-compatible themes, supporting code highlighting, math, Mermaid diagrams, PlantUML, footnotes, alerts, and optional bottom citations for external links.

Select, pair, and implement typefaces for web projects with guidance on readability, CSS implementation, and performance optimization.

Build web interfaces that fuse Swiss typographic design with military terminal aesthetics, using rigid grids, extreme type scale contrast, utilitarian color, and analog degradation effects for data-heavy dashboards, portfolios, or editorial sites.

Rebuild existing site pages with byte-faithful content on a separately-defined donor design system, preserving text, images, and metadata while applying a new visual design.

Create beautiful, accessible user interfaces with shadcn/ui components, Tailwind CSS utility-first styling, and canvas-based visual designs.

Converts Markdown into HTML formatted for WeChat Official Account publishing, with 15 built-in styles.

Generates a single-page SaaS landing page with hero, features, social proof, pricing, FAQ, and footer sections.

Creates educational single-frame posters with pixel art mascots and kinetic typography using pure CSS keyframe animations, no JavaScript required.

Generates brutalist web prototypes with Swiss industrial-print aesthetics, using grotesque typography, oversized numbers, ASCII decorations, and hazard-red accents.

Guides building sites with SvelteKit 2, Svelte 5, and Tailwind CSS v4, covering setup, runes, forms, styling, deployment, and migration through curated documentation and a structured search workflow.

Renders table cells with a red-to-green background gradient based on numeric values (0-100) using jQuery and chroma.js, skipping non-numeric content.

Converts Markdown files to styled HTML with inline CSS, supporting themes, code highlighting, math, diagrams, footnotes, and alerts, optimized for WeChat and other platforms.

Audits and fixes interfaces to adapt across screen sizes and input modalities using container queries, adaptive navigation, and platform-aware layouts for web, mobile, tablet, and desktop.

Theme Salesforce Lightning base components and custom LWCs using SLDS Styling Hooks, covering global and component hooks, shadow DOM considerations, Experience Cloud theming, and SLDS 2 migration.

Style Lightning Web Components using SLDS design tokens, styling hooks, scoped CSS, and ::part() while avoiding common pitfalls like !important and shadow-DOM piercing.

Provides a frontend design mode for strong visual direction, UI polish, redesigns, landing pages, and production-grade interface work, including shadcn-based surfaces.

Configure and use UnoCSS, an instant atomic CSS engine that is a superset of Tailwind CSS, including rules, shortcuts, presets, and integrations.

Guides frontend development with React, TypeScript, and modern tooling, enforcing component-first, mobile-first, and testing practices.

Guides choosing between Tailwind, CSS Modules, and global CSS with BEM, and implementing responsive layouts with Grid, Flexbox, and Container Queries.

Implementa diseño responsive moderno con técnicas mobile-first, Container Queries, Grid, Flexbox y clamp() para adaptar layouts y componentes a cualquier pantalla o contenedor.

Builds accessible, responsive UI components and layouts with shadcn/ui, Tailwind CSS, theming, dark mode, and WCAG 2.1 AA compliance, applying behavioral science principles.

Builds distinctive, production-grade frontend interfaces with bold aesthetic direction, avoiding generic AI design patterns.

Migrates a Stitch screen to production React: fetches and caches wireframes, archives existing pages, converts to shadcn/ui components with semantic tokens, and documents the design system layers.

Audits and enforces a five-layer design chain (tokens, Tailwind, primitives, sections, pages) across components and pages, detecting hardcoded values, layer violations, dark mode parity issues, and missing primitives.

Styles web pages with CSS, covering selectors, flexbox, grid, custom properties, and animations for responsive UI components.

Builds elaborate, multi-component claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui, with scripts to initialize a project and bundle it into a single HTML file.

Improve the visual design of a frontend by restyling components one at a time, with approval gates and no functional changes.