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.
-
mindrally Skill GRAPHQL DevelopmentGraphQL development guidelines with type-safe clients, schema design, and integration with React and Next.js.
-
mindrally Skill Less Best PracticesLess CSS best practices and coding guidelines for maintainable, modular stylesheets
-
mindrally Skill Beautifulsoup ParsingExpert guidance for HTML/XML parsing using BeautifulSoup in Python with best practices for DOM navigation, data extraction, and efficient scraping workflows.
-
mindrally Skill Nuxtjs Vue TypescriptBest practices for building Nuxt 3 and Vue 3 applications with TypeScript, the Composition API, and Tailwind CSS. Use when structuring Nuxt/Vue projects, writing composables, typing components and props, wiring up server routes and plugins, or optimizing Nuxt builds and Web Vitals.
-
mindrally Skill Postcss Best PracticesPostCSS best practices and configuration guidelines for modern CSS processing and optimization
-
mindrally Skill Performance OptimizationPerformance optimization guidelines for web development including server-side rendering, CSS best practices, and JavaScript optimization
-
mindrally Skill Rtl InternationalizationRight-to-left (RTL) layout and bidirectional text support for Hebrew, Arabic, Persian, and Urdu interfaces. Use when building UI that must support RTL languages, converting physical CSS/Tailwind properties to logical ones, handling mixed-direction (bidi) text, mirroring directional icons, or testing an app with dir="rtl".
-
mindrally Skill Zustand State ManagementBest practices for Zustand state management in React and TypeScript applications, covering store design, selectors, middleware, SSR, and testing. Use when creating or refactoring Zustand stores, deciding whether state belongs in Zustand vs component state vs a server-state library, optimizing selector re-renders, adding persist/devtools/immer middleware, or handling Zustand with SSR/React Server Components.
-
mindrally Skill React Native Cursor RulesReact Native development best practices for TypeScript, functional components, performance optimization, and styling guidelines.
-
mindrally Skill Styled Components Best Practicesstyled-components best practices for CSS-in-JS development in React applications
-
mindrally Skill Nextjs React Redux Typescript Cursor RulesComprehensive Next.js, React, Redux, and TypeScript development guidelines covering SOLID principles, component architecture, and best practices.
-
mindrally Skill Expo React Native Javascript Best PracticesExpo React Native JavaScript best practices for clean code, functional components, performance optimization, and Expo Router navigation.
-
rmyndharis Skill C4 ContextExpert C4 Context-level documentation specialist. Creates high-level system context diagrams, documents personas, user journeys, system features, and external dependencies. Synthesizes container and component documentation with system documentation to create comprehensive context-level architecture. Use when creating the highest-level C4 system context documentation.
-
rmyndharis Skill C4 ComponentExpert C4 Component-level documentation specialist. Synthesizes C4 Code-level documentation into Component-level architecture, defining component boundaries, interfaces, and relationships. Creates component diagrams and documentation. Use when synthesizing code-level documentation into logical components.
-
rmyndharis Skill C4 ContainerExpert C4 Container-level documentation specialist. Synthesizes Component-level documentation into Container-level architecture, mapping components to deployment units, documenting container interfaces as APIs, and creating container diagrams. Use when synthesizing components into deployment containers and documenting system deployment architecture.
-
rmyndharis Skill UI UX DesignerCreate interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, user flows, or interface optimization.
-
rmyndharis Skill Mobile DeveloperDevelop React Native, Flutter, or native mobile apps with modern architecture patterns. Masters cross-platform development, native integrations, offline sync, and app store optimization. Use PROACTIVELY for mobile features, cross-platform code, or app optimization.
-
rmyndharis Skill React State ManagementMaster modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.
-
rmyndharis Skill Frontend Security CoderExpert in secure frontend coding practices specializing in XSS prevention, output sanitization, and client-side security patterns. Use PROACTIVELY for frontend security implementations or client-side security code reviews.
-
aliyun Bundle Alibabacloud Docmind ParseAlibaba Cloud DocMind intelligent document parsing tool. Supports PDF, Word, PPT, Excel, images and more, outputting structured Markdown/JSON/HTML. Offers two invocation modes — V2 API direct access and Alibaba Cloud POP — with automatic routing based on credential availability. Use when the user needs to parse documents, extract content (text/tables/images), convert documents to Markdown, or mentions "docmind", "document parsing", "parse file", etc.
-
aliyun Bundle Alibabacloud Esa Pages DeployDeploy HTML pages, static directories, or custom edge functions to Alibaba Cloud ESA edge nodes. Manage Edge KV for distributed key-value storage. Use when deploying web pages, static sites, frontend builds, serverless edge functions, or edge data storage to ESA Functions & Pages.
-
aliyun Bundle Alibabacloud Rds Mysql InspectionBatch health inspection for Alibaba Cloud RDS MySQL instances. Supports single, multiple, or all-instance global scan with configurable time window (default 7 days, max 30). Outputs one HTML report per instance plus a summary HTML. Dimensions: instance basics, resource utilization (CPU/memory/disk/IOPS/connections), CloudMonitor alert history, top 20 space-consuming tables (DAS), slow log statistics (DAS), kernel-version / expiration checks. Cluster instances auto-detected; per-node metrics and slow logs. Triggers: RDS inspection, RDS health check, RDS MySQL inspection, Alibaba Cloud RDS inspection, batch/global/multi-instance inspection, slow log analysis, space analysis, RDS 巡检, 阿里云 RDS 巡检, 数据库巡检, 批量巡检, 慢日志分析, 表空间分析.
-
aliyun Bundle Alibabacloud Security Health Check阿里云已签约客户安全产品配置基线体检与整改清单生成。扫描 WAF 3.0 / SAS / CFW / DDoS 四类产品共 60 项配置,按覆盖率/防护强度/响应时效/合规对齐/最佳实践五维度打分(百分制), 输出 HTML 报告 + Excel 整改清单 + Markdown 摘要三件套。 何时使用:客户问"配置有没有问题/哪些没开/打几分"、CSM 月度巡检/续约前价值证明、 售前做安全基线审计、安全治理项目立项前评估。 不适用:写方案→security-solution-generator;底盘分析→security-customer-analysis; 月度拦截汇报→waf3-monthly-report/sas-security-report;等保→dengbao-calculator。 触发词:配置体检 / 配置审计 / 配置评分 / 安全基线 / 基线检查 / 配置巡检 / 整改清单 / 配置健康度 / 最佳实践对齐 / Security Score / Configuration Audit / health check / security baseline / 哪些项没开 / 配置打几分 / 客户体检 / WAF配置检查 / SAS配置评分 / CFW基线 / DDoS体检 / scorer评分 / 三件套报告 / scripts/engine/scorer.py / report_html.py / report_excel.py / report_markdown.py / health-report.html / remediation.xlsx / exec-summary.md / 配置项打分 / pip install + scorer.py / ImportError + scorer / 安全基线检查 + 依赖。 即使 Prompt 中直接给出 scripts/engine/scorer.py 等脚本路径或提及依赖安装, 仍属本技能调用场景,不可判为独立代码执行或通用 pip 运维任务。
-
aliyun Bundle Alibabacloud Ecs Health InspectionECS Health Inspection - Perform comprehensive health inspection on Alibaba Cloud ECS instances. Checks CPU usage, system load, memory usage, disk IO (BPS and IOPS), network traffic, disk capacity, and GPU metrics (when applicable). Generates a structured HTML inspection report with findings and recommendations. Use when users request ECS health inspection, instance health check, performance inspection, resource usage report, or system health status of an ECS instance.
-
aliyun Bundle Alibabacloud Polardb Mysql InspectionHealth inspection for Alibaba Cloud PolarDB MySQL instances, generating visual HTML reports. Supports five inspection dimensions: 1. Resource Monitoring — CPU, memory, IOPS, connections usage trends (including Proxy nodes) 2. Space Analysis — Top 20 table space usage, auto-increment primary key usage 3. Slow Query Log — Slow SQL statistics and analysis 4. Session Diagnostics — Current active connections and session status 5. Alert History — CloudMonitor alert records Supports single-instance, multi-instance, and full-account inspection modes. Trigger keywords: PolarDB inspection, instance health check, database inspection report, CPU/memory/IOPS usage, disk space analysis, table space usage, largest tables, top table space, slow query statistics, slow SQL analysis, alert records, alert history, connection monitoring, active sessions, database performance check.
-
aliyun Bundle Alibabacloud Kvstore Health InspectionHealth inspection for Alibaba Cloud Redis (ApsaraDB for Redis / Tair) instances. Generates HTML reports across 7 dimensions: instance basic info, current sessions, resource usage trends (CPU/memory/connection/bandwidth, last 7 days), big key / hot key analysis, slow log statistics, alert history, and risk-prioritized recommendations. Supports standard / cluster / SplitRW architectures, Tair PENA (persistent memory) and Tair ESSD (disk) types. Single-instance, multi-instance and full-account batch modes are supported. Trigger keywords: Redis inspection, Redis health check, KVStore inspection, Tair inspection, CPU usage, memory usage, connection usage, bandwidth usage, proxy usage, persistent memory, disk usage, slow log, big key, hot key, alert history, instance health report.
-
duc01226 Skill Lint[Code Quality] Use when you need to run linters and fix issues for backend or frontend.
-
duc01226 Bundle Scan[Documentation] Use when scanning the codebase to (re)generate ONE project-reference doc. Parameterized by `--target=<key>`: project-structure | backend-patterns | frontend-patterns | scss-styling | design-system | code-review-rules | domain-entities | feature-spec | docs-index | e2e-tests | integration-tests | seed-test-data | ui-system. Shared 4-phase scan engine; per-target detail lives in references/targets.md. `ui-system` is an orchestrator meta-target (`kind: orchestrator`) that runs the 3 UI child scans in parallel instead of the 4-phase engine.
-
duc01226 Bundle Tech Spec[Documentation] Use when (re)generating the DERIVED technical spec view over code + tests, or reporting canonical §8 TC/test-code drift. A GENERATOR — it projects code + tests into a regenerable per-component view and NEVER authors business content. Modes generate|audit|sync. Per-mode procedure lives in references/{author,sync}.md.
-
duc01226 Bundle Pbi Mockup[Project Management] Use when you need to generate an HTML mockup report from PBI and story artifacts.
-
duc01226 Skill Graph Trace[Code Intelligence] Use when investigating what happens when code executes, understanding blast radius, or tracing frontend-to-backend flows.
-
duc01226 Bundle Release Notes[Git] Use when creating release notes from git history.
-
duc01226 Bundle UI UX Pro Max[Frontend] Use when designing beautiful or aesthetic interfaces with curated UI styles, palettes, fonts, charts, and stacks.
-
duc01226 Bundle Webapp Testing[Testing] Use when you need individual page/component testing with Python Playwright scripts.
-
duc01226 Bundle Markdown To PDF[Document Processing] Use when you need to convert markdown files to PDF with syntax highlighting and custom CSS support.
-
duc01226 Skill Workflow Feature[Workflow] Use when activating the Feature Implementation workflow for implement a well-defined feature with investigation, planning, implementation, and review. Also covers TDD/test-first development and spec-driven feature implementation with test specs written before code.
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 alibabacloud-docmind-parse, performance-optimization, alibabacloud-esa-pages-deploy. 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.