Web & Frontend

ilya-valasiuk Skill

Enforces classNames package usage patterns and Tailwind CSS class ordering conventions in React components. Use this skill whenever writing or reviewing component className props, applying Tailwind classes, using the classnames package, organizing breakpoint-specific styles, writing conditional class expressions, or when the user asks about CSS class ordering, mobile-first responsive patterns, or how to handle className props in components.

ilya-valasiuk Bundle

Add, migrate, or review score-based Google Cloud reCAPTCHA Enterprise in TypeScript Next.js applications. Use this skill when protecting forms, API routes, route handlers, or server actions; configuring reCAPTCHA actions, score thresholds, environment variables, browser token generation, or server assessments; or reusing the bundled project-standard scaffold. Do not use it for unrelated checkbox or image CAPTCHA implementations.

ilya-valasiuk Bundle

Standardize and preserve Next.js App Router project structure across `src/`, including route files, page composition, API modules, server actions, hooks, providers, helpers, and shared utilities. Use this skill whenever the user asks to add, move, rename, refactor, or review files in a Next.js App Router codebase, especially if the task affects file placement, page architecture, or folder naming.

jason0404 Skill

Run a complete Android review workflow and create a well-styled standalone HTML report as the mandatory final deliverable

jason0404 Skill

Run a full APK or AAB release artifact audit and generate a styled standalone HTML report as the final deliverable

jason0404 Skill

Run a full Android localization audit and produce a professional standalone HTML report

k5-mot Bundle

TypeScriptフロントエンド開発の標準手順。Use when Codex creates, changes, reviews, or sets up TypeScript frontend projects, including Vite/Vite Plus, React UI choices, .gitignore creation, Oxlint/Oxfmt rules, tsgo type checking, lint/format/test configuration, pre-commit hooks, GitHub Actions CI, Playwright UI/E2E tests, and vulnerable package update workflows.

k5-mot Bundle

PDF、Word、PowerPoint、HTML、画像などの入力文書をDocling schema JSONに正規化し、構造補正、清掃、チャンク化、日本語翻訳、Markdown連結、Word docx変換までを実行する。

k5-mot Bundle

devcontainer構成の設計、レビュー、改善提案、ひな型作成を支援する。Use when Codex needs to inspect, create, or edit .devcontainer/devcontainer.json, postCreateCommand scripts, .gitignore entries for devcontainer artifacts, VS Code devcontainer customizations, or monorepo-ready development containers for Python/uv/FastAPI/Ruff/ty/pytest and TypeScript/React/Zod/Vite+/Oxlint/Oxfmt/tsgo/Vitest stacks.

kevinbadi Bundle

Export the current Blender scene as a GLB and generate a ready-to-use Three.js HTML viewer with orbit controls, lighting, and auto-rotation. Trigger when asked to export for web, create a Three.js viewer, make a 3D model interactive for a website, or export from Blender for the web.

kugamon Bundle

Lightning Web Components development with PICKLES architecture methodology, component scaffolding, wire service patterns, event handling, Apex integration, GraphQL support, and Jest test generation. Powered by Salesforce MCP server for seamless metadata deployment. Do NOT use for Apex controllers and @AuraEnabled methods (use sf-apex), Flow screen automation (use sf-flow), or org-wide component inventory and scoring (use sf-audit). Usage: /sf-lwc [create|update|validate] {ComponentName} ...

flet-dev Skill

Convert an imperative Flet Python app in which controls are mutated and then page.update is called to declarative style using flet.component, flet.observable and state hooks.

formio Bundle

