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 Pr ReportReview a pull request or contribution deeply, explain it tutorial-style for a maintainer, and produce a polished report artifact such as HTML or Markdown. Use when asked to analyze a PR, explain a contributor's design decisions, compare it with similar systems, or prepare a merge recommendation.
567 -
majiayu000 Bundle Book To SkillConverts books and documents (PDF, EPUB, DOCX, HTML, Markdown, plain text, RTF, MOBI/AZW with Calibre) into structured agent skills, extracting frameworks, mental models, principles, techniques, and anti-patterns. Use when the user wants to study a document through GitHub Copilot CLI, Amp, or Claude Code, apply an author's frameworks while working, or build a reusable knowledge base from a file.
567 -
majiayu000 Bundle Apollo ClientGuide for building React applications with Apollo Client 4.x. Use this skill when: (1) setting up Apollo Client in a React project, (2) writing GraphQL queries or mutations with hooks, (3) configuring caching or cache policies, (4) managing local state with reactive variables, (5) troubleshooting Apollo Client errors or performance issues.
567 -
majiayu000 Bundle Auto ValidateNext.js 코드 작성 후 자동 검증 (tsc, lint, build). Use when (1) 코드 구현 완료 후, (2) PR 생성 전, (3) 커밋 전 검증 필요 시. 모든 검증 통과 시에만 다음 단계 진행.
567 -
majiayu000 Bundle Axiom Axe RefUse when automating iOS Simulator UI interactions beyond simctl capabilities. Reference for AXe CLI covering accessibility-based tapping, gestures, text input, screenshots, video recording, and UI tree inspection.
567 -
majiayu000 Bundle Base UI ReactStatus: Beta (v1.0.0-beta.4) ⚠️ | Last Verified: 2025-11-18
567 -
majiayu000 Bundle Bom GeneratorGenerates Bill of Materials (BOM) from project descriptions for Arduino/ESP32/RP2040 projects. Use when user needs component lists, parts shopping lists, cost estimates, or asks "what parts do I need". Outputs formatted BOMs with part numbers, quantities, suppliers (DigiKey, Mouser, Amazon, AliExpress), and compatibility warnings. Run scripts/generate_bom.py for xlsx/csv export.
567 -
majiayu000 Bundle Bot DeveloperExpert bot developer specializing in Discord, Telegram, Slack automation with deep knowledge of rate limiting, state machines, event sourcing, moderation systems, and conversational AI integration. Activate on 'Discord bot', 'Telegram bot', 'Slack bot', 'chat automation', 'moderation system'. NOT for web APIs (use backend-architect), general automation scripts (use python-pro), or frontend chat widgets (use frontend-developer).
567 -
majiayu000 Bundle Browser PilotChrome DevTools Protocol (CDP) browser automation, web scraping, crawling. 브라우저 자동화, 웹 스크래핑, 크롤링. Features/기능: screenshot with region control 영역지정스크린샷, viewport control 뷰포트제어, PDF generation PDF생성, web scraping 웹스크래핑, data extraction 데이터추출, form filling 폼작성, login automation 로그인자동화, click/input 클릭/입력, element finder 요소찾기, tab management 탭관리, cookie control 쿠키제어, JavaScript execution JS실행, page navigation 페이지이동, wait for element 요소대기, scroll 스크롤, accessibility tree 접근성트리, console messages 콘솔메시지, network idle 네트워크대기, back/forward 뒤로/앞으로, reload 새로고침, file upload 파일업로드, React compatibility React호환성, Smart Mode with Interaction Map 스마트모드. Selectors 셀렉터: CSS selectors (ID, class, attribute), XPath selectors with wildcard * (text-based, structural), XPath indexing (select N-th element with same text). Smart Mode: text-based element search with automatic selector generation. Bot detection bypass 봇감지우회 (navigator.webdriver=false). Auto Chrome connection 자동크롬연결. Headless/headed mode. Daemon-based architecture 데몬기반. In
567 -
majiayu000 Bundle Bug Detective基于若依-vue-plus框架的Bug排查与调试标准流程。提供系统化的问题诊断方法论,涵盖: 1. 日志链路追踪与TraceId全链路分析 2. 全局异常处理器的堆栈解析方法 3. 框架级常见陷阱(Long精度丢失、逻辑删除、缓存不一致、权限拦截) 4. MyBatis-Plus与Redis的排查技巧 5. 分布式环境下的事务与并发问题定位 触发场景: - 系统报错(500/403/404等HTTP错误码) - 接口返回异常数据或格式错误 - 前端显示数据与数据库不一致 - 查询结果为空或数据缺失 - 事务回滚或数据不一致 - 缓存穿透、雪崩或击穿 - 性能问题(慢查询、高CPU、OOM) 触发词:Bug排查、异常定位、日志分析、TraceId追踪、精度丢失、逻辑删除、缓存不一致、权限403、事务失效、慢查询、N+1问题
567 -
majiayu000 Bundle Bun React SsrUse when building server-rendered React with Bun, including streaming SSR, hydration, renderToString, or custom SSR without a framework.
567 -
majiayu000 Bundle Check Libraryライブラリの情報を確認するためのスキル。Next.js、shadcn、その他のライブラリについて、適切なMCPサーバーを使用して最新のドキュメントと使用方法を取得します。
567 -
majiayu000 Bundle Cleaning DataSystematic data quality remediation - detect duplicates/outliers/inconsistencies, design cleaning strategy, execute transformations, verify results (component skill for DataPeeker analysis sessions)
567 -
majiayu000 Bundle CLI UX TesterExpert UX evaluator for command-line interfaces, CLIs, terminal tools, shell scripts, and developer APIs. Use proactively when reviewing CLIs, testing command usability, evaluating error messages, assessing developer experience, checking API ergonomics, or analyzing terminal-based tools. Tests for discoverability, consistency, error handling, help systems, and accessibility.
567 -
majiayu000 Bundle Clone WebsiteClone/replicate websites into production-ready Next.js 16 code using Firecrawl MCP. Use when user asks to: clone website, vibe clone, replicate landing page, copy website design, rebuild this site, recreate this page, clone specific sections (hero, pricing, footer, etc). Triggers: "clone this website", "vibe clone [url]", "replicate this landing page", "rebuild this site in Next.js", "clone the hero section from [url]", "copy this design".
567 -
majiayu000 Bundle Co5 EmergenceApply CO5 Emergence to recognize higher-order behavior arising from component interactions.
567 -
majiayu000 Bundle Component NewCreate a new React component with TypeScript and modern best practices
567 -
majiayu000 Bundle Compose HooksComposeHooks 项目使用指南 - 为 Jetpack Compose/Compose Multiplatform 提供 React Hooks 风格的状态管理和副作用处理。 使用此技能当需要:(1) 在 Compose 中管理组件状态 (useState, useGetState, useReducer), (2) 处理副作用和生命周期 (useEffect, useMount, useUnmount), (3) 管理网络请求 (useRequest),(4) 使用防抖/节流 (useDebounce, useThrottle), (5) 管理列表/Map状态 (useList, useMap),(6) 使用定时器 (useInterval, useTimeoutFn/useTimeoutPoll/useCountdown), (7) 全局状态管理 (useSelector, useDispatch),(8) 使用无头表格 (useTable/useTableRequest)。 关键词: Compose, Hooks, 状态管理, useRequest, useReducer, useState, useEffect
567 -
majiayu000 Bundle Context7 DocsUse this skill when working with any framework or library (React, Next.js, Vue, Astro, etc.) to fetch up-to-date documentation and prevent hallucinated APIs. Triggers on keywords like "use context7", "latest docs", "current API", or when working with rapidly evolving frameworks.
567 -
majiayu000 Bundle Cornell Notes将文本、URL或文件内容自动转换成美观的Cornell笔记HTML格式,包含Cue Column、Notes Column和Summary三部分,并自动更新index.html索引
567 -
majiayu000 Bundle Create EntityAutomate creation of complete CRUD entities (backend Laravel + frontend Vue) following Budget Manager project conventions. Use when the user asks to create a new entity, model, resource, or CRUD feature. Triggers on requests like "create a new category entity", "add a product model with CRUD", "generate an entity for transactions", or any request to scaffold a complete feature with database, API, and UI components.
567 -
majiayu000 Bundle CSS InspectorDeep CSS analysis tool for understanding specificity, cascade order, inheritance chains, and computed styles. Visualizes CSS complexity and suggests simplifications. Use when debugging specificity issues or understanding CSS behavior.
567 -
majiayu000 Bundle CSS StandardsCSS coding standards for Oh My Brand! theme. BEM methodology, custom properties, theme.json integration, responsive design, and accessibility. Use when styling blocks, templates or components.
567 -
majiayu000 Bundle Data FetchingBest practices and conventions for server-side data fetching, caching, and rendering in Next.js 16+ applications.
567 -
majiayu000 Bundle Data Viz 2025State-of-the-art data visualization for React/Next.js/TypeScript with Tailwind CSS. Creates compelling, tested, and accessible visualizations following Tufte principles and NYT Graphics standards. Activate on "data viz", "chart", "graph", "visualization", "dashboard", "plot", "Recharts", "Nivo", "D3". NOT for static images, print graphics, or basic HTML tables.
567 -
majiayu000 Bundle Deploy VercelProvides comprehensive Vercel deployment standards optimized for Next.js applications, covering environment configuration, edge functions, serverless architecture, database integration, cron jobs, and production best practices
567 -
majiayu000 Bundle Design ExportExport to PDF/HTML/markdown. Use when distributing documentation, creating presentations, or archiving design docs.
567 -
majiayu000 Bundle Design SystemNEVER use hardcoded Tailwind colors. ALWAYS use semantic CSS variables.
567 -
majiayu000 Bundle Dev DebuggingUNIFIED DEBUGGER - Use when tasks disappear, data is lost, things are broken, or bugs need fixing. Debug Vue.js reactivity, Pinia state, task store CRUD, keyboard shortcuts, canvas positions, drag-drop, cache, memory leaks, and performance. Invoke for "not working", "broken", "fix bug", "debug", "tasks missing", "shortcuts not working", "state not updating".
567 -
majiayu000 Bundle Docs SandpackUse when adding interactive code examples to React docs.
567 -
majiayu000 Bundle Document DOCXCreate, edit, and analyze Microsoft Word .docx files (reports, contracts, proposals) with styles, tables, headers/footers, template filling, content extraction, and conversion to HTML; support review workflows (comments/highlights) and inspect tracked changes via OOXML when needed using Python/Node.js (python-docx, docxtpl, mammoth.js, docx).
567 -
majiayu000 Bundle Email GatewayMulti-provider email sending for Cloudflare Workers and Node.js applications. Build transactional email systems with Resend (React Email support), SendGrid (enterprise scale), Mailgun (developer webhooks), or SMTP2Go (reliable relay). Includes template patterns, webhook verification, attachment handling, and error recovery. Use when sending emails via API, handling bounces/complaints, or migrating between providers.
567 -
majiayu000 Bundle Error Handler基于若依-vue-plus框架的后端全局异常处理规范。定义业务异常抛出、全局异常捕获、标准错误响应返回的完整规范体系。 确保系统错误统一处理,避免直接暴露堆栈信息,保障事务一致性和前后端交互的标准化。 触发场景: - 编写Service层业务逻辑需要抛出异常时 - 配置或修改GlobalExceptionHandler全局异常处理器时 - 处理Controller层错误响应时 - 实现事务回滚机制时 - 定义自定义异常类时 触发词:异常处理、全局异常、ServiceException、错误码、捕获异常、事务回滚、统一响应、业务异常
567 -
majiayu000 Bundle Eslint ConfigGenerates ESLint 9+ configuration using flat config format. Creates eslint.config.cjs with Vue and TypeScript linting rules for code quality enforcement.
567 -
majiayu000 Bundle Event ScraperCreate new event scraping scripts for websites. Use when adding a new event source to the Asheville Event Feed. ALWAYS start by detecting the CMS/platform and trying known API endpoints first. Browser scraping is NOT supported (Vercel limitation). Handles API-based, HTML/JSON-LD, and hybrid patterns with comprehensive testing workflows.
567 -
majiayu000 Bundle Feature BuildOrchestrator skill for the complete feature development lifecycle. Coordinates 5 phases - task selection, component design, build loop, analytics setup, and commit/documentation. Use when building any new feature or enhancement that requires multiple steps.
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 design-export, pr-report, book-to-skill. 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.