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.
-
mn755 Skill Mission Control Tfx PipelinesUse Mission Control to plan or repair TFX-style production ML pipelines with explicit component and validation boundaries.
-
mn755 Skill Mission Control Webapp TestingPlan or run web application testing through Mission Control. Use for local browser smoke tests, console errors, accessibility checks, screenshots, and regression validation.
-
egregore-labs Skill EmissaryCompose, send, or run an Egregore emissary — portable handoff v1 artifacts with server-rendered HTML at egregore.xyz. Use for `/emissary`, "make/send/run an emissary", or when a user pastes an `egregore.xyz/emissary/e/<id>` link.
-
egregore-labs Skill Dark ModeUse when generating or modifying any visual output that renders in a browser or artifact viewer: HTML pages, CSS, React SSR components, Egregore artifacts, markdown renderers, web components, design-system tokens, Tailwind themes, or standalone demos. Triggers on requests involving dark mode, theme toggles, color systems, card surfaces, browser rendering, or visual polish. The load-bearing lesson: if React SSR emits an inline hex color through `style={}`, CSS dark-mode overrides cannot reach it, so every theme-sensitive color must be emitted as `var(--token)` rather than a resolved hex. Do not use for TUI output, plain markdown files, or non-visual code.
-
syncfusion Bundle Syncfusion Wpf RibbonImplement Syncfusion WPF Ribbon component for modern desktop applications. Use this skill when creating ribbon interfaces in WPF with tabs, groups, buttons, menus, and galleries. Covers advanced features like application menus, backstage views, state persistence, multi-document ribbon merge, keyboard accessibility, touch support, and ribbon customization.
-
syncfusion Bundle Syncfusion Wpf ThemingImplement and customize themes for Syncfusion WPF controls using SfSkinManager. Apply built-in themes (Windows 11, Fluent, Material, Office 2019), create custom themes with Theme Studio, and control visual effects like reveal animations and acrylic backgrounds. Use this skill whenever user needs to theme WPF applications, apply Syncfusion themes, customize colors/fonts, or configure theme-based visual effects and accessibility features.
-
syncfusion Bundle Syncfusion Wpf DatagridImplements Syncfusion WPF DataGrid (SfDataGrid) component for displaying and manipulating tabular data in Windows Presentation Foundation applications. Use this when working with data grids, table views, or data binding scenarios. Supports sorting, filtering, grouping, editing, Excel/PDF export, drag and drop, master-detail views, summaries, and extensive styling options.
-
syncfusion Bundle Syncfusion Wpf Pivot GridComprehensive guide for implementing Syncfusion WPF PivotGrid control, a powerful pivot table component for cross-tabulated data analysis. Use this when working with WPF pivot tables, PivotGridControl, or cross-tabulated data scenarios. Covers pivot rows/columns configuration, PivotSchemaDesigner, grouping bar, pivot field list, pivot calculations, filtering, sorting, and data binding for business intelligence applications.
-
syncfusion Bundle Syncfusion Wpf TimepickerCreate and customize WPF time picker controls using Syncfusion's SfTimePicker component. Use this when implementing time selection UI, time input fields, or time value formatting. This skill covers SfTimePicker setup, time selector customization, value binding, and appearance styling in WPF applications.
-
syncfusion Bundle Syncfusion Wpf Smith ChartImplement and configure Syncfusion WPF SmithChart (SfSmithChart) component for visualizing impedance and admittance in transmission line applications. Use this when working with high-frequency circuit analysis, RF engineering, or telecommunications data. This skill covers series configuration, dual-axis systems, data markers, legends, appearance customization, and interactive features.
-
syncfusion Bundle Syncfusion Wpf Radial GaugeComprehensive guide for implementing Syncfusion WPF Radial Gauge (SfCircularGauge) component for data visualization in Windows Presentation Foundation applications. Use this when working with circular gauges, speedometers, KPI displays, or progress meters. This skill covers gauge configuration with needles and pointers, scale customization, ranges and zones, interactive pointer dragging, animations, and annotations for creating rich dashboard visualizations.
-
stacksjs Skill Stacks MailUse when creating mail classes in app/Mail/ - defining email content and templates, using the template() function with STX or HTML templates, variable interpolation, email layouts, or the app-level mail sending pattern. For the email framework itself (drivers, Mail singleton, EmailSDK, inbox management), see stacks-email.
Audited -
stacksjs Skill Stacks BuildUse when working with the Stacks build system - building component libraries, CLI binaries, server Docker images, documentation, or the framework core. Covers @stacksjs/build, buddy build commands, build actions, and the server build pipeline.
Audited -
stacksjs Bundle Stacks BrowseUse for headless browser QA on Stacks applications - navigation, screenshots, responsive testing, console/network monitoring, and accessibility snapshots. Dependency-free, driving a system browser over the Chrome DevTools Protocol using only Bun (no Playwright/Puppeteer). Invoke with /stacks-browse.
-
stacksjs Skill Stacks BrowserUse when working with browser/frontend functionality in Stacks - the useAuth composable (login, register, logout, token management), Stripe billing utilities (loadCardElement, confirmPayment), the API fetch client, browser model loading, or auto-imported browser utilities. Covers @stacksjs/browser.
Audited -
stacksjs Skill Stacks CrosswindUse when styling components in a Stacks application - utility-first CSS classes, theming, responsive design, variants, custom rules, or CSS generation. Crosswind is the CSS utility engine powering Stacks' Crosswind config.
Audited -
stacksjs Bundle Stacks PrototypeUse when a design question needs a runnable answer rather than an argument - does this state model hold up, what should this page look like, is this API shape right. Builds throwaway code that answers one question, either a single shareable HTML demo or several stx view variants.
-
stacksjs Skill Stacks ScaffoldingUse when generating new code with Stacks - buddy make commands, project scaffolding, component/page/store/layout generation, or project templates. Covers buddy make:* commands and STX scaffolding utilities.
Audited -
babyworm Bundle Rtl Ipxact GenGenerate IEEE 1685-2014 IP-XACT XML descriptor from RTL source — 'generate IP-XACT', IP handoff, or SoC/EDA integration needing component XML.
-
frabcd Bundle PrototypeConcept prototype — validate the core idea is worth designing before writing GDDs. Run right after $ai-game-studio:brainstorm and $ai-game-studio:setup-engine. Routes to HTML, Engine, or Paper path based on game type. Produces a throwaway build and a PROCEED/PIVOT/KILL verdict.
-
frabcd Bundle UX ReviewValidates a UX spec, HUD design, or interaction pattern library for completeness, accessibility compliance, GDD alignment, and implementation readiness. Produces APPROVED / NEEDS REVISION / MAJOR REVISION NEEDED verdict with specific gaps.
-
lebsral Bundle Dspy ReactBuild tool-using agents with dspy.ReAct - the Reasoning-Action-Observation loop for interleaved thinking and action. Use when the task requires calling external tools or APIs to gather information - multi-step tool use with reasoning, like searching databases, calling APIs, or combining multiple data sources. Common scenarios - building agents that search the web and synthesize results, multi-step information gathering from APIs, chatbots that look up data before answering, question answering that requires external knowledge, or any task needing interleaved reasoning and action. Related - ai-taking-actions, ai-searching-docs, dspy-codeact, dspy-tools, dspy-mcp. Also used for dspy.ReAct, ReAct agent pattern, reasoning and acting loop, tool-using agent in DSPy, search then answer pattern, agent with tools, multi-step tool use, interleave thinking and acting, API-calling agent, agent that reasons about tool outputs, when to use ReAct vs CodeAct, build intelligent agent with DSPy.
-
lebsral Bundle Dspy ToolsWraps Python functions as dspy.Tool objects and configures dspy.PythonInterpreter for sandboxed code execution in DSPy agents. Use when you need to give DSPy agents tool-calling abilities — wrapping Python functions as tools, building tool-using pipelines, or setting up code execution environments. Common scenarios - wrapping a Python function as a tool for DSPy agents, building tool-using pipelines, setting up a calculator or search tool, giving agents access to databases or APIs, or configuring code execution environments for agents. Related - ai-taking-actions, dspy-react, dspy-codeact. Also used for dspy.Tool, dspy.PythonInterpreter, wrap function as DSPy tool, give agent tools, tool calling in DSPy, function calling for agents, build custom tools for DSPy agent, calculator tool for LLM, search tool for agent, database tool for AI, Python function to agent tool, MCP tools with DSPy, tool registry, how to define tools in DSPy, agent tool configuration, executable tools for AI agents.
-
lebsral Bundle Dspy CodeactBuild agents that write and execute Python code using dspy.CodeAct. Use when the task requires computation, data transformation, or multi-step logic better expressed as code than tool calls or natural language - data analysis, precise calculations, file processing. Common scenarios - data analysis tasks where the agent writes pandas code, computation-heavy tasks where natural language reasoning fails, file processing automation, tasks requiring precise calculations, or building agents that manipulate data programmatically. Related - ai-taking-actions, dspy-react, dspy-program-of-thought. Also used for dspy.CodeAct, agent writes and runs Python code, code execution agent, data analysis agent, AI agent that writes code, computation with LLM agent, pandas automation with AI, agent that processes files, code-generating agent, execute Python in sandbox, when ReAct is not precise enough use code, programmatic problem solving agent.
-
lebsral Bundle Dspy StreamingUse when you need to stream LM output tokens to a frontend in real time — progressive responses, typing indicators, server-sent events, or WebSocket feeds. Common scenarios - streaming DSPy responses to a React UI, FastAPI SSE endpoint with DSPy, showing AI typing in a chat interface, streaming multi-field outputs, streaming ReAct agent loop progress, or handling duplicate fields with predict_name. Related - ai-serving-apis, ai-building-chatbots, dspy-react, dspy-utils. Also used for dspy.streamify, dspy.streaming, StreamListener, StreamResponse, StatusMessage, stream tokens from DSPy, real-time AI output, server-sent events with DSPy, progressive response, show AI typing, streaming DSPy to frontend, async streaming generator, sync streaming fallback, multi-field streaming, allow_reuse streaming, predict_name streaming, streaming ReAct agent, FastAPI SSE DSPy.
-
lebsral Bundle AI Serving ApisPut your AI behind an API. Use when you need to serve AI features as web endpoints, add AI to an existing backend, deploy AI for other services to call, wrap a DSPy program in REST or HTTP, build an AI microservice, or put a language model behind FastAPI or Flask. Also use for deploy AI model to production, AI REST API, serve DSPy program over HTTP, Docker AI service, AI endpoint for mobile app, how to productionize my AI, LLM behind a web API, AI microservice architecture, AI backend for React app, put my AI in production, AI API for frontend to call.
-
lebsral Bundle AI Understanding ImagesAnalyze images and extract structured data from visual content using AI. Use when analyzing product photos, extracting text from screenshots, generating alt text for accessibility, visual question answering, categorizing images by content, reading receipts and invoices from photos, OCR with AI, describing images for search indexing, product photo categorization, document image processing, chart and graph extraction, UI screenshot analysis, image-to-structured-data pipelines.
-
lebsral Bundle AI Choosing ArchitecturePick the right DSPy module and architecture for your AI feature. Use when you are not sure whether to use Predict, ChainOfThought, ReAct, or a pipeline, need to choose between DSPy patterns, want architecture advice for your AI feature, or are deciding between a single module and a multi-step pipeline. Also use for which DSPy module should I use, Predict vs ChainOfThought, when to use ReAct, single module vs pipeline, DSPy architecture decision, CoT vs PoT vs ReAct, do I need a pipeline, module selection guide, DSPy pattern selection, how to structure my DSPy program.
-
l-lesteryu Bundle UI UX Pro MaxUI/UX 设计智能指南,适用于 Web 和移动端。包含 50+ 种风格、161 种配色方案、57 种字体搭配、161 种产品类型、99 条 UX 准则和 25 种图表类型,覆盖 10 大技术栈(React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui 和 HTML/CSS)。支持的操作:规划、构建、创建、设计、实现、审查、修复、改进、优化、增强、重构和检查 UI/UX 代码。项目类型:网站、落地页、仪表盘、管理后台、电商、SaaS、作品集、博客和移动应用。组件元素:按钮、模态框、导航栏、侧边栏、卡片、表格、表单和图表。设计风格:玻璃拟态、粘土拟态、极简主义、野兽派、新拟态、Bento Grid、暗色模式、响应式、拟物化和扁平化设计。涵盖主题:颜色系统、无障碍、动画、布局、排版、字体搭配、间距、交互状态、阴影和渐变。集成:shadcn/ui MCP 用于组件搜索和示例。
-
tody-agent Skill Cm Safe I18NSafe i18n: multi-pass batching, parallel-per-language dispatch, 8 audit gates, HTML integrity. Use for translating or mass-converting hardcoded strings to t() calls.
-
tody-agent Skill Cm Quality GateUse before any deployment or completion claim. Enforces test gates, evidence-based verification, and frontend safety checks. No deploy without passing. No claims without evidence.
-
tody-agent Skill Cm Auto PublisherComprehensive publishing automation skill bridging AI agents (OpenClaw, Manus, Claude) to the Content Factory Router. Uses the Router API to publish markdown articles with rich media to any connected Astro site natively.
-
tody-agent Bundle Cm Video FactoryPrivate Code-to-Video Engine using Remotion React, TTS (ElevenLabs/OpenAI), and Content Mastery. Creates pure VibeCoding-style animations for TikTok/Shorts/Reels automatically.
-
flpbalada Skill DecomposeSplit an oversized component into focused helpers, hooks, and sub-components. Use when React/UI code mixes rendering, state, effects, handlers, data shaping, and repeated sections, or when a file is hard to scan. Preserve behavior and avoid generic abstractions. For general code restructuring use refactoring; for abstraction decisions beyond one component use code-architecture-wrong-abstraction.
-
flpbalada Skill Code ReviewerReview code for concrete defects and ranked risk. Use when asked to review diffs, pull requests, changed files, snippets, or implementation plans for bugs, security, performance, UX, API contracts, tests, concurrency, error handling, state/data hazards, accessibility, dependencies, or observability. Produces findings first with file:line evidence. For factual diff explanation use explain-diff; for architecture-only review use architecture-review.
-
flpbalada Skill React Key PropChoose correct React key props for lists and remounts. Use when mapping arrays, rendering dynamic lists, sorting/filtering/reordering items, debugging list state bugs, avoiding index keys, or intentionally resetting component state with a key. For general local state updates use react-use-state; for effect-based resets use react-useeffect-avoid.
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 stacks-scaffolding, mission-control-tfx-pipelines, mission-control-webapp-testing. 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.