Inertia.js server-side rendering, redirects, shared data, forms, validation, and client-side patterns for The Boring JavaScript Stack. Use this skill when building pages, handling form submissions, managing redirects, sharing data, or working with any Inertia.js feature in a Sails.js application.
WebSocket and realtime communication with sails-hook-sockets for Sails.js applications. Use this skill when building chat, notifications, live updates, presence tracking, or any feature that requires persistent bidirectional communication between server and client.
Create UI/UX mockups and HTML/CSS/JS prototypes without a designer. Triggers: mockup, prototype, wireframe, UI design, 목업, 프로토타입.
Creates Turbo Streams, Turbo Frames, and morphing patterns for real-time UI updates. Use when adding real-time updates, partial page rendering, form submissions, or broadcasting. WHEN NOT: For Stimulus JavaScript controllers (see stimulus-patterns skill). For general view conventions (see rules/views.md).
Implements real-time features with Action Cable and WebSockets. Use when adding live updates, chat features, notifications, real-time dashboards, or when user mentions Action Cable, WebSockets, channels, or real-time. WHEN NOT: Simple HTTP request/response flows, REST APIs, static content, or features that don't need real-time updates.
Use this skill whenever working on CDS React components in any package.
USE THIS when asked to work on a new or existing (MOBILE) CDS React component in packages/mobile
USE THIS when asked to work on a new or existing (WEB) CDS React component in packages/web
Turns frontend designs from Figma into CDS-first React or React Native code. Use this skill whenever the user shares a Figma URL such as `figma.com/design/...?...node-id=...` while working in a frontend application context.
Create UI components using tailwind-variants for type-safe styling. Use when creating or editing components in src/lib/ui/.
Framer Motion patterns, page transitions, skeleton loading, scroll-linked animations, and gesture-based interactions for React.
Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.
Commit mesajlarina yapilandirilmis karar trailer'lari ekle. Constraint, Rejected, Confidence, Scope-risk, Not-tested trailer'lari ile karar baglamini koru.
React error boundary hierarchy, fallback UI patterns, offline-first fallback, retry mechanisms, and graceful degradation.
React Hook Form + Zod integration, multi-step forms, optimistic validation, server-side error mapping, and file upload patterns.
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
React Server Components, Suspense boundaries, streaming SSR, partial prerendering patterns for Next.js App Router.
Find and click a target object in XR. Use when testing UI interactions, clicking buttons, or verifying interactable elements work correctly.
Grab an object in the WebXR scene using emulated controllers. Use when the user wants to pick up, move, or test grabbing an object. Supports OneHandGrabbable and TwoHandsGrabbable components which use proximity-based grip (squeeze button), not trigger.
Use devtools-utils factory functions to create per-framework plugin adapters. createReactPlugin/createSolidPlugin/createVuePlugin/createPreactPlugin, createReactPanel/createSolidPanel/createVuePanel/createPreactPanel. [Plugin, NoOpPlugin] tuple for tree-shaking. DevtoolsPanelProps (theme). Vue uses (name, component) not options object. Solid render must be function.
