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.
-
majiayu000 Bundle Typescript Docs 2Generates comprehensive TypeScript documentation using JSDoc, TypeDoc, and multi-layered documentation patterns for different audiences. Use when creating API documentation, architectural decision records (ADRs), code examples, and framework-specific patterns for NestJS, Express, React, Angular, and Vue.
567 - majiayu000 Bundle Ln 631 Test Business Logic Auditor 2
Business Logic Focus audit worker (L3). Detects tests that validate framework/library behavior (Prisma, Express, bcrypt, JWT, axios, React hooks) instead of OUR code. Returns findings with REMOVE decisions.
567 -
joshuashepherd Skill Design Audit 2Audit a page or component against the AntiGravity 5-dimension design framework and project conventions. Use to check visual quality, accessibility, and consistency before shipping.
1 - joshuashepherd Skill Tailwind Cleanup 2
Scan and fix Tailwind anti-patterns — hardcoded colors, arbitrary values, raw HTML bypassing shadcn, layer violations, and dark/light mode issues. Enforces the D1→D6 token-first design chain.
1 - joshuashepherd Skill Tailwind Cleanup 3
Scan and fix Tailwind anti-patterns — hardcoded colors, arbitrary values, inconsistent spacing, and dark/light mode issues.
1 -
knownasnaffy Bundle Wechat Send 2Send a message to a contact or group via macOS WeChat desktop client. Use when the user asks to send a WeChat message, message someone on WeChat, or reply to a WeChat contact/group. v2.0 auto mode tries fast locate + verify first; falls back to Agent-assisted mode only when verification fails. Requires macOS, WeChat desktop logged in, Accessibility permission, and cliclick. NOT for reading messages, sending files/images.
0 - knownasnaffy Bundle Wechat Send 3
Send a message to a contact or group via macOS WeChat desktop client. Use when the user asks to send a WeChat message, message someone on WeChat, or reply to a WeChat contact/group. v2.0 auto mode tries fast locate + verify first; falls back to Agent-assisted mode only when verification fails. Requires macOS, WeChat desktop logged in, Accessibility permission, and cliclick. NOT for reading messages, sending files/images.
0 - knownasnaffy Bundle Scrapling 2
Web scraping using Scrapling — a Python framework with anti-bot bypass (Cloudflare Turnstile, fingerprint spoofing), adaptive element tracking, stealth headless browser, and full CSS/XPath extraction. Use when web_fetch fails (Cloudflare, JS-rendered pages), or when extracting structured data from websites (prices, articles, lists). Supports HTTP, stealth, and full browser modes. Source: github.com/D4Vinci/Scrapling (PyPI: scrapling). Only use on sites you have permission to scrape.
0 - knownasnaffy Bundle Wechat Send 4
Send a message to a contact or group via macOS WeChat desktop client. Use when the user asks to send a WeChat message, message someone on WeChat, or reply to a WeChat contact/group. v2.0 auto mode tries fast locate + verify first; falls back to Agent-assisted mode only when verification fails. Requires macOS, WeChat desktop logged in, Accessibility permission, and cliclick. NOT for reading messages, sending files/images.
0 - knownasnaffy Bundle Wechat Send 5
Automate sending text messages in the macOS WeChat desktop app by controlling the UI via AppleScript and JXA. This is NOT a WeChat chat channel for OpenClaw — it controls the WeChat GUI on your Mac to send messages on your behalf. Use when: (1) user asks to send a WeChat message to someone, (2) notifying a WeChat contact, (3) batch messaging multiple contacts. Requires: WeChat for Mac installed, logged in, and window visible. macOS Accessibility permission granted to node. NOT for: reading or receiving WeChat messages, group chat management, file/image transfers, or using WeChat as a conversation channel with OpenClaw.
0 - knownasnaffy Bundle Scrapling 3
Web scraping using Scrapling — a Python framework with anti-bot bypass (Cloudflare Turnstile, fingerprint spoofing), adaptive element tracking, stealth headless browser, and full CSS/XPath extraction. Use when web_fetch fails (Cloudflare, JS-rendered pages), or when extracting structured data from websites (prices, articles, lists). Supports HTTP, stealth, and full browser modes. Source: github.com/D4Vinci/Scrapling (PyPI: scrapling). Only use on sites you have permission to scrape.
0 - knownasnaffy Bundle Wechat Send 6
Send a message to a contact or group via macOS WeChat desktop client. Use when the user asks to send a WeChat message, message someone on WeChat, or reply to a WeChat contact/group. v2.0 auto mode tries fast locate + verify first; falls back to Agent-assisted mode only when verification fails. Requires macOS, WeChat desktop logged in, Accessibility permission, and cliclick. NOT for reading messages, sending files/images.
0 - knownasnaffy Bundle Google Workspace 5
MANDATORY for ALL email operations: sending, drafting, replying, forwarding, reading, searching, triaging, or analyzing email — invoke this skill BEFORE composing or sending any email, even when email is part of a larger task. Also mandatory for all other Google Workspace operations: Calendar, Drive, Sheets, Docs, Tasks, Chat, Contacts, and cross-service workflows. ALSO MANDATORY when looking up any contact information — email addresses, phone numbers, mailing addresses — even as part of another task (e.g., scheduling a meeting). Includes Arlen's authentic email voice, seasonal HTML formatting, security scanning, preferred recipient addresses, and BCC/signature rules. TRIGGER KEYWORDS: email, send, draft, reply, forward, inbox, Gmail, message, CC, BCC, contact lookup, calendar, schedule, drive, sheets, docs.
0 -
micsapp Bundle A11Y AuditAccessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases. Use when auditing accessibility, fixing a11y violations, checking color contrast, generating compliance reports, or integrating accessibility checks into CI/CD pipelines.
3 - micsapp Bundle API Contract
Configure this skill should be used when the user asks about "API contract", "api-contract.md", "shared interface", "TypeScript interfaces", "request response schemas", "endpoint design", or needs guidance on designing contracts that coordinate backend and frontend agents. Use when building or modifying API endpoints. Trigger with phrases like 'create API', 'design endpoint', or 'API scaffold'.
3 - micsapp Bundle Code Formatter 2
Execute automatically formats and validates code files using Prettier and other formatting tools. Use when users mention "format my code", "fix formatting", "apply code style", "check formatting", "make code consistent", or "clean up code formatting". Handles JavaScript, TypeScript, JSON, CSS, Markdown, and many other file types. Trigger with relevant phrases based on skill purpose.
3 - micsapp Skill Pinia Store Setup
Pinia Store Setup - Auto-activating skill for Frontend Development. Triggers on: pinia store setup, pinia store setup Part of the Frontend Development skill category.
3 - micsapp Skill Open Graph Creator 2
Open Graph Creator - Auto-activating skill for Frontend Development. Triggers on: open graph creator, open graph creator Part of the Frontend Development skill category.
3 - micsapp Skill React Hook Creator
React Hook Creator - Auto-activating skill for Frontend Development. Triggers on: react hook creator, react hook creator Part of the Frontend Development skill category.
3 - micsapp Skill Web Vitals Monitor 2
Web Vitals Monitor - Auto-activating skill for Frontend Development. Triggers on: web vitals monitor, web vitals monitor Part of the Frontend Development skill category.
3 - micsapp Skill React Context Setup 2
React Context Setup - Auto-activating skill for Frontend Development. Triggers on: react context setup, react context setup Part of the Frontend Development skill category.
3 - micsapp Bundle IOS Hig Design
Build native iOS interfaces following Apple Human Interface Guidelines. Use when the user mentions "iPhone app", "iPad layout", "SwiftUI", "UIKit", "Dynamic Island", "safe areas", or "HIG compliance". Covers navigation patterns, accessibility, SF Symbols, and platform conventions. For general UI polish, see refactoring-ui. For affordance design, see design-everyday-things. Trigger with 'ios', 'hig', 'design'.
3 - micsapp Skill Bundle Size Analyzer 2
Bundle Size Analyzer - Auto-activating skill for Frontend Development. Triggers on: bundle size analyzer, bundle size analyzer Part of the Frontend Development skill category.
3 - micsapp Skill CSS Module Generator 2
Css Module Generator - Auto-activating skill for Frontend Development. Triggers on: css module generator, css module generator Part of the Frontend Development skill category.
3 - micsapp Skill Aria Attribute Helper 2
Aria Attribute Helper - Auto-activating skill for Frontend Development. Triggers on: aria attribute helper, aria attribute helper Part of the Frontend Development skill category.
3 - micsapp Skill Code Splitting Helper 2
Code Splitting Helper - Auto-activating skill for Frontend Development. Triggers on: code splitting helper, code splitting helper Part of the Frontend Development skill category.
3 - micsapp Skill Redux Slice Generator 2
Redux Slice Generator - Auto-activating skill for Frontend Development. Triggers on: redux slice generator, redux slice generator Part of the Frontend Development skill category.
3 - micsapp Skill Zustand Store Creator 2
Zustand Store Creator - Auto-activating skill for Frontend Development. Triggers on: zustand store creator, zustand store creator Part of the Frontend Development skill category.
3 - micsapp Skill Color Contrast Checker 2
Color Contrast Checker - Auto-activating skill for Frontend Development. Triggers on: color contrast checker, color contrast checker Part of the Frontend Development skill category.
3 - micsapp Skill Pwa Manifest Generator 2
Pwa Manifest Generator - Auto-activating skill for Frontend Development. Triggers on: pwa manifest generator, pwa manifest generator Part of the Frontend Development skill category.
3 - micsapp Skill Vue Composable Creator 2
Vue Composable Creator - Auto-activating skill for Frontend Development. Triggers on: vue composable creator, vue composable creator Part of the Frontend Development skill category.
3 - micsapp Skill Vue Component Generator 2
Vue Component Generator - Auto-activating skill for Frontend Development. Triggers on: vue component generator, vue component generator Part of the Frontend Development skill category.
3 - micsapp Skill Lazy Loading Implementer 2
Lazy Loading Implementer - Auto-activating skill for Frontend Development. Triggers on: lazy loading implementer, lazy loading implementer Part of the Frontend Development skill category.
3 - micsapp Skill Styled Components Helper 2
Styled Components Helper - Auto-activating skill for Frontend Development. Triggers on: styled components helper, styled components helper Part of the Frontend Development skill category.
3 - micsapp Skill Tailwind Class Optimizer 2
Tailwind Class Optimizer - Auto-activating skill for Frontend Development. Triggers on: tailwind class optimizer, tailwind class optimizer Part of the Frontend Development skill category.
3 - micsapp Skill Image Optimization Helper 2
Image Optimization Helper - Auto-activating skill for Frontend Development. Triggers on: image optimization helper, image optimization helper Part of the Frontend Development skill category.
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 tailwind-cleanup, wechat-send, google-workspace. 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.