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.
-
agent0ai Bundle A0 Debug PluginDiagnose and fix Agent Zero plugin problems. Covers plugin not appearing, won't enable, API endpoints not responding, frontend store errors, extension point injection, settings resolution, hooks.py issues, and log inspection. Use when a plugin is not working, not loading, crashing, missing from the list, or behaving unexpectedly.
-
agricidaniel Bundle Blog ChartGenerate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img, aria-labelledby), source attribution, and transparent backgrounds. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", or "visualize data".
-
agricidaniel Bundle Blog WriteWrite new blog articles from scratch optimized for Google rankings and AI citations. Generates full articles with template selection, answer-first formatting, Key Takeaways summary box, information gain markers, evidence-backed explanations, sourced statistics, Pixabay/Unsplash images, built-in SVG chart generation, optional FAQ sections, internal linking zones, and proper heading hierarchy. Supports MDX, markdown, and HTML output. Use when user says "write blog", "new blog post", "create article", "write about", "draft blog", "generate blog post".
-
coder Skill Frontend ReviewDiff-scoped self-review of frontend changes under site/src against the FE pattern rules (FE1-FE10) before creating or updating a PR. Use whenever a branch diff touches site/src files.
-
comet-ml Bundle Opik FrontendReact frontend patterns for Opik. Use when working in apps/opik-frontend, on components, state, or data fetching.
-
copilotkit Skill A2ui RendererRender A2UI (Agent-to-UI declarative surfaces) in CopilotKit v2. Enable the runtime via CopilotRuntime({ a2ui: {...} }), then enable the provider via <CopilotKit a2ui={{ theme }}>. Auto-activates via /info — do NOT manually pass renderActivityMessages. createA2UIMessageRenderer ships from @copilotkit/react-core/v2; low-level primitives (A2UIProvider, A2UIRenderer, createCatalog) ship from @copilotkit/a2ui-renderer. Covers theme customization, createSurface dedup, action-bridge try/finally cleanup. Load when an agent emits A2UI operations (createSurface / updateComponents / updateDataModel), when wiring a2ui on CopilotRuntime, or when styling A2UI surfaces.
-
gabrielmoreira Skill Scrapling SkillInstall, troubleshoot, and use Scrapling CLI to extract HTML, Markdown, or text from webpages. Use this skill whenever the user mentions Scrapling, `uv tool install scrapling`, `scrapling extract`, WeChat/mp.weixin articles, browser-backed page fetching, or needs help deciding between static and dynamic extraction.
17 -
drmhse Skill Authos Web IntegrationIntegrate AuthOS into browser, React, Vue, or plain TypeScript applications using @drmhse/sso-sdk and the AuthOS React/Vue adapters. Use when adding OAuth redirects, password login, magic links, passkeys, MFA callback handling, token refresh, or frontend session state.
-
aibot88 Bundle Check A11YPerform accessibility audit on web pages. Use when users ask to check accessibility, audit WCAG compliance, verify ARIA usage, check color contrast, audit keyboard navigation, or analyze screen reader compatibility. Detects ARIA issues, focus problems, contrast issues, and semantic HTML violations.
3 -
aibot88 Bundle Craft SiteCraft CMS 5 front-end Twig development — atomic design, template architecture, component patterns, Vite buildchain. Covers the full site template surface: atoms, molecules, organisms, props/extends/block pattern, layout chains, view routing, content builders, image presets, Tailwind named-key collections, multi-brand CSS tokens, JavaScript boundaries (Alpine/DataStar/Vue, tabs, accordions, interactive components), Vite asset loading, and front-end auth (login, registration, password reset, user profiles). Triggers on: {% include ... only %}, {% embed %}, _atoms/, _molecules/, _organisms/, _views/, _builders/, _boilerplate/, component--variant.twig, _component--props.twig, image presets, Tailwind class collections, collect({}), utilities prop, multi-brand theming, data-brand, hero sections, card components, content builders, Matrix block rendering, craft.vite.script, vite.php, vite.config.ts, nystudio107, buildchain, asset loading, per-page scripts, Blitz, static caching, page caching, dynamic caching with Spr
3 -
aibot88 Bundle CSS AuthorModern CSS organization with native @import, @layer cascade control, CSS nesting, design tokens, and element-focused selectors. AUTO-INVOKED when editing .css files.
3 -
aibot88 Bundle Ring Dev ReadyzReadiness implementation orchestrator for Lerian services. Drives a 12-gate cycle that detects stack, audits existing /readyz compliance, dispatches language-specific engineers (Go / TypeScript / Next.js) to implement the canonical /readyz contract, ValidateSaaSTLS() enforcement, metrics emission, startup self-probe, graceful-drain coupling, circuit-breaker integration, and multi-tenant carve-out — then runs 13 parallel reviewers.
3 -
aibot88 Bundle Fe Quality前端质量与安全技能包,涵盖前端安全加固、错误监控集成、前端 CI/CD 流水线、无障碍(a11y)合规。 当需要加固前端安全防护(XSS/CSP/依赖审计)、集成错误监控(Sentry/自研SDK)、搭建前端 CI/CD 流水线(GitHub Actions/GitLab CI/Lighthouse CI)、或进行无障碍适配(WCAG/ARIA)时触发此技能。 支持 Angular、Vue、React、原生 JS、Node.js 技术栈。
3 -
aibot88 Bundle GeneratorsCode generator skills that produce production-ready Swift code for common app components. Use when user wants to add logging, analytics, onboarding, review prompts, networking, authentication, paywalls, settings, persistence, error monitoring, CI/CD pipelines, localization, push notifications, deep linking, testing, accessibility, widgets, feature flags, app icons, image caching, pagination, HTTP caching, share cards, social export, subscription lifecycle, referral systems, watermarks, streak tracking, milestone celebrations, what's new screens, lapsed user re-engagement, usage insights, variable rewards, consent flows, account deletion, permission priming, force updates, state restoration, debug menus, offline queues, feedback forms, announcement banners, quick win sessions, Spotlight indexing, App Clips, screenshot automation, background processing, app extensions, or data export.
3 -
aibot88 Bundle Privacy Kr한국 서비스용 처리방침·이용약관·회원가입 동의 모달·쿠키 배너 자동 생성. 개인정보보호법 §30, 2025.4.21 작성지침, 2026.3 개정법, 공정위 전자상거래 표준약관 10023호 반영. Next.js 13~16 프로젝트 대상.
3 -
aibot88 Bundle Raam AuditAudit mobile applications (iOS and Android) against RAAM 1.1 (Luxembourg Mobile Accessibility Assessment Framework). Use when reviewing existing mobile app code for accessibility compliance, generating audit reports, checking conformance levels, or preparing for Luxembourg accessibility certification. Covers all 15 themes with platform-specific test procedures. Default target: Level AA.
3 -
aibot88 Bundle Solana DevUse when user asks to "build a Solana dapp", "write an Anchor program", "create a token", "debug Solana errors", "set up wallet connection", "test my Solana program", "deploy to devnet", or "explain Solana concepts" (rent, accounts, PDAs, CPIs, etc.). End-to-end Solana development playbook covering wallet connection, Anchor/Pinocchio programs, Codama client generation, LiteSVM/Mollusk/Surfpool testing, and security checklists. Integrates with the Solana MCP server for live documentation search. Prefers framework-kit (@solana/client + @solana/react-hooks) for UI, wallet-standard-first connection (incl. ConnectorKit), @solana/kit for client/RPC code, and @solana/web3-compat for legacy boundaries.
3 -
aibot88 Bundle Remix TemplatingServer-side HTML templating in Remix v3 via `remix/html-template` — the `` html`...` `` tagged template literal with automatic XSS-safe escaping, `html.raw` for trusted fragments, composable `SafeHtml` branded values, the `isSafeHtml` type guard, and integration with `createHtmlResponse` from `remix/response/html` for endpoints that return HTML without spinning up the JSX runtime. Load whenever the user is building HTML responses without JSX (webhooks, RSS feeds, sitemaps, email bodies, OG/Twitter previews, HTMX fragments, server-rendered snippets), generating safe HTML from user input, composing reusable HTML helpers, deciding when to use JSX vs templates, or about to install `handlebars`, `ejs`, `mustache`, `pug`, `nunjucks`, `lit-html`, `escape-html`, `xss`, `sanitize-html`, `dompurify` (for server output). For full-page interactive UIs, use /remix:ui (JSX) instead.
3 -
aibot88 Bundle Txt ColorsPick text colors that adapt to dark mode, vibrancy, and accessibility settings across UIKit, AppKit, and SwiftUI — semantic label colors, AppKit's textColor vs labelColor split, dark-mode adaptation rules, wide-color (Display P3), HDR/EDR limits for text. Use when text disappears in dark mode, an attributed string defaults to invisible black, an NSTextView body looks dim, you're picking between systemRed and a P3 red, or designing for high-contrast accessibility. Read the actual color initializers and trait responses before reciting fixes — the patterns here describe how color adaptation usually fails, not where the bug is in your code.
3 -
aibot88 Bundle Vue ReviewVue 3 SFCをベストプラクティスに照らして一括レビューする。「Vueコンポーネントをレビューして」「SFCをチェックして」「型安全性を確認して」「TailwindのUIを検査して」「Biomeルールへの準拠を確認して」と依頼された時に使用する。
3 -
aibot88 Bundle A11Y CriticUse when you have an existing component, flow, or interface and need an evidence-backed accessibility design review after basic checks pass. Best for WCAG 2.2 compliance, focus management, ARIA pattern quality, semantics, and state communication gaps automated tools miss.
3 -
aibot88 Bundle A11Y ReviewThis skill should be used when the user asks for an accessibility review, accessibility audit, a11y check, WCAG compliance review, screen reader audit, "is this accessible?", "does my site meet WCAG?", "check my component for accessibility", "accessibility overview of this page", "review accessibility of", "check for a11y issues", "fix accessibility issues", or any request to audit a web page, component, or codebase for WCAG 2.2 AA compliance.
3 -
aibot88 Bundle Remix ControllersControllers in Remix v3 — the `.tsx` files under `app/controllers/` that handle requests. Covers the `Controller<typeof routes.X, AppContext>` shape, action handler signatures (`{ get, params, request, url }`), reading middleware-provided values with `get(Database)` / `get(Session)` / `get(Auth)` / `get(FormData)`, returning responses via `render(<Page/>)` / `redirect(...)` / `Response.json(...)`, nested controllers, per-controller middleware (`requireAuth`, etc.), and the typed `routes.X.href(params)` URL builder. Load whenever the user is creating, editing, or debugging anything under `app/controllers/`, or comparing to Express route handlers / Next.js page+route handlers / Rails controllers / Hono handlers. Also load when the user asks "where does business logic go" or "how do I get the current user in an action".
3 -
aibot88 Bundle Convex DocsQuery and manage local Convex documentation mirror (42 docs). Search Convex topics for real-time database, serverless functions, authentication, file storage, and React hooks. Use when implementing Convex backend features or answering Convex-related questions. (user)
3 -
aibot88 Bundle CoordinatorAutonomous penetration testing coordinator using ReAct methodology. Automatically activates when user provides a target IP or asks to start penetration testing. Orchestrates reconnaissance, exploitation, and privilege escalation until both user and root flags are captured. (project)
3 -
aibot88 Bundle Eval AuthorAuthor behavior evals for a change in five categories — Functional, Security, Performance, Accessibility, Drift — pinned to threshold floors per risk level (AXIS-26 §8.2, §8.3).
3 -
aibot88 Bundle Fastapi AppUse when creating FastAPI backend applications - route handlers, dependencies, CORS config, or Pydantic models. NOT when frontend logic, non-Python backends, or unrelated server-side code. Triggers: "FastAPI", "student endpoint", "API route", "dependency injection", "CORS", "Pydantic model".
3 -
aibot88 Bundle File UploadComplete guide for implementing file uploads in IntelliFill with React-dropzone frontend, Multer backend, file validation, Bull queue processing, and security best practices
3 -
aibot88 Bundle Game ReviewAudits existing game code against design principles — checks server-authority, schema conventions, auth security, payment safety, narrative coherence, and MVP scope drift. Extract the optional component name or path from the user's message (defaults to entire src/). Use after building components or before committing.
3 -
aibot88 Bundle HyperframesCreate video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.
3 -
aibot88 Bundle Lead ReviewAutonomous comprehensive review. Once-through pipeline over /review-health, /review-arch, /review-security, /review-perf, /review-a11y, /review-test, /review-release. Operator-configurable ticket creation at startup — when ON, auto-approves sub-skill ticket proposals per the orchestrator-family contract; when OFF, uniformly declines and surfaces findings in the consolidated report. Auto-detects sub-skills that do not apply (no web content → skip /review-a11y; no tests → skip /review-test).
3 -
aibot88 Bundle Onda SlidesONDA 공통 템플릿으로 슬라이드 프레젠테이션(HTML + PDF)을 생성한다. 차트, 표, 그리드, AI 이미지 지원. 모디파이어로 simple/wide/dark/en/confidential 조합.
3 -
aibot88 Bundle Raweb AuditAudit web pages and components against RAWeb 1.1 (Luxembourg Web Accessibility Framework). Use when reviewing existing code for accessibility compliance, generating audit reports, checking conformance levels, or preparing for Luxembourg accessibility certification. Covers all 17 themes with systematic test procedures. Default target: Level AA.
3 -
aibot88 Bundle Review DeepComprehensive pre-release review pipeline. Runs /review-health, /review-arch, /review-security, /review-perf, /review-a11y, /review-test, /review-doc, and /review-release in sequence. Thin orchestrator — each sub-skill keeps its normal interactive behavior. Auto-detects phases that do not apply and asks the user to confirm skipping them. Ends with a consolidated report.
3 -
aibot88 Bundle Rtl SupportAdd right-to-left (RTL) text support to web projects for Hebrew, Arabic, and Farsi. Use when the user asks about RTL layout, Hebrew/Arabic text direction, bidirectional text, CSS direction, unicode-bidi, or wants to make a web app support RTL languages. Provides automatic direction detection, CSS injection, and JavaScript utilities.
3 -
aibot88 Bundle Servo FetchFetch and render web pages using the Servo browser engine — a single binary with JS execution, CSS layout, screenshots, and content extraction. Use when a URL returns empty or incomplete content with plain HTTP fetch, when you need a screenshot without GPU, or when you need to run JavaScript in a page context. No browser download required.
3
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 scrapling-skill, blog-chart, blog-write. 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.