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.
-
seriawei 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.
-
seriawei Skill Convert To Cms TplConvert an design(Html pages in src/designs/<design-name> folder) to a ZKEACMS template. Use this skill when the user asks to convert a design to a CMS template.
-
seungyeop-lee Skill VersionupUse when bumping the beads-starter on-demand plugin version by major, minor, or patch component and committing the result.
-
taruvi-ai Bundle Taruvi FunctionsWrite Python function bodies that run inside Taruvi's serverless runtime using the `taruvi` SDK (v0.1.9, sync+async via unasync codegen). Use when authoring code for `def main(params, user_data, sdk_client)`, calling `client.database`/`.storage`/`.secrets`/`.auth`/`.policy`/`.users`/`.analytics`/`.functions`/`.settings`/`.app`, handling the immutable auth pattern (signInWithToken returns a NEW client, never mutates in place), or using the `log(...)` builtin. TRIGGERS include "Taruvi function", "def main params user_data sdk_client", "taruvi Python SDK", "signInWithToken", "TARUVI_FUNCTION_RUNTIME", "function body Taruvi", "serverless handler Taruvi", "Celery Taruvi function", "@taruvi function". SKIP when provisioning backend resources (use taruvi-backend-provisioning) or building Refine UI (use taruvi-refine-frontend). Covers runtime detection, the 10 SDK modules, immutable auth, sync vs async, runtime context vars, log vs print, and the common gotchas that bite function authors.
-
taruvi-ai Bundle Taruvi App BuilderOrchestrates end-to-end feature development on Taruvi, a Django multi-tenant BaaS with Refine.dev admin UIs. Use when building a new Taruvi app from scratch, scaffolding a full-stack feature that spans backend + function code + Refine frontend, or adding a capability that crosses layers. TRIGGERS include "new Taruvi app", "build with Taruvi", "Taruvi feature end to end", "scaffold BaaS app", "full-stack feature Taruvi", "add CRUD feature Taruvi", "create Taruvi project", "multi-surface feature". SKIP for single-domain work — use taruvi-backend-provisioning for tables/roles/policies/function metadata, taruvi-functions for Python function code, taruvi-refine-frontend for Refine UI only. Plans the sequence, delegates to specialists, verifies integration points. Knows the three-layer architecture (MCP / skills / AGENTS.md), the feature-add workflow, and cross-layer gotchas.
-
taruvi-ai Bundle Taruvi Refine FrontendBuild Refine.dev admin UIs backed by Taruvi using `@taruvi/refine-providers` v1.3.0. Six providers wrap the Taruvi data API, storage, app-level resources, users, auth (OAuth redirect), and Cerbos accessControl. Use for list/show/edit/create pages against Taruvi datatables, file browsers on storage buckets, role/user management UI, accessControl with useCan, OAuth login flow, useCustom against functions and analytics. TRIGGERS include "Refine page Taruvi", "useList Taruvi", "Taruvi admin UI", "dataProvider Taruvi", "@taruvi/refine-providers", "meta.populate", "meta.bucketName", "meta.idColumnName", "Taruvi accessControl Refine", "Taruvi useCustom meta.kind", "refine-providers upsert", "Taruvi OAuth Refine". SKIP when provisioning backend (use taruvi-backend-provisioning) or writing Python function code (use taruvi-functions). Covers all 6 providers, 24 filter operators, DataLoader batching, _cachedUser, 401/403 split, and the meta options consumers reach for.
-
taruvi-ai Bundle Taruvi Backend ProvisioningProvision Taruvi backend resources via the Taruvi MCP server — datatables with Frictionless schemas, storage buckets, users, roles, Cerbos policies, serverless functions, analytics queries, secrets, tags, and audited raw SQL. Use when the user wants to create a datatable, add a role, write a Cerbos policy, provision a bucket, upsert schema, assign a role, register a function, run an analytics query, or otherwise change Taruvi's backend state. TRIGGERS include "Taruvi datatable", "Frictionless schema", "Cerbos policy", "manage_policies", "provision Taruvi", "upsert rows", "multi-tenant table", "Taruvi MCP tools", "create_update_schema", "delete_datatable", "execute_raw_sql". SKIP when writing Python code that runs inside a Taruvi function (use taruvi-functions) or building Refine UI (use taruvi-refine-frontend). Knows all 24 MCP tool contracts, correct invocation order, destructive-op protocol, and the Frictionless/Cerbos essentials the tools expect.
-
taxueseek Bundle Ego Searchego-search 是 argo 的浏览器态搜索增强子技能,基于真实 Chromium 浏览器运行时,提供 登录态继承、JS 渲染、反爬穿透、动态交互与同源接口数据直取(api 模式)能力。专业搜索 模式默认关闭,需用户明确要求并执行开启指令后启用。当 argo 的 120+ API/HTML 引擎覆盖不到时启用:登录墙后的内容(知乎/小红书/微博/X/公众号)、 JS 渲染与 SPA 页面、反爬与 Cloudflare 保护页、需要交互(翻页/展开/滚动加载)的动态搜索、 SPA/XHR 接口数据直取、以及需要真实登录态才能搜到的私有内容。输出对齐 argo 统一 JSON schema,可直接进入 evidence 评分与 RRF 融合。Triggers include 浏览器搜索、登录后才能 搜到、JS 渲染页面、SERP 补充、动态内容抓取、登录态抓取、API 数据直取、接口数据。
-
taxueseek Bundle Local Searchargo 的本地/零成本兜底子技能。封装基于公开页面/HTML/RSS/JSON/CLI 的 33 个本地搜索引擎,不单独响应触发词,仅由 argo 通过 --sub-skill local-search 或 --local-first 调用。
-
telerik Skill New Component DocsWrite and update markdown documentation for Telerik UI for Blazor components.
-
telerik Bundle Component Events PageThis skill describes the structure and language of the component Events pages in the Telerik UI for Blazor documentation. Use this skill when generating or updating the main events.md file for a Telerik Blazor component.
-
telerik Bundle Component Overview PageThis skill describes the structure and language of the component Overview pages in the Telerik UI for Blazor documentation. Use this skill when generating or updating the main overview.md file for a Telerik Blazor component.
-
telerik Bundle Component Templates PageThis skill describes the structure and language of the component Events pages in the Telerik UI for Blazor documentation. Use this skill when generating or updating the main templates.md file for a Telerik Blazor component.
-
tencent Skill Tdesign Pro ComponentThis skill should be used when developing or modifying TDesign Pro Components (AIGC/Chat). It provides the ChatEngine architecture, component patterns, AG-UI protocol integration, and Generative UI development guide.
-
tencent Skill Tdesign Test ComponentThis skill should be used when writing or maintaining unit tests for TDesign React components. It provides testing patterns, best practices, and SOP for Vitest-based component testing including snapshot tests.
-
tencent Skill Tdesign Component StyleThis skill should be used when developing or modifying styles for TDesign React components. It provides guidance on BEM naming conventions, CSS Variables usage, state classes, and the relationship between component code and common submodule styles.
-
tencent Bundle Tdesign Create ComponentThis skill should be used when creating a new TDesign React component. It provides a complete SOP for scaffolding components in the packages/components or packages/pro-components directories, including file structure, code patterns, and registration steps.
-
tencentblueking Bundle Blueking Chat XUse when 在消费方项目中接入 / 使用 @blueking/chat-x 对话组件库(已 npm 安装、非改库源码), 涉及「某组件怎么用、有哪些 props / events / slots / expose / v-model、怎么搭 AI 对话界面、 流式输出、停止生成、工具调用 ToolCall、快捷指令、文件上传、@ 资源、自定义消息或侧栏 Tab、 分享多选、HITL 中断审批、Markdown / 代码 / 公式 / 图表渲染、字号与主题 CSS 变量、 消息时间 MessageTime / timezone」等问题时优先使用。 若是在 packages/chat-x/src 内改库源码(写组件 / composable / 样式 / 测试),改用 chat-x-dev skill。
-
tencentblueking Bundle AI Blueking Dev蓝鲸 AI 小鲸组件开发指南。基于 @blueking/chat-x(UI 组件)和 @blueking/chat-helper(业务 SDK)开发 AI 聊天应用、智能体、对话界面。涵盖 ChatBot 独立使用、嵌入模式业务 Header(会话名称 + asideCollapsed 侧栏开关)、AIBlueking 完整集成、流式响应、快捷指令、划词选择、模型选择(Model Select)、自定义消息渲染(图表/表单/iframe)、HITL 人机协同(工具审批/用户提问/中断恢复)、流程化智能体节点重试跳过、渲染模式(chat/share/test 分享态)、字号主题、消息时间(timezone / MessageTime 四档格式)、侧栏自定义与自定义 Tab、欢迎区 `#welcome` 插槽、Header `#headerLeft` / `#headerActions` 插槽、消息工具栏扩展(messageTools/updateTools)、非 Vue 宿主挂载等。触发场景:开发 AI 小鲸、集成 AI Agent、使用 chat-x/chat-helper、构建 AI 对话 UI、实现流式聊天、模型热切换、自定义消息组件渲染、human-in-the-loop、interrupt/resume、flow agent、自定义欢迎页、自定义消息工具按钮、嵌入式 ChatBot Header、侧栏展开收起、消息时间、timezone、headerActions。
-
tencentblueking Bundle AI Blueking Docs Update更新 AI 小鲸 VitePress 主站文档(src/frontend/web/docs)。在发布新功能、修改 chat-x/ai-blueking 行为、补充 changelog、撰写 LLM/系统提示词说明、同步 API 与指南交叉链接时使用。触发词:文档更新、changelog、主站文档、VitePress、蓝鲸行内富文本、模型选择、提示词文档、web/docs、欢迎插槽、headerLeft、headerActions、消息工具栏、嵌入模式 Header、asideCollapsed、消息时间、timezone、MessageTime、stream_mode、续流、attach、文件上传、pv_files、enableChatSession、enablePopup。
-
theagenticguy Bundle Workbench BuilderBuilds disposable localhost workbenches — Bun.serve + bun:sqlite + React 19 + Astryx apps, zero build config, no deploy — giving an agentic coding/eval/PR/data session a live UI. The signature move is a two-way human↔agent loop over one SQLite file: the human acts in the browser, the agent acts from the terminal (bun run scripts), both seeing the same state update live via SSE with no reload. Ships recipes for eval viewers, PR review rooms, document redline surfaces, spreadsheet/grid editors, multi-surface triage queues, trace replays, and more. Use when the user wants a quick local UI for a coding/eval/PR/data task, OR mentions localhost workbench, eval viewer, PR review room, review/redline a document, select text and comment, a spreadsheet or editable grid, triage my inbox, live invalidation, two-way agent loop, or "build me a little UI for this." Do NOT use for production apps or deployed SPAs (use frontend-design), or for static data pages / HTML reports where a self-contained file is the right tool.
-
tjxj Skill Report AI Bookkeeping生成个人月账单和消费分析。当用户说“出 7 月账单”“生成本月月账单”“做一个 HTML 消费报告”“分析我这个月的钱花在哪”“给省钱建议”或“导出月度财务分析”时触发。基于已确认流水生成离线 HTML、同源 JSON、丰富图表和带事实依据的建议。
-
topunix Bundle Template Toolkit ReviewUse when reviewing or writing a Bugzilla 5.0+/Harmony Template Toolkit file (*.tmpl) - checking FILTER html discipline on interpolated data, correct use of the Hook.process extension points, or template cache invalidation after edits. Trigger for ".tmpl review", "does this template escape user data correctly", or "why isn't my template change showing up" (compiled template cache) questions.
-
toronet-guidl Bundle Toronet App IntegrationsIntegrate ToroNet into frontend or backend apps. Use when the user wants ToroNet network configuration, contract reads with ethers.js or wagmi, wallet-based writes, or server-side writes through the ToroNet keystore API.
-
toss Skill CohesionUse when 한 기능 수정 시 여러 디렉토리를 건드리거나, 같은 숫자/상수가 여러 파일에 흩어져 있거나, import 경로가 `../../..`처럼 길어질 때
-
toss Skill CouplingUse when props가 3개 이상 컴포넌트 계층을 통과하거나, 하나의 Hook이 5개 이상 값을 반환하거나, A 수정 시 관련 없는 B가 깨질 때
-
toss Skill ReadabilityUse when 삼항 연산자가 중첩되거나, 복잡한 조건식 `a && !b || c`가 이름 없이 사용되거나, 동시에 실행되지 않는 코드가 한 컴포넌트에 섞여 있을 때
-
toss Skill PredictabilityUse when `getX()`나 `fetchX()`에 숨은 부수 효과가 있거나, 같은 종류의 함수들이 서로 다른 반환 타입을 가지거나, 함수 이름과 실제 동작이 다를 때
-
tracecathq Skill Docs AuthoringUse when adding or updating documentation pages in an existing docs site. Covers matching nearby docs tone and structure, planning navigation and page content, running product services and docs previews, capturing supporting UI screenshots with Chrome DevTools, suppressing Next.js floating dev indicators before screenshots, taking full-height Mintlify docs screenshots for PR descriptions, keeping PR-only artifacts out of committed files, and creating or updating GitHub PRs with verified documentation labels and screenshot links.
-
lexburner Bundle Qoder Ppt V2[project] 根据文字稿生成 Qoder 品牌风格的 HTML 演示文稿。支持浏览器直接演示(键盘翻页、自动缩放)。
-
liammorrow Skill Expo UI MigrationUse when moving a react-native-paper component to native expo-ui (SwiftUI on iOS / Jetpack Compose on Android), or authoring any new platform-split native control - i.e. creating a `foo.tsx` + `foo.android.tsx` + `foo-props.ts` triple that renders `@expo/ui` `Host`s. Covers the seedColor rule, the icon-interop trap, and the Compose/SwiftUI gotchas that are easy to get wrong.
-
lihanghang Bundle Clawshire Financial AnalysisClawShire 财务风险分析技能 - 上传上市公司年报 PDF,调用 25+ 条分析规则输出整体风险评级(低/中/高)及各规则详细结论,并输出HTML文件。
-
liquid4all Skill Tauri DevSkill for Tauri 2.0 and Rust backend development in LocalCowork. Use when working on the Rust backend, Tauri IPC commands, frontend-backend communication, Tauri permissions/capabilities, the application shell, or the Agent Core modules (ConversationManager, ToolRouter, MCP Client, Inference Client, ContextWindowManager). MANDATORY TRIGGERS: "Tauri", "Rust backend", "IPC command", "tauri.conf.json", "Cargo.toml", "capabilities", "agent core", "tool router", "conversation manager", "inference client", "MCP client", "context window", or anything related to the desktop application shell or the Rust-side orchestration layer.
-
lism-css Bundle Lism CSS GuideLism CSSでUIやページを実装・修正する時に使う実装ガイド。Primitive選定・トークン照合・Property Class/Lism Props活用・レスポンシブ設計・アンチパターン照合を変更規模に応じて行う。b--*, c--*, l--*, a--*, is--*, has--*, set--*, u--*, -prop:value形式のクラスやトークンの逆引きにも使う。
-
lism-css Bundle Lism CSS Refactor既存のLism CSSコード(React/Astro/HTML/CSS)を、見た目や挙動を変えずにLismらしい書き方へ整理するリファクタ用スキル。対象コードを洗い出し、構造・重複・Property Class化・token・状態表現・命名・レスポンシブ・既定値重複を順番に確認し、提示前に元の見た目や動きを壊していないか確認する。ユーザーがリファクタ・監査・整理を明示的に依頼した時に使う。
-
lism-css Skill Lism Mockup GuideLism Mockupを使って画面モックアップを作成するための実装ガイド。@lism-css/mockupのデータディレクトリ(pages/*.jsx|tsx・tokens.json・mockup.config.json)として作成・編集し、lism-mockup init→実装→lism-mockup checkの自己検証ワークフローと、ページID・import許可リスト・トークン上書きのデータ契約に従う。マークアップの書き方自体はlism-css-guideを併用する。lism-mockup / @lism-css/mockup / 画面モックアップの作成・修正で使う。
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 frontend-design, convert-to-cms-tpl, versionup. 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.