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.
-
aibot88 Bundle Streamlit Master ArchitectArchitect-level Streamlit development for building, refactoring, debugging, testing, and deploying Streamlit apps (single-page or multipage) with correct rerun/state/caching/fragments, AppTest-based testing, custom components v2, safe theming/CSS, security-by-default, and Playwright MCP end-to-end automation.
3 -
aibot88 Bundle Typescript Security ReviewProvides security review capability for TypeScript/Node.js applications, validates code against XSS, injection, CSRF, JWT/OAuth2 flaws, dependency CVEs, and secrets exposure. Use when performing security audits, before deployment, reviewing authentication/authorization implementations, or ensuring OWASP compliance for Express, NestJS, and Next.js. Triggers on "security review", "check for security issues", "TypeScript security audit".
3 -
aibot88 Bundle Oss Security AuditAudits the CI/CD pipeline, repository, release process, automations, and dependency hygiene of an open-source software supply chain, then produces an elegant HTML report of findings and recommendations. Use this skill whenever the user asks to assess, audit, review, harden, or evaluate the security of a repository, its GitHub Actions or GitLab CI pipelines, its release process, its supply chain, or its overall security posture — even if they don't use the word "audit." Also trigger on phrases like "is this repo secure," "check our CI," "supply chain review," "harden our release," "review our workflows," or when a user points at a repo and asks what they should fix.
3 -
aibot88 Bundle Quality And Verification5-level verification pyramid: static→unit→Playwright E2E (homepage-first, 6bp)→AI visual→post-deploy. 8-check quality gate. Multi-agent testing (functional/security/a11y/performance). Playwright v1.59+ AI agents (Planner/Generator/Healer). WCAG 2.2 AA via axe-core v4.11. Percy+Chromatic visual regression. ADA Title II 2027/2028 deadlines.
3 -
aibot88 Bundle Accessibility A11Y EnhancedComprehensive WCAG compliance and accessibility testing covering ARIA, keyboard navigation, screen readers, color contrast, and automated a11y validation.
3 -
aibot88 Bundle Analyzing Component QualityExpert at analyzing the quality and effectiveness of Claude Code components (agents, skills, commands, hooks). Assumes component is already technically valid. Evaluates description clarity, tool permissions, auto-invoke triggers, security, and usability to provide quality scores and improvement suggestions.
3 -
aibot88 Bundle Apple Notes Core Workflow BExport and convert Apple Notes to Markdown, JSON, HTML, and SQLite. Use when backing up notes, exporting to other apps, converting HTML to Markdown, or building searchable note archives from Apple Notes. Trigger: "export apple notes", "apple notes to markdown", "backup apple notes", "apple notes to JSON", "convert apple notes".
3 -
aibot88 Bundle Bodhi Sdk React IntegrationIntegrate React+Vite web apps with bodhi-js-sdk for local LLM integration. Use when user asks to: "integrate bodhi", "add bodhi sdk", "connect to bodhi", "setup bodhi provider", "bodhi react integration", "deploy bodhi to github pages", or troubleshoot bodhi-js-sdk connection/auth issues.
3 -
aibot88 Bundle Cometchat Native ProductionProduction-readiness for React Native — server-minted auth tokens, user management CRUD, external-backend recipes (Express / Hono / Firebase Functions / Vercel Serverless). RN has no API routes, so the backend is always external.
3 -
aibot88 Bundle Developer Manual MaintainerÚdržba a aktualizace Klabis developer manuálu v docs/developerManual/. Použij tento skill kdykoli uživatel řekne "vytvoř developer manuál", "aktualizuj manuál", "doplň manuál o X", "podívej se co se změnilo a aktualizuj manuál", "zkontroluj manuál proti kódu", "syncuj manuál se zdrojákem", nebo žádá změnu ve struktuře/obsahu HTML stránek v docs/developerManual/. Použij ho i proaktivně po větším refactoringu v common modulu nebo framework-like částech members modulu (ActingUser, OAuth2 customizace) — manuál by měl popisovat aktuální API. Nepoužívej pro openspec specifikace, byznys-logiku modulů (events, calendar, members business), README ani jinou dokumentaci.
3 -
aibot88 Bundle Generic React Code ReviewerReview React/TypeScript code for bugs, security vulnerabilities, performance issues, accessibility gaps, and CLAUDE.md workflow compliance. Enforces TypeScript strict mode, GPU-accelerated animations, WCAG AA accessibility, bundle size limits, and surgical simplicity. Use when completing features, before commits, or reviewing pull requests.
3 -
aibot88 Bundle Optimized Nextjs TypescriptOptimized Next.js TypeScript best practices with modern UI/UX, focusing on performance, security, and clean architecture
3 -
aibot88 Bundle Syncfusion Blazor AccordionGuide for implementing the Syncfusion Blazor Accordion component for creating collapsible panels with expandable content. Use this skill when users need to build accordions, implement collapsible sections, create expandable panels, organize content in navigation components, implement FAQs, build collapsible menus, add nested accordions, configure expand modes (single or multiple), handle accordion events, customize accordion styling, implement accessible accordions with WCAG compliance, integrate data binding, or work with any vertically collapsible content containers in Blazor applications.
3 -
aibot88 Bundle Test IntegrationTest how components work together. Test database + API, auth + user service, etc. Use when testing multi-component flows or after unit tests pass.
3 -
aibot88 Bundle Accessibility Design CheckerEnsures designs meet accessibility requirements including WCAG compliance, color contrast, keyboard navigation, screen reader support, and focus management. Reviews designs for accessibility issues and provides recommendations.
3 -
aibot88 Bundle Android Accessibility PentestAndroid Accessibility Service security analysis and pentesting. Use this skill whenever the user mentions Android security testing, accessibility service abuse, RAT detection, malware analysis, ClayRat, PlayPraetor, overlay phishing, credential harvesting, or any Android app security assessment involving AccessibilityService APIs. This skill helps detect malicious accessibility services, analyze abuse patterns, and harden apps against accessibility-based attacks.
3 -
aibot88 Bundle Citrix Infrastructure DesignCitrix infrastructure architecture and capacity planning. Use when designing Citrix environments, planning capacity, sizing components, configuring high availability, designing multi-site deployments, or planning disaster recovery. Covers architecture patterns, component sizing, redundancy design, and best practices.
3 -
aibot88 Bundle Component Definition BuilderCreate and manage OSCAL component definitions for reusable security control implementations. Inspired by CivicActions components and community patterns. Use for building component libraries and shared control implementations.
3 -
aibot88 Bundle Composable Svelte DeploymentProduction deployment patterns for Composable Svelte SSR applications. Use when deploying to Fly.io, Docker, or any cloud platform. Covers multi-stage Docker builds, Fly.io configuration, security hardening, performance optimization, and integration with Composable Rust backends.
3 -
aibot88 Bundle Dashboard API AuthenticationProper authentication patterns for dashboard frontend API calls. Use when adding new API endpoints, creating components that fetch data, or debugging 401 Unauthorized errors. Covers JWT token handling, the apiRequest helper, and common pitfalls.
3 -
aibot88 Bundle Generic Static Code ReviewerReview static site code for bugs, security issues, performance problems, accessibility gaps, and CLAUDE.md compliance. Enforces pure HTML/CSS/JS standards, minimal page weight, mobile-first design. Use when completing features, before commits, or reviewing changes.
3 -
aibot88 Bundle Accessibility ReviewWCAG 2.1 AA compliance audit plus Universal Design for Learning (UDL 3.0) enhancement review for course designs. Two-tier output: "Must Fix" for accessibility violations and "Should Improve" for UDL recommendations. Works standalone or reads from the idstack project manifest. (idstack)
3 -
aibot88 Bundle Learning Regional ComplianceValidate compliance with regional data privacy laws (GDPR, CCPA, PIPEDA), accessibility requirements, age-appropriate content regulations, and copyright laws by jurisdiction. Use when ensuring legal compliance across regions. Activates on "GDPR", "data privacy", "regional compliance", or "legal requirements".
3 -
aibot88 Bundle Nutrient Document ProcessingProcess documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.
3 -
aibot88 Bundle Rollback And Hotfix StrategyPlanning and executing metadata rollbacks and emergency hotfixes in Salesforce orgs. Use when a production deployment causes regression and needs to be reverted, or when an urgent fix must bypass the normal release pipeline. Covers pre-deploy archive bundles, quick deploy for hotfixes, non-rollbackable component handling, and hotfix branch isolation. NOT for routine CI/CD pipeline setup (use continuous-integration-testing). NOT for destructive changes authoring (use destructive-changes-deployment).
3 -
aibot88 Bundle Playwright SkillBattle-tested Playwright patterns for writing, debugging, and scaling reliable test suites. Use when you need guidance for E2E, API, component, visual, accessibility, or security testing, plus CI/CD, CLI automation, page objects, and migration from Cypress or Selenium. TypeScript and JavaScript.
3 -
aibot88 Bundle Windsurf Theme CustomizationConfigure Windsurf themes and visual settings for accessibility. Activate when users mention "change theme", "customize colors", "accessibility settings", "visual preferences", or "dark mode". Handles theme configuration and accessibility compliance. Use when working with windsurf theme customization functionality. Trigger with phrases like "windsurf theme customization", "windsurf customization", "windsurf".
3 -
aibot88 Bundle Presentation MasterCreate beautiful HTML presentations from topic + authors. Generates slides + speaker notes. No dependencies, works offline.
3 -
aibot88 Bundle Docs Applying Content QualityUniversal markdown content quality standards for active voice, heading hierarchy, accessibility compliance (alt text, WCAG AA contrast, screen reader support), and professional formatting. Essential for all markdown content creation across docs/, Hugo sites, plans/, and repository files. Auto-loads when creating or editing markdown content.
3 -
aibot88 Bundle Generate Consistent Og ImagesHow to generate share-imagery (OpenGraph banners, portraits, squares, tall WhatsApp/iMessage cards) for any Lossless site or splash page so the resulting images form a coherent visual family. Use whenever a site, splash, plugin page, or fundraise deck needs an OG image generated or refreshed; whenever the user says "make an og image", "generate a banner", "we need a share image", "regenerate banners across formats", "the unfurl looks stale"; whenever scaffolding a new Astro Knots site that doesn't yet have an `og:image` or a `DESIGN.md`; whenever per-page or per-component custom illustrative imagery is needed even if it deliberately departs from the OG-image canon. Encodes the pattern of (1) check / create a DESIGN.md following the Google Stitch open spec, (2) check / add an `imagery:` recipe block to that DESIGN.md, (3) call Ideogram v3 generate with every field locked except `prompt` and `aspect_ratio`, (4) save with the canonical naming convention, (5) treat WhatsApp + iMessage chat-preview as the primary
3 -
aibot88 Bundle HTML Ppt Testing Safety Alert红琥珀警示 deck — 顶/底 45° 红黑 hazard 条纹、红色删除线否定标题、L1/L2/L3 绿/琥珀/红 tier 卡片、圆点状态 alert box、policy-yaml 代码块(红左边框 + bad 关键词高亮)、红绿 checklist、Q1 事故堆叠柱状图。适合安全 / 风险 / 事故复盘 / 红队 / 上线前 AI 评审 / policy-as-code。
3 -
aibot88 Bundle Learning Global AccessibilityValidate accessibility across international standards (WCAG, EN 301 549, Section 508), support diverse assistive technologies, address regional accessibility regulations, and design for global ability contexts. Use when ensuring worldwide accessibility. Activates on "global accessibility", "international WCAG", or "worldwide compliance".
3 -
aibot88 Bundle Qt Widget Accessibility AuditAudit Qt Widget applications for accessibility compliance using QAccessible interface and platform accessibility APIs
3 -
aibot88 Bundle Accessibility Inclusive DesignDesign, audit, and improve accessibility and inclusive user experiences. Use when Codex is asked about WCAG, keyboard navigation, focus states, screen readers, ARIA, contrast, captions, reduced motion, forms, semantic HTML, accessible UI, game accessibility, inclusive design, accessibility QA, or compliance-sensitive accessibility work.
3 -
aibot88 Bundle Accessibility Selenium TestingAccessibility testing toolkit using Selenium WebDriver 4+ with Java 21+ and axe-core engine. Use when asked to validate WCAG 2.1/2.2 compliance, scan pages or components for a11y violations, test keyboard navigation, audit color contrast, check ARIA semantics, generate accessibility reports, filter axe rules, debug screen reader issues, or implement POUR principles (perceivable, operable, understandable, robust).
3 -
aibot88 Bundle Cloudflare Full Stack ScaffoldProduction-ready starter project for React + Cloudflare Workers + Hono with core services (D1, KV, R2, Workers AI) and optional advanced features (Clerk Auth, AI Chat, Queues, Vectorize). Complete with planning docs, session handoff protocol, and enable scripts for opt-in features. Use when: starting new full-stack project, creating Cloudflare app, scaffolding web app, AI-powered application, chat interface, RAG application, need complete starter, avoid setup time, production-ready template, full-stack boilerplate, React Cloudflare starter. Prevents: service configuration errors, binding setup mistakes, frontend-backend connection issues, CORS errors, auth integration problems, AI SDK setup confusion, missing planning docs, incomplete project structure, hours of initial setup. Keywords: cloudflare scaffold, full-stack starter, react cloudflare, hono template, production boilerplate, AI SDK integration, workers AI, complete starter project, D1 KV R2 setup, web app template, chat application scaffold, RAG start
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 Accessibility A11y Enhanced, streamlit-master-architect, typescript-security-review. 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.