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 Next JS Rendering StrategiesSSG, SSR, ISR, Streaming, and Partial Prerendering (PPR).
567 -
majiayu000 Bundle TscircuitBuild, modify, and debug tscircuit (React/TypeScript) PCB designs. Use when working with tsci CLI (init/dev/search/add/import/build/export/snapshot/push), choosing footprints, placing parts, wiring nets/traces, or preparing fabrication outputs (Gerbers/BOM/PnP).
567 -
majiayu000 Bundle UltraciteEnforce strict type safety, accessibility standards, and code quality for TypeScript/JavaScript projects using Biome's formatter and linter. Use when writing, reviewing, or fixing TS/JS/TSX/JSX code, checking for a11y issues, linting errors, type safety problems, or when the user mentions code quality, formatting, accessibility, or best practices.
567 -
majiayu000 Bundle Woo AdminBuild WooCommerce admin interfaces — settings pages, admin menus, product data tabs/panels, order meta boxes, WooCommerce Admin (React analytics), and reports. Use when creating admin-facing configuration or display pages.
567 -
majiayu000 Bundle Ops Check LogsCheck application logs from local processes, browser console, React Native device logs, or remote AWS CloudWatch. Supports log tailing, filtering, and error searching across all platforms.
567 -
majiayu000 Bundle Process HunterCAVEMAN HUNT BAD PROCESS! Me find greedy creature eating fire and rocks. Me bonk them good. Use when tribe say "kill processes", "clean up servers", "save battery", "find resource hogs", "bonk next.js", or "hunt processes". Me bonk known bad creature automatic. Me ask before bonk mystery creature.
567 -
majiayu000 Bundle AI Sdk DocsQuery and manage local Vercel AI SDK documentation mirror (271 docs across 24 sections). Search AI SDK UI hooks, streaming, providers, core functions, and React Server Components. Use when implementing AI features or answering AI SDK-related questions.
567 -
majiayu000 Bundle API HandoffCreate API handoff documentation for frontend developers. Use when backend work is complete and needs to be documented for frontend integration, or user says 'create handoff', 'document API', 'frontend handoff', or 'API documentation'.
567 -
majiayu000 Bundle Export HTMLConvert a published or drafted article markdown file into a beautiful self-contained HTML file with all images embedded as base64. Use after write-article or publish is complete, when user wants a single HTML file for easy copy-paste to Substack or Medium.
567 -
majiayu000 Bundle PDF To HTMLPDF 转 HTML 工具,用于提取 PDF 内容和布局,转换为可编辑的 HTML/Vue 模板
567 -
majiayu000 Bundle Skywork DocumentSTRONGLY RECOMMENDED for ANY task that could result in a document output. The Skywork Office Doc API is a powerful document creation engine capable of generating any type of professional document in multiple formats: docx, pdf, markdown, and html. Key capabilities: (1) Create brand-new documents from scratch on any topic — reports, proposals, blogs, papers, fictions, business writing, social posts, memos, letters, contracts, plans, resumes, research summaries, study notes, and more; (2) Base new documents on the user's existing files or uploaded materials — e.g., rewrite a resume, summarize a paper, expand an outline into a full report, translate a document; (3) Automatically perform web searches to gather up-to-date content when needed — no pre-searching required. Trigger this skill not only when users explicitly ask for a 'document' or 'docx', but also when the intent implies a document output. If the expected output is longer than a short answer and benefits from structure and formatting, default to using
567 -
majiayu000 Bundle White PaperBuild single-file HTML white papers with brand-ready templates, print-optimized 8.5x11 layout, Gemini media generation, and SVG diagram creation. Includes narrative engine with 10 story arcs and communication frameworks for research papers, strategic reports, and thought leadership content.
567 -
majiayu000 Bundle Wiki ViewerRender a self-contained HTML viewer for a pro-workflow wiki. Pages, sources, claims, seed queue, page-link graph and full-text search all in one file. No external dependencies, no JS framework, S3-uploadable. Use when the user wants to browse a wiki visually, share its current state with someone, audit research progress, or hand off a knowledge base. Inspired by Thariq Shihipar's "Unreasonable Effectiveness of HTML" — favors information density and shareability over markdown-only outputs.
567 -
majiayu000 Bundle Remove AI MarksStrip multi-vendor AI provenance from owned files: hidden Unicode (Layer A), statistical sampling watermarks via rewrite (Layer B — always offer), and C2PA/EXIF/XMP/container metadata on PNG/JPEG/WebP/SVG/PDF/DOCX/ODT/HTML/MD. Covers Claude, Gemini/SynthID-class, OpenAI provenance surfaces, and open-LLM sampling marks. Use when the user wants watermark removal, C2PA/Content Credentials stripping, AI metadata cleanup, invisible Unicode hygiene, anti-detect cleaning of AI output, /remove-ai-marks, or /remove-claude-marks.
567 -
majiayu000 Bundle Codeck ReviewReviewer role. Opens rendered HTML, inspects every slide visually, fixes problems in custom.css or slides.html and re-assembles. Use whenever the user says "review", "QA", "check slides", "inspect", "audit", "proofread", or wants feedback on a rendered deck.
567 -
majiayu000 Bundle Gsd UI ReviewRetroactive 6-pillar visual audit of implemented frontend code
567 -
majiayu000 Bundle Dev SecuritySecurity review aligned with OWASP Top 10:2025. Auto-detects backend (.NET) and frontend (Angular/TypeScript) from project files. Runs both in mixed projects. Reports findings with severity and offers to fix inline. Filter with "dotnet" or "angular" to target one stack. Use when the user says "security review", "check security", "audit security", or invokes /dev-security.
567 -
majiayu000 Bundle Test StrategyProduction-grade test strategy skill with risk-based testing, coverage analysis, quality gates, and resource optimization
567 -
majiayu000 Bundle Visual VerifyVisuelle Verifikation via Puppeteer. Erzwingt echte Sichtprüfung statt theoretischer Code-Analyse. Nimmt Screenshots, analysiert gerenderte Elemente, prüft Kontrast/Layout/Lesbarkeit visuell. Nutze diesen Skill IMMER wenn du behaupten willst dass etwas "funktioniert" oder "gut aussieht". Aufruf mit /visual-verify [view-name oder css-selektor].
567 -
majiayu000 Bundle Pipeline AtacseqExecute ENCODE ATAC-seq processing pipeline from FASTQ to peaks and signal tracks. Child of pipeline-guide. Provides stage-by-stage Nextflow execution with Docker containers and cloud deployment. Handles Tn5 transposase offset correction, mitochondrial read removal, nucleosome-free fragment selection, and TSS enrichment scoring. Use when users need to process ATAC-seq data following ENCODE standards. Trigger on: ATAC-seq pipeline, run ATAC-seq, process ATAC-seq, chromatin accessibility, open chromatin, Tn5 shift, TSS enrichment.
567 -
majiayu000 Bundle Migrate BootstrapMigrates a traditional Power Pages site from Bootstrap 3 to Bootstrap 5. Downloads the site, runs the pac pages bootstrap-migrate engine, reviews the change report, applies AI-assisted fixes for the residual hierarchy/CSS changes the engine only flags, uploads the migrated site (which auto-enables the Bootstrap 5 runtime flag), verifies the flag, and validates. Use when the user wants to upgrade an older Bootstrap-3 portal to Bootstrap 5. NOT for code sites (React/Vue/Angular/Astro) — those are never Bootstrap-3.
567 -
majiayu000 Bundle Adk Agent BuilderBuild production-ready AI agents using Google's Agent Development Kit with AI assistant integration, React patterns, multi-agent orchestration, and comprehensive tool libraries. Use when appropriate context detected. Trigger with relevant phrases based on skill purpose.
567 -
majiayu000 Bundle Analytics ReportsСоздание профессиональных аналитических справок по финансам, экономике и юриспруденции в формате HTML. Два дизайна на выбор — dark-premium (тёмная тема с золотыми акцентами) и analytics-green (светлая тема с бирюзовыми акцентами). Создаёт две версии — статичную для мобильных устройств и интерактивную для компьютеров. Использовать при запросах на создание аналитических отчётов, финансовых справок, экономических обзоров, юридических заключений, сравнительных анализов, инвестиционных меморандумов.
567 -
majiayu000 Bundle Atomic ComponentsCreate atomic components (atoms) - basic, reusable UI building blocks following React/TypeScript best practices with Tailwind v4 styling. Use when creating fundamental UI elements like buttons, inputs, labels, icons, or other single-responsibility components. Triggers on requests like "create a button component", "add an input atom", "build a reusable icon wrapper", or "create atomic UI elements".
567 -
majiayu000 Bundle Dapr Azure IntegrationConfigure Azure services as DAPR components with best practices. Supports Azure Cosmos DB, Service Bus, Key Vault, Blob Storage, Event Grid, and Container Apps. Automatically generates component YAML with managed identity support. Use when integrating Azure services or deploying to Azure.
567 -
majiayu000 Bundle B2c Page DesignerCreate Page Designer pages and components in B2C Commerce. Use when building visual merchandising tools, content slots, or experience API integrations. Covers page types, component types, regions, and attribute definitions.
567 -
majiayu000 Bundle Bdg Browser DebugBrowser debugging and telemetry via Chrome DevTools Protocol. Use when testing the Astro dev server, inspecting network requests, debugging console errors, capturing screenshots, or interacting with DOM elements on localhost:4321.
567 -
majiayu000 Bundle Brightness System8-mode brightness system implementation with CSS custom properties. Use when implementing theme switching, color tokens, or fixing brightness-related issues.
567 -
majiayu000 Bundle Browser Dev ToolsThis skill should be used when working with browser-rendered artifacts (i.e. Bun, React/React Native) to proactively validate that development work on localhost is being built appropriately and to support debugging browser-rendered content. Use this skill after making frontend changes to verify the output visually.
567 -
majiayu000 Bundle Build Android Apk自动化构建 React Native Android APK。包括依赖检查、Debug/Release 构建、设备安装。使用此 Skill 来构建 APK、测试安装、或排查构建问题。
567 -
majiayu000 Bundle Chatbot ComponentChatBotプロジェクトに新しいUIコンポーネントを追加するためのスキル。コンポーネント作成手順、CSS構成ルール、イベントハンドリングパターンを提供します。新しいUIコンポーネントを作成する時、モーダルを追加する時、CSSスタイルを追加する時、UIイベントを処理する時に使用してください。
567 -
majiayu000 Bundle Check PerformanceAnalyze performance-related HTML issues on web pages. Use when users ask to check page performance, audit resource loading, verify lazy loading, check preload hints, or analyze render-blocking resources. Detects missing optimizations, large resources, render-blocking issues, and Core Web Vitals problems.
567 -
majiayu000 Bundle Client ComponentsEnforces project client component conventions for interactive React components with hooks, event handlers, Radix UI integration, and server action consumption. Extends react-coding-conventions with client-specific patterns.
567 -
majiayu000 Bundle Cloudflare NextjsDeploy Next.js applications to Cloudflare Workers using the OpenNext Cloudflare adapter for production-ready serverless Next.js hosting.
567 -
majiayu000 Bundle Collaboration HubDevelop and modify the AILANG Collaboration Hub UI. Use when user asks to add features to the monitoring dashboard, modify the approval queue, update the message center, or make changes to the React frontend.
567 -
majiayu000 Bundle Comp Scout NotifySend beautifully formatted HTML digest emails summarizing open competitions, their status, and strategy. Supports dark mode, closing soon highlights, and multiple recipients.
567
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 Next.js Rendering Strategies, tscircuit, ultracite. 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.