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.
-
martin1847 Skill Agent Frontend Standardagent 时代前端工程手册——写/评审前端代码(React/RN/Next/组件/样式/状态/前端测试)、建立或评审前端仓工程门禁、设计系统对接 AI 时加载。覆盖:设计系统即契约(token 语义/受限组件词表/lint 硬门)、类型端到端契约(生成客户端只读/typecheck 主反馈环/封 any 逃逸)、视觉验证环(a11y 树优先+截图双轨/迭代预算/回归重检)、前端测试分时门禁、gotcha 库(use client 幻觉/barrel file/任意值样式)。电在回路前端面:能下沉 lint/CI 的绝不写散文。Use when writing or reviewing frontend/UI code, wiring design systems for AI agents, or establishing frontend repo gates: components, styling, tokens, typed API clients, visual verification, frontend testing.
-
martin1847 Bundle Source Coding DisciplineUse when a task involves reading, editing, reviewing, testing, debugging, refactoring, or otherwise working with source code files. Source paths include **/*.{py,ts,tsx,js,jsx,mjs,go,rs,java,kt,swift,rb,c,cc,cpp,h,hpp,sh,bash,zsh,sql,vue,svelte}. Do not use for docs-only, planning-only, or non-code file tasks unless the task also touches source code.
-
masheev Bundle Masheev APIUse when calling the Masheev API for contacts, conversations, messages, inboxes, AI agents, knowledge base, or any server-to-server integration. Covers authentication with API keys, the @masheev/client tRPC client, REST endpoints, pagination, rate limiting, and common CRUD operations. Use this skill whenever someone asks to "call the Masheev API", "create contacts", "list conversations", "send messages", "manage inboxes", or integrate Masheev into their backend. Also use when setting up @masheev/client in Node.js, React, Next.js, or React Native.
-
masheev Bundle Masheev React SdkUse when building custom chat UIs with the Masheev React SDK instead of the default widget. Covers the useMasheev hook, MasheevProvider for headless mode, useWidgetSession, useWidgetChat, useWidgetSocket, useReadAloud, custom message rendering, event handling, and building chat interfaces from scratch. Use this skill when someone wants a "custom chat UI", "headless integration", "build their own chat component", or references @masheev/embed-sdk/react or @masheev/embed-sdk/headless.
-
mukiwu Bundle Review Tests測試體檢診斷器(test review / audit existing tests / find test blind spots)——讀一份既有測試,找出盲點與建議,產出一份 self-contained HTML 報告(不修改任何 source/測試/設定)。報告每條 finding 帶嚴重度,可 toggle 展開被測 source 的關鍵幾行。只診斷不寫測試:要補測試或自動改善測試,請改走 tdd 或你的測試改善 skill。
-
nanmicoder Bundle Plugin Heavy DepUse when adding a heavyweight browser dependency (diagram/chart renderers like mermaid, code editors, big wasm-adjacent libs) to a lightweight DSH Web plugin that must stay small, when wiring a lazy-loaded chunk through a host route, when the lazy import intermittently fails or falls back, or when rendering untrusted markup (SVG/HTML) produced by such a dependency.
-
newlifex Skill Cube LovLOV(List of Values)值集系统使用指南。涵盖后端配置、前端组件、API 封装、枚举自动注册全链路。当用户说"配置值集"、"使用LovSelect"、"添加LOV"、"值集选择"、"枚举下拉"、"使用LOV"时使用。
-
newlifex Skill Cube Init初始化一个新的前端项目,使用 @newlifex/cube-vue 框架。 当用户说"初始化项目"、"创建新项目"、"搭建前端项目"、"使用 @newlifex/cube-vue 初始化"时使用此技能。 自动配置布局、状态管理(Pinia)、路由、API请求库、多语言支持、容器化部署等核心功能,开箱即用。
-
newlifex Bundle Cube Design设计一致的页面视觉与交互:在 NewLife.Cube.Vue 项目中新增/审查页面时消灭"这个间距多大、这个场景用什么组件、加载态怎么表现"等未定义决策点。 当用户说"设计页面"、"新页面视觉/布局"、"这个页面看起来不一致"、"要不要用 el-table 还是卡片"、"加载态/空态/确认怎么做"、"设计规格"、"design spec"、"原型设计"时使用。 基于 Element Plus + Tailwind 双系统心智模型,覆盖页面类型骨架、组件选型决策树、交互模式、暗色主题、设计规格检查单。
-
newlifex Bundle Cube Layout在 @newlifex/cube-vue 框架中新增、注册或切换页面布局。 当用户说"新增布局"、"自定义布局"、"修改布局"、"切换布局"、"使用 XXX 布局"时使用。 包含布局组件创建、框架注册、应用使用的完整流程。
-
newlifex Skill Cube Add API(已迁移) 此技能已更名为 cube-add-page,请使用 cube-add-page 技能根据控制器创建前端页面。当你需要创建或修改 Cube 前端 API 文件时也请使用 cube-add-page。
-
newlifex Skill Cube Add App在 @newlifex/cube-vue 微前端架构中新增一个子应用/模块。 当用户说"新增应用"、"创建子应用"、"添加新模块"、"新建页面"、"创建新页面"时使用。 注意:新增的应用放在调用技能的目录(项目根目录 apps/),而不是 @newlifex/cube-vue 目录。
-
newlifex Bundle Cube Add Page根据后端 NewLife.Cube 控制器定义,在前端项目创建页面组件。当用户说"新增页面"、"创建页面"、"添加功能页面"、"给 XX 模块加页面"时使用。
-
newlifex Skill Modal Organize命令式弹窗的代码组织规范与最佳实践。 当用户问"弹窗怎么组织"、"弹窗放哪"、"弹窗目录结构"、"弹窗代码规范"、"新增弹窗怎么写"、"重构弹窗结构"时使用。 核心原则:Vue 组件 + openXxx.ts 打开函数作为"一对"放在一起,按业务归属就近放置。
-
newlifex Skill Cube Page Override使用 @newlifex/cube-vue 的 Section 机制覆盖/扩展页面组件。 当用户说"覆盖页面"、"扩展页面"、"自定义组件"、"修改框架组件"时使用。 Section 机制允许在不修改框架源码的情况下,覆盖搜索栏、表格、操作按钮等页面区块。
-
newlifex Bundle Vue Component Visual LoopVue 组件开发的「视觉快速迭代闭环」:Gallery 手动预览(?story= 深链 / 无参数侧栏,带 HMR)+ Vitest 逻辑回归 + Playwright CT 像素级截图。提供手动浏览器预览与 CT 测试编写规范,让"改代码→截图→调整→再截图"在分钟级闭环中完成。
-
niller2005 Skill Svelte UI StandardsCoding standards and UI guidelines for the PolyFlup Svelte dashboard.
-
mrveiss Skill API Wiring AuditAudit and enforce frontend/backend API contract wiring in AutoBot-AI (or any FastAPI + SPA monorepo). Use this skill whenever the user mentions unwired features, dead buttons, 404s from the GUI, API contract drift, endpoints that "don't exist", unmounted routers, frontend/backend mismatch, or before marking ANY frontend feature complete. Also use it when implementing or modifying any frontend API call, any FastAPI route, or any router registration — run the audit as a completion gate, not just when explicitly asked.
-
mystenlabs Skill Integrate Sui Stack MessagingUse when a developer wants to add Sui Stack Messaging to their own dapp / project — installing the @mysten/sui-stack-messaging npm package, picking the createSuiStackMessagingClient factory vs manual $extend chain, wiring up session keys, and the minimum config to send one message. Trigger phrases - "add messaging to my app", "install sui-stack-messaging", "integrate the SDK", "how do I use sui-stack-messaging from React/Next/Node", "minimum setup to send a message", "@mysten/sui-stack-messaging quickstart", "wire up the messaging client".
-
necatiarslan Skill Managing Astro Local EnvManage local Airflow environment with Astro CLI. Use when the user wants to start, stop, or restart Airflow, view logs, troubleshoot containers, or fix environment issues. For project setup, see setting-up-astro-project.
-
necatiarslan Skill Setting Up Astro ProjectInitialize and configure Astro/Airflow projects. Use when the user wants to create a new project, set up dependencies, configure connections/variables, or understand project structure. For running the local environment, see managing-astro-local-env.
-
noique Bundle Browser FetchA shared, pluggable real-browser rendering backend (default engine Selenium, headless, optional proxy) that mounts as fetchlib's L3 tier, so multiple skills stop each writing their own Selenium — returns (status, html, headers), normalizes anti-bot challenge pages to status=403 so the waterfall correctly marks them blocked, and exposes register_engine() for opt-in nodriver / camoufox / scrapling. Use when the user needs JS-rendered HTML for a scrape, hits a page that comes back empty or thin without a browser, wants one reusable browser layer across scraping skills, or wants to route a fetch through a proxy. Triggers on "browser-fetch", "要真浏览器渲染", "这站要跑 JS 才有内容", "用 Selenium 抓一下", "挂个浏览器后端", "curl 抓不到内容", "带代理抓", "render JS to scrape", "headless browser fetch", "this site needs a browser". Pairs with /fetchlib (register it as the browser L3 tier, only after curl_cffi / Jina fail) and /api-pacer; deliberately does NOT replace the existing Selenium inside /trustpilot. Honest limit (2026-06, datacenter IP): it t
-
nowespojrzenie Skill Astro Six Element LensUse when applying a six-element cycle (Fire, Air, Water, Earth, Death, Metal) as an interpretive lens over a situation, a decision, or a measured sky position. Ships the concrete cycle and its construction laws, and requires every reading to carry an explicit epistemic status — a lens output is never evidence. Load when someone asks what a phase means, where a process has stalled, or which function is missing; do not load it to establish facts.
Audited -
nowespojrzenie Skill Astro Transit Window BoundariesUse when computing or reporting astrological transit windows — when a configuration begins, peaks and ends. Enforces both edges rather than one, marks a search-horizon boundary instead of inventing a date, refuses to let the edge of a search range pass as a peak, and requires that difficult aspects be reported alongside favourable ones. Load before telling anyone when their window opens or closes.
Audited -
nutstore Skill Cw Nol EditorGuide for reading, writing, and editing .nol (Outline Notes) files. Covers correct outline format, indentation rules, HTML content, and common pitfalls.
-
nvidia Skill TestingWriting frontend tests for the nvcf-ui app — Vitest, Testing Library, MSW, and project-specific render helpers. Use when creating test files, writing component tests, setting up MSW handlers in tests, deciding which render helper to use, or when the user is adding or modifying a UI component and hasn't mentioned tests yet (tests are required). Covers TypeScript/React only — Go backend tests follow standard Go patterns.
Audited 2.2k -
onflow Bundle Flow CLIComplete reference for the Flow CLI — the command-line tool for developing, testing, and deploying on the Flow blockchain. Covers project initialization, account management, contract deployment, transaction sending, script execution, dependency management, key generation, scheduled transactions, and emulator usage. TRIGGER when: using the Flow CLI, running flow commands, "flow accounts get", "flow accounts create", "flow init", "flow project deploy", "flow scripts execute", "flow transactions send", "flow test", "flow emulator", "flow keys generate", "flow dependencies install", "flow accounts fund", "deploy contract to testnet", "how to create a Flow account", "check account balance on Flow", "run cadence script", "send a transaction", "flow accounts add-contract", "flow accounts staking-info". DO NOT TRIGGER when: writing Cadence contract code (use cadence-lang), building React frontends (use flow-react-sdk), auditing code (use cadence-audit).
-
onflow Bundle Flow Dev SetupGuide for setting up a local Flow blockchain development environment from scratch. Covers installing and configuring the Flow CLI, emulator, Cadence MCP server, dev wallet, Cadence VS Code extension, testing framework, frontend SDKs (FCL/React), and EVM tooling (Hardhat/Foundry). Each tool has its own reference with self-contained install and setup instructions. TRIGGER when: setting up Flow development tools, installing Flow CLI, starting emulator for the first time, "how do I install flow", "set up my dev environment", "flow dev setup", "install flow-cli", "cadence extension", "set up emulator", "flow testing setup", "FCL install", "EVM on Flow", "Hardhat with Flow", "Foundry with Flow", "new to Flow development", "getting started with Flow", "cadence MCP", "set up MCP for Cadence", "flow mcp". DO NOT TRIGGER when: configuring flow.json or deployments (use flow-project-setup), writing Cadence code (use cadence-lang), querying on-chain data (use flow-cli-query), building token contracts (use cadence-tokens),
-
onflow Bundle Flow React SdkGuide for building React applications on the Flow blockchain using @onflow/react-sdk. Covers FlowProvider setup, Cadence hooks (useFlowQuery, useFlowMutate, useFlowCurrentUser, useFlowEvents), Cross-VM hooks for EVM bridging and batch transactions, and UI components (Connect, TransactionButton, TransactionDialog, NftCard). Built on TanStack Query with TypeScript support. TRIGGER when: building React apps on Flow, using @onflow/react-sdk, setting up FlowProvider, using Flow React hooks, "useFlowQuery", "useFlowMutate", "useFlowCurrentUser", "Connect component", "TransactionButton", "wallet connect react", "react flow app", "FCL React", "flow react hooks", "bridge tokens react", "cross-vm react", "NftCard", "useFlowEvents", "how to query Flow from React", "authenticate user in React". DO NOT TRIGGER when: writing Cadence contracts (use cadence-lang), configuring flow.json without React (use flow-project-setup), building non-React frontends or backends, auditing code (use cadence-audit).
-
endorphin-ai Bundle System ArchitectureUse when designing a system, choosing an architecture pattern, making a technology decision, or doing capacity/scalability planning — BEFORE drilling into framework-specific mechanics. A lean MAP over three reference docs: pattern selection (monolith → modular monolith → microservices → event-driven → CQRS → event sourcing → hexagonal → clean → API gateway, with trade-offs), the how-to system-design workflows (system-design-interview approach, capacity planning, API design, DB schema design, scalability assessment, migration planning), and the technology-choice frameworks (database, caching, message queue, auth, frontend framework, cloud provider, API style). Trigger on: 'design the system', 'choose an architecture pattern', 'which pattern fits', 'tech decision', 'SQL or NoSQL', 'REST vs GraphQL vs gRPC', 'capacity/scalability planning', 'plan the migration'. This is general, technology-agnostic system-design knowledge — it informs the decisions that come BEFORE any framework-specific mechanics.
-
erikhoward Bundle TypescriptApply repository-aware TypeScript conventions for checked boundaries, useful types, async behavior, imports, suppressions, React code, tests, and verification.
-
esaterbiltavus Bundle Dilekce CracCRAC (Conclusion → Rule → Application → Conclusion / Sonuç → Kural → Uygulama → Sonuç) yöntemiyle Türk hukukunda dilekçe ve savunma hazırlamak için kullanılır. Tetikleyiciler: "CRAC yöntemiyle/şemasıyla dilekçe", "CRAC ile dava/cevap/savunma", "sonuç-merkezli / Conclusion-Rule-Application-Conclusion dilekçe", "kısa-net dilekçe/beyan". Sonucu baştan koyan; kuralın tartışmasız olduğu hızlı/doğrudan dilekçelerde, ara ve beyan dilekçelerinde meseleyi kısa ve net ortaya koyar. Çıktı docx/html/udf/pdf üretilir.
-
esaterbiltavus Bundle Dilekce IlacILAC (Issue → Law → Application → Conclusion / Mesele → Mevzuat → Uygulama → Sonuç) yöntemiyle Türk hukukunda dilekçe ve savunma hazırlamak için kullanılır. Tetikleyiciler: "ILAC yöntemiyle/şemasıyla dilekçe", "ILAC ile dava/cevap/savunma yaz", "mevzuat-merkezli dilekçe", "Issue-Law-Application-Conclusion dilekçe". Çözümü açık kanun hükmüne dayanan, içtihat tartışması az dosyalarda mevzuat maddesini öne çıkararak meseleyi netleştirir. Çıktı docx/html/udf/pdf üretilir.
-
esaterbiltavus Bundle Dilekce IpacIPAC / IDAR (Issue → Principle/Doctrine → Application → Conclusion/Result / Mesele → İlke/Doktrin → Uygulama → Sonuç) yöntemiyle Türk hukukunda dilekçe ve savunma hazırlamak için kullanılır. Somut kural yerine genel hukuk ilkesini veya öğreti doktrinini merkeze alır. Tetikleyiciler: "IPAC yöntemiyle dilekçe", "IDAR ile dilekçe", "ilke/doktrin-merkezli dilekçe", "dürüstlük kuralına / genel hukuk ilkesine dayanan dilekçe". Somut kanun maddesinin yetersiz veya bulunmadığı, argümanın genel ilke ve öğretiye dayandığı dosyalarda güçlüdür. Çıktı docx/html/udf/pdf üretilir.
-
esaterbiltavus Bundle Dilekce IraacIRAAC / IRRAC (Issue → Rule → Application → (counter-)Application → Conclusion / Mesele → Kural → Uygulama → Karşı-Uygulama → Sonuç; varyant: Issue → Rule → (second) Rule → Application → Conclusion) yöntemiyle Türk hukukunda dilekçe ve savunma hazırlamak için kullanılır. Tetikleyiciler: "IRAAC yöntemiyle dilekçe", "IRRAC ile cevap/replik", "karşı argümanı çürüten dilekçe", "counter-analysis". İki taraflı ve tartışmalı meselelerde karşı tarafın olası argümanını öngörüp çürütmek (çift A) veya ikinci/alternatif kural ekseni kurmak (çift R) için güçlüdür. Çıktı docx/html/udf/pdf üretilir.
-
esaterbiltavus Bundle Dilekce MiratMIRAT (Material facts → Issue → Rule → Application → Tentative conclusion / Maddi Vakıalar → Mesele → Kural → Uygulama → Geçici Sonuç) yöntemiyle Türk hukukunda dilekçe ve savunma hazırlamak için kullanılır. Tetikleyiciler: "MIRAT yöntemiyle/şemasıyla dilekçe", "MIRAT ile dava/cevap/savunma yaz", "maddi vakıaları süzerek dilekçe", "geçici sonuçlu / kademeli talep dilekçesi". Vakıası bol veya ihtimalli/alternatif talep içeren dosyalarda vakıayı süzüp meseleyi netleştirir. Çıktı docx/html/udf/pdf üretilir.
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 plugin-heavy-dep, cube-init, agent-frontend-standard. 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.