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.
-
baserow Bundle Create Update ServiceCreate or update Baserow integration and service types, including services exposed as Application Builder data sources, Builder workflow actions, Automation node actions, Automation node triggers, or dashboard data sources. Use when adding a ServiceType/IntegrationType subclass, registering backend/frontend types, or wiring service wrappers in builder or automation.
-
baserow Skill Write Frontend Unit TestWrite or update Baserow frontend unit tests for core, premium, or enterprise code using the repo's existing Vitest, Nuxt, Vue Test Utils, TestApp, and snapshot patterns.
-
baserow Skill Create In App NotificationCreate or update a Baserow in-app notification for an event. Use when adding a backend `NotificationType`, wiring frontend notification rendering and routing, defining the notification target, or preventing duplicate notifications for the same event object.
-
baserow Skill Add Or Update Builder Element TypeAdd or update a Baserow Application Builder element type across backend models, backend ElementType registration, frontend element registry/components/forms/icons/translations, migrations, and targeted tests. Use when creating or changing an element shown in the builder add-element modal, page preview, public page rendering, form elements, collection elements, container elements, or enterprise-only builder elements.
Audited -
blink-new Skill Blink NotificationsSend emails (HTML/text, attachments, cc/bcc), SMS messages, and manage phone numbers for AI calling. Platform-provided — no API keys needed.
-
bluebagai Bundle Theme FactoryToolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
-
bluebagai Skill Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Audited -
bluebagai Bundle Web Artifacts BuilderSuite of tools for creating elaborate, multi-component HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
-
bogdanbaciu21 Bundle Parallel DispatchGenerate copy-paste agent prompts and a coordinator playbook from a pre-built parallel work plan, or turn a cheap design dispute into competing "code wins" implementation variants. Use when the user has decomposed a large task into independent, conflict-free parallel tracks and needs formatted prompts for multiple coding-agent sessions; or when the user says "parallel dispatch", "parallel agents", "dispatch tracks", "multi-agent", "generate agent prompts", "code wins", "build competing implementations", or "settle this by building variants". Optionally layers in per-runner insight-lock capture (condensed into one cross-track insight memo at the end) and end-of-run pagecraft polish for HTML deliverables. Do NOT use to invent a decomposition from scratch, to author handover documents, or to launch/monitor agents. Do NOT use for single-session sub-agent delegation via the Agent tool — this is for spinning up separate coding-agent sessions.
-
bogdanbaciu21 Bundle Table System MigrationAudit, migrate, and regression-test table systems across content-heavy websites, blogs, documentation sites, and admin surfaces. Use when Codex needs to normalize many ad hoc HTML table styles into a canonical table component, preserve legacy/admin table behavior, build a no-new-violations ratchet, add real-browser CSS regression coverage for table layout, or prepare a public-safe writeup/skill from a private table cleanup.
-
btfranklin Bundle Design UI Style GuideCreate a visual system for a new or redesigned user interface. Generate exactly three image concepts and stop for user approval. After approval, create an HTML and CSS style guide with a representative demo. Do not use when the user supplies an approved design, requests a small edit, or skips visual exploration.
-
btfranklin Bundle Django 6 Upgrade GuidePlan, audit, or complete an upgrade from Django 5.x to Django 6. Verify runtime and dependency compatibility, deprecations, settings, databases, migrations, tests, and deployment. Do not use for general Django work, earlier upgrades, frontend styles, or unrelated maintenance.
-
btfranklin Bundle Openai Django WebhooksBuild or debug asynchronous OpenAI Responses API workflows in Django. Use this skill for background requests, signed webhooks, response correlation, persistence, and HTMX status polling. Do not use it for generic OpenAI calls, non-Django consumers, other webhook providers, or frontend-only polling.
-
btfranklin Bundle Design HTML First Web UisDesign or implement an HTML-first web interface. Use native browser features, progressive enhancement, server-rendered updates, and minimal JavaScript. Do not use for visual design, framework architecture, games, or browser debugging.
-
btfranklin Bundle Integrate Daisyui Into DjangoIntegrate or refactor Tailwind CSS and DaisyUI in a Django application. Define the asset pipeline, file ownership, theme tokens, migration process, and verification. Do not use for one template edit, non-Django work, visual design, or backend-only work.
-
busyeugene Skill Repurpose Linkedin CarouselUse when the user wants to turn a blog post or article into a LinkedIn carousel. Extracts the key points, sequences them into slide copy, then invokes the external `carousel` skill (LinkedIn Carousel Generator) to render an HTML carousel file ready for export to PDF.
Audited -
piaoxuemoli Skill Repo Sync从 GitHub 拉取最新代码,处理 stash/冲突,同步后通知飞书群聊并触发 wiki 更新。
-
piaoxuemoli Bundle Bet SyncSync betting data from agents/*/round-N/bets.md into the HTML file's AI_ROUNDS array. Parses each model's bets.md, extracts bet entries, deploys to Caddy.
-
piaoxuemoli Skill Static HTML Deploy把静态 HTML 站点部署到服务器对外访问的标准 SOP。覆盖 Caddy(Docker,:80/:443) 与 nginx(宿主,独立端口) 两条路径、端口约定、80 端口冲突坑、部署目录、reload 与 curl 验证。任何"部署/上线/开放访问一个 HTML 页面或静态站点"的请求都必须先读这里,不要自己瞎配。
-
piaoxuemoli Bundle Lottery UpdaterAutomatically fetch match results from ESPN API and update the HTML display page. Covers result fetching, bet settlement, HTML patching, and Caddy deployment.
-
viarotel-org Skill EscrcpyUse when working on Escrcpy/escrcpy-x Electron Vue scrcpy code: architecture, renderer/main IPC, wscrcpy, Element Plus, VueUse, Floating UI, Tango ADB, i18n, UnoCSS, validation.
-
viarotel-org Skill API Doc GeneratorUse when: parsing business attachments with data flow & business logic, generating standardized frontend integration-ready API documentation in Markdown. Follow strict fixed API section structure, label incomplete definitions, use semantic mock response data, document cross-api call dependencies, produce exportable docs for Confluence/Notion/Lark Docs.
-
viarotel-org Skill Performance OptimizationOptimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.
-
viarotel-org Bundle Shopify Storefront GRAPHQLUse for custom storefronts requiring direct GraphQL queries/mutations for data fetching and cart operations. Choose this when you need full control over data fetching and rendering your own UI. NOT for Web Components - if the prompt mentions HTML tags like <shopify-store>, <shopify-cart>, use storefront-web-components instead.
-
eturkes Bundle MarkitdownConvert files and office documents to Markdown. Supports PDF, DOCX, PPTX, XLSX, images (with OCR), audio (with transcription), HTML, CSV, JSON, XML, ZIP, YouTube URLs, EPubs and more.
-
zhongjingyun Bundle CitationsCanonical rules and HTML/CSS contract for inline `[n]` citation references, end-of-document Citations blocks, and optional per-section citation recaps used across Moody's Agentic Solutions HTML report skills (earnings-brief, peer-analysis, issuer-brief, sector-brief). Parent skills must read BOTH this `SKILL.md` (rules, numbering, hyperlink behavior, source data shape) AND `assets/template.html` (canonical CSS block + literal HTML markup snippets) before emitting citations. The asset file is the single source of truth for the visual/markup implementation; this `SKILL.md` is the single source of truth for the authoring rules. Triggers when the user asks about citations, sources, references, footnotes, hyperlinking [n] markers, or the Sources/Citations block in any HTML report skill.
-
zhongjingyun Bundle Moody S Issuer BriefProduce a comprehensive Issuer Brief HTML report for a company using Moody's GenAI MCP tools. Use this skill whenever the user asks to create an Issuer Brief, company profile report, credit memo, investment book, or comprehensive company analysis. Also trigger when they ask for a report combining company overview, financials, peer comparison, industry overview, strategic developments, management, credit profile, risks, and ESG into a single document. Trigger even if they just name a company and say "Issuer Brief", "info book", "company book", "credit book", or "full company report".
Audited -
zhongjingyun Bundle Moody S Sector BriefProduce a Sector Brief HTML report for any industry sector using Moody's GenAI MCP tools and web research. Use this skill whenever the user asks to analyze a sector, write a sector report, do an industry analysis, create a sector overview, or generate a sector deep-dive. Trigger even if they just name a sector and mention "analysis", "overview", "outlook", "report", or "deep-dive". Also trigger for phrases like "what's happening in the retail sector" or "give me a sector breakdown for aerospace".
-
zhongjingyun Bundle Moody S Earnings BriefProduce an Earnings Call Summary HTML report for 2–5 companies using Moody's GenAI MCP tools. Use this skill whenever the user asks to summarize earnings calls, generate an earnings call summary, analyze earnings transcripts across peers, or create an earnings call report. Trigger even if they just name companies and mention "earnings" or "transcript".
-
codespringapp Skill Cs Build FeatureInteractive orchestrator that builds a feature from its CodeSpring plan. It interviews the user about what they're building, checks the feature has enough context (notes + Frontend/Backend PRDs) and a numbered task list, guides them to fill any gaps, then builds the Kanban tasks — optionally spawning up to 5 parallel sub-agents — while guarding the shared systems it could break. Use when the user wants to build/implement a feature they planned in CodeSpring. Triggers, "build this feature", "implement my feature", "start building from CodeSpring", "let's build X", "work through my Kanban tasks".
Audited -
codespringapp Bundle Cs Build Audit CodebaseDiagnose a broken or untrusted codebase and plan the fix. Runs the app for real, fans out parallel specialist sub-agents (security, database, core logic, frontend/UX, architecture), audits the git/CI/deploy setup, verifies the headline claims independently, then gives a plain-English findings list ranked by real-world cost, writes FINDINGS.md into the repo, and delivers a rebuild-or-fix-in-place verdict (fix in place wins by default, and having real users can veto a rebuild outright) before handing off to cs-build-import-codebase and creating the Kanban tasks. Works on any codebase in any language. Triggers, "my app is a mess", "audit my codebase", "what's wrong with my app", "diagnose this codebase", "should I rebuild or fix this", "find the bugs in my app", "review my whole app".
-
conn-castle Bundle Interface AuditAudit product interfaces as component boundaries, score complexity, over-engineering, and debt, maintain .agent-layer/tmp interface-audit reports, and finish at the final recommendation gate. Use for fresh interface cleanup audits or --update refreshes; not for implementation.
-
conn-castle Bundle Request HTML CommentsRequest and return element- or text-linked comments on a local HTML file or loopback-served page through an interactive browser overlay. Use when the user wants to annotate local HTML; do not use for remote URLs, browser automation, or code review.
-
cuga-project Skill Cuga Knowledge RAGUse when the user wants a cuga agent to ingest, search, or answer questions from documents (PDF/DOCX/XLSX/PPTX/HTML/Markdown/images) - RAG / knowledge base features.
-
davidyichengwei Skill Bp Component Design提供组件级设计原则,包括类/模块设计、接口设计、数据模型、并发模型、错误处理。在系统设计阶段讨论组件详细设计时使用,或在 code review 中评估组件质量时使用。
-
drawcall-ai Skill EcsStructure game state with the EliCS entity-component-system: components, systems, queries, predicates, lifecycle, and the Input/State/View architecture. Use when organizing game logic with multiple interacting objects and state-driven update loops.
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 parallel-dispatch, cs-build-feature, interface-audit. 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.