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.
-
dirnbauer Bundle Remotion Best Practices 2Best practices for Remotion - Video creation in React
-
dirnbauer Bundle Typo3 Wcag22 Aa Agentic 2Use this skill to audit, fix, and document accessibility for TYPO3 websites and Fluid sitepackages. It orchestrates Playwright, axe-core, optional Deque axe MCP, TYPO3 template mapping, manual/HITL checks, CI baselines, and DACH/EAA-aware accessibility statement drafts for WCAG 2.2 AA targets.
-
dirnbauer Bundle Typo3 Records List Types 2Configures TYPO3 v14 Records module list types and custom backend views, including grid, compact, teaser, kanban-style, timeline-style, TSconfig, Fluid templates, icons, and accessibility. Use when the user mentions records list types, backend record cards, custom Records module views, grid view, compact view, teaser view, or TSconfig-driven record presentation.
-
infrasity-labs Skill Accessibility Audit 2Conduct a comprehensive accessibility audit against WCAG guidelines with severity ratings and remediation steps.
-
infrasity-labs Bundle Blog 2Full-lifecycle blog engine with 30 sub-skills, 12 content templates, 5-category 100-point scoring, and 5 specialized agents. Routes user requests to the right sub-skill: writing, rewriting, analysis, outlines, audits, schema, charts, images, repurposing, AI-citation optimization, FLOW framework prompts, topic-cluster execution, and multilingual publishing. Optimized for Google rankings (December 2025 Core Update, E-E-A-T) and AI citations (GEO/AEO). Supports any platform (WordPress, Next.js MDX, Hugo, Ghost, Astro, Jekyll, 11ty, Gatsby, HTML). Use when user says "blog", "write a blog", "blog post", "blog strategy", "content brief", "editorial calendar", "blog audit", "blog optimization", "topic cluster", "multilingual blog", "FLOW framework", or any /blog subcommand. Sub-skill descriptions cover narrower triggers.
-
infrasity-labs Bundle Landing Page Auditor 2Audits any landing or service page across 48 checks in 10 categories for LLM/AI discoverability, GEO readiness, content clarity, schema markup, internal linking, freshness signals, and technical crawlability. Produces an overall score out of 100, a per-category score out of 100, pass/warn/fail/ manual counts, and a prioritised fix list — all rendered as a standalone HTML report saved to disk. Use when a user provides a URL and asks to audit it, score it, check its GEO readiness, test its AI discoverability, run a landing page audit, or evaluate it for LLM citation potential. Also trigger on phrases like "audit this page", "score this URL", "check GEO for", "is this page AI-ready", "run a GEO audit", "LLM page check", "how would AI read this page", or "landing page score".
-
infrasity-labs Skill Blog Geo 2AI citation readiness audit ONLY (does not touch Google rankings, use blog-rewrite for combined Google+AI work). Use whenever the user wants their content to rank in ChatGPT, Perplexity, Claude, Gemini, or Google AI Overviews. AI citation optimization audit scoring blog posts for ChatGPT, Perplexity, and Google AI Overview citability. Evaluates passage-level citability, Q&A formatting, entity clarity, structured data, and AI crawler accessibility. Generates citation capsules and a 0-100 AI Citation Readiness score. Use when user says "geo", "ai citation", "ai optimization", "citation audit", "aeo", "perplexity optimization", "chatgpt citation".
-
infrasity-labs Skill Blog Write 2Write new blog articles from scratch optimized for Google rankings and AI citations. Generates full articles with template selection, answer-first formatting, Key Takeaways summary box, information gain markers, citation capsules, sourced statistics, Pixabay/Unsplash images, built-in SVG chart generation, FAQ schema, internal linking zones, and proper heading hierarchy. Supports MDX, markdown, and HTML output. Use when user says "write blog", "new blog post", "create article", "write about", "draft blog", "generate blog post".
-
infrasity-labs Skill Blog Rewrite 2Rewrite and optimize existing blog posts for Google rankings (December 2025 Core Update, E-E-A-T) and AI citations (GEO/AEO). Full rewrite for both Google rankings AND AI citations. For AI-citation-only audit (no Google work), use blog-geo instead. Replaces fabricated statistics with sourced data, applies answer-first formatting, adds Pixabay/Unsplash images, generates built-in SVG charts, injects FAQ schema, performs AI content detection, adds citation capsules and information gain markers, and updates freshness signals. Works with any blog format (MDX, markdown, HTML). Use when user says "rewrite blog", "optimize blog", "update blog", "improve blog", "fix blog", "refresh blog post", "blog optimization".
-
infrasity-labs Bundle Orphan Pages Internal Linking Opportunities 2Audit any domain for orphan blog pages, map internal links across all blog posts, generate keyword-backed interlinking briefs via DataForSEO, and produce a self-contained downloadable HTML report. Invoke with the target domain as the argument.
-
sahit-sai Skill Ppt Master 2Reveal.js 演示文稿制作大师。帮用户用 Reveal.js 生成可直接在浏览器打开的 HTML 演示文稿。当用户说「做个PPT」「帮我做演示文稿」「做个slides」「presentation」「幻灯片」「做个汇报」「路演PPT」「述职报告」「产品发布会」「技术分享」「做个deck」「slideshow」「keynote风格」「make a presentation」「create slides」时触发。关键词:PPT、演示文稿、幻灯片、slides、presentation、deck、汇报、路演、述职、技术分享、reveal.js、slideshow、keynote、做个PPT、写个PPT
-
vishuwa2004 Skill Materialization Aware Refresh Escalation 2React to marketplace materialization diffs by refreshing plugins when new installs land and escalating to needsRefresh when updates or refresh failures occur.
-
sahit-sai Bundle Frontend Design 2帮助用户美化网页界面、优化 UI/UX 设计,生成高质量的前端代码。 触发场景:帮我美化页面、界面太丑了、UI 优化、页面不好看、样式调整、 前端设计、视觉优化、improve frontend design、beautify UI、make it pretty、 landing page 设计、组件美化、暗色模式、响应式优化、配色方案。 输出生产级别的 CSS / Tailwind / React 代码,拒绝千篇一律的 AI 审美。
-
sahit-sai Skill Migration Guide 2系统迁移与升级助手。帮用户制定数据库迁移、框架升级、系统重构、技术栈迁移的方案和步骤。当用户说「数据库迁移」「升级React版本」「从MySQL迁移到PostgreSQL」「框架升级」「重构方案」「系统迁移」「API版本升级」「migration plan」「upgrade guide」「技术栈切换」「迁移方案」时触发。关键词:迁移、migration、升级、upgrade、数据库迁移、框架升级、版本升级、技术栈切换、系统重构、API迁移、数据迁移、平滑迁移、灰度迁移、回滚方案、兼容性、breaking change、deprecated、legacy、重构、schema migration、数据同步、双写、蓝绿部署、金丝雀发布
-
sahit-sai Skill Code Conventions 2Code style, logging, and testing conventions for SkillHub backend (Java) and frontend (TypeScript). Use when writing or reviewing code.
-
sahit-sai Bundle Pbi Report Design 2The Power BI report design canon covering design identity, visual hierarchy and the 3-30-300 rule, layout/spacing/alignment, color discipline, chart selection, KPI and card design, tables and matrices, accessibility, and the closing design gate. The shared reference home for report design judgment, routed to by the create-pbi-report, pbir-cli, review-report, modifying-theme-json, and custom-visual skills. Load when committing a design identity or making a design, layout, color, chart-selection, or accessibility decision for a report.
-
sahit-sai Bundle Skill Introduction 2Generate a beautiful, deployable HTML introduction page for any AgentSkill. Reads USAGE.md (preferred) or SKILL.md, parses name, description, and feature sections, then renders a polished page with a hero section, feature cards, quick start, command examples, collapsible doc cards, side navigation, and a floating install button. Supports 4 themes: light (default), aurora (dark glass), techblue (debug-tool style), finance (dark blue + gold). Optionally deploys via a pluggable hook so re-runs update the same URL. Use when the user says "generate a skill intro page", "make a doc page for this skill", "publish this skill's docs", "skill-introduction". If the user does not specify a target skill, ask them for the skill name or directory path.
-
sahit-sai Skill Frontend Conventions 2Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types.
-
sahit-sai Skill React Best Practices 2适用时机
-
junmystery Skill Vue Patterns 2Vue.js 3 Composition API patterns, component architecture, reactivity best practices, Pinia state management, Vue Router navigation, and Nuxt SSR patterns. Activates for Vue, Nuxt, Vite, or Pinia projects. Use when building or reviewing Vue 3, Nuxt, or Pinia code — Composition API, reactivity, or router navigation.
-
junmystery Skill Accessibility 2Design, implement, and audit inclusive digital products using WCAG 2.2 Level AA. Use when building or auditing UI that must meet WCAG 2.2 Level AA, or when reviewing a change for keyboard, contrast, or screen-reader support. standards. Use this skill to generate semantic ARIA for Web and accessibility traits for Web and Native platforms (iOS/Android).
-
junmystery Skill Frontend A11Y 2Accessibility patterns for React and Next.js — semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support. Use when building any interactive UI component or form.
-
junmystery Skill React Testing 2React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress end-to-end runs. Use when writing or fixing tests for React components, hooks, or pages.
-
junmystery Skill React Patterns 2React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.
-
junmystery Bundle Frontend Slides 2Create 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. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
-
junmystery Skill Motion Advanced 2Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree. Requires motion-foundations. Use when building drag and drop, gestures, text or SVG animation, or imperative animation sequences in React or Next.js.
-
junmystery Skill Motion Patterns 2Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs. Use when animating a specific UI element in React or Next.js — button, modal, toast, stagger, page transition, or scroll.
-
junmystery Skill Backend Patterns 2Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes. Use when building or reviewing Node.js, Express, or Next.js API routes and their data access.
-
junmystery Skill Coding Standards 2Baseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-specific patterns. Use when reviewing code quality or naming with no framework-specific skill that applies.
-
handsomeboy990 Bundle Dependency Selection 2Decides whether to add, replace, upgrade or refuse a library through a twelve point evaluation covering existing solutions, platform capabilities, maintenance, security, licence, size, transitive tree, types, accessibility and migration cost. Use before any dependency change.
-
handsomeboy990 Bundle Frontend Engineering 2Frontend Engineering
-
handsomeboy990 Bundle Accessibility Testing 2Accessibility Testing
-
serejaris Bundle Theme Kit 2主题样式工具箱,为演示文稿、文档、报告、HTML页面等内容提供专业的主题样式设计,内置10种预设风格(含配色与字体),也支持按需生成自定义主题。当用户需要美化内容、统一视觉风格,或提及“主题”、“配色”、“风格”、“设计幻灯片”、“美化文档”等关键词时触发。
-
serejaris Bundle Chrono Flow 2根据JSON数据生成精美的交互式时间线HTML页面,支持垂直、水平、双侧三种布局,可自定义主题色、展开详情,并适配移动端。适合展示项目里程碑、产品版本记录、公司发展历程或个人简历。当用户提及制作时间线、历程图、历史记录可视化,或需要将一系列事件、日期与描述数据转换为网页时触发。
-
serejaris Bundle Data Viz Gen 2从 JSON 数据生成自包含的 HTML/SVG 信息图,支持 KPI 统计卡片、分组柱状图对比、流程图和混合仪表盘四种类型,提供 8 套配色方案和 24 个内置图标,输出完全自包含的 HTML 文件,无需外部依赖。当用户需要数据可视化、信息图、图表、仪表盘,或提及生成图表、制作 dashboard、展示统计数据等请求时触发。
-
serejaris Bundle Locale Guard 2在前端代码库(React/TypeScript、Vue等)中搭建、审计和规范国际化/本地化流程,包括配置i18n框架、将硬编码字符串替换为翻译键、确保en-US/zh-CN等语言文件覆盖完整、映射本地化错误消息,并校验翻译键一致性、复数规则和格式化。当用户需要实施或审查多语言支持,提及i18n、本地化、翻译键、多语言文件,或询问如何替换硬编码字符串、配置react-i18next/next-intl、处理复数规则、进行语言审计时触发。
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 remotion-best-practices, typo3-wcag22-aa-agentic, typo3-records-list-types. 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.