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 I18N NextintlInternationalization with next-intl for Next.js 15. Supports core/theme/entity message layers, namespace groups, and translation registry. Use this skill when adding translations, validating i18n, or working with localized content.
567 -
majiayu000 Bundle Jeecg DesformJeecgBoot 表单设计器(desform)全生命周期管理——通过对话的方式创建、更新、复制、删除表单设计器,管理表单数据(CRUD),生成 PC/移动端表单视图,以及一键创建 OA 审批应用(表单+流程+授权)。只要用户意图涉及「表单设计器」就必须使用本技能,包括但不限于:创建或生成表单("做一个请假表单"、"AI设计表单"、"desform")、修改已有表单或字段("加个字段"、"改一下表单")、复制/删除表单、录入或查询表单数据、创建表单视图(含移动端)、以及咨询设计器功能(控件类型、字典配置、校验规则、关联记录、子表、公式计算、JS/CSS增强、默认值、外链等)。当用户想要创建带审批流程的 OA 应用时也应触发("创建OA应用"、"创建审批单"、"创建报销单"、"创建请假单"、"做一个OA表单带流程"、"一键创建表单和流程"、"面试申请"、"出差申请"等)。即使用户只是描述字段需求(如"需要姓名、手机号字段")而未明确说"表单",只要语境指向表单设计器也应触发。注意:本技能仅处理表单设计器(desform),不处理 Online 表单——如果用户明确提到"Online表单"或"online表",应使用 jeecg-onlform 技能。
567 -
majiayu000 Bundle JS React NextGeneral SOP for common requests related to js, react, next.
567 -
majiayu000 Bundle Media LibraryWordPress-style media management system for this Next.js application. Covers MediaService CRUD, file upload, tag system, duplicate detection, MediaLibrary modal, MediaSelector form field, and block editor integration. Use this skill when working with media uploads, browsing, or selection.
567 -
majiayu000 Bundle Mern ScaffoldScaffold a pnpm + Turborepo MERN monorepo with Next.js, tooling, tests, CI, and optional GitHub repo creation.
567 -
majiayu000 Bundle Mobile SkillsMaster iOS development with Swift, Android development with Kotlin, React Native, Flutter, and cross-platform mobile technologies.
567 -
majiayu000 Bundle Nean ScaffoldScaffold an Nx monorepo with NestJS API, Angular frontend, and shared libraries.
567 -
majiayu000 Bundle Opik FrontendReact frontend patterns for Opik. Use when working in apps/opik-frontend, on components, state, or data fetching.
567 -
majiayu000 Bundle Pmtl Fe CraftAdvanced frontend craftsmanship skill for PMTL_VN. Use for frontend implementation, refactoring, or code review when the goal is code that feels senior-written: clean boundaries, strong component shape, server-first logic, and zero AI-slop shortcuts.
567 -
majiayu000 Bundle Pulse MantinePython bindings for Mantine React components. Wraps all @mantine/core components plus forms, dates, and charts packages. Use when building UI with Pulse Mantine components, adapting Mantine docs to Python, or working with MantineForm validation.
567 -
majiayu000 Bundle Rails AI ViewsUse when building Rails view structure - partials, helpers, forms, nested forms, accessibility (WCAG 2.1 AA)
567 -
majiayu000 Bundle Vue FrameworkBuild reactive user interfaces with Vue 3 using Composition API, reactive state management, and component-based architecture. Master composables, provide/inject, Pinia state management, and Vue Router. Use for: creating interactive single-page applications, implementing reactive data binding and computed properties, building reusable component libraries, managing complex application state, integrating with TypeScript for type safety, optimizing performance with virtual DOM, and developing progressive web applications with Vue ecosystem tools.
567 -
majiayu000 Bundle Ops Monitor ErrorsMonitor Sentry for unresolved errors in frontend and backend projects. Supports filtering by project, environment, and time range.
567 -
majiayu000 Bundle Pulumi Code ReviewMaster Pulumi Infrastructure as Code review patterns including naming conventions, secrets management, resource protection, component design, and configuration. Use PROACTIVELY when reviewing Pulumi PRs.
567 -
majiayu000 Bundle Turborepo MonorepoProvides comprehensive Turborepo monorepo management guidance for TypeScript/JavaScript projects. Use when creating Turborepo workspaces, configuring turbo.json tasks, setting up Next.js/NestJS apps, managing test pipelines (Vitest/Jest), configuring CI/CD, implementing remote caching, or optimizing build performance in monorepos
567 -
majiayu000 Bundle Document DesignThis skill should be used when the user asks to "create a proposal", "design a report", "make a one-pager", "build a PDF", "create a newsletter", "design slides", "make event materials", "design a flyer", or needs help with print-ready HTML documents. Provides brand configuration, CSS patterns for print layout, and document design best practices.
567 -
majiayu000 Bundle Document StudioCreate and update professional HTML documents (proposals, flyers, sponsor packets, one-pagers) with consistent NGM branding, voice, and messaging. Maintains institutional knowledge about NGM programs and design standards.
567 -
majiayu000 Bundle Hexdocs FetcherFetch HexDocs for Elixir libraries with HTML-to-markdown conversion. Use when looking up docs on hexdocs.pm — modules, functions, guides, changelogs.
567 -
majiayu000 Bundle Lecture BuilderBuild lectures with consistent format for the NextGenMed website. Use when creating new lecture files, converting HTML content to lecture format, or ensuring lectures follow the standardized structure with meta, video embed, sections, mechanisms table, implementation pathway, and references.
567 -
majiayu000 Bundle Quarto Alt TextGenerate accessible alt text for data visualizations in Quarto documents. Use when the user wants to add, improve, or review alt text for figures in .qmd files. Triggers for requests about accessibility, figure descriptions, fig-alt, screen reader support, or making Quarto documents more accessible.
567 -
majiayu000 Bundle Skillful SvelteGenerate comprehensive Spanish README.md documentation for Svelte 5 projects with Mermaid diagrams. Use when art-vandeley detects a Svelte/SvelteKit codebase. Creates architecture diagrams, component hierarchies, and routing documentation with Svelte 5 runes ($state, $derived, $effect) explanations in Spanish.
567 -
majiayu000 Bundle Simulation BridgeGenerates simulation inputs across fidelity levels — OpenFOAM CFD cases, ngspice netlists, interactive React artifacts, and FreeCAD FEM setups — from verified engineering calculations.
567 -
majiayu000 Bundle Unity Ecs PatternsMaster Unity ECS (Entity Component System) with DOTS, Jobs, and Burst for high-performance game development. Use when building data-oriented games, optimizing performance, or working with large entity counts.
567 -
majiayu000 Bundle Slides As CodeCreate presentation slides as standalone HTML files with automated PNG export. Use when users ask to: create slides, build a deck, make a presentation, design slides, export slides to images, or work with HTML-based presentations. Triggers: "create slides", "make a presentation", "build a deck", "slide deck", "export slides", "slides as code".
567 -
majiayu000 Bundle Sdk Analytics InstallerUse this skill when the user asks to install, configure, or set up @dotcms/analytics, sdk-analytics, analytics SDK, add analytics tracking, or mentions installing analytics in Next.js or React projects
567 -
majiayu000 Bundle Visit WebpageVisit a webpage and extract its content as markdown, or fetch images. Use for reading articles, documentation, or any web page content. Handles both HTML pages (via Jina Reader) and image URLs (downloads and saves locally).
567 -
majiayu000 Bundle Aios MasterAIOS Master Orchestrator & Framework Developer (Orion). Use when you need comprehensive expertise across all domains, framework component creation/modification, workflow orchest...
567 -
majiayu000 Bundle Android App FactoryPlan, build, test, and release a production-grade native Android app from a product idea through Google Play. Use for requests to create, ship, submit, monetize, or modernize an Android app. Covers Kotlin and Jetpack Compose architecture, API-level policy verification, accessibility, privacy and Data Safety, Play Billing, Play Integrity, account deletion, testing, performance, store assets, signing, staged rollout, and a release evidence gate. Not for iOS work or a review-only pass on an existing app.
567 -
majiayu000 Bundle Fec Debug FrameworkUse when diagnosing frontend build failures, runtime errors, UI anomalies, API/data problems, white screens, request failures, or unexplained production exceptions; Chinese triggers include 调试, debug, 排查, 定位, 报错, 异常, 白屏, 请求失败.
567 -
majiayu000 Bundle Hunt HTML InjectionHunt HTML Injection — user-supplied input is rendered as raw HTML in the response without sanitisation, allowing an attacker to inject arbitrary HTML tags (but not necessarily JavaScript). Lower severity than XSS but enables phishing, UI manipulation, and credential harvesting via injected forms. Use when testing text-display surfaces (search results, profile fields, comments, error messages, feedback forms). For markup that executes JavaScript, escalate to hunt-xss.
567 -
majiayu000 Bundle Integration CheckerVerify cross-component wiring and data flow.
567 -
majiayu000 Bundle Mobile Storage MmkvMMKV high-performance key-value storage for React Native - synchronous JSI-based reads/writes, encryption, typed hooks, multiple instances, listeners, persistence middleware adapters
567 -
majiayu000 Bundle Render IOS KeyboardRender a static iOS QWERTY keyboard as inline HTML+CSS sized for the 750-wide 9:16 stage. Includes the 3-suggestion bar, alpha keys, shift/backspace, 123/emoji/space/return row, and the bottom globe+mic strip. No animation logic — slide up/down is the molecule's job (CSS transform on the .keyboard root).
567 -
majiayu000 Bundle Better Auth ExpoBetter Auth integration for Expo/React Native with SecureStore, deep linking, and native provider SDKs
567 -
majiayu000 Bundle Cve Source CheckAudit CVE/vulnerability source coverage for a technology stack. Maps each component (container, library, base image, runtime) to authoritative CVE feeds, flags gaps, and produces audit-ready reports. Generic: works for any service or stack.
567 -
majiayu000 Bundle Oidc IntegrationPlan and implement OIDC and OAuth 2.0 integration for React or TypeScript frontends and Java or Spring Boot backends. Use whenever the user mentions OIDC, OpenID Connect, OAuth login, SSO, PKCE, authorization code flow, refresh tokens, JWT or JWKS validation, login callback pages, protected routes, Keycloak, Auth0, IdentityServer, Authing, multi-provider auth, or "add login" and "integrate IdP" style requests even if they do not explicitly say OIDC.
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 mobile-skills, i18n-nextintl, jeecg-desform. 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.