Web & Frontend
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
-
chainlesschain Bundle Screenshot To Code截图转代码 - 将UI截图/设计稿转换为Vue/React/HTML组件代码
-
chainlesschain Bundle Subtitle GeneratorGenerate SRT/VTT subtitles from media, convert formats, adjust timing
-
chainlesschain Bundle Youtube SummarizerSummarize YouTube videos by extracting transcripts and generating structured summaries with key points, timestamps, and topic segmentation
-
chainlesschain Bundle Changelog Generator变更日志生成 - 从Git提交历史自动生成分类的Markdown格式Changelog
-
chainlesschain Bundle Dependency Analyzer依赖分析技能 - 导入图构建、变更影响分析、CVE可达性、循环依赖检测
-
chainlesschain Bundle Mock Data Generator模拟数据生成 - 从Schema或类型定义自动生成真实的测试数据
-
chainlesschain Bundle Multi Search EngineZero-config multi-engine search aggregating 17 search engines (8 Chinese + 9 international) without API keys
-
chainlesschain Bundle Network DiagnosticsNetwork troubleshooting tools - ping, DNS lookup, bounded port scan, traceroute, HTTPS check, local IP
-
chainlesschain Bundle Planning With FilesManus-style persistent markdown planning - use filesystem as working memory with task_plan.md, findings.md, and progress.md for complex multi-step tasks that survive context resets
-
chainlesschain Bundle Workflow AutomationCreate and run multi-step automation workflows with conditional logic, loops, and parallel execution
-
chainlesschain Bundle Dead Code Eliminator死代码检测 - 扫描未使用的导出、变量、文件,提供安全删除建议
-
chainlesschain Bundle Debugging StrategiesSystematic debugging methodologies for diagnosing and resolving issues
-
chainlesschain Bundle Git History AnalyzerGit历史分析 - 变更热点、贡献者模式、代码流失率和文件耦合检测
-
chainlesschain Bundle Git Worktree ManagerManage git worktrees for isolated branch development - create, list, switch, and clean up worktrees for parallel feature development, safe experimentation, and CI/CD isolation
-
chainlesschain Bundle MCP Server GeneratorMCP服务器生成技能 - 从自然语言生成完整MCP服务器代码
-
chainlesschain Bundle Performance ProfilerApplication performance profiling - runtime snapshots, benchmarking, memory analysis, startup timing, and bottleneck detection
-
chainlesschain Bundle Self Improving Agent自动学习改进,记录错误和修正 - Auto-learn from mistakes, track errors and corrections, analyze patterns, and improve responses over time
-
chainlesschain Skill Pdh Android CollectorBuild or debug a Personal-Data-Hub collector that pulls a Chinese Android app's data off a rooted phone over ADB. Encodes the real-device rule — prefer on-device plaintext SQLite over fragile web APIs (cookies/signing/endpoints drift; local DBs are stable + sign-free).
-
chainlesschain Bundle Performance Optimizer性能优化技能 - 性能分析、瓶颈识别、优化建议
-
chainlesschain Bundle Vulnerability Scanner漏洞扫描技能 - 依赖CVE扫描、可达性分析、SBOM生成、许可证审计
-
chainlesschain Bundle Cursor Rules GeneratorGenerate IDE rules and configuration files - .cursorrules, .clinerules, CLAUDE.md, .windsurfrules, and other AI coding assistant configuration for consistent project conventions
-
chainlesschain Bundle Docker Compose GeneratorGenerate Docker Compose configurations for development environments - auto-detect project stack, configure services with dependencies, volumes, networking, and health checks
-
zhouyinlong-lab Bundle TeachMatt Pocock 的三层学习框架——Knowledge(知识获取)→ Skills(交互练习)→ Wisdom(社区智慧)。 AI 变成你的私人导师:从高质量资源提取知识生成 HTML 交互课件,设计动手练习并给即时反馈, 对于 AI 教不了的判断力,帮你找到真实的社区和人。每句话都有引用来源,每个练习都有反馈循环。 Trigger keywords: teach, 教我, 学习, learn, 教我学, teach me, 交互式学习, 帮我学, 入门, 新手教程, 技能学习, 知识获取, 刻意练习, interactive learning, personal tutor, 私人教师, 学习框架, knowledge skills wisdom, matt pocock.
-
zhouyinlong-lab Skill Dashi Ppt浏览器可编辑 HTML 演示生成器——12 套工业化视觉主题,结构化 goal.json 驱动, React 渲染引擎,侧边栏在线编辑自动保存,一键导出 PPTX/PDF。 核心哲学"锁模板填文案":AI 只填 content slot,不改视觉结构。 三道校验(goal-spec→swiss→goal-copy)保证交付质量。 Trigger keywords: 做PPT, 可编辑PPT, 浏览器编辑PPT, HTML演示, 导出PPTX, 模板PPT, 品牌演示, 12套主题, 在线编辑幻灯片, editable slides, browser PPT, dashi ppt, 大石PPT, 锁模板, 填文案, 可视化编辑PPT.
-
zhouyinlong-lab Bundle HTML VideoHTML→Video meta-layer for coding agents. Turn prompts, article links, or GitHub repos into multi-frame animated MP4 videos by letting agents pick rendering engines (Hyperframes, Remotion, Motion Canvas), fill curated templates, and render locally via headless Chromium + ffmpeg. Use whenever the user wants to create a video, animate HTML content, turn an article into a video explainer, generate a product promo, make data-visualization videos, or produce any motion content from HTML. Triggers when the task involves video generation, MP4 export, animated HTML, template-based video creation, or the user mentions making videos from links or prompts. **Trigger keywords**: 做视频, 生成视频, 动画, video, MP4, animate, HTML→video, article to video, link to video, data visualization video, product promo video, explainer video, template video, hyperframes, remotion render.
-
zhouyinlong-lab Bundle Markitdown微软开源文档转换工具 MarkItDown — PDF/Word/PPT/Excel/HTML/EPUB/图片/音频 等 20+ 种格式 一键转干净 Markdown。保留标题层级、列表、表格、链接,转出的 Markdown 人看得舒服、AI 读得顺畅。 适用于 Obsidian 知识库入库、RAG 文档预处理、团队文档格式统一、AI 分析前预处理。 Trigger keywords: markitdown, MarkItDown, 文档转换, PDF转Markdown, Word转Markdown, PPT转Markdown, 格式转换, 文档预处理, Obsidian导入, 知识库入库, RAG预处理, 微软文档工具, 一键转markdown, 文件转markdown, document to markdown, convert PDF, convert Word, convert PPT, 音频转文字, OCR转markdown.
-
zhouyinlong-lab Skill Ljg Present演讲铸造器——把orgmode/markdown outline 1:1铸成单文件离线HTML。 支持black/red/yellow、hacker、hacker-dark三种主题。 Trigger keywords: 讲这个, present, 做成演讲, slides, 标语流, 宣言体, slogan, manifesto, ljg-present.
-
zhouyinlong-lab Bundle Dog Frontier前端设计综合技能系统(Dog-Frontier)【全栈元技能,已包含 ui-ux-pro-max】。 通过多轮对话精确理解需求,整合19个专业前端技能的精华, 输出高质量、高结构化的前端设计方案与代码。覆盖 UI/UX 设计系统、Tailwind/shadcn 组件库、 Vue/React 技术栈、CSS 高级技巧、落地页生成、动画视频、品牌设计、设计令牌三大层级、 反「AI味」设计审查等全链路。 如需轻量独立版,用 ui-ux-pro-max;需要全链路前端方案,用本技能。 Trigger keywords: 前端设计, 前端开发, UI设计, 设计系统, 落地页, landing page, dashboard, 仪表盘, 组件开发, Vue组件, React组件, Tailwind, shadcn, 配色方案, 字体搭配, 品牌设计, CSS动画, HTML视频, 响应式布局, 前端重构, 界面优化, UX审查, 设计令牌, design tokens, 反AI味, AI味, 去模板化, 有审美的前端, taste-skill, 独特设计, 审美约束, Dog-Frontier, 前端综合, Stripe风格, Apple风格, Notion风格, Airbnb风格, Vercel风格, Linear风格, DESIGN.md, design.md, awesome-design-md, 品牌风格, 大厂设计风格, 按XX风格设计, 设计系统格式, 设计令牌导出.
-
zhouyinlong-lab Bundle Humanize PptA presentation system for agent-made PPTs — born for the talk, not just the template. It turns raw material into an AST (audience-state-transfer) outline where every page turn moves the audience forward, decides per-page visual enhancement (real images via baoyu-image-gen on the local Codex CLI, SVG diagrams, Remotion video), then runs a capped 3-round presentation checkup (演讲体检) on the rendered HTML, comparing each page against its outline page and writing fix prompts. The beautiful deck is rendered natively by a downstream template skill (broadly compatible with any HTML-PPT skill; verified: guizang-ppt-skill for Chinese, frontend-slides / beautiful-html-templates for English) — Humanize orchestrates the presentation, the template skill paints the slides. Use before generating PPT/HTML slides from raw material, and after rendering when the user says things like "帮我盯一下渲染出来的 PPT 有没有翻车", "PPT 渲染质检", "给这份 deck 做演讲体检", or "告诉我哪几页只能看不能讲". If all you want is one beautiful template page with no outline and no check
-
zhouyinlong-lab Skill Theme Factory主题工厂——为幻灯片、文档、HTML 页面一键应用专业主题样式。 内置 10 套预设主题(含亮/暗模式),也支持即时生成自定义主题。 覆盖字体、颜色、间距、圆角、阴影等全套设计令牌。Anthropic 官方出品。 Trigger keywords: theme factory, 主题工厂, 换主题, 应用主题, 幻灯片主题, 文档主题, 配色主题, 一键换肤, 亮暗模式, 设计主题, 批量应用样式, apply theme, switch theme, 统一风格, 快速美化。
-
zhouyinlong-lab Bundle Website ClonerReverse-engineer and clone any website into a clean Next.js + shadcn/ui + Tailwind v4 codebase using AI coding agents. Multi-phase pipeline: reconnaissance → foundation → component specs → parallel build in git worktrees → assembly → visual QA. Supports Claude Code, Codex CLI, Cursor, Windsurf, Gemini CLI, Copilot, Cline, Roo Code, and more. Trigger keywords: clone website, copy website, replicate website, reverse engineer website, rebuild website, pixel-perfect clone, make a copy of this site, rebuild this page, 克隆网站, 抄袭网站, 复制网站, 逆向工程网站, 像素级复刻, 网站复刻, /clone-website.
-
zhouyinlong-lab Skill Animation Craft动画工艺元技能——整合术语转换(animation-vocabulary)、设计工程(emil-design-eng)、 质量审查(review-animations)三阶段流水线。把模糊的动效需求变成精确的动画代码, 再经过10条硬标准审查,输出 Before→After→Why 优化建议。 解决 AI 生成动画"生硬、缓动不对、时长不合理"的常见问题。 Trigger keywords: 动画审查, 动效优化, animation review, 动画不自然, 动效太生硬, animation craft, 动画质量, 动效术语, 缓动函数, 动画时长, prefers-reduced-motion, 动画质感, 微交互动效, animation quality, motion design review, 动画不够丝滑, 这个动画怪怪的, 动效帮我看看, review my animations, CSS动画优化, spring animation, 弹性动画, 阻尼动画.
-
zhouyinlong-lab Bundle Emil Design EngEmil Kowalski's design engineering philosophy — animation decision framework, CSS transform mastery, clip-path animation techniques, gesture/drag interactions, and component building principles. From the creator of Sonner (13M+ weekly npm downloads) and Vaul. Trigger keywords: design engineering, UI polish, animation framework, 动效设计, Emil Kowalski, Sonner, 设计工程师, component design, 组件设计, animation decision, CSS animation, clip-path, gesture, drag interaction, 动画决策, 手势交互, UI打磨, design philosophy.
-
zhouyinlong-lab Skill Huashu Xhs Image小红书配图工作流——先出2-3个设计提案,选定后生成。默认AI生成(Gemini), 精确数据表格用HTML兜底。两条路径并行出图对比,中文文字渲染验证+设计评分。 Trigger keywords: 小红书配图, 小红书封面, 小红书图片, 做张小红书图, 笔记配图, xhs image.
-
nimadorostkar Skill VueUse when building Vue 3 applications. Covers the Composition API, reactivity fundamentals, composables, Pinia state management, and the reactivity mistakes that cause silent update failures.
-
nimadorostkar Skill ReactUse when writing or reviewing React. Covers component and state design, hook correctness, memoization that is actually needed, data fetching, and the render behavior behind most React performance problems.
Frequently asked questions
What are Web & Frontend agent skills?
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
Which Web & Frontend skills are most installed?
Popular Web & Frontend skills on SkillMD right now include screenshot-to-code, subtitle-generator, youtube-summarizer. Rankings shift as installs change; sort this page by "Most installs" for the live list.
Do Web & Frontend skills work with Claude Code and Cursor?
Yes. Every skill here ships as a SKILL.md file, an open format that works in Claude Code, Claude.ai, Cursor, Codex, Windsurf, and 60+ other agents. Install one with npx skillmds@latest add <owner>/<name>, or copy the file into your agent's skills directory.