Source-derived reference for the Form.io JavaScript SDK (`@formio/js`), the Utilities (`@formio/js/utils`), and the `@formio/core`-only helpers — authored from the Form.io source code. Covers static methods (`setBaseUrl`, `setProjectUrl`, `setToken`, `currentUser`, `logout`), instance methods on `new Formio(url)` (forms, submissions, files), the VanillaJS rendering entry point (`Formio.createForm`), the plugin lifecycle, and the `Utils` surface (Evaluator, traversal, conditions, JSONLogic, mask/sanitize). Use when the user asks to call a `Formio.*` static method, work with a `new Formio(...)` instance, invoke a `Utils.*` helper, evaluate JSONLogic, register a plugin, traverse component trees, or decode the JWT. Not for: REST endpoint shapes (see formio-api); orchestrating an app build (see formio-application); planning Resource schemas (see formio-resource-planner); `@formio/angular` wrappers (see formio-angular); embed/render-a-form tasks (see formio-form — this stays the raw API reference).

formio Bundle

Embed and render Form.io forms in any web application with the Vanilla JS renderer `@formio/js` — render by URL or JSON, pre-fill with submissions, JavaScript control, renderer options, conditional fields, calculated values, JSON Logic validation, cascading selects, and conditional wizard pages. The library's default "embed a form" entry point. Use when the user asks to "embed a form", "render a form", "add this form to my page/site/app", "pre-fill a form", "show or hide a field based on another field", "calculate a field value", or "add custom validation to a field" — field behavior inside ANY framework's rendered form stays here. Not for: Angular embedding and app builds (see `formio-angular`); React-named embedding (see `formio-react`); building an app around data (see `formio-application`); designing the data model (see `formio-resource-planner`); REST endpoints (see `formio-api`); the raw SDK/Utils API reference (see `formio-sdk`); creating a NEW form — embed-only skill (see `formio-form-builder`).

formio Bundle

React framework implementor for the Form.io skill library — a router over three branches: build a greenfield React application around a Form.io project, add Form.io resource CRUD to a React application that already exists, or embed a single form. Targets Vite, React Router data routers, and `@formio/react`. Claims ONLY React-explicit triggers. Use when the user says "build it in React", "React front-end for this Form.io project", "use React", "use `@formio/react`", "the React skill", "add Form.io CRUD to my React app", "wire this Form.io project into my existing React app", or "embed a Form.io form in React". Not for: framework-agnostic app requests (see `formio-application`); planning a data model (see `formio-resource-planner`); framework-agnostic embed/render-a-form requests (see `formio-form`); Angular work (see `formio-angular`); REST endpoint lookups (see `formio-api`).

formio Bundle

Form.io JSON schema reference covering the document shapes for projects, forms (and resources), and submissions. Use whenever constructing, editing, or interpreting Form.io JSON — form definitions returned by `form_get` / `form_create` / `form_update`; submission bodies (decoding `data`, row-level `access`, draft state, `metadata`); and project documents (settings, integrations, auth providers (OAuth/LDAP/SAML), stages, tenants, and template envelopes for `project_import` / `project_export`). Trigger for schema-level questions about form components, wizards, resources, submissions, project templates, conditional logic, validation rules, or any component `type` (textfield, select, datagrid, panel) when the work involves Form.io JSON. Not for: calling Form.io REST endpoints (see `formio-api`); configuring server-side actions on a form (see `formio-actions`); planning a new app's resource model from scratch (see `formio-resource-planner`); orchestrating an entire app build (see `formio-application`).

formio Bundle

Angular framework implementor for the Form.io skill library — a router over two branches: build or extend an Angular application around a Form.io project with `@formio/angular` (a five-phase gated flow: setup, bootstrap, config, auth, resources), or embed a single Form.io form in an Angular page. Invoked as the handoff from `formio-application`, or directly when the user explicitly names Angular. Claims ONLY Angular-explicit triggers. Use when the user says "build it in Angular", "Angular front-end for this Form.io project", "use `@formio/angular`", "wire up `FormioAppConfig`", "embed a Form.io form in Angular", or "render a form in my Angular app". Not for: framework-agnostic app requests (see `formio-application`); framework-agnostic embed/render-a-form requests (see `formio-form`); planning a data model (see `formio-resource-planner`); React work (see `formio-react`); REST endpoint lookups (see `formio-api`).

