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.
-
findscripter Skill Trpc Typesafe API当用 TypeScript 单仓前后端(Next.js/Remix/Express+React)需要免 Schema、免代码生成的端到端类型安全 API,或为已有 tRPC 加鉴权中间件、订阅、SSR 调用时使用;做 router/procedure 设计、Zod 输入校验、双 context 工厂、protectedProcedure、客户端 React Query 接线并产出可落地代码;不适用于跨语言/异构客户端、纯 REST/GraphQL 契约、裸 SQL 或 ORM 调优。触发词:tRPC、router、procedure、Zod、createTRPCContext、protectedProcedure、useQuery
Audited -
findscripter Skill Demo Video Generator当需要把截图/界面/场景描述做成产品演示、功能展示、宣传短片或 GIF 时使用;编排 playwright(截图)+edge-tts(配音)+ffmpeg(合成),产出 demo-output/(HTML 场景、旁白脚本、scenes.json、build.sh、output.mp4 1920x1080);不适用于剪辑已有视频素材、真人实拍或纯静态图文海报;触发词:演示视频、产品走查、功能展示、宣传片、demo、GIF
Audited -
findscripter Skill HTML Animated Slides当要从零创建或把 PPT/PPTX 转成纯前端、富动画、零依赖的单文件 HTML 幻灯片,且每页严格满屏(100vh)适配时使用;做的事是按内容与风格生成内联 CSS/JS、可键盘/滑动翻页、可选浏览器内编辑的自包含 .html 演示文稿;不适用于产出 .pptx 原生文件、需要框架/构建工具的工程,或普通网页/长文档;触发词:HTML幻灯片、网页PPT、演示文稿、slide deck、PPT转网页、满屏适配、reveal动画
-
findscripter Skill LLM App Production Patterns当需要在 RAG 检索策略、智能体架构(ReAct/函数调用/计划执行/多智能体)、Prompt 编排与生产可靠性模式之间选型并落地时使用;做按"架构决策矩阵"挑选模式并产出可运行实现骨架(混合检索、ReAct/工具调用循环、Prompt 链、缓存/限流/重试/回退、LLMOps 指标与评测);不适用于无 LLM 的传统 ML、与 AI 无关的 UI 改动,或尚无数据源/部署目标时;触发词:RAG、ReAct、函数调用、计划执行、多智能体、Prompt 链、LLMOps、缓存限流回退
Audited -
findscripter Skill Animejs Web Animation当用 JavaScript 编排复杂、高保真网页动画(时间线、交错、SVG 路径)时使用;产出基于 Anime.js 的可运行动画代码与编排方案;不适用于一行 CSS transition 能搞定的简单过渡或后端逻辑。触发词:Anime.js、时间线动画、stagger 交错、SVG 路径动画、落地页编排
Audited -
findscripter Skill Astro Content Sites何时使用
-
brathod1432 Bundle XLSXUse this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
-
brathod1432 Bundle Theme FactoryToolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
-
brathod1432 Bundle Senior QAGenerates unit tests, integration tests, and E2E tests for React/Next.js applications. Scans components to create Jest + React Testing Library test stubs, analyzes Istanbul/LCOV coverage reports to surface gaps, scaffolds Playwright test files from Next.js routes, mocks API calls with MSW, creates test fixtures, and configures test runners. Use when the user asks to "generate tests", "write unit tests", "analyze test coverage", "scaffold E2E tests", "set up Playwright", "configure Jest", "implement testing patterns", or "improve test quality".
-
brathod1432 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.
-
brathod1432 Bundle Spec To RepoUse when the user says 'build me an app', 'create a project from this spec', 'scaffold a new repo', 'generate a starter', 'turn this idea into code', 'bootstrap a project', 'I have requirements and need a codebase', or provides a natural-language project specification and expects a complete, runnable repository. Stack-agnostic: Next.js, FastAPI, Rails, Go, Rust, Flutter, and more.
-
brathod1432 Bundle Webapp TestingToolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
-
brathod1432 Bundle Frontend Design---
-
brathod1432 Bundle Senior FrontendFrontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.
-
brathod1432 Bundle Senior FullstackFullstack development toolkit with project scaffolding for Next.js, FastAPI, MERN, and Django stacks, code quality analysis with security and complexity scoring, and stack selection guidance. Use when the user asks to "scaffold a new project", "create a Next.js app", "set up FastAPI with React", "analyze code quality", "audit my codebase", "what stack should I use", "generate project boilerplate", or mentions fullstack development, project setup, or tech stack comparison.
-
brathod1432 Bundle Saas ScaffolderGenerates complete, production-ready SaaS project boilerplate including authentication, database schemas, billing integration, API routes, and a working dashboard using Next.js 14+ App Router, TypeScript, Tailwind CSS, shadcn/ui, Drizzle ORM, and Stripe. Use when the user wants to create a new SaaS app, start a subscription-based web project, scaffold a Next.js application, or mentions terms like starter template, boilerplate, new project, or wiring up auth and payments.
-
brathod1432 Bundle Apple Hig ExpertExpert guidance on Apple Human Interface Guidelines (HIG). Covers iOS, macOS, and visionOS with 2026 Liquid Glass aesthetics and accessibility-first design.
-
brathod1432 Bundle HTML To Image AutomationAutomate Html To Image tasks via Rube MCP (Composio). Always search tools first for current schemas.
-
javimosch Skill Web MCPWebMCP - Enable AI agents to interact with your web applications through structured tools. Implements the WebMCP standard for Next.js/React apps with tool registration, event bridge pattern, and contextual tool loading. Use when building AI-agent accessible web apps, adding MCP capabilities to existing projects, or creating tool-based interfaces for AI interactions.
-
javimosch Skill Screenshot CaptureCapture screenshots on Windows using mss and Pillow. Provides full-screen, region, and multi-monitor capture with output as PIL Image, PNG file, or base64 string. Use when the user asks to take screenshots, capture screen content, get screen info, or needs screen images for AI vision APIs.
-
javimosch Skill IOS Device AutomationVision-driven iOS device automation using Midscene CLI. Operates entirely from screenshots — no DOM or accessibility labels required. Can interact with all visible elements on screen regardless of technology stack. Control iOS devices with natural language commands via WebDriverAgent. Triggers: ios, iphone, ipad, ios app, tap on iphone, swipe, mobile app ios, ios device, ios testing, iphone automation, ipad automation, ios screen, ios navigate Powered by Midscene.js (https://midscenejs.com)
-
javimosch Skill Better AuthComplete Better Auth documentation in markdown format. Use when implementing authentication in TypeScript projects - covers OAuth providers (Google, GitHub, etc.), email/password, passkeys, 2FA, session management, database adapters (Prisma, Drizzle), and framework integrations (Next.js, SvelteKit, etc.).
-
javimosch Skill Browser AutomationVision-driven browser automation using Midscene. Operates entirely from screenshots — no DOM or accessibility labels required. Can interact with all visible elements on screen regardless of technology stack. Opens a new browser tab for each target URL via Puppeteer (headless Chrome). Use this skill when the user wants to: - Browse, navigate, or open web pages - Scrape, extract, or collect data from websites - Fill out forms, click buttons, or interact with web elements - Verify, validate, or test frontend UI behavior - Take screenshots of web pages - Automate multi-step web workflows - Run browser automation or check website content Powered by Midscene.js (https://midscenejs.com)
-
javimosch Skill Android Device AutomationVision-driven Android device automation using Midscene. Operates entirely from screenshots — no DOM or accessibility labels required. Can interact with all visible elements on screen regardless of technology stack. Control Android devices with natural language commands via ADB. Perform taps, swipes, text input, app launches, screenshots, and more. Trigger keywords: android, phone, mobile app, tap, swipe, install app, open app on phone, android device, mobile automation, adb, launch app, mobile screen Powered by Midscene.js (https://midscenejs.com)
-
javimosch Skill Apple Developer ToolkitAll-in-one Apple developer skill with three integrated tools shipped as a single unified binary. (1) Documentation search across Apple frameworks, symbols, and 1,267 WWDC sessions from 2014-2025. No credentials needed. (2) App Store Connect CLI with 120+ commands covering builds (find/wait/upload), TestFlight, pre-submission validate, submissions, signing, subscriptions (family-sharable), IAP, analytics, Xcode Cloud, metadata workflows, release pipeline dashboard, insights, win-back offers, promoted purchases, product pages, nominations, accessibility declarations, pre-orders, pricing filters, localizations update, diff, webhooks with local receiver, workflow automation, and more. Requires App Store Connect API key. (3) Multi-platform app builder (iOS/watchOS/tvOS/iPad/macOS/visionOS) that generates complete Swift/SwiftUI apps from natural language with auto-fix, simulator launch, interactive chat mode, and open-in-Xcode. Requires an LLM API key and Xcode. Includes 38 iOS development rules and 12 SwiftUI best
-
javimosch Skill Desktop Computer AutomationVision-driven desktop automation using Midscene. Control your desktop (macOS, Windows, Linux) with natural language commands. Operates entirely from screenshots — no DOM or accessibility labels required. Can interact with all visible elements on screen regardless of technology stack. Triggers: open app, press key, desktop, computer, click on screen, type text, screenshot desktop, launch application, switch window, desktop automation, control computer, mouse click, keyboard shortcut, screen capture, find on screen, read screen, verify window, close app, minimize window, maximize window Powered by Midscene.js (https://midscenejs.com)
-
javimosch Skill Here NowPublish files and folders to the web instantly. Static hosting for HTML sites, images, PDFs, and any file type. Use when asked to "publish this", "host this", "deploy this", "share this on the web", "make a website", "put this online", "upload to the web", "create a webpage", "share a link", "serve this site", or "generate a URL". Outputs a live, shareable URL at {slug}.here.now.
-
javimosch Skill Skywork ExcelSkywork Excel (skywork) - Use for ANY task involving Excel, spreadsheets, tables, data analysis, or file conversion. Has BUILT-IN web search for real-time data (stocks, rates, stats). Pass user's original query directly without rewriting. Capabilities: (1) Create Excel/CSV with formulas, charts, pivots; (2) Analyze Excel/CSV/PDF/Image files - dashboards, visualizations; (3) Fetch live web data; (4) HTML reports; (5) Convert formats (PDF-to-Excel, image-to-table); (6) Financial models, budgets. Trigger on Excel/CSV/PDF/Image uploads or structured-output requests. Keywords: 'create Excel', 'spreadsheet', 'analyze data', 'chart', 'pivot table', 'dashboard', 'PDF to Excel', 'stock price', 'forecast', '创建Excel', '做表格', '数据分析', '生成图表', '数据透视表', '股价查询', 'Excelを作成', 'データ分析', 'グラフ作成', 'Excel 만들기', '데이터 분석', '차트', 'crear Excel', 'analizar datos', 'créer Excel', 'Excel erstellen', 'Datenanalyse', 'создать Excel', 'анализ данных', 'إنشاء Excel', 'Excel बनाओ', 'สร้าง Excel', 'tạo Excel', 'buat Excel', 'creare Excel'.
-
javimosch Skill PinchtabUse this skill when a task needs browser automation through PinchTab: open a website, inspect interactive elements, click through flows, fill out forms, scrape page text, log into sites with a persistent profile, export screenshots or PDFs, manage multiple browser instances, or fall back to the HTTP API when the CLI is unavailable. Prefer this skill for token-efficient browser work driven by stable accessibility refs such as `e5` and `e12`.
Audited -
javimosch Skill DoppelCreate AI digital twins of real people from WhatsApp chat history exports. Clone your friends, colleagues, or contacts into AI agents that talk, think, and react like them. Use when the user wants to: create a digital twin, clone a WhatsApp contact into an AI agent, build a persona from chat history, make an AI version of someone, create a doppelgänger agent, or simulate a conversation with someone based on their real messages. Triggers: digital twin, clone friend, chat clone, persona, doppelgänger, twin agent, AI clone, simulate person, WhatsApp clone, chat personality, mimic friend. Important: Requires explicit consent from the person being cloned. Always confirm permission before proceeding.
-
javimosch Skill Web Accessibility AuditorAudits HTML/CSS for WCAG 2.1 compliance. Color contrast, ARIA labels, keyboard navigation, screen reader support.
-
javimosch Skill Copilotkit Runtime PatternsServer-side runtime patterns for CopilotKit. Use when setting up CopilotKit runtime endpoints (Express, Hono, Next.js), configuring remote agent endpoints, adding middleware, or securing the runtime. Triggers on backend tasks involving @copilotkit/runtime, CopilotRuntime, agent registration, or API endpoint configuration.
Audited -
amey-thakur Skill Frontend StateDecide where frontend state lives and how it flows, so UIs stay predictable as they grow. Use when structuring components, adding state, or untangling prop-drilling and sync bugs.
-
amey-thakur Skill Aria UsageUse ARIA correctly by preferring native HTML, applying roles/states/properties only where needed, and following known widget patterns. Use when making custom components accessible or fixing broken ARIA.
Audited -
amey-thakur Skill CSS DebuggingDiagnose layout, stacking, and overflow bugs by isolating the failing rule with devtools instead of guessing. Use when an element is misplaced, invisible, unscrollable, or styled by something you cannot find.
Audited -
amey-thakur Skill Frontend RoutingStructure client routes so the URL is the source of truth, data loads per route, and back/scroll behave. Use when adding routes, wiring route data loading, or fixing lost-filter or scroll-jump bugs.
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 desktop-computer-automation, trpc-typesafe-api, demo-video-generator. 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.