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.
-
telerik Bundle Manage HTML A11YCreate or update ARIA accessibility annotations and validate WCAG compliance for a Kendo UI component. Reads the component spec, writes @aria/@keyboard/@ux/@see JSDoc annotations, applies attributes to TSX templates, and validates with the axe-core test runner. Use this skill when the user wants to add accessibility support, fix ARIA violations, document keyboard shortcuts, or ensure WCAG 2.2 Level AA compliance.
-
telerik Bundle Manage ComponentsCreate or update a Kendo UI component across kendo-themes packages. For new components, scaffolds core skeleton with null variables, theme overrides for targeted themes, HTML spec, templates, visual tests, and unit tests. For existing components, audits the current state, produces a change plan, and applies SCSS variable changes, layout/theme updates, HTML spec modifications, and test additions. Use this skill when the user wants to add a new component, update a component's design, change styling values, add new states or options, or align a component with design assets.
-
telerik Skill Manage HTML SpecsCreate or update an HTML component specification (.spec.tsx) in the HTML package. Defines the component's TypeScript types, options, states, render function, constants, and index exports. Use this skill when the user wants to create a new HTML spec, add states/options to a component, or modify a component's HTML structure.
-
telerik Skill Manage HTML TestsCreate or update visual test scenarios for a Kendo UI component in the HTML package. Creates TSX test files that exercise component states, variants, and edge cases for screenshot-based visual regression testing. Use this skill when the user wants to add test coverage, create visual tests, or ensure a component has proper test scenarios.
-
telerik Skill Manage Scss StylesCreate or update SCSS layout mixins, theme mixins, module entry points (_index.scss), and registration in theme entry points for a Kendo UI component. Covers the full component SCSS lifecycle — structural styles, visual styles, wiring, and registration. Use this skill when the user wants to change a component's CSS structure, add visual states, create the style skeleton for a new component, wire up dependencies, or register a component in a theme.
-
telerik Skill Manage HTML TemplatesCreate or update reusable HTML templates for a Kendo UI component in the HTML package. Templates are preset configurations of a component spec, used by visual tests and documentation. Use this skill when the user wants to add a template variant, create a preset configuration, or add a reusable component shorthand.
-
telerik Skill Manage Scss VariablesCreate or update SCSS variables for a Kendo UI component — null declarations in core and concrete overrides in targeted theme packages. Handles SassDoc comments, @forward maps, and theme-specific conventions (Fluent CSS custom properties). Use this skill when the user wants to add, change, or remove a component variable.
-
th0rgal Skill Rich File SharingShare files and images inline using <image> and <file> component syntax for rich previews in the UI.
-
thisisahsaniqbal Skill Core Web VitalsAudits HTML patterns that affect Core Web Vitals (LCP, CLS, INP). Checks for layout shift causes, largest contentful paint blockers, and interaction responsiveness issues. Use when optimising page performance or fixing Google PageSpeed Insights warnings.
Audited -
thisisahsaniqbal Skill Site Speed OptimizationAudits stylesheet loading, inline CSS volume, image alt text, image formats, and Next.js Image component usage. Use when checking page speed related to HTML structure. For render-blocking scripts, image dimensions, lazy loading, and resource hints, see the core-web-vitals skill.
Audited -
unbias38 Bundle Course Handout互動課程講義網頁產生器——把任何「分部驟實作」的課程做成單檔 HTML 講義(Artifact):單元收合、提示詞一鍵複製、可打勾驗收清單、術語浮動說明、五色畫筆標註、結業證書、Markdown 下載。只要使用者想把課程、教學流程、工作坊、研習、實作步驟「做成網頁/講義/教材頁」,或提到 講義、教材、handout、workshop、上課用的頁面、學員跟著做,即使沒有明說「講義」也應使用本 skill;使用者只有課程構想、只有專案程式碼(要逆向反推教學步驟)、或教的不是 AI(Excel、Canva 等分步驟教學)時同樣適用。
-
unbias38 Bundle Codelab HandoutConvert lecture content into Google Codelabs-style single-file HTML handouts. Strongly opinionated visual design (Google blue, Codelabs aesthetic, per-step duration markers, sticky sidebar TOC, font/width/ theme toggles, code copy buttons). Triggers ONLY when the user explicitly mentions "codelab" / "Codelabs" — e.g. "做成 codelab 樣子的 網頁", "轉成 codelab 講義", "Codelabs-style handout", "codelab-handout", "Google Codelabs 風的講義". For generic "convert docx/md/pptx to a web page" without the codelab keyword, use teaching-handbook instead. This skill is for users who want the specific Codelabs look-and-feel, including time-budgeted step structure (5–8 sections, each with Duration). Accepts markdown directly; for docx/pdf/pptx, convert via markitdown first. The build script enforces output saved OUTSIDE the skill folder.
-
unbias38 Bundle Music Disc Video把一首歌做成旋轉碟片配同步滾動歌詞的視覺:輸出可雙擊播放的單一 HTML (圖與音樂內嵌)和/或 MP4 影片。六套版面:16:9、9:16、1:1, 各有含歌詞與純音樂兩種。素材需要封面圖(正方形)+ mp3 + 歌詞 (.srt / .lrc / 純文字皆可,沒有時間軸會產生對時工具)。 當使用者想把歌曲做成可分享的視覺、歌詞影片或碟片動畫時使用。 觸發語:把這首歌做成有歌詞的影片、音樂碟片、旋轉唱片 歌詞、歌詞影片、 做一個音樂視覺化、把 mp3 做成影片、IG 限動音樂動畫、短影音 音樂 歌詞、 lyric video、music disc video、music visualizer。
-
unbias38 Bundle Teaching Handbook將 Word (.docx)、Markdown (.md) 或 PowerPoint (.pptx) 教學講義轉成「側邊欄導航風格」的高畫質 HTML 網頁。使用時機:使用者說「上架教材」「上架講義」「教材轉網頁」「講義轉網頁」「轉成側邊欄導航風格」「轉成側邊欄網頁」「把這份 .docx/.md/.pptx 轉 HTML」,或提供 .docx/.md/.pptx 檔案並要求產出教學網頁時。產出包含固定側邊欄目錄、Scroll Spy、字體縮放、程式碼複製按鈕、自動保留 Word 文字顏色等互動功能。若使用者指名 codelab / Codelabs 風格,改用 codelab-handout skill;本 skill 走忠實機械轉檔路線、不做視覺重設計。
-
unrealxu Bundle Ue5 Cpp GameplayUE5.6-UE5.8 gameplay C++ implementation for Actors, Components, DataAssets, and gameplay logic. Use when requests ask to write .h/.cpp pairs, expose UPROPERTY/UFUNCTION to Blueprint, use GameplayTags, or build reusable component-based systems.
-
involvex Bundle TauriAssists with building lightweight cross-platform desktop (and mobile) applications using Tauri. Use when creating small, fast, secure apps with a web frontend and Rust backend that use the system webview instead of bundling Chromium. Trigger words: tauri, rust desktop, system webview, tauri commands, tauri plugins.
-
involvex Bundle Hula SkillHuLa project skill for frontend (Vue 3 + Vite + UnoCSS + Naive UI/Vant), backend (Tauri v2 + Rust + SeaORM/SQLite), full-stack flows, and build/release work. Use when the user mentions hula or HuLa or requests changes in this repository; after triggering, ask which scope (frontend/backend/fullstack/build-release) to enable.
-
involvex Bundle Lightc ReleasePrepare LightC release metadata and documentation. Use when the user asks to publish a new version, bump LightC version numbers, update CHANGELOG.md, update .github/workflows/release.yml, update README.md release notes, or avoid repeating the same release-document prompts for this Tauri + React project.
-
involvex Bundle Tauri Devtools用于调试 Tauri 应用的 MCP 工具集,提供截图、DOM 检查、元素交互、IPC 监控等功能。Use when working with Tauri applications for: (1) Debugging UI issues with screenshots and DOM inspection, (2) Automating UI interactions like clicks and input, (3) Monitoring IPC communication between frontend and backend, (4) Managing Tauri windows and sessions, (5) Reading console and system logs.
-
involvex Bundle Rust Tauri AppsImplicit Rust Tauri v2 skill. Use for Tauri apps, Rust commands, invoke contracts, app state, plugins, capabilities and permissions, secure IPC, filesystem and shell access, sidecars, updater, bundling, desktop and mobile distribution, and Rust frontend bridge design.
-
code-yeongyu Skill Svelte5 RunesSvelte 5 runes system for reactive state management and side effects
-
code-yeongyu Skill Svelte PatternsCommon Svelte patterns, best practices, and mistakes to avoid
-
pedronauck Skill Alpine JSAlpine.js development guidelines for lightweight reactive interactions with Tailwind CSS and various backend frameworks.
-
sagev1 Bundle Makepad WidgetsCRITICAL: Use for Makepad widgets and UI components. Triggers on: makepad widget, makepad View, makepad Button, makepad Label, makepad Image, makepad TextInput, RoundedView, SolidView, ScrollView, "makepad component", makepad Markdown, makepad Html, TextFlow, rich text, 富文本, markdown渲染, makepad 组件, makepad 按钮, makepad 列表, makepad 视图, makepad 输入框
-
yniantongtian-oss 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.
-
classroomio 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 -
classroomio Bundle Create ThumbnailGenerate on-brand ClassroomIO thumbnails (blog posts, changelogs, YouTube videos) as 1920×1080 PNGs. Builds HTML+CSS from the brand token system and renders deterministically via headless Chrome. Use when the user asks to create/make a thumbnail, cover image, or video/blog banner for ClassroomIO.
-
karuhi Bundle Ordito GenerateExplicitly (re)generate Ordito HTML pages from IR + template contract + collection, and stamp meta.generated_at. This is the heavy, explicit "反映(再生成)" step — run it ONLY after the user has agreed to reflect changes (e.g. "反映しますか?" → yes). It can regenerate everything, only specific page ids, or only stale pages (only:"stale"). It MUST NOT be run as a side effect of updating IR — updating (ordito-update-block) never triggers generation (spec §5.4). The calling agent owns the confirmation; this skill just generates and returns a report.
-
karuhi Bundle Ordito ValidateValidate Ordito IR documents and/or generated HTML against the spec's machine checks (§6.1) — JSON Schema conformance of the IR, field_map coverage (unmapped-field detection, §4.4), and, if an output dir is given, the generated fragment's allowed-class/tag/attribute compliance plus a deterministic IR-fidelity check. Read-only. Use it to confirm quality before recording a change or after regenerating (反映前後の品質確認). Returns a JSON report; does not fix or confirm anything.
-
karuhi Bundle Ordito Add BlockInsert a NEW block into an existing Ordito IR document. Use this when the user has agreed to add a new piece of content (a paragraph, code sample, note, table, step, etc.) to a page that already exists — as opposed to editing an existing block (ordito-update-block) or creating a whole new page (ordito-create-page). Inserts the block at append/at/after/before a sibling, or inside a tab, auto-assigns a unique block id if omitted, validates the result, and bumps meta.updated_at. Does NOT regenerate HTML (ordito-generate is separate) and does NOT ask for confirmation; the calling agent owns that.
-
karuhi Bundle Ordito Move BlockReorder or re-parent an existing block within an Ordito IR document (write to the IR store). Use this when the user wants to change the ORDER of content on a page, or move a block into/out of a tab — without changing the block's content. Moves exactly one existing block by id to a new position (at/after/before a sibling, or inside a tab), validates the result, and bumps meta.updated_at. Does NOT regenerate HTML (ordito-generate is separate) and does NOT ask for confirmation; the calling agent owns that.
-
karuhi Bundle Ordito Create PageCreate a NEW Ordito IR document (a new docs page) in the IR store. Use this when the user has agreed to add a brand-new page to the docs (not edit an existing one) — e.g. "新しいページを作る" / "○○のガイドを追加". Writes one new IR document by logical id, sets meta.title and meta.updated_at, leaves generated_at null, and can optionally place the page into the collection nav in the same call. Refuses if the id already exists or is the reserved "index". Does NOT regenerate any HTML (generation is the separate ordito-generate step) and does NOT ask for confirmation itself; the calling agent owns that decision.
-
karuhi Bundle Ordito Delete PageDelete a whole Ordito IR document (page) from the store. Use this when the user has agreed to remove an entire page from the docs. Deletes the IR file and, by default, also removes the page's entry from the collection nav (pruning now-empty groups). Already-generated out/<id>.html is NOT deleted (it just stops being regenerated) — the skill notes this. Does NOT regenerate HTML (ordito-generate is separate) and does NOT ask for confirmation itself; the calling agent owns that decision.
-
karuhi Bundle Ordito Detect StaleList Ordito IR documents whose content has changed since their last HTML generation (updated_at is newer than generated_at, or never generated). Read-only; touches nothing. Use this to gather material for asking the user "未反映が N 件あります。反映(再生成)しますか?" before deciding whether to run ordito-generate. Returns a JSON list of stale pages with their timestamps. Does not generate, does not confirm — the calling agent presents the result and asks.
-
karuhi Bundle Ordito Remove BlockDelete one block from an existing Ordito IR document (write to the IR store). Use this when the user has agreed to remove a specific piece of content from a page — a now-obsolete note, paragraph, code sample, etc. Removes exactly one block by id (including blocks nested inside tabs), validates the remaining document, and bumps meta.updated_at. Does NOT regenerate HTML (ordito-generate is the separate step) and does NOT ask for confirmation itself; the calling agent owns that decision.
-
kbravh Bundle Tanstack QueryTanStack Query (React Query) v5 best practices for data fetching, caching, and mutations. Use when fetching server data with useQuery, setting up mutations with useMutation, configuring caching strategies, managing query keys, handling optimistic updates, invalidating queries, or integrating TanStack Query into a React/TypeScript project. Triggers on "React Query", "TanStack Query", "useQuery", "useMutation", "query keys", "stale time", "cache invalidation", "optimistic update", "prefetch", "infinite query".
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 teaching-handbook, manage-html-a11y, manage-components. 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.