formio Bundle

Default "build me an app" orchestrator — builds a new application backed by a Form.io project from a plain-language idea, or extends an existing app with a new feature; the user never needs framework or Form.io terminology. Use whenever the user wants to build, create, spin up, or stand up an app, tool, portal, dashboard, or tracker around data — "build me an app", "create a CRM", bare archetypes ("task manager", "help desk") — or extend one: "also track X", "add a way to see Y". Not for: Angular-explicit builds (see `formio-angular`) or extensions (see `formio-angular-resources`); React-explicit builds (see `formio-react`) or extensions (see `formio-react-resources`); planning a data model without building an app (see `formio-resource-planner`); embedding or rendering an existing form in a page — "embed this form" (see `formio-form`); creating a standalone single form (no data model or app around it — see `formio-form-builder`); REST endpoint lookups (see `formio-api`).

formio Bundle

Embed a Form.io form in a React application with `@formio/react`'s `Form` component — mounting, the event surface, the live instance, the lifecycle traps, provider configuration, anonymous versus authenticated submission, and the Vite and Next.js requirements. Reached by handoff from `formio-react`'s embed branch. Use when the user says "embed a Form.io form in React", "render a form in my React app", "use `@formio/react`'s `Form` component", or "add a Form.io form to this React page". Not for: framework-agnostic embedding and every field-behaviour question — conditionals, calculated values, validation, cascading selects (see `formio-form`); resource CRUD screens (see `formio-react-resources`); creating a form that does not exist yet (see `formio-form-builder`); the raw SDK reference (see `formio-sdk`).

formio Bundle

Embed a Form.io form in an Angular application with `@formio/angular`'s `<formio>` component — mounting, the event surface, the live `Webform` instance, change detection under zone.js and zoneless, project URLs, styling, the server-rendering limit, and when to drop to the renderer directly. Reached by handoff from `formio-angular`'s embed branch. Use when the user says "embed a Form.io form in Angular", "render a form in my Angular app", "add a `<formio>` component to this page", or "control an embedded Form.io form from Angular". Not for: framework-agnostic embedding and every field-behaviour question — conditionals, calculated values, validation, cascading selects (see `formio-form`); resource CRUD screens (see `formio-angular-resources`); creating a form that does not exist yet (see `formio-form-builder`); the raw SDK reference (see `formio-sdk`).

formio Bundle

Nested React sub-skill that generates Form.io resource CRUD screens into a React application — the resource kernel, route composition, and hierarchical parent/child resources through React Router data routers. Reached by handoff from `formio-react` (itself possibly from `formio-application`), or by phrasing that names React or `@formio/react` verbatim. Use when the user says "add a React route for X", "regenerate the React `Participant` resource", "in my React app, wire `X`'s children to `Y`", or "add a bidirectional React join between `Team` and `User`". Not for: initial React app creation or a workspace with no `FormioProvider` — see `formio-react`; extension requests that never name React — see `formio-application`; shaping a data model — see `formio-resource-planner`; embedding one form — see `formio-form`; REST endpoint lookups — see `formio-api`.

franciscomoretti Skill

Verify Next.js runtime behavior after editing app code. Use this skill to confirm a change actually works in a running app — not just that it compiles or type-checks. Combines /_next/mcp (Next.js's view) with agent-browser (the browser's view). Requires a running `next dev`.

franciscomoretti Skill

Implement ChatJS tRPC routers, TanStack Query hooks, mutations, and cache invalidation. Use when adding or changing tRPC procedures or their React consumers in apps/chat.

franciscomoretti Skill

Read before changing any component, page, or styles. Five moves to change UI without silently breaking another screen - reuse before you create, cover every state, check the blast radius, prove it with a visual test, kill flake at the source.

franciscomoretti Skill

