remix
Assists with building full-stack web applications using Remix. Use when creating apps with nested routing, loader/action patterns, progressive enhancement, or deploying to Node.js, Cloudflare Workers, or other adapters. Trigger words: remix, remix run, loader, action, useFetcher, nested routes, progressive enhancement.
What this skill does
# Remix
## Overview
Remix is a full-stack React framework built on web standards that uses nested routing, loader/action data patterns, and progressive enhancement to build fast, resilient applications. Forms work without JavaScript, nested routes load data in parallel, and error boundaries isolate failures to individual route segments.
## Instructions
- When building routes, use file-based nested routing where each route module contains both the UI and data layer, with `<Outlet />` for child routes and pathless layouts for shared UI without URL segments.
- When loading data, use `loader` functions that run server-side and return data with `json()`, `defer()`, or `redirect()`. Nested route loaders run in parallel to avoid client-server waterfalls.
- When handling mutations, use `action` functions triggered by `<Form method="post">`, return validation errors with appropriate HTTP status codes, and rely on automatic revalidation of all page loaders after actions.
- When enhancing UX, use `useFetcher()` for non-navigation mutations (like buttons, inline edits), `useNavigation()` for form submission state, and `fetcher.formData` for optimistic UI.
- When handling errors, add `ErrorBoundary` at every route level to prevent child errors from crashing the whole page, and use `isRouteErrorResponse()` to distinguish 404s from server errors.
- When managing auth, use `createCookieSessionStorage()` for encrypted sessions, redirect in loaders when unauthenticated, and leverage built-in CSRF protection.
- When deploying, choose the appropriate adapter (`@remix-run/node`, `@remix-run/cloudflare`, `@remix-run/deno`) and use Vite as the compiler.
## Examples
### Example 1: Build a CRUD app with progressive enhancement
**User request:** "Create a Remix app with task management and form-based mutations"
**Actions:**
1. Define nested routes for task list and task detail pages
2. Implement loaders for data fetching with parallel loading
3. Create actions for create, update, delete with validation error handling
4. Use `<Form>` for progressive enhancement and `useFetcher()` for inline edits
**Output:** A full-stack task app that works without JavaScript and is enhanced with JavaScript.
### Example 2: Deploy a Remix app to Cloudflare Workers
**User request:** "Set up a Remix app for edge deployment on Cloudflare"
**Actions:**
1. Configure `@remix-run/cloudflare` adapter in the project
2. Set up loaders using KV and D1 bindings from the context
3. Add streaming with `defer()` for slow data below the fold
4. Configure HTTP caching headers in loaders for CDN performance
**Output:** An edge-deployed Remix app with serverless data access and CDN caching.
## Guidelines
- Use `loader` for all data fetching; never use `useEffect` + `fetch` for initial page data.
- Use `<Form>` instead of `<form>` + `onSubmit` for progressive enhancement.
- Return proper HTTP status codes from loaders and actions (404, 400, 403), not just `json({ error })`.
- Use `useFetcher()` for mutations that should not trigger navigation (like/unlike, inline edits, search).
- Handle errors at every route level with `ErrorBoundary`; do not let child errors crash the whole page.
- Use `defer()` for slow data below the fold to show the page fast and stream non-critical data.
- Keep loaders and actions in the route file; co-location makes it easy to see what a route does.
Related in Backend & APIs
jfrog
IncludedInteract with the JFrog Platform via the JFrog CLI and REST/GraphQL APIs. Use this skill when the user wants to manage Artifactory repositories, upload or download artifacts, manage builds, configure permissions, manage users and groups, work with access tokens, configure JFrog CLI servers, search artifacts, manage properties, set up replication, manage JFrog Projects, run security audits or scans, look up CVE details, query exposures scan results from JFrog Advanced Security, manage release bundles and lifecycle operations, aggregate or export platform data, or perform any JFrog Platform administration task. Also use when the user mentions jf, jfrog, artifactory, xray, distribution, evidence, apptrust, onemodel, graphql, workers, mission control, curation, advanced security, exposures, or any JFrog product name.
cupynumeric-migration-readiness
IncludedPre-migration readiness assessor for porting NumPy to cuPyNumeric. Use BEFORE substantial porting work begins when the user asks whether code will scale on GPU, whether they should migrate to cuPyNumeric, which NumPy patterns transfer cleanly, what must be refactored before porting, or mentions pre-port assessment, scaling analysis, or refactor planning. Inspect the user's source code, look up NumPy usage, cross-reference the cuPyNumeric API support manifest, and distinguish distributed-scaling-friendly patterns from blockers such as unsupported APIs, scalar synchronization, host round-trips, Python/object-heavy control flow, shape/data-dependent branching, and in-place mutation hazards. Produce a verdict of READY, LIGHT REFACTOR, SIGNIFICANT REFACTOR, or NOT RECOMMENDED, with concrete refactor pointers.
alibabacloud-data-agent-skill
IncludedInvoke Alibaba Cloud Apsara Data Agent for Analytics via CLI to perform natural language-driven data analysis on enterprise databases. Data Agent for Analytics is an intelligent data analysis agent developed by Alibaba Cloud Database team for enterprise users. It automatically completes requirement analysis, data understanding, analysis insights, and report generation based on natural language descriptions. This tool supports: discovering data resources (instances/databases/tables) managed in DMS, initiating query or deep analysis sessions, real-time progress tracking, and retrieving analysis conclusions and generated reports. Use this Skill when users need to query databases, analyze data trends, generate data reports, ask questions in natural language, or mention "Data Agent", "data analysis", "database query", "SQL analysis", "data insights".
token-optimizer
IncludedReduce OpenClaw token usage and API costs through smart model routing, heartbeat optimization, budget tracking, and native 2026.2.15 features (session pruning, bootstrap size limits, cache TTL alignment). Use when token costs are high, API rate limits are being hit, or hosting multiple agents at scale. The 4 executable scripts (context_optimizer, model_router, heartbeat_optimizer, token_tracker) are local-only — no network requests, no subprocess calls, no system modifications. Reference files (PROVIDERS.md, config-patches.json) document optional multi-provider strategies that require external API keys and network access if you choose to use them. See SECURITY.md for full breakdown.
resend-cli
IncludedUse this skill when the task is specifically about operating Resend from an AI agent, terminal session, or CI job via the official resend CLI: installing/authenticating the CLI, sending/listing/updating/cancelling emails, batch sends, domains and DNS, webhooks and local listeners, inbound receiving, contacts, topics, segments, broadcasts, templates, API keys, profiles, or debugging Resend CLI/API failures. Trigger on mentions of Resend CLI, `resend`, `resend doctor`, `resend emails send`, `resend domains`, `resend webhooks listen`, `resend emails receiving`, or agent-friendly terminal automation.
alibabacloud-odps-maxframe-coding
IncludedUse this skill for MaxFrame SDK development and documentation navigation on Alibaba Cloud MaxCompute (ODPS). Helps answer MaxFrame API, concept, official example, and supported pandas API questions; create data processing programs; read/write MaxCompute tables; debug jobs (remote or local); and build custom DPE runtime images. Trigger when users mention MaxFrame, MaxCompute with MaxFrame, ODPS table processing, DPE runtime, MaxFrame docs/examples, DataFrame/Tensor operations, or GPU runtime setup. Works for both English and Chinese queries about Alibaba Cloud data processing with MaxFrame.