Frontend & UI
curated by SkillMD · plugin · 31 skills
React, Vue, Svelte, CSS and component skills for building interfaces.
Install the whole plugin (CLI)
npx skillmds add agricidaniel/ads-report
npx skillmds add clockless-org/html-anything
npx skillmds add nextlevelbuilder/slides
npx skillmds add petar-nauka/fact-check
npx skillmds add jakubantalik/transitions-dev
npx skillmds add maverickgao8848/mav-slidecraft-skill
npx skillmds add heygen/figma
npx skillmds add wangzan101/zan-html-to-ppt
npx skillmds add dontbesilent2025/dbs-wechat-html
npx skillmds add claude-skills/sveltekit-svelte5-tailwind-skill
npx skillmds add kkkkhazix/storage-analyzer
npx skillmds add oil-oil/grok-designer
npx skillmds add op7418/guizang-ppt-skill
npx skillmds add kaguratart/paper-to-course
npx skillmds add nexu-io/deck-simple
npx skillmds add yu-0312/ppt-creater-skill
npx skillmds add voltagent/expo-design-analysis
npx skillmds add leejpsd/typescript-react-nextjs-patterns
npx skillmds add agricidaniel/ads-landing
npx skillmds add majiayu000/ue
npx skillmds add nextlevelbuilder/ui-styling
npx skillmds add ecnu-icalk/xlsx
npx skillmds add heygen/hyperframes-core
npx skillmds add agentskillexchange/html-docs
npx skillmds add leonxlnx/design-taste-frontend-v1
npx skillmds add remotion-dev/remotion-markup
npx skillmds add iamanacarolinarezende/ui-page
npx skillmds add ecnu-icalk/frontend-design
npx skillmds add ecnu-icalk/jquery
npx skillmds add tinh2/ui-craft
npx skillmds add tinh2/dark-modeSkills in this plugin
- ▌ ads-report · agricidanielRenders Markdown, HTML, or PDF paid-advertising reports from a validated Claude Ads JSON run bundle.
- ▌ html-anything · clockless-org bundleTransforms ideas, files, folders, URLs, or exported data into polished single-file HTML pages with auto-selected design systems.
- ▌ slides · nextlevelbuilder bundleCreate strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
- ▌ fact-check · petar-nauka bundleVerifies claims, articles, screenshots, and URLs through source-grounded analysis with an evidence ledger, source credibility evaluation, and manipulation detection. Supports quick checks, full fact-check cards, two-source comparisons, and prebunking in multiple languages and policy contexts.
- ▌ transitions-dev · jakubantalik bundleProvides portable CSS transitions for common UI patterns like dropdowns, modals, tooltips, and skeleton loaders. Each transition is a drop-in snippet with semantic CSS custom properties and a prefers-reduced-motion guard.
- ▌ mav-slidecraft-skill · maverickgao8848 bundleCreate zero-dependency, animation-rich HTML presentations that run entirely in the browser, supporting new builds, PowerPoint conversion, or enhancements with strict viewport and design constraints.
- ▌ figma · heygen bundleImport Figma designs into HyperFrames compositions as frozen assets, brand tokens, components, motion animations, and shaders.
- ▌ zan-html-to-ppt · wangzan101 bundleConverts HTML slide decks into offline PDF and image-based PPTX files using Playwright screenshots, preserving visual fidelity.
- ▌ dbs-wechat-html · dontbesilent2025 bundleConverts Markdown into HTML formatted for WeChat Official Account publishing, with 15 built-in styles.
- ▌ sveltekit-svelte5-tailwind-skill · claude-skills bundleGuides 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.
- ▌ storage-analyzer · kkkkhazix bundleScans macOS or Windows disk usage with read-only commands, categorizes large items into auto-cleanable, manual-review, and cautious tiers, and generates an interactive HTML report with one-click deletion via a local web server.
- ▌ grok-designer · oil-oil bundleDelegates UI, UX, and visual design tasks to Grok 4.5 through a dedicated CLI, covering critique, art direction, HTML mockups, and SVG assets.
- ▌ guizang-ppt-skill · op7418 bundleGenerates a single-file horizontal-scroll web PPT with WebGL backgrounds, section covers, data hero cards, and image grids in two visual styles: 'e-magazine × e-ink' or 'Swiss International Style'.
- ▌ paper-to-course · kaguratart bundleConverts academic papers into interactive HTML courses, Markdown documents, and PPTX presentations in a single run.
- ▌ deck-simple · nexu-io bundleCreates a clean horizontal-swipe HTML deck for pitches, overviews, or study materials with cover, content pages, progress bar, and keyboard navigation.
- ▌ ppt-creater-skill · yu-0312 bundleTurns messy documents, meeting transcripts, reports, or raw data into a polished, design-conscious HTML presentation through a structured workflow that filters content, defines style specs, and generates slides, with optional theme research and cross-session resume support.
- ▌ expo-design-analysis · voltagent bundleDocuments the visual design system of Expo's marketing site, including color palette, typography, layout, and component styles for consistent brand implementation.
- ▌ typescript-react-nextjs-patterns · leejpsd bundleProvides production-grade TypeScript guidance for React and Next.js, covering type narrowing, component props, generics, runtime validation, data fetching, state management, performance, accessibility, and code review.
- ▌ ads-landing · agricidanielAudit paid-ad landing pages for message match, mobile experience, performance, accessibility, trust, forms, consent, tracking, security, and conversion friction.
- ▌ ue · majiayu000 bundleDefines end-to-end user experience behavior and interaction logic, covering flow design, state machines, error recovery, validation, accessibility, and testable acceptance criteria.
- ▌ ui-styling · nextlevelbuilder bundleCreate beautiful, accessible user interfaces with shadcn/ui components, Tailwind CSS utility-first styling, and canvas-based visual designs.
- ▌ xlsx · ecnu-icalk bundleCreates, edits, and analyzes spreadsheet files using pandas and openpyxl, with formula recalculation via LibreOffice.
- ▌ hyperframes-core · heygen bundleBuild a single renderable HyperFrames composition using HTML with data-* timing attributes, clips, tracks, sub-compositions, variables, and deterministic rendering rules.
- ▌ html-docs · agentskillexchangeTurns folders, codebases, websites, PDFs, documents, and research topics into source-grounded HTML documents, narrated videos, or learning courses; publishes and revises collaborative HTML pages via CLI, REST API, and MCP server.
- ▌ design-taste-frontend-v1 · leonxlnxGenerates premium React/Next.js frontend code with deterministic typography, calibrated color palettes, and motion physics, enforcing anti-cliché design rules and performance guardrails.
- ▌ remotion-markup · remotion-dev bundleGuidance for writing Remotion React markup with animation patterns, media handling, sequences, effects, and advanced features like 3D, audio visualization, and parameterized videos.
- ▌ ui-page · iamanacarolinarezendeScaffolds a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components.
- ▌ frontend-design · ecnu-icalk bundleBuilds distinctive, production-grade frontend interfaces with bold aesthetics, avoiding generic AI design patterns.
- ▌ jquery · ecnu-icalkRenders table cells with a red-to-green background gradient based on numeric values (0-100) using jQuery and chroma.js, skipping non-numeric content.
- ▌ ui-craft · tinh2Polishes UI primitives one at a time using research-backed patterns: adds loading and icon states to buttons, replaces inline skeletons with primitives, adds secondary actions to errors, ensures 48px touch targets and visible focus indicators, and applies a standard motion token ladder.
- ▌ dark-mode · tinh2Adds a complete dark mode to any frontend project: auto-detects the theme system, generates a WCAG-compliant dark palette, adds a toggle with system detection and persistence, migrates hardcoded colors to theme tokens, and verifies contrast ratios.