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.
-
dlt-hub Skill Rename ComponentRename a skill, command, or rule within a toolkit and update all references. Use when the user wants to rename a plugin component.
-
khaitrang1995 Skill Runner TuneTune an existing runner game — CONFIG difficulty, theme CSS, bloom — without rewriting architecture. Trigger `/runner-tune <game>`.
-
octanejs Skill Authoring TsrxWrite a new Octane component in .tsrx, convert JSX to .tsrx, or add scoped <style> blocks and themes. Use when creating a .tsrx file rather than editing one, because the path-scoped tsrx-authoring rule only fires once such a file is open.
-
octanejs Skill React Library PortCompatibility entry point for React-library work in Octane; routes existing-binding maintenance to update-bindings and actual React implementation ports to octane-react-library-port.
-
octanejs Bundle Octane React Library PortImplement and verify new React-library ports or copied/rewritten React surfaces in Octane bindings from npm names or npm/GitHub links/lists. Enforces immutable provenance, license boundaries, dependency ordering, full-surface parity, and machine evidence. Existing-binding audits and maintenance start with update-bindings.
-
litestar-org Bundle Litestar HtmxAuto-activate for litestar_htmx, HTMXPlugin, HTMXConfig, HTMXRequest, HTMXTemplate, HXLocation, ReplaceUrl, TriggerEvent, HX-* headers, or Litestar partial HTML. Not for generic browser-side HTMX or Litestar Vite JSON templating — those are client concerns.
-
litestar-org Bundle Litestar InertiaAuto-activate for litestar_vite.inertia, InertiaConfig, component=, @inertia, @inertiajs/*, createInertiaApp, useForm, usePage, Link, router, or pages/. Not for HTMX.
-
litestar-org Bundle Litestar RoutingAuto-activate for Controller, Router, @get/@post/@put/@patch/@delete, route_handler, path params, app/domain modules, or Autowire layout. Not for frontend routers.
-
litestar-org Bundle Litestar SettingsAuto-activate for get_env, dataclass settings, pydantic_settings, BaseSettings, lru_cache config factories, app.state settings, LITESTAR_APP, or env parsing. Not for frontend env.
-
litestar-org Bundle Litestar Auth GuardsAuto-activate for guards=, Guard, ASGIConnection, JWTAuth, JWTCookieAuth, SessionAuth, role or tenant checks, or WebSocket auth. Not for frontend route protection.
-
scoobydrew83 Bundle Visual PlanPlan visually instead of dumping markdown: structure a plan as typed, lint-able blocks (.harness/plan/blocks.json — diagrams, wireframes, decisions, annotated real code, questions), render it to a plan.html derived entirely from ground truth (FEATURES.json, telemetry.jsonl, git), and serve it locally so the human reviews IN the page — pinned comments land in tracked comments.jsonl and BLOCK the features they cite until resolved with an answer. Use whenever someone says "visual plan", "/vplan", "plan this feature", "show me the plan", "make the plan reviewable", wants to review or comment on a plan, says "address my comments" / "/address-comments", or asks to see plan status rendered. Also use to structure a captured plan-mode plan (blocks tagged needs-structuring from the ExitPlanMode hook). The defining rule: the plan is a RENDERING of ground truth plus authored blocks — never a second source of truth; plan.html is generated and never hand-edited. Do NOT use for seeding a fresh repo's harness (that is conduc
Audited -
gagaa-hue Bundle Research Assistant智能联网信息搜集与验证助手。当用户需要搜索特定主题信息、进行多源交叉验证、 设置周期性信息监控任务,或要求"查一下"、"搜集资料"、"验证信息"、"监控某话题"、 "定时推送"、"每天/每周自动搜集"时触发。支持深度搜索、来源可靠性评分、时效性筛选、 矛盾检测和HTML报告生成,确保提供准确可信的信息。
Audited -
kaakati Skill Tailadmin UI PatternsTailAdmin dashboard UI framework patterns and Tailwind CSS classes. ALWAYS use this skill when: (1) Building any dashboard or admin panel interface, (2) Creating data tables, cards, charts, or metrics displays, (3) Implementing forms, buttons, alerts, or modals, (4) Building navigation (sidebar, header, breadcrumbs), (5) Any UI work that should follow TailAdmin design. This skill REQUIRES fetching from the official GitHub repository to ensure accurate class usage - NEVER invent classes.
-
kaakati Bundle Accessibility PatternsExpert accessibility decisions for iOS/tvOS: when to combine vs separate elements, label vs hint selection, Dynamic Type layout strategies, and WCAG AA compliance trade-offs. Use when implementing VoiceOver support, handling Dynamic Type, or ensuring accessibility compliance. Trigger keywords: accessibility, VoiceOver, Dynamic Type, WCAG, a11y, accessibilityLabel, accessibilityElement, accessibilityTraits, isAccessibilityElement, reduceMotion, contrast, focus
-
kaakati Skill Rails Error PreventionExpert checklist for preventing common Rails runtime errors BEFORE writing code. Use when: (1) Creating ViewComponents - template/method exposure errors, (2) Writing GROUP BY queries - PostgreSQL grouping errors, (3) Building views that call component methods, (4) Debugging 'undefined method' errors. Trigger keywords: errors, bugs, NoMethodError, template not found, N+1, GROUP BY, PG::GroupingError, undefined method, nil, debugging, prevention
-
kaakati Skill Viewcomponents SpecialistExpert patterns for ViewComponent implementation, slots, previews, and method exposure. Use when: (1) Creating ViewComponents, (2) Implementing slots or content blocks, (3) Setting up component previews, (4) Debugging template/rendering errors, (5) Exposing service methods to views. Trigger keywords: ViewComponent, components, UI, rendering, slots, previews, partials, presenters, render_inline, erb
-
shieldnet-360 Bundle Mobile SecurityAndroid and iOS hardening on a device you do not control: hardware-backed credential storage, exported components and IPC, verified deep links, transport defaults and pinning rotation, server-side attestation over client-side root detection, screen capture, and release-build hygiene — including React Native and Flutter packaging. Use when generating Android or iOS app code, manifests, or native modules, wiring deep links or WebViews, or deciding what a mobile client is trusted to assert.
-
shieldnet-360 Bundle Ssrf PreventionServer-Side Request Forgery: allowlisting the destination of a server-side fetch, when re-resolution between check and connect matters, redirect and scheme bypasses, parsers that fetch on their own (XXE, SVG, HTML-to-PDF), cloud metadata, and keeping the response from becoming an oracle. Use when fetching a client-supplied URL, wiring webhooks, image proxies, PDF or preview renderers, or reviewing any HTTP-client wrapper.
-
shieldnet-360 Bundle Frontend SecurityBrowser-side hardening: XSS and safe text binding, per-sink URL policy, DOM clobbering, nonce-based CSP, Trusted Types, subresource integrity, iframe capability minimization, postMessage validation, and where client state may live. Use when generating HTML, JSX, Vue, or Svelte templates, setting response headers in a web app, embedding third-party scripts or frames, or storing anything client-side.
-
questnova502 Bundle Context7Use when looking up library documentation, API references, framework patterns, or code examples for ANY library (React, Next.js, Vue, Django, Laravel, etc.). Fetches current docs via Context7 REST API. Triggers on: how to use library, API docs, framework pattern, import usage, library example.
Audited -
questnova502 Bundle Security AuditUse when conducting security assessments — OWASP Top 10 / API / LLM, CWE Top 25, CVSS scoring — auditing PHP/TYPO3 (v14.3 LTS: #109585, HashService removal, Authorize/RateLimit), APIs, frontend, Terraform/K8s/Docker IaC, AWS/Azure/GCP cloud, AI agent configs, or scanning dependencies.
Audited -
tencentcloudbase Skill Relational Database Web Cloudbase[Deprecated] Use when building frontend Web apps that talk to CloudBase Relational Database via @cloudbase/js-sdk – provides the canonical init pattern so you can then use Supabase-style queries from the browser. New environments should use PostgreSQL with app.rdb() — see postgresql-development skill instead.
-
tamircohen28 Bundle Dark Terminal DocUse when a single-file HTML technical document should carry a dark developer / terminal aesthetic — monospace type, terminal-green accents, near-black background. Trigger on: "dark terminal doc", "terminal-style HTML", "developer-terminal aesthetic", "make it look like a terminal", "dark developer-facing HTML page", or when the user wants a reference sheet, comparison table, changelog or API cheatsheet rendered in that specific look, or one matching a document already produced in this style. For a document with no stated aesthetic, use the harness design skills instead.
-
jsonlee12138 Skill Role CreatorCreate or update role-specific skill packages with deterministic files. Supports output to skills/ (open-source publishing) or .agent-team/teams/ (team use). Triggers: 创建角色, 新建 role, create role, 更新 role scope, edit role, update role, add role skill, 修改角色配置. Use when the user asks to create, update, or edit frontend/backend/product (or custom) role skills with auto-generated role fields, guided brainstorming fallback, and curated skills selection.
Audited -
jsonlee12138 Bundle Uniapp Dev资深 UniApp 开发工程师,专精于 UnoCSS 原子化 CSS、Vite 工程化、UniApp 跨平台开发和 UCharts 数据可视化,具有丰富的小程序/H5/App 全场景交付经验 Use when the user asks for uniapp-dev-related work such as: uniapp 跨平台开发(h5/微信小程序/app), unocss 原子化 css 配置与自定义规则, vite 构建配置与插件开发, ucharts 图表组件开发与数据可视化, vue 3 组件设计与应用架构, 前端性能优化与最佳实践, 类型安全(typescript)与工程化实践.
-
jsonlee12138 Bundle Vite React Dev资深 Vite-React 开发工程师,专精于 UnoCSS 原子化 CSS、Vite 工程化、Vitest 测试、React 现代开发模式和 TanStack 全家桶(Router/Query/Form/Table),具有丰富的 SPA 应用交付经验 Use when the user asks for vite-react-dev-related work such as: react 组件开发与架构设计, vite 构建配置与插件开发, unocss 原子化 css 配置与自定义规则, tanstack router/query/form/table 集成开发, vitest 单元测试与集成测试, typescript 类型安全实践, 前端性能优化与最佳实践.
-
jsonlee12138 Bundle Frontend Architect专精于前端项目架构设计和工程化的角色,负责项目搭建、架构设计、代码质量把控。掌握现代前端工具链(Vite、Turborepo、Vitest等)和设计模式最佳实践。 Use when the user asks for frontend-architect-related work such as: 项目初始化和搭建(vite), 前端架构设计和技术决策, eslint、commitlint、vscode 配置, 代码审核和 core review, vitest 单元测试配置, 组件库 e2e 测试配置, 工具库打包配置(tsdown), 技术栈选型和最佳实践.
-
aws-samples Bundle Eks Upgrade CheckAssess EKS cluster upgrade readiness — run automated checks across 8 areas (version, breaking changes, deprecated APIs, add-on compatibility, node readiness, workload risks, AWS Insights, upgrade plan), calculate a 0-100 readiness score with a hard-blocker override, and generate a markdown/HTML report with prioritized remediation. Use this skill whenever someone asks "can I upgrade my cluster?", "is my cluster ready for 1.32?", "are we good to go to 1.33?", "what is blocking my upgrade?", or "should we move to the next version?" — even if they do not say "readiness" or "score". Falls back to AWS CLI and kubectl when the EKS MCP server is unavailable.
Audited -
thesaifalitai Skill Nextjs DeveloperNext.js 15+ full-stack specialist. Invoke for BACKEND concerns inside Next.js: Server Actions with mutations, Route Handlers/API routes, Next.js middleware (auth, redirects), fetch caching and revalidation strategies (revalidateTag/revalidatePath), PPR (Partial Pre-rendering), edge runtime, database queries from Server Components, ISR patterns, Next.js deployment to Vercel/Docker. For frontend UI/React component work use nextjs-frontend instead.
Audited -
thesaifalitai Skill React Native ExpoExpert React Native and Expo managed-workflow specialist (SDK 52+). ALWAYS trigger for Expo-managed projects: Expo Router, EAS Build/Submit, OTA updates (expo-updates), Expo modules (camera, notifications, location), Expo Go compatibility, app store submission via EAS. Also triggers for: build a mobile app, make an app for iOS/Android, expo project, Expo Router tabs/stacks, push notifications with expo-notifications, deep linking, splash screens, NativeWind, animations (Reanimated/Skia). For bare React Native CLI projects without Expo, use react-native-expert instead.
-
cloudvoyant Bundle UXUX design workflows: quick wireframes and approach comparisons, full SvelteKit prototypes, or CSS design token synthesis from a live URL. Triggers on: "ux explore", "ux prototype", "ux style-synthesize", "ux allow", "ux help", "quick wireframe", "wireframe this", "explore approach", "single file prototype", "html mockup", "ux prototype", "synthesize styles", "extract design tokens".
-
creativeclawco Bundle Creativeclaw Render HTML VideoRender a HyperFrames-backed HTML/CSS/JS composition to video with Creative Claw. Use only when the user explicitly asks for HTML-to-video, HyperFrames, code-driven motion, animated HTML, or explicitly chooses HTML rendering for overlays or title cards.
-
davidlam-oss Skill Openprd Quality评估可观测性、业务成本与滥用护栏、评估执行环境覆盖、性能基线、极端场景,以及 HTML 质量评估报告和项目知识 Skill。
-
davidlam-oss Bundle Openprd Frontend DesignOpenPrd 前端设计框架 skill:为界面、页面、视觉、样式和前端体验任务提供设计资产框架、审美立意、反 AI 味门禁和实现前方向评审规则。
-
davidlam-oss Skill Openprd Learning Review为 OpenPrd 工作区生成归档学习包、题材模板、证据清单、图文讲解模块和 HTML 电子书阅读器。
-
grandamenium Bundle Pandoc CLIUse Pandoc to convert documents between formats - Markdown, HTML, PDF, DOCX, LaTeX, EPUB, and dozens more.
Audited
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 ViewComponents Specialist, security-audit, rename-component. 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.