Use the ChatJS React Query v5 lazy-prefetch pattern without blocking server rendering. Use when prefetching tRPC queries in Next.js Server Components or changing query dehydration and hydration behavior in apps/chat.

franciscomoretti Skill

Make @uiverify/vitest (Vitest browser-mode) captures deterministic so component visual tests stop coming back "changed" without a real change (flaky diffs). Use when setting up or debugging visual tests over Vitest browser-mode component tests. Focuses only on the run-to-run variation the capturer can't neutralize from outside your app — above all live/dynamic data, the highest-value step (freeze it with static fixtures and the whole content-noise class disappears), plus the clock, infinite JS animations, and non-Math.random randomness, and the one Vitest-specific trap - capturing before the component has settled.

franciscomoretti Skill

Author economical visual tests — full visual coverage in the fewest billable snapshots. Applies to any per-snapshot visual tool (UI Verify, Chromatic, Percy, Playwright screenshots), which all bill and diff per rendered story/test. Use when a component's variants/states are exploding into one snapshot per combination, when the visual-testing bill or noise is driven by snapshot count, or when writing new stories/captures and you want the cheapest layout that still covers every variant. Covers gallery/matrix stories, data-driven states, and the coarse-granularity tradeoff.

franciscomoretti Bundle

Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the `cacheComponents` flag, work through a flood of blocking-prerender / instant validation errors, run the `cache-components-instant-false` codemod, or decide between opting routes out with `export const instant = false` and fixing them in place.

franciscomoretti Skill

Turn on Partial Prefetching in a Next.js app and work through the insights it surfaces. Use when the user wants to enable or adopt Partial Prefetching, flip the `partialPrefetching` flag, opt routes in with `export const prefetch = 'partial'`, audit `<Link prefetch={true}>` calls, or resolve the link-prefetch-partial and instant-shell-url-data insights.

full-stack-skills Bundle

Svelte AI 助手集成技能。当用户为 Claude Code/Cursor/Copilot/Codex/OpenCode/VS Code 等 AI 编程工具配置 Svelte MCP server、安装 svelte-autofixer/list-sections/get-documentation MCP tools、使用 svelte-task 提示、调用 sv CLI（svelte-ai CLI）、或利用 svelte-code-writer/svelte-core-bestpractices 子智能体编写 Svelte 5 代码时使用。

full-stack-skills Bundle

Svelte CLI（sv）技能。当用户使用 sv 创建项目（sv create）、添加集成（sv add 如 drizzle/tailwind/prettier/eslint/playwright/storybook/vitest/mdsvex/paraglide/better-auth/sveltekit-adapter/mcp/experimental）、运行类型和编译检查（sv check）、运行迁移脚本（sv migrate svelte-5/sveltekit-2/app-state/self-closing-tags/package/routes）、或开发自定义 sv add-on 时使用。

full-stack-skills Bundle

Svelte 5 杂项技能。当用户需要了解 TypeScript 支持、自定义元素、浏览器兼容性、Svelte 4→5 迁移、FAQ 时使用。

full-stack-skills Bundle

Svelte 5 Runes 响应式系统技能。当用户需要使用 $state/$derived/$effect/$props/$bindable/$inspect/$host 等符文，或理解 Svelte 5 显式响应式与 Svelte 4 隐式响应式的区别时使用。

full-stack-skills Bundle

Svelte 5 入门与导航技能。当用户需要了解 Svelte 5 全貌、选择合适的学习路径、或需要本技能的 8 个子技能协同工作时加载此入口技能。

full-stack-skills Bundle

Svelte 5 运行时技能。当用户需要使用 Stores、Context、生命周期钩子（onMount/onDestroy/tick）、命令式组件 API（mount/unmount/render/hydrate）、Hydratable Data、Best Practices 或 Vitest 测试时使用。

full-stack-skills Bundle

Svelte Styling Reference (Svelte 5)