frontend-ui

Plugin frontend-ui from marketplace skillmd in skillmds/SkillMD. Commands read from the repo's manifest — 2 days ago.

Skills (30)

• ads-landing

  Audit paid-ad landing pages for message match, mobile experience, performance, accessibility, trust, forms, consent, tracking, security, and conversion friction. Use for landing-page audit, post-click experience, LP audit, conversion-rate optimization, form optimization, ad-to-page message match, re

• ads-report

  Render Markdown, HTML, or PDF paid-advertising reports from a validated Claude Ads JSON run bundle. Use for ads report, client report, audit PDF, executive audience reporting, or exporting prior audit and plan results.

• dark-mode

  Implement complete dark mode for any frontend project. Auto-detects theme system (Flutter ThemeData, Tailwind dark class, CSS variables, MUI, Chakra UI, styled-components), generates a dark color palette with proper surface elevation hierarchy and desaturated brand colors, creates a theme toggle wit

• dbs-wechat-html

  微信公众号 HTML 生成。把 Markdown 转成可粘贴到微信公众号后台的 HTML，内置 15 种经典媒体/科技产品/中文公众号风格。 触发方式：/dbs-wechat-html、/公众号HTML、「生成公众号 HTML」「做微信公众号版本」「微信排版」 WeChat Official Account HTML generator. Converts Markdown into WeChat-ready HTML with 15 built-in publishing styles.

• deck-simple

  通用 horizontal-swipe HTML deck, 不要 magazine 调

• design-taste-frontend-v1

  The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

• Expo-design-analysis

  A React Native developer-platform whose marketing site reads like a quietly-confident infrastructure brand. The base canvas is pure white with a soft sky-blue gradient atmospheric wash behind the hero; near-black ink (`#171717`) carries body and display alike. The single brand voltage is **pure blac

• fact-check

  Semi-automated fact-checking, source credibility evaluation, misinformation detection, prebunking, and evidence-ledger based claim verification. Use when a user asks to verify a claim, article, social post, screenshot, URL, quote, data point, compare sources, detect manipulation, evaluate source rel

• figma

  Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), Figma Motion animations (MCP), and shaders (MCP source / native export). Use when the user pastes a figma.com li

• frontend-design

  Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautify

• grok-designer

  Use Grok 4.5 as the required external design advisor when a task needs UI critique, UX critique, component-choice review, interaction-flow review, design imagery markdown, art direction, visual hierarchy judgment, design-system fit, color/type/layout suggestions, HTML mockups, SVG icons, handwritten

• guizang-ppt-skill

  生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背景、章节幕封、数据大字报、图片网格等模板。提供两种风格：① "电子杂志 × 电子墨水"（衬线 + 流体背景 + 暖色） ② "瑞士国际主义"（无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮）。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到"杂志风 PPT"、"瑞士风 PPT"、"Swiss Style"、"horizontal swipe deck"时使用。

• html-anything

  Turn rich agent answers and any file, folder, URL, or export into a polished single-file HTML page. Auto-picks a default route plus 17 concrete design systems (teaching, dashboard, atlas, timeline-story, document, …).

• HTML Docs

  Turns folders, codebases, websites, PDFs, documents, and research topics into source-grounded HTML documents, deterministic narrated videos, or complete learning courses; also publishes and revises collaborative HTML pages through the HTML Docs CLI, REST API, and MCP server.

• hyperframes-core

  The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the S

• mav-slidecraft-skill

  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.

• paper-to-course

  将学术论文转换为交互式 HTML 课程 + Markdown 文档 + PPTX 演示文稿，一键生成全部三种输出

• ppt-creater-skill

  把凌亂的文件（會議逐字稿、多場會議混在一起的檔案、實驗／數據報告、論文、財報）變成可直接上台的設計感簡報的工作流。 Use this skill whenever the user wants to turn a document, meeting notes, transcript, report, spreadsheet, or raw data into slides / a presentation / a deck — 包括他們說「做成簡報」「整理成投影片」「幫我做一份簡報」「把這份報告變簡報」 「turn this into a presentation / slides / a

• remotion-markup

  Best practices for writing Remotion React Markup

• slides

  Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.

• storage-analyzer

  macOS / Windows 只读存储分析助手（自动识别系统）。扫描整机磁盘占用，找出 占空间大户，把每一项分成 🟢可自动清理 / 🟡需人工判断 / 🔴谨慎清理 三级并给出 可执行处置方案，生成排版精美、可折叠、命令可一键复制的交互式 HTML 报告，并可 起本地服务在网页上一键删除（移废纸篓/直接删）。扫描全程只读。务必在以下场景 使用：用户说"存储分析""磁盘满了""C盘/硬盘满了""空间不够""清理空间" "清理磁盘""占空间""哪些东西占地方""帮我看看存储""看一下电脑存储/空间" "存储空间""电脑空间不够""内存满了/不够/不足""看下内存/存储"（中文口语里 "内存"常

• sveltekit-svelte5-tailwind-skill

  Comprehensive integration skill for building sites with SvelteKit 2, Svelte 5, and Tailwind CSS v4

• transitions-dev

  Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, icon swaps, success checks, avatar group hovers, error state shakes, search/input clear, skeleton loaders, shimmer t

• typescript-react-nextjs-patterns

  Production-grade TypeScript reference for React & Next.js frontend development. Covers type narrowing, component Props, generic hooks, discriminated unions, as const, satisfies, Zod validation, TanStack Query, server/client boundaries, forms, state management, performance, accessibility, debugging,

• ue

  UE (user experience engineering) skill for defining end-to-end user experience behavior and interaction logic. Use for tasks like flow design, interaction models, state machines, error recovery, input validation, usability heuristics, accessibility, and turning UX intent into testable acceptance cri

• ui-craft

  Polishes UI primitives one at a time using 2026 research-backed patterns — adds loading/icon states to buttons, replaces inline skeletons with primitives, adds secondary actions to errors, ensures 48px touch targets and visible focus indicators, applies a standard motion token ladder. Use when: 'mak

• ui-page

  Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components.

• ui-styling

  Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialo

• xlsx

  Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadshee

• zan-html-to-ppt

  把 guizang-ppt-skill 生成的 HTML 横向翻页 deck 转成 deck.pdf 和 deck.pptx，供线下演讲、加速器/评委上传、印刷等场子使用。**只要用户提到 HTML deck 转 PPT、deck 导出 PowerPoint、网页 PPT 转 pptx、HTML 转 PowerPoint、把幻灯片/演讲材料/演示文件做成离线版、需要 .pptx 上传，就用这个 skill**，即使用户没说 "guizang" 字样。产出是图片型 PPTX（每页一张 PNG 满版，视觉 100% 还原但内文不可编辑）。