Software Development Skills

Database development and operations workflow covering SQL, NoSQL, database design, migrations, optimization, and data engineering.

Forms knowledge base - react-hook-form, Zod validation, Server Actions, file upload, multi-step forms. Use when building forms, implementing validation, handling file uploads, or creating multi-step form flows.

OpenStack security operations skill for hardening, certificate management, and security posture assessment of cloud infrastructure. Covers TLS certificate lifecycle (generation, deployment, rotation, expiry monitoring), security group management (default deny, minimum required openings), RBAC policy customization (per-service policy.yaml), network segmentation (management vs tenant vs external), audit logging (Keystone CADF events), vulnerability assessment procedures, compliance auditing, intrusion detection patterns, incident response procedures (credential compromise, instance compromise), password rotation, and API rate limiting. Use when hardening OpenStack, managing certificates, auditing security posture, or responding to security incidents.

Provides coding principles, development guidelines, and safe-editing practices. Use when consulting best practices or design guidelines.

Remix patterns including loaders, actions, nested routing, progressive enhancement, and deployment strategies.

The shipped remix/ui/ headless library — Accordion, Anchor (positioning), Breadcrumbs, Button, Combobox, Glyph (icons), Listbox, Menu (dropdown / context), Popover (with focus management), Scroll Lock, Select, Separator, Animation (entrance / exit / layout / spring / tween), and Theme (CSS variables + design tokens). Plus first-class web-components interop — bring in third-party custom elements (Shoelace, Lit, Web Awesome) or author your own. Load whenever the user needs a button, dropdown, modal, tooltip, popover, autocomplete, breadcrumb, accordion, icon, animation, color tokens, dark/light theme, or is about to install Radix UI / shadcn/ui / Headless UI / Floating UI / Framer Motion / lucide-react / heroicons / react-select / body-scroll-lock. Also load on questions like "how do I do a tooltip in Remix?" or "what's the equivalent of Radix Popover?".

Controllers in Remix v3 — the .tsx files under app/controllers/ that handle requests. Covers the Controller shape, action handler signatures ({ get, params, request, url }), reading middleware-provided values with get(Database) / get(Session) / get(Auth) / get(FormData), returning responses via render( ) / redirect(...) / Response.json(...), nested controllers, per-controller middleware (requireAuth, etc.), and the typed routes.X.href(params) URL builder. Load whenever the user is creating, editing, or debugging anything under app/controllers/, or comparing to Express route handlers / Next.js page+route handlers / Rails controllers / Hono handlers. Also load when the user asks "where does business logic go" or "how do I get the current user in an action".

Cookies in Remix v3 via remix/cookie — the low-level building block sessions, auth, and CSRF build on. createCookie(name, options) for signed cookies (HMAC secrets array, rotation playbook), parse(headerValue) from incoming requests, serialize(value, props?) for Set-Cookie headers, plus attributes (httpOnly, secure, sameSite: 'Lax' | 'Strict' | 'None', maxAge, expires, path, domain, priority, partitioned). Load whenever the user is reading/writing cookies directly (locale prefs, dark-mode flag, consent banner, A/B bucket, "remember me", feature flag), configuring the session cookie, rotating signing secrets, or debugging cookies missing in production (secure: true over HTTP, SameSite mismatch). For signed sessions see /remix:sessions; for the typed Cookie / SetCookie header parsers see /remix:headers.

Storing uploaded and generated files in Remix v3 via remix/file-storage — a key/value interface (set, get, remove, has) over three backends: createFsFileStorage (filesystem), createMemoryFileStorage (in-memory, for tests/dev), and createS3FileStorage (S3 / R2 / B2 / MinIO via remix/file-storage-s3). Same interface across all three, so swapping is config not code. Load whenever the user is persisting an upload to disk, S3, R2, Cloudflare R2, Backblaze B2, MinIO, or memory; designing where avatars / attachments / generated reports / cached PDFs live; building a file-download route; setting up dev (memory) vs prod (S3) storage; or about to install multer-s3, @aws-sdk/client-s3 (just for uploads), node:fs/promises glue, or formidable's disk write path. For the streaming upload pipeline that feeds into this, see /remix:forms.

