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.
-
algolia Bundle Algolia CLIUse this skill whenever a user wants to execute operations against Algolia indices or accounts — deleting records, copying/migrating indices, backing up data, importing/exporting records, managing API keys, editing synonyms, configuring rules, changing settings like facets, clearing indices, or automating Algolia in CI/CD pipelines. The key signal is that the user wants to *act on* their Algolia data or configuration (server-side / backend / admin operations), regardless of whether they mention "CLI" or "command line." If someone names a specific Algolia index and wants to change, move, query, or manage it, use this skill. Do NOT use for frontend search UI work (InstantSearch, React components, autocomplete widgets), Algolia dashboard GUI questions, or evaluating Algolia vs. other providers.
-
algolia Bundle InstantsearchBuild production-quality search experiences (autocomplete, search results pages, faceted search) using InstantSearch. Use when user asks to add search, autocomplete, search-as-you-type, faceted filtering, or a search results page to a React, Vue, or vanilla JS application, or mentions Algolia, InstantSearch, or react-instantsearch. Do NOT use for backend index operations (records, synonyms, settings, API keys), use algolia-cli instead. Do NOT use for analytics, recommendations, or MCP server queries, use algolia-mcp instead. Do NOT use for AI/agent/conversational search, use algobot-cli instead.
-
algolia Bundle Algolia CrawlerUse this skill whenever a user wants to crawl one or more web pages or a whole site and turn them into an Algolia index using the Algolia CLI — especially for RAG, AI search, semantic search, or Agent Studio retrieval. Triggers: "index my website/docs with Algolia", "set up the Algolia Crawler", "crawl this page for RAG", "scrape my site into Algolia", "build a knowledge base for my AI agent from these URLs", writing or debugging a crawler recordExtractor, or handling JavaScript-rendered pages that won't index. It guides ingestion end-to-end with `algolia crawler` commands: inspect the page, write a RAG-optimized recordExtractor, validate with `algolia crawler test` BEFORE indexing, apply index settings explicitly, then reindex. Do NOT use for building the chatbot/agent layer itself (use algobot-cli), raw record/synonym/settings ops on an existing index (use algolia-cli), frontend search UI (use instantsearch), or read-only search/analytics (use algolia-mcp).
-
algolia Bundle Algolia MigrationMigrate existing Algolia API client code to a newer major version. Triggers on: upgrading algoliasearch, moving from initIndex to client methods, fixing "initIndex is not a function", updating imports after a version bump, handling breaking changes from v3→v4 or v4→v5, replacing .wait() chaining, or any mention of "migrate Algolia client", "upgrade Algolia SDK", or a specific old-to-new version (e.g. "Python v3 to v4", "JS v4 to v5"). Covers JavaScript, Python, Go, PHP, Java, C#, Ruby, Kotlin, Scala, Swift. Dart is a new client and is excluded from scope. Do NOT use for new project setup (use algolia-cli or algolia-mcp instead), InstantSearch / frontend frameworks, analytics queries, or recommendations.
-
algolia Bundle Algolia QuickstartUse this skill to set up and provision Algolia from scratch: create a new Algolia account, sign up, log in / authenticate the Algolia CLI, or provision a new application to obtain an App ID and API key. Trigger when a user is getting started with Algolia and has no account, no application, or no credentials yet — e.g. "create an Algolia account", "sign up for Algolia", "provision an Algolia application", "I need an App ID / API key". Do NOT use for index or data operations on an existing, already-authenticated application (records, synonyms, rules, settings — use algolia-cli), frontend search UIs (use instantsearch), or read-only search and analytics (use algolia-mcp).
-
algolia Bundle Algolia UI LibrariesLiving selector and reference workflow for current Algolia UI libraries. Use when choosing, installing, upgrading, implementing, or auditing InstantSearch.js, React InstantSearch, Vue InstantSearch, InstantSearch Android, InstantSearch iOS, Algolia for Flutter, Autocomplete, legacy Angular InstantSearch audits or migrations, DocSearch-style autocomplete, routing, SSR, events, mobile SDKs, framework integrations, UI examples, styling, performance, secured API keys, or frontend search library architecture. Do NOT use as a frozen API reference or package-version source; verify current docs. Do NOT use for full implementation once the library is selected; use algolia-instantsearch-ui, algolia-autocomplete, or the official instantsearch skill.
-
algolia Bundle Algolia Data ModelingAlgolia data modeling and indexing guidance. Use before or alongside indexing records or building Algolia search UI for net-new search, browse, autocomplete, ecommerce, personalization, Dynamic Re-Ranking, recommendations, or analytics-aware implementations. Makes record shape, objectID, display fields, facets, ranking fields, and event attribution explicit decisions. Use for records, variants, SKUs, indices, replicas, searchable and faceting attributes, denormalization, merchandising fields, timestamps, inventory, event attribution, indexing pipelines, partial updates, secured data, multi-language or multi-region strategies, and migrations. Do NOT use for live imports, exports, record mutations, settings changes, or account actions; use algolia-cli or algolia-mcp. Do NOT use for frontend UI implementation; use algolia-instantsearch-ui, algolia-autocomplete, algolia-ui-libraries, or the official instantsearch skill.
-
algolia Bundle Algolia Events InsightsAlgolia event instrumentation guidance for Insights, analytics, personalization, Dynamic Re-Ranking, Recommend, and merchandising feedback loops. Use for search, autocomplete, browse, ecommerce, personalization, recommendations, or analytics instrumentation. Makes event decisions explicit before an Algolia UI is considered ready. Use when implementing or auditing clickedObjectIDsAfterSearch, convertedObjectIDsAfterSearch, viewedObjectIDs, addedToCartObjectIDsAfterSearch, purchasedObjectIDsAfterSearch, userToken, queryID, eventName, eventSubtype, or frontend/backend event pipelines. Do NOT use for live analytics retrieval, top-query inspection, or account-aware diagnostics; use algolia-mcp. Do NOT use for framework-specific InstantSearch or Autocomplete APIs; use the official instantsearch skill alongside this planning and validation skill.
-
altafino Skill Kit VueVue 3 guardrails pack — reactivity loss, ref unwrapping, v-if/v-for precedence, compiler macros, plus UI state/a11y discipline. Use when writing Vue single-file components or composables.
-
altafino Skill Kit AngularAngular guardrails pack — signals, change detection, @for track, RxJS teardown, standalone defaults, plus UI state/a11y discipline. Use when writing Angular components, templates, or services.
-
altafino Skill Kit TailwindTailwind CSS guardrails pack — dynamic class purging, v4 CSS-first config, @apply/@reference, arbitrary values. Use when writing Tailwind utility classes or Tailwind configuration.
-
muend Bundle Cartography GeovizAlways invoke before answering any request to create, compare, design, or review a user-facing map, even if the request is terse or underspecified. Covers publication maps, choropleths, map series and small multiples, comparable multi-date panels, proportional/bivariate/flow maps, raster rendering, and interactive web maps. Includes classification, color, legends, projections, accessibility, and large-data aggregation. Do not trigger for a temporary diagnostic plot inside another analysis.
-
muend Bundle Movement TrajectoryMovement and trajectory analytics from GPS/GNSS tracks: cleaning, stop/trip detection, road-network map matching, speed/direction, flow aggregation, and origin-destination construction. Use for fleets, human mobility, animal tracking, AIS, or sports tracks. Trigger on GPS points, GPX, trajectories, stop detection, map matching, or timestamped positions per moving object. Also invoke for privacy, aggregation, de-identification, or release of individual trajectories. Use network-accessibility-analysis for hypothetical routes, isochrones, or static OD costs without observed tracks.
-
muend Bundle Mcda Suitability AnalysisAlways invoke for spatial suitability, site selection, AHP, criteria weights, or weighted-overlay work, including audits of inconsistent pairwise judgments and requests for only a final map. Covers consistency, standardization, constraints, ranked surfaces, shortlists, and sensitivity. Route travel-time placement and location-allocation to network-accessibility-analysis.
-
muend Bundle Network Accessibility AnalysisAlways invoke for access to facilities or opportunities by walking, driving, cycling, or public transport, even for a conceptual question with no routing terms or data yet. Covers hospital and service access, transit/GTFS, routes, isochrones, OD matrices, closest facility, 2SFCA, walkability, coverage, and equity. Invoke when Euclidean buffers proxy for network access. Use movement-trajectory for observed tracks and MCDA for suitability without network costs.
-
nicoladevera Bundle Presentation DeckCreates a slide narrative or generates a branded presentation file (.html, .pdf, or .pptx). Use when asked to "build a deck", "create slides", "make a presentation", "write a slide narrative", "turn this into a deck", "generate a PowerPoint", "generate an HTML deck", or "export as PDF".
-
open-edge-platform Skill UI Test UtilsUse when writing or updating Anomalib Studio UI component or hook tests that need the shared render/renderHook helpers, React Router paths or parameters, React Query, theme, URL-query, stream, suspense, or toast providers.
-
gigio1023 Bundle Write Internal DocUse only when the user asks for a document that colleagues will read without this session's context: a shared report, handbook, onboarding page, research write-up, decision or status memo, a Notion page, a shareable HTML file, or a shared copy of an existing document (사내 공유 문서, 리포트, 핸드북, 온보딩 문서, 조사 보고서, 결정 메모, 공유본, 노션에 올릴 문서), or names write-internal-doc. Shapes the document around one reader, keeps every claim traceable to a source a colleague can open, states what the records cannot show, runs a sharing pass before anything leaves the machine, and hands prose, Korean, figures, and Notion styling to the skills that own them. NOT for chat answers, plan files (gigio-write-plan), next-session prompts (session-handoff), PR or commit copy, external client deliverables, or prose polish alone (slop-aware-writing). Never activate because a conversation produced findings worth sharing or because an answer ran long.
-
gridaco Skill Dev Render Htmlcss FeatureManual-invocation only. Five-phase feature loop (audit → ground → fixture → implement → verify) for driving a single CSS feature to Chromium parity in the grida htmlcss renderer.
-
gridaco Skill Dev Render Htmlcss Svg FeatureManual-invocation only. Five-phase feature loop (audit → ground → fixture → implement → verify) for driving a single SVG feature to Chromium parity in the grida `htmlcss::svg` renderer. Sibling to `dev-render-htmlcss-feature` (HTML/CSS path); same loop shape, different corpus (resvg-test-suite + Chrome bake) and different scoring (multi-oracle: consensus / disputed / UB).
-
guerrilla2799 Skill Offer NegotiationUse when the user has an offer (or competing offers) in hand. Trigger phrases: "I got an offer", "help me negotiate", "should I take this?", "compare these two offers", "how do I counter?". Benchmarks total comp against market, breaks down every component, builds a weighted decision matrix, separates reversible from irreversible terms, and generates a counter-offer script plus a contract red-flags check. Never accepts or sends on the user's behalf.
-
hao-ai-lab Bundle Add ModelManual /add-model workflow for implementing a FastVideo model or first-class component port after add-model-01-prep has staged reference code and weights. Organizes the port into numbered phases with conversion rules, component policies, parity gates, and handoff checks.
-
hao-ai-lab Bundle Dreamverse DeployUse when redeploying the migrated Dreamverse app backend and frontend on a chosen local GPU; tears down existing ports, launches services, and waits for readiness checks.
-
hao-ai-lab Bundle Add Model 08 TraceUse during /add-model Phase 6 when component parity has failed and root cause requires layer-by-layer divergence analysis. Uses FastVideo activation trace first, falling back to custom hooks only for boundaries or stats the utility cannot observe.
-
hao-ai-lab Bundle Add Model 02 ParityUse during /add-model after reference/architecture study to scaffold and later activate local FastVideo component parity tests. Emphasizes early test creation, official-reference loading, standardized FastVideo loading, and non-skip handoff gates.
-
hao-ai-lab Skill Add Model 03 Port DitUse during /add-model Phase 4 or Phase 6 to prototype or parity-debug one FastVideo-native DiT/transformer component.
-
hao-ai-lab Skill Add Model 04 Port VaeUse during /add-model Phase 4 or Phase 6 to prototype or parity-debug one FastVideo-native VAE component.
-
hao-ai-lab Bundle Add Model 09 PipelineUse during /add-model Phase 7 after all required component parity tests pass to define FastVideo pipeline wiring, configs, presets, registry entries, examples, smoke tests, and pipeline parity tests.
-
hao-ai-lab Bundle Add Model 07 ConversionUse during /add-model Phase 5 to write and verify a FastVideo checkpoint conversion script after native component prototypes expose FastVideo state-dict keys/shapes.
-
hao-ai-lab Skill Add Model 05 Port EncoderUse during /add-model Phase 4 or Phase 6 to prototype or parity-debug one FastVideo-native text, image, audio, or compound encoder component.
-
hao-ai-lab Skill Add Model 06 Port GenericUse during /add-model Phase 4 or Phase 6 to prototype or parity-debug one non-DiT, non-VAE, non-encoder FastVideo component.
-
hao-ai-lab Skill Reseed Performance BaselineRe-seed the HF performance-tracking baseline for an intentional runtime, dependency, environment-caused benchmark shift, or reviewed v2 calibration using one or more reviewed normalized performance JSONs. Use when performance CI fails because metrics such as latency, throughput, component time, or peak memory changed for an accepted reason and the rolling median baseline in FastVideo/performance-tracking must be advanced, or when a new v2 exact comparable identity needs its first approved baseline. The workflow backs up existing history under /tmp, validates all source JSONs for the same legacy (model_id, gpu_type) target or the same v2 exact identity, rejects internally inconsistent source batches, uploads one success=true baseline record per accepted source JSON, and offers to clean local temp state after a successful upload.
-
idaibin Bundle UI SpecUse when a source-grounded candidate visual direction needs a local review spec and complete generation prompt, or a selected visual source or accepted UI surface must become a traceable Feature Spec or adopted Google DESIGN.md contract; route external-AI sending to ask-ai, visual generation to the host design capability, unresolved product behavior to product-spec, and source edits to dev-frontend.
-
idaibin Bundle Dev FrontendUse when an authorized frontend change must be implemented or refactored; owns frontend source edits and risk-matched validation, not audit-only work, UI specification, browser/client operation, or Git delivery.
-
idaibin Bundle Audit FrontendUse when a known frontend surface needs a scoped, read-only audit of selected architecture, reuse, data/UI contract, build/tooling, accessibility, performance, selected-source visual fidelity, or desktop-boundary profiles; use repo-review when a Worktree or immutable change basis needs coordination.
-
ihiteshgupta Skill UX DesignerExpert in user experience design, user research, wireframing, and design systems. Use for UX/UI design work, user flows, and accessibility.
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 ux-designer, algolia-cli, instantsearch. 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.