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.
-
ai-riksarkivet Bundle Shadcn Svelte SkillBuild accessible, customizable UI components for SvelteKit 2 / Svelte 5 projects using shadcn-svelte, Tailwind CSS v4, Deno, Storybook, Lucide icons, LayerChart, and motion-sv. Use when creating component-based Svelte applications that need production-ready, styled UI elements. Also covers Skeleton UI and Melt UI for library selection, Storybook for component dev, LayerChart for data visualization, and Lucide for icons. Triggers: "add components", "UI components", "build UI", "install component", "create form", "create dialog", "svelte components", "shadcn-svelte", "skeleton ui", "melt ui", "storybook", "component story", "chart", "visualization", "layerchart", "bar chart", "line chart", "pie chart", "icon", "lucide", "add icon", "tailwind", "tailwind config", "theme", "dark mode", "animation", "motion", "motion-sv", "framer motion", "animate", "transition", "gesture", "whileHover", "exit animation"
-
thestratcore Bundle HTML CoderExpert HTML development skill for building web pages, forms, and interactive content. Use when creating HTML documents, structuring web content, implementing semantic markup, adding forms and media, working with HTML5 APIs, or needing HTML templates, best practices, and accessibility guidance. Supports modern HTML5 standards and responsive design patterns.
-
thestratcore Bundle Stratcore Website InspectionInspect a live website for content, claims, structure, brand-voice, visual, and accessibility issues and produce a ranked punch-list. Use when the user asks to review / inspect / audit / evaluate a website, web page, or site, or to re-check a page after a patch, or gives a URL and asks "what's wrong with this page" or "how do I improve this page". Requires a Playwright MCP server for the visual pass. Reports in-thread; only writes findings to a file when asked.
-
thestratcore Bundle HTML Ppt Zhangzara MonochromeBuild an HTML slide deck in the "funded PI" monochrome grant-review style — hypothesis, approach, milestones, risk, organized as a decision-grade academic research brief. Use for any grant proposal, research review deck, or committee-facing brief, regardless of subject matter (the bundled example.html happens to cover CRISPR base-editing for sickle-cell disease, but that is just a sample, not the trigger topic).
-
caikiji Bundle Cardify用户要求把分析输出做成卡片时启用(消息含触发词:卡片化、卡片模式、用卡片总结、浓缩成卡片、卡片化分析)。将代码分析结果切成 3~8 张互相索引的卡片写入 .temp/cardify/,并用 scripts/build_html.py 校验或构建单文件 HTML 视图(三视图+关系图,可反推)。不含触发词的普通分析任务不启用。
-
paulrberg Bundle Frontend DesignUse when creating or substantially redesigning web interfaces, landing pages, dashboards, components, or other frontend UI where visual direction and implementation quality matter. Produces subject-specific art direction, accessible responsive code, and rendered visual verification.
-
leobbaroni Bundle Video ShotcraftCreate cinematic product videos from shot recipe cards, a validated template, and code/audio assets (Remotion + real page screenshots + 2.5D camera moves + beat-synced cuts + sound design). Use when the user asks to turn a frontend project or webpage into a product video, says "use video-shotcraft to make a video/promo", names the Ink Press template or asks to reproduce its effect, or wants a single shot card's motion. 用镜头配方卡 + 已验收模板 + 代码/音频资产制作电影感产品视频(Remotion + 真实页面截图 + 2.5D 运镜 + 节奏卡点 + 声音设计)。当用户要求"用 video-shotcraft 做视频/宣传片"、把前端项目/网页做成产品视频、点名 Ink Press 模板或要求复刻模板片效果,或要用镜头卡做单个动效镜头时使用。
-
leobbaroni Bundle CSS NativeZero-dependency animations and visual techniques - scroll-driven, View Transitions, @starting-style, modern CSS.
-
leobbaroni Skill Design AuditDesign audit checklist - motion gaps, accessibility, color consistency, responsive, performance.
-
leobbaroni Bundle Motion PrinciplesMotion design foundation - timing, easing, enter/exit patterns, accessibility, performance.
-
leobbaroni Bundle Higgsfield WebsitesBuild, edit, and deploy full-stack websites, apps and games via the Higgsfield CLI (`higgsfield website …`). Each is a React 19 + TanStack Start SSR app in one Cloudflare Worker (D1/R2/KV/DO/Containers). THREE product types, picked via `--type` on create: `website` (standalone, no Higgsfield integration — references/website-flow.md), `app` (Sign in with Higgsfield + fnf SDK, Quanta — references/app-flow.md), `game` (realtime multiplayer rooms — references/game-flow.md). Routes to the right flow; each carries its own rules and deploy/publish gates. Use when: "build me a website", "make a landing page", "create a web app", "build a SaaS dashboard / portfolio", "make me a game", "deploy this site", "publish". Also owns GAME ART: "make a spritesheet", "tileable texture", "animate a 3D character", game music/SFX — see the game-* references. NOT for: single image/video/audio generation (higgsfield-generate), product photos (higgsfield-product-photoshoot), marketplace cards (higgsfield-marketplace-cards).
-
zircote-plugins Bundle Frontend Dev GuidelinesFrontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.
-
angelburgosrosado Bundle Shopify LiquidLiquid is an open-source templating language created by Shopify. It is the backbone of Shopify themes and is used to load dynamic content on storefronts. Keywords: liquid, theme, shopify-theme, liquid-component, liquid-block, liquid-section, liquid-snippet, liquid-schemas, shopify-theme-schemas
-
neuralblitz Bundle Javascript SdkJavaScript/TypeScript SDK for inference.sh - run AI apps, build agents, integrate 250+ models. Package: @inferencesh/sdk (npm install). Full TypeScript support, streaming, file uploads. Build agents with template or ad-hoc patterns, tool builder API, skills, human approval. Use for: JavaScript integration, TypeScript, Node.js, React, Next.js, frontend apps. Triggers: javascript sdk, typescript sdk, npm install, node.js api, js client, react ai, next.js ai, frontend sdk, @inferencesh/sdk, typescript agent, browser sdk, js integration
1 -
lora-sys Bundle HTML Stable Publish当最终交付物是单页 HTML 或静态 HTML/CSS/JS 页面时,使用 Postplan 发布可访问、可更新的 HTML draft。适用于“部署 HTML”“发布页面”“给我一个可打开的链接”;默认使用本机 Postplan 凭据,不把 key 写入产物。
-
lora-sys Bundle Teaching HTML Story DeckCreate or upgrade standalone interactive teaching HTML story decks with problem-first narrative, content-specific inline SVG diagrams, presenter notes, keyboard navigation, responsive layout, and accessibility checks. Use for teaching HTML, 讲解页, 教学网页, 教学演示, story deck, explainer webpage, course page, 架构可视化, 产品/系统设计 walkthrough, 升级既有 HTML 演示页, 出一份 HTML 报告, B 站/抖音讲解页. Do not use for: copying a single short article to HTML, marketing landing pages without a teaching arc, dashboards, or any task whose output is not a self-contained HTML file. Default delivery contract: after producing the deck, automatically hand it to html-stable-publish for anonymous-drop hosting and return the public link as part of the deliverable; only fall back to local-file-only / postplan when the user explicitly asks for it.
-
lora-sys Bundle Web Development Team Playbook团队级 Web 开发工作手册。凡涉及创建、改造、调试、审查、优化、发布准备或部署 Web 网站、Web 应用、前端或全栈 Web 项目时必须使用。涵盖 Next.js、Vite、TanStack Start、Vite+、TanStack、Effect 与 React Three Fiber 的选型,方案先行、严格隔离对抗审查、质量验收、Git/PR 和部署确认门禁;不用于纯原生移动端、纯后端服务或桌面软件。
-
lora-sys Skill Static Site Experience ReleaseAudit, refine, validate, and release an existing static personal, portfolio, or blog site with a branch-first workflow. Use when users request experience or interaction improvements, content-fact alignment, performance/accessibility review, analytics or GitHub Discussions integration, GitHub Pages deployment, or production acceptance for an Astro/static GitHub repository.
-
srinandan Skill Concise CodeEngineering conventions for concise, maintainable code — avoiding premature abstraction, dead code, and swallowed errors. Use when writing or reviewing any Python, Go, TypeScript, or Vue code in this repository.
-
srinandan Skill Unit TestingTesting conventions for this repo — table-driven Go tests for pkg and frontend server, pytest conventions for the orchestrator, fakes for external calls, coverage expectations for golden and error paths. Use when writing or reviewing any new function, handler, or component with logic beyond pure markup.
-
srinandan Skill Code CoverageCoverage targets and exclusions for this repo (Python for the orchestrator, Go for pkg and frontend server), and why coverage should be treated as a signal rather than a target. Use when assessing whether a change has adequate test coverage, or when coverage drops in CI.
-
yknothing Bundle Bs Uml MasterUse when creating, revising, or reviewing UML or architecture diagrams — class, sequence, state machine, activity, component, deployment, use case, ER, or C4 — from a codebase or a design, where diagram-type fit, semantic correctness, abstraction discipline, and render-verified delivery matter.
-
lidessen Skill Frontend InitInitialize frontend projects with opinionated modern toolchain - Bun (package manager), Oxfmt (formatter), Oxlint (linter), tsdown (npm bundler), tsgo (type checker). Use when creating new frontend/TypeScript projects, setting up project tooling, or mentions "init project", "new frontend", "setup tooling".
-
composio-community Bundle Reddit ResearcherDeep-dive subreddits to extract product feedback, pain points, and PMF signals on any topic or product. Searches relevant communities, scrapes posts and comment threads, clusters findings into themes (pricing, performance, missing features, competitor gaps, love signals), and ships an HTML report + CSV plus a concise opportunity brief grounded in real user quotes (with URLs).
-
devenkhatri Skill Generate VideoUse when someone asks to create a video from text, HTML, a YouTube URL, a PDF, or an image. Converts multimodal inputs (HTML files, raw text, YouTube URLs, PDFs, or Images) into an automated video sequence using the local Hyperframes framework. This skill orchestrates data extraction, script generation, and programmatic video rendering.
-
devenkhatri Bundle Storm ResearchUse when someone asks to run Storm Research, use the storm-research skill, run the STORM method on a topic, says "storm research this" / "storm report on X" / "give me a STORM briefing on X", or wants a multi-perspective, citation-verified HTML research briefing on a topic. Runs a 4-phase pipeline: five expert lenses (Practitioner, Academic, Skeptic, Economist, Historian) -> contradiction map -> synthesized HTML report -> adversarial peer review + primary-source verification. Best for topics where multiple viewpoints and fact-checked claims matter; overkill for a simple factual lookup.
-
devenkhatri Bundle Codebase To DemoTurn any codebase or automation implementation into a beautiful, interactive single-page HTML demo deck for non-technical buyers and decision-makers. Use this skill whenever someone wants to create a client-facing demo, implementation showcase, pitch deck, or sales presentation from a codebase or project. Also trigger when users mention 'create a demo for this,' 'make a pitch deck from this codebase,' 'show this to a client,' 'explain this implementation to a non-technical audience,' 'demo deck,' 'showcase this automation,' or 'create a client presentation from this project.' This skill produces a stunning, self-contained HTML file with scroll-based modules, animated architecture maps, before/after comparisons, sequence diagrams, integration maps, and a deployment overview — all framed around business value, not technical learning.
-
devenkhatri Bundle Codebase To CourseTurn any codebase into a beautiful, interactive single-page HTML course that teaches how the code works to non-technical people. Use this skill whenever someone wants to create an interactive course, tutorial, or educational walkthrough from a codebase or project. Also trigger when users mention 'turn this into a course,' 'explain this codebase interactively,' 'teach this code,' 'interactive tutorial from code,' 'codebase walkthrough,' 'learn from this codebase,' or 'make a course from this project.' This skill produces a stunning, self-contained HTML file with scroll-based navigation, animated visualizations, and code-with-plain-English side-by-side translations.
-
devenkhatri Bundle Readme To PresentationUse when someone asks to turn a GitHub README into a presentation, convert a GitHub repo to slides, create an HTML deck from a README, or generate a presentation from a GitHub URL. Accepts GitHub repo URLs (https://github.com/user/repo) or raw README URLs.
-
davideast Bundle Pyric Inpage SandboxEmbed Pyric's in-page Firestore, Storage, and Auth sandbox directly into standalone HTML pages, browser widgets, or UI artifacts without a CLI, backend, or Vite dev server. Use when building client-only prototypes, standalone HTML artifacts, or browser demos that require a functioning local Firestore and Storage database with real-time listeners, security rules, and document seeding. Don't use when developing a standard Vite or Node application (use pyric instead) or when auditing an existing Firebase app (use improve-firebase).
-
farming-labs Skill Ask AIConfigure the Ask AI (RAG-powered AI chat) in @farming-labs/docs. Use when enabling AI chat, setting mode (search vs floating), floatingStyle (panel, modal, popover, full-modal), position, providers, models, suggestedQuestions, apiKey, systemPrompt, maxResults, useMcp, feedback, or onActions. Covers Next.js, TanStack Start, SvelteKit, Astro, Nuxt, and env vars.
-
farming-labs Bundle Configurationdocs.config.ts options for @farming-labs/docs. Use when configuring entry, contentDir, theme, staticExport, navigation, search, feedback, agent surfaces, MCP, API references, review, metadata, or framework-specific config wiring for Next.js, TanStack Start, Farm.js, SvelteKit, Astro, and Nuxt.
-
farming-labs Bundle Getting StartedGet started with @farming-labs/docs — MDX-based documentation for Next.js, TanStack Start, Farm.js, SvelteKit, Astro, and Nuxt. Use when setting up docs, scaffolding with the CLI, choosing themes, changelog, API reference, or writing docs.config. Covers init, manual setup per framework, theme CSS, defineDocs, changelog, apiReference, entry, contentDir, and common gotchas.
-
farming-labs Skill Farming Labs DocsGet started with @farming-labs/docs — MDX-based documentation for Next.js, SvelteKit, Astro, and Nuxt. Use when setting up docs, scaffolding with the CLI, choosing themes, or writing docs.config. Covers init, --template, manual setup, and theme CSS.
-
foxminchan Bundle Aspireify**WORKFLOW SKILL** - Wire an Aspire AppHost after `aspire init` drops a skeleton. Scans the repo, proposes a resource graph, edits the AppHost (C#, file-based C#, or TypeScript), wires `Aspire.ServiceDefaults` + OTel, validates with `aspire start`, then self-deactivates. USE FOR: wire AppHost, scaffold resource graph, add Postgres/Redis/Rabbit/Mongo to Aspire, connect frontend to API, after `aspire init` what next, AddNextJsApp, AddViteApp, WithBrowserLogs, file-based apphost.cs, apphost.ts, unified withEnvironment, refuse .aspire/modules edit, migrate .env files, migrate user secrets. DO NOT USE FOR: skeleton drop (use aspire-init), start/stop/wait/restart (use aspire-orchestration), publish/deploy/destroy (use aspire-deployment), logs/traces (use aspire-monitoring). INVOKES: aspire CLI (add, start, wait, describe, docs api search, stop), AppHost source edits, ServiceDefaults wiring. FOR SINGLE OPERATIONS: Run `aspire add PACKAGE` directly for a one-off integration.
-
hazat Skill Visualize PlanTurns an existing implementation plan into a polished self-contained HTML page and opens it in the browser. Use when asked to "visualize a plan", "open this plan as HTML", "make this plan visual", or present a Markdown plan visually without changing its decisions.
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 javascript-sdk, shopify-liquid, cardify. 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.