Reference card for every middleware shipped by Remix v3 — logger, compression, staticFiles, formData, methodOverride, session, csrf, cop, cors, asyncContext, auth, requireAuth — with canonical stack ordering and pointers to deep docs. Plus the contract for writing your own. Load whenever the user is composing or editing the middleware stack in app/router.ts, debugging request flow, choosing between similar middlewares (cop vs csrf, custom vs built-in), or about to install Express middlewares (helmet, morgan, body-parser, cookie-parser, multer) — Remix already ships equivalents. Also load if the user asks "what middleware comes with Remix?" or "where does X go in the stack?".

Project-local Bun scaffolders shipped by THIS plugin (not the official remix CLI) for adding things incrementally to an existing project — scripts/create-route.ts --name X --pattern //Y (route + handler + router.map wiring, escaping Git Bash MSYS path mangling with //), scripts/create-resource.ts --name X --param Yid [--only index,show,...] (resources() block + 7-action controller mirror), scripts/create-controller.ts --route admin.books (stub for an existing RouteMap), scripts/create-migration.ts --name addXtable (timestamped file under db/migrations/), scripts/add-middleware.ts --name session|csrf|cors|cop|... (inserts into app/router.ts in canonical stack order), scripts/init-project.ts (alternative to remix new for envs without the CLI). All idempotent, all refuse to overwrite (exit 2), all validate camelCase identifiers, all smoke-tested in verify.ts. Load whenever the user is adding a single route, resource, controller stub, migration, or middleware to an existing project, or asking how to scaffold a new entity. For framework-level commands (remix new/doctor/routes/test), see /remix:cli.

Server-side HTML templating in Remix v3 via remix/html-template — the html... tagged template literal with automatic XSS-safe escaping, html.raw for trusted fragments, composable SafeHtml branded values, the isSafeHtml type guard, and integration with createHtmlResponse from remix/response/html for endpoints that return HTML without spinning up the JSX runtime. Load whenever the user is building HTML responses without JSX (webhooks, RSS feeds, sitemaps, email bodies, OG/Twitter previews, HTMX fragments, server-rendered snippets), generating safe HTML from user input, composing reusable HTML helpers, deciding when to use JSX vs templates, or about to install handlebars, ejs, mustache, pug, nunjucks, lit-html, escape-html, xss, sanitize-html, dompurify (for server output). For full-page interactive UIs, use /remix:ui (JSX) instead.

Reference card for the smaller utility packages Remix v3 bundles — remix/mime (detectContentType from filename, isCompressibleMimeType, defineMimeType), remix/lazy-file (LazyFile / LazyBlob — File-shaped objects that defer reading), remix/fs (openLazyFile, writeFile returning LazyFile), remix/tar-parser (streaming parseTar, TarParser), remix/terminal (ansi, stripAnsi, createStyles, shouldUseColors — replaces chalk), remix/node-serve (uWebSockets.js-backed alternative to node-fetch-server), remix/fetch-proxy (createFetchProxy for BFF / reverse-proxy patterns). Also points at the larger utility surfaces with their own sub-skills (templating, headers, build). Load whenever the user is detecting a content type from a filename, streaming a large file without buffering, parsing a tar archive (npm tarballs, CI artifacts), styling terminal output for a CLI / scaffolder, building a reverse proxy or BFF, picking a high-perf alternative server, or about to install mime / mime-types, chalk / kleur / picocolors, tar / tar-stream, http-proxy / http-proxy-middleware, fs-extra. Quick check before adding any "small utility" npm dep.

Agents window architecture — covers the agents-first app, layering, folder structure, chat widget, menus, contributions, entry points, and development guidelines. Use when implementing features or fixing issues in the Agents window.

Cross-cutting validation methodology for verifying phase outputs and project…

مهارة التعامل مع الهيدر (Headers) في Word…

根据PRD生成专业级界面结构和视觉方向。集成 ui-ux-pro-max 设计系统,提供 67 种样式、96 种调色板、57 种字体组合和 100…