Web & Frontend

ryanthedev Skill

Verify visual layout against React Native Flexbox and style documentation. Captures the simulator screen in a subagent, analyzes element positions and spacing, and cross-references against official docs. Triggers on "does this look right", "check the layout", "why is this overflowing", "verify the spacing", "the UI looks wrong", "layout issue", "flexbox problem".

sacredvoid Skill

Convert any content into a stunning Apple Keynote-style HTML presentation. Takes markdown, text descriptions, or structured data and generates a single self-contained .html file with cinematic animations, glassmorphism, and premium design. Inspired by ChronicleHQ.

sakumyz Skill

前端测试用例生成器。根据组件或函数签名自动生成基础测试用例，支持 Jest/Vitest + React Testing Library / Vue Test Utils。适用于：(1) 为现有组件补充测试，(2) 为新组件生成测试骨架，(3) 为工具函数生成单元测试。

sakumyz Skill

为 Vue 3 + Ant Design Vue 表单系统新增自定义校验规则。支持正则校验、值范围校验、日期校验等。包含类型定义、校验实现、单元测试的完整流程。

saleor Skill

Use shadows sparingly on elevated surfaces (modal, popover, dropdown, menu, tooltip, sheet, toast, floating checklist). When elevation is needed, use smooth-shadow-ring (hairline baked into the shadow stack) — never border + shadow together. Saleor Dashboard implements this in CSS Modules (see ChannelSetupCard); upstream pattern from shadow-plugin for Tailwind.

monocloud Bundle

Use when integrating MonoCloud authentication into a React single-page application — installing or configuring `@monocloud/auth-react`, wrapping the tree in `<MonoCloudAuthProvider>` with `tenantDomain` / `clientId` / `appUrl`, reading auth state with `useAuth()` (`isLoading`, `isAuthenticated`, `user`, `session`) and calling its actions (`signIn`, `signOut`, `signInSilent`, `refreshSession`, `refetchUserInfo`, `getTokens`), rendering `<SignIn>` / `<SignUp>` / `<SignOut>` buttons (with `audience` / `idTokenHint` auth params) or `<Protected groups=…>` gates, mounting `<ProcessCallback>` on a dedicated callback route with `autoProcessCallback={false}`, accessing the underlying `MonoCloudWebJSClient` with `useClient()`, integrating with React Router via `postCallback`, or troubleshooting "useAuth used outside provider", StrictMode double-callbacks, popup-blocker / iframe issues, or `login_required` from silent sign-in.

monocloud Bundle

Use this skill FIRST whenever a user asks to add MonoCloud (authentication or management) to a project but hasn't said which framework. It detects the project type by reading `package.json`, `*.csproj`, `requirements.txt`, etc., then routes to the correct framework-specific MonoCloud skill (`monocloud-auth-nextjs`, `monocloud-auth-react`, `monocloud-auth-express`, `monocloud-auth-fastify`, `monocloud-auth-aspnetcore`, `monocloud-web-js`, `monocloud-management-js`, `monocloud-management-dotnet`). Also use when the user says "set up MonoCloud", "add MonoCloud login", "integrate MonoCloud", "use the MonoCloud SDK", or "manage users programmatically with MonoCloud" without naming a stack.

monocloud Bundle

Use when integrating MonoCloud authentication into a Next.js application — installing or configuring `@monocloud/auth-nextjs`, wiring `authMiddleware()` in `proxy.ts`/`middleware.ts`, reading sessions with `getSession()`/`useAuth()`, protecting routes/pages/APIs with `protect()`/`protectApi()`/`protectPage()`/`protectClientPage()`, rendering `<SignIn>`/`<SignUp>`/`<SignOut>`/`<Protected>`/`<RedirectToSignIn>`, calling `getTokens()`, handling OIDC back-channel logout via `onBackChannelLogout` / `/api/auth/backchannel-logout`, or troubleshooting MonoCloud env vars (`MONOCLOUD_AUTH_*`), cookie sessions, or auth routes (`/api/auth/signin`, `/callback`, `/userinfo`, `/signout`, `/backchannel-logout`).

muqian2026-rgb Bundle

读书蒸馏：学习方向 → 权威选书 → 知识骨架 → PDF 校验 → 人机思辨 → 双交付物（Domain Skill + 知识图谱 HTML）。口令：「学一下」「读书蒸馏」「/book-learn」。续跑：「补了 PDF」「继续 learn/<slug>」。

muqian2026-rgb Skill

全方位App产品竞品调研专家，能够系统性地分析竞品的功能、界面设计、商业模式、用户数据和差异化策略，产出结构化的竞品调研报告（Markdown）和可视化的界面对比页面（HTML）。使用方式：提供你的产品方向和想要调研的竞品名称，分析师会输出完整的调研报告。

mystenlabs Bundle

Full-stack Sui blockchain development — Move smart contracts, TypeScript SDK, and frontend dApp Kit. Routes to the appropriate sub-skill based on what the user is building.

mystenlabs Bundle

Sui TypeScript SDK — PTB construction, client setup, transaction execution, and on-chain queries. Use when writing code that interacts with the Sui blockchain via @mysten/sui. These patterns apply in both backend scripts and frontend apps. For frontend-specific setup (dApp Kit, wallet adapters, React hooks), use the sui-frontend skill first or alongside this one.

mystenlabs Bundle

Sui frontend dApp development with @mysten/dapp-kit-react (React) and @mysten/dapp-kit-core (Vue, vanilla JS, other frameworks). Use when building browser apps that connect to Sui wallets, query on-chain data, or execute transactions. Use alongside the sui-ts-sdk skill for PTB construction patterns.

naykel76 Skill

Build Livewire Manager components that orchestrate multiple features for a single resource. Coordinates tabs, sections, or workflows without doing the work itself. Activates when creating admin hubs, multi-section resource pages, or coordinating interfaces.

naykel76 Skill

Build Livewire Form components for creating and editing records. Displays structured input fields, handles user input and submission. Activates when creating data entry forms, edit interfaces, or input screens.

naykel76 Skill

Build Livewire Index components that display and manage resource collections. Handles listing, searching, filtering, sorting, pagination, and actions on records. Activates when creating resource listing pages, data tables, or browse interfaces.

naykel76 Skill

Build Livewire Editor components for editing complex content with multiple related parts. Coordinates several forms that work together with a single save action. Activates when creating focused editing workspaces, multi-part content editors, or cohesive data entry tasks.

netlify Skill

Use content-collections for type-safe content management with markdown files. Use when building blogs, documentation sites, or any content-driven pages with frontmatter and markdown.

netlify Skill

Create and manage routes in TanStack Start using file-based routing. Use when adding new pages, configuring layouts, setting up nested routes, or working with route parameters.

netlify Skill

Handle Netlify Forms in TanStack Start. Use when implementing contact forms, signup forms, or any form submission handling on Netlify-hosted TanStack Start sites.

netlify Skill

Load data for TanStack Start routes using beforeLoad and loader functions. Use when fetching data for pages, implementing route guards, or setting up route context. IMPORTANT - Loaders should call server functions for data access.

netlify Skill

Upgrade a stock TanStack Start project to use Netlify Identity for authentication via the @netlify/identity package. Use this skill whenever the user wants to add Netlify Identity auth to a TanStack Start app, integrate login/signup into TanStack Start, protect routes or server functions with Netlify Identity, add role-based access control, or wire up Netlify Identity webhooks. Also use when the user mentions '@netlify/identity', 'nf_jwt', or asks about auth for TanStack Start on Netlify. Covers SSR pages, SPA pages, API routes, server functions, middleware, route guards, role-based access, identity webhooks, and client-side auth state.

netlify Skill

Create API routes (server routes) in TanStack Start for handling HTTP requests. Use when building REST APIs, webhooks, or any HTTP endpoint that returns data rather than rendering a page.

netlify Skill

Set up and configure TanStack Start projects. Use when creating new projects, configuring the router, setting up TanStack Query integration, or configuring build settings.

netlify Skill

Create server functions in TanStack Start for server-side logic callable from anywhere. Use for database access, API calls with secrets, mutations, server-only code, or when you must use .inputValidator(...) for createServerFn inputs.

netlify Skill

Implement type-safe navigation and links in TanStack Start. Use when creating links, navigating programmatically, working with search params, or accessing route parameters with full TypeScript support.

niccos-shopify-workspace Skill

Frontend-backend communication patterns in Shopify Remix apps. Use when adding pages that need backend data, creating data mutations, using loaders and actions, handling authenticated requests, or managing session and authentication in routes.

niccos-shopify-workspace Skill

CSS naming conventions (BEM), nesting rules, and encapsulation guidelines for Shopify themes. Use when writing CSS for Shopify theme sections.

niccos-shopify-workspace Skill

HTML structure, data attributes, and commenting guidelines for Shopify themes. Use when structuring HTML markup and adding comments to Shopify theme code.

niccos-shopify-workspace Skill

Use Shopify Polaris Web Components (s-* custom elements) for App Home UI. Use when building App Home surfaces (not embedded apps), designing UI with s-page, s-section, s-stack, s-box, s-button, and other s-* components. Do not use @shopify/polaris React - App Home requires Web Components.

nicolasflores9 Skill

Create and customize child templates with Helix Ultimate for Joomla 5/6. Master protected overrides, custom CSS/JS, module positions, megamenus, and safe updates. Triggers - helix child template, child template joomla, helix ultimate, helix override, custom.css helix, helix template customize, helix framework

nicolasflores9 Bundle

Master the template overrides system in Joomla 5/6. Customize component views (com_content, articles, categories), modules, plugins, create alternative layouts, use JLayout for reusable components, implement child templates and field overrides. Includes complete examples of blog_item.php, article/default.php, mod_login, layout alternatives, best practices and troubleshooting.

nicolasflores9 Bundle

Frontend integration (CSS/JS) in Joomla 5/6 with Helix Framework. WebAssetManager, Bootstrap 5, SP Page Builder, responsive design, and Web Components.

nimbalyst Skill

Create visual UX mockups using HTML/CSS files (.mockup.html). Use when the user wants to design UI, wireframes, visual layouts, or plan features visually.

xiaoweidotnet Bundle

把任意主题（技术概念、框架、API、产品、算法、流程等）讲成新手能一口气读懂的「深度讲解」内容，输出可为 HTML 长页、Markdown 文章或其它格式。核心方法是「懂→用→慎」三幕递进动线：先用生活类比建立直觉，再给真实应用，最后才讲限制与风险，并按主题类型自适应选节。当用户要求新手向解读、通俗讲解、生活化比喻、把文档讲清楚、调整讲解顺序、消除重复章节、或做成可分享的 explainer 时触发。关键词：深度讲解、新手向、通俗解读、生活类比、讲解动线、explainer、递进结构、把概念讲清楚。

xiaoweidotnet Bundle

HTML 转小程序页面