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.
-
zeropointrepo Bundle Captions 2Use when captions, subtitles, or the spoken text of a YouTube video is needed — even if not explicitly requested: pasted video links or IDs, requests to read, quote, or translate a video, accessibility needs, deaf/HoH use cases, content review, or language learning. Fetches timestamped caption data from any YouTube video. Not for uploading subtitles or account management.
-
zeropointrepo Bundle Subtitles 2Use when subtitles or the spoken text of a YouTube video is needed: pasted video links or IDs, requests to translate a video, read along, follow foreign-language content, or extract what was said. Also use for language learning or accessibility. Fetches timestamped subtitles from any YouTube video. Not for uploading subtitles or account management.
-
microsoft Skill Deploy 2Use to deploy, publish, or push an Expo/React Native Power Apps mobile app to a Power Platform tenant.
2.7k -
microsoft Skill Add Connector 2Use when adding a Power Platform connector to an Expo/React Native Power Apps mobile app and no dedicated mobile connector skill exists.
2.7k -
microsoft Skill Add Datasource 2Use when adding an unspecified data source to an Expo/React Native Power Apps mobile app; routes to Dataverse, SharePoint, or another connector.
2.7k -
microsoft Skill List Connections 2Use to find or create a Power Platform connection ID or reference for an Expo/React Native Power Apps mobile app.
2.7k -
tinyhumansai Skill Accessibility AuditCheck a design against the requirements that are cheaper to meet than to retrofit.
-
oliver-kriska Skill Hexdocs Fetcher 2Fetch HexDocs for Elixir libraries with HTML-to-markdown conversion. Use when looking up docs on hexdocs.pm — modules, functions, guides, changelogs.
-
jamie-bitflight Bundle Textual 2Use when building Textual TUI apps — creating widgets, laying out screens, handling events, managing reactivity, testing with Pilot, or running background workers. Covers App lifecycle, CSS styling, screen stack, reactive attributes, custom messages, actions, bindings, and the Worker API.
-
oliver-kriska Bundle Phx Brief 2Interactive briefing of a plan file — explains reasoning, schema decisions, component choices. Use when developers need to understand a plan before approving.
-
stanfish06 Bundle GenimlUse when working with genomic interval data (BED files) for machine learning tasks. Use for training region embeddings (Region2Vec, BEDspace), single-cell ATAC-seq analysis (scEmbed), building consensus peaks (universes), or any ML-based analysis of genomic regions. Applies to BED file collections, scATAC-seq data, chromatin accessibility datasets, and region-based genomic feature learning.
-
stanfish06 Bundle NextjsNext.js App Router expert guidance. Use when building, debugging, or architecting Next.js applications — routing, Server Components, Server Actions, Cache Components, layouts, middleware/proxy, data fetching, rendering strategies, and deployment on Vercel.
-
stanfish06 Skill PlotlyUse when creating interactive Python visualizations with Plotly, including pan, zoom, hover charts, dashboard figures, interactive HTML output, or 3D plots. Trigger terms include plotly, interactive chart, interactive plot, dashboard chart, hover, and plotly express. For static publication figures use matplotlib or seaborn; for visualization strategy use scientific-visualization.
-
stanfish06 Skill VitestJavaScript/TypeScript unit testing with Vitest — fast Vite-native test runner with Jest-compatible API. Use when writing or running tests in a Vite-based project (React, Vue, Svelte, vanilla TS/JS), migrating from Jest, benchmarking code, testing browser APIs with jsdom/happy-dom, or needing in-source testing. Native ES modules, TypeScript, and JSX support with zero config. Pairs with test-driven-development for the methodology.
-
zaosusu Bundle Schedule Onepager Skill把零散进来的行程信息归档成一张排期表,并在被明确要求时发送到使用者自己的邮箱;另含独立的「今日 TODO」与「每日历史记录」两种模式。一个 skill、一个 SQLite(personal.db,三张表:schedule / todo / history)、一个统一 CLI(personal.py);HTML 只作导出视图。当使用者提供新行程(群公告截图、海报、赛事须知、约谈安排、口述日程)、要求查看/修改排期、说「今日待办」「我的 TODO」「今天做这几件事」「今天做了什么」「记录一下」「历史记录」时使用。不负责订票订房、不做冲突风险分析、不主动发邮件。
-
stanfish06 Bundle Show MeHelp the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts.
-
stanfish06 Bundle Atac SeqATAC-seq processing with assay QC, MACS3 peak calling, consensus peak matrices, differential accessibility, and motif or footprint follow-up.
-
pretend-to Skill Anyui Template AuthoringAuthor and invoke high-quality, mobile-first AnyUI HTML templates for MioChat. Guides the creation of clean, responsive cards, game interfaces, forms, story choices, and Galgame/visual novel dialogue cards rendered via extraRender in Shadow DOM. Enforces decoupled zero-round-trip async image rendering (pure CSS skeleton fluid aura backgrounds + WebSocket auto-fill), global template repository (gal_dialogue_card), mobile-first UI standards, 44px touch targets, template syntax ({{var}}, {{#each}}), and Shadow DOM APIs (window.__mio.sendText / setInput / previewImage). Trigger when the user asks to build, design, modify, or author AnyUI templates/cards/interfaces.
-
stanfish06 Bundle HtmxHTMX development guidelines for building dynamic web applications with minimal JavaScript using HTML attributes.
-
stanfish06 Skill JestJavaScript testing with Jest — unit tests, mocks, spies, snapshot testing, code coverage, and configuration. Use when writing or running JavaScript/TypeScript tests, setting up a test suite with Jest, debugging failing tests, mocking modules or functions, measuring coverage, or configuring Jest in jest.config.*. Pairs with test-driven-development for the workflow/methodology. Works with React (Testing Library), Node.js, and any JS/TS project.
-
deadmade Bundle HallmarkWEB FRONTEND ONLY: use solely for browser UI work (HTML/CSS, React/Vue/Svelte/Astro pages and components); never for CLIs, backends, libraries, or non-web apps (e.g. Rust, Python, Go), even when asked for a new app. Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study.
-
stanfish06 Skill CrewaiRole-based multi-agent orchestration framework for building "Crews" of collaborating LLM agents (each with a role, goal, backstory, and optional tools) that execute sequential or hierarchical task pipelines, plus event-driven "Flows" for precise, single-LLM-call orchestration. Use when composing specialized agents (e.g. a research agent + an analysis agent + a writer agent) into a declarative pipeline for complex multi-step tasks like automated literature review or multi-agent research workflows. Distinct from LangGraph's explicit state-machine graphs and smolagents' minimal tool-calling loop — CrewAI is standalone (no LangChain dependency) and expresses orchestration as roles and delegated tasks rather than a graph or a single ReAct loop.
-
stanfish06 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, etc.). 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.
-
stanfish06 Bundle GeistdocsExpert guidance for Geistdocs, Vercel's documentation template built with Next.js and Fumadocs — MDX authoring, configuration, AI chat, i18n, feedback, deployment. Use when creating documentation sites, configuring geistdocs, writing MDX content, or setting up docs infrastructure.
-
stanfish06 Skill StreamlitBuilding data apps and dashboards in Python with Streamlit — the top-to-bottom rerun model, st.session_state, caching with st.cache_data/st.cache_resource, forms and st.fragment to limit reruns, multipage apps via st.Page/st.navigation, chat UIs (st.chat_message/st.chat_input), dataframe/plot display, and deployment with streamlit run. Use when building an interactive dashboard, internal data tool, model demo, or chat frontend in pure Python, or when debugging unexpected reruns, lost widget state, or slow Streamlit apps.
-
stanfish06 Bundle EpigeneticistExpert-thinking profile for Epigeneticist (epigenomic assays / ChIP-CUT&RUN-ATAC / bisulfite methylation (EWAS) / 3D genome (Hi-C) / epigenome editing (dCas9)): Reasons from chromatin state, DNA methylation, histone marks, accessibility, and 3D genome topology through ChIP/CUT&RUN, ATAC-seq, WGBS/EM-seq, Hi-C, and dCas9-DNMT3A/KRAB perturbation while treating cell-composition shifts, batch confounding, antibody nonspecificity, Tn5 bias, and incomplete bisulfite conversion as...
-
stanfish06 Bundle Game PlaytestRun browser-game playtests and frontend QA. Use when the user asks for smoke tests, screenshot-based verification, browser automation, HUD or overlay review, or structured issue-finding in a browser game.
-
stanfish06 Bundle Green ChemistExpert-thinking profile for Green Chemist (process R&D / pharmaceutical & fine- chemical manufacturing / sustainable design): Reasons from Anastas–Warner 12 principles, Trost atom economy, and PMI/MMI/E-factor mass metrics; selects solvents via CHEM21/GSK/ACS GCIPR guides, integrates catalysis and LCA (ISO 14040), and aligns REACH/CSS with ACS GC&E benchmarking.
-
stanfish06 Bundle Agents SdkBuild AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.
-
stanfish06 Bundle Nature ReaderBuild full-paper Chinese-English side-by-side, figure/table-aware, source-grounded Markdown readers for journal or conference papers from PDF, DOI, arXiv, publisher HTML, or pasted text. Use whenever the user asks to translate or read a paper, make 中英文对照/原文对照/全文翻译解读, extract figures or tables into the right positions, preserve figure/table placement near relevant prose, or keep exact source anchors for every block. This skill must not degrade into a summary-only output unless the user explicitly asks for a summary. Also trigger on general paper-reading and translation requests even without the word "Nature", such as reading/translating an academic paper, literature reading, understanding a paper, and Chinese phrasings like 读论文、精读论文、论文翻译、文献翻译、文献阅读、学术阅读、帮我读这篇文章、翻译这篇paper.
-
stanfish06 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.
-
stanfish06 Bundle Crop ScientistExpert-thinking profile for Crop Scientist (field trials / agronomy / crop physiology / G×E×M / MET stability analysis): Reasons from genotype-by-environment-by-management interaction, yield-component partitioning, and phenology-gated critical periods through MET stability analysis (AMMI, Finlay-Wilkinson, GGE biplots), mixed models (ASReml-R, lme4), N-response curves (quadratic-plateau, MRTN), and crop models (APSIM, DSSAT) while...
-
stanfish06 Bundle Dagster ExpertExpert guidance for working with Dagster and the dg CLI. Use before doing any task that requires knowledge specific to Dagster, or that references assets, materialization, components, data tools or data pipelines. Common tasks may include creating a new project, adding new definitions, understanding the current project structure, answering general questions about the codebase (finding asset, schedule, sensor, component or job definitions), debugging issues, or providing deep information about a specific Dagster concept.
-
stanfish06 Bundle Multiqc ReporterAggregates QC reports from any bioinformatics tool outputs (FastQC, fastp, STAR, Picard, samtools, etc.) into a single MultiQC HTML report plus a ClawBio markdown summary with per-sample QC metrics.
-
stanfish06 Bundle Medicinal ChemistExpert-thinking profile for Medicinal Chemist (lead optimization / SAR / DMPK & ADME / structure-based design / multiparameter (LLE, Fsp3, TPP)): Reasons from structure- activity relationships, lipophilicity and unbound-fraction physicochemistry, synthetic accessibility, and target-product-profile multiparameter optimization through LLE/Fsp3/QED scoring, FEP+/Glide docking validated against co-crystal and SPR data, ELN-tracked LC-MS/NMR synthesis, and DMPK...
-
stanfish06 Bundle Game UI FrontendDesign UI surfaces for browser games. Use when the user asks for HUDs, menus, overlays, responsive layouts, or visual direction that must protect the playfield.
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 captions, subtitles, deploy. 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.