Vercel Labs

Build native mobile interfaces from JSON specifications with @json-render/react-native. Use standard or custom components, connect form inputs to application state, and update visible content in response to taps and other interactions.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building mobile screens from JSON specifications
• Connecting form inputs to application state
• Switching tab content in response to taps

Build interactive terminal interfaces from JSON specifications with @json-render/ink. The skill covers standard and custom components, input handling, state connections, conditional display, and progressively rendering specifications generated by AI.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building a terminal dashboard from JSON
• Creating forms with input fields and selection menus
• Defining a catalog of custom terminal components

Helps connect json-render to a writable Jotai atom, a unit that holds application state. Covers adapter setup and sharing a Jotai store so json-render and React components read and update the same values.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Manage json-render state with a Jotai atom
• Share an existing Jotai store with json-render
• Share state between useAtom() and json-render

Add formatting, arithmetic, text processing, and translated labels to json-render specifications. This skill explains ready-made directives, or value-processing rules, how to combine them, and how to define custom rules for application-specific transformations.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Format dates, currencies, and percentages
• Calculate totals from prices and quantities
• Shorten text and join lists of tags

Define the structure and available components for AI-generated JSON screens or videos. Build generation prompts, process incremental updates, connect values to application state, and validate or repair definitions before passing them to a renderer.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Define allowed components for AI-generated screens
• Build prompts for generating or editing JSON definitions
• Assemble definitions from streamed AI responses

Configure OAuth, the authorization flow used for provider sign-in, with portless development URLs. It guides callback registration and authentication library settings, helping diagnose rejected domains, redirect URL mismatches, and callbacks that point to the wrong address.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Setting up provider sign-in with portless development URLs
• Diagnosing redirect URL mismatch errors
• Using an owned domain when .localhost is rejected

Set up portless to give local development servers stable, named URLs instead of changing port numbers. It covers multiple apps, separate Git worktree URLs, HTTPS setup, and checks for proxy, domain resolution, and certificate problems.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Giving local development apps stable, named URLs
• Running multiple services in a monorepo
• Keeping Git worktrees on separate URLs

Run an AI vulnerability scan on uncommitted changes, changes against main, or an entire codebase. Filter candidate files, investigate potential security issues, and review findings with severity ratings, with options to revalidate and export results.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Checking uncommitted changes for vulnerabilities
• Reviewing security issues in changes against main
• Scanning an existing codebase

Write, review, and edit developer documentation for SDKs, libraries, and frameworks. Organize guides, API references, and code examples around readers’ tasks, checking technical claims against source code and official documentation while following the destination site’s conventions.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Writing a getting-started guide
• Reviewing API documentation and code examples
• Updating migration and troubleshooting guides

Get documentation-based help with deepsec, an AI vulnerability scanner. Initialize or resume setup, configure scans and model credentials, and create detection rules or plugins using the documentation bundled with the installed version.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Initializing deepsec and resuming interrupted setup
• Configuring scans, models, and credentials
• Creating or customizing vulnerability detection rules

Fix Native SDK build failures caused by older Zig APIs. Organized by compiler error, this guide shows Zig 0.16 patterns for file access, output, lists, processes, environment variables, clocks, networking, and build configuration.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Migrating older Zig code to Zig 0.16
• Fixing file access and output errors
• Updating ArrayList allocation calls

Create Native SDK interfaces with .native markup, connecting layouts, widgets, and user actions to app state and messages. Covers TypeScript core integration, explicit Zig alternatives, menus, scrolling, embedded web panes, and interface verification.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building screens and connecting them to app state
• Adding context menus and menu-bar items
• Displaying long lists with virtualized rendering

Test running Native SDK apps by checking readiness, inspecting windows, driving widgets, and checking communication between JavaScript and Zig. Includes repeatable canvas screenshots and basic integration tests to confirm that key app features work.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Checking app readiness and window state
• Testing widget input and interactions
• Comparing repeatable canvas screenshots

Find the Native SDK guidance needed to build desktop apps with TypeScript and Native markup, a declarative UI format. Covers getting started and locating instructions for interface development, packaging, embedded web content, and running-app automation.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Start a native desktop app
• Find guidance for building native interfaces
• Explore ways to embed existing web content

Build Native SDK app logic in TypeScript using explicit state, messages, and update functions. Explains the supported language subset, compiler diagnostics, module organization, and tests for logic that compiles directly into native code.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Designing state and messages for a new app
• Fixing unsupported TypeScript constructs
• Splitting app logic into modules

Guides development of Native SDK TypeScript services for file access, network requests, and other work outside the deterministic core. Covers typed calls, pinned npm dependencies, streaming, cancellation, replay, and process or thread execution.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding or updating Native SDK TypeScript services
• Moving file access or JSON processing out of the core
• Investigating NS1065–NS1067 errors

Build and modify Native SDK apps with guidance on project structure, configuration, native features, packaging, and testing. Explains the default TypeScript and Native markup approach, plus WebViews, embedded web interfaces, and their permissions.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Identify where to change an existing app
• Connect a web interface to native features
• Configure permissions for windows and dialogs

Design and refine web animations for buttons, dialogs, menus, and gestures. The skill guides timing, changes in speed, spring motion, performance, and reduced-motion preferences so transitions fit the interaction and remain responsive.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Refine dialog and menu transitions
• Adjust button press and hover feedback
• Investigate stuttering animations

Write, review, and refactor React and Next.js code using Vercel's performance guidelines. Apply prioritized rules to reduce sequential data fetching, shrink downloaded code, improve server processing, and avoid unnecessary updates to the interface.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reviewing React and Next.js code for performance issues
• Improving data fetching that waits on sequential requests
• Reducing downloaded JavaScript and page load times

Removes hosted demo restrictions from an Open Harness fork, including session and message caps and deletion blocks. Cleans up related helpers and tests while preserving unrelated authentication, session ownership checks, and sandbox behavior.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Removing demo session and message caps from a fork
• Removing hosted demo restrictions on message deletion
• Removing hosted sign-in gating when present

Plan complex coding changes by exploring existing code, clarifying requirements, and tracing effects across the system. Produce a PLAN.md with recommended changes, affected files, and verification steps, then implement after the user approves.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Planning a feature that spans multiple files
• Comparing architectural approaches
• Clarifying requirements before coding

Create working web pages, components, and application interfaces with a clear visual direction. The skill connects purpose and audience to typography, color, layout, and motion, producing cohesive designs implemented in frontend code.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build a landing page with a clear visual style
• Refine a dashboard's visual design
• Create a React component

Helps build and review interface details such as button feedback, menus, animations, and drag gestures. Provides concrete implementation guidance based on usage frequency, responsiveness, rendering performance, and accessibility, including when to reduce or omit motion.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reviewing UI code with concrete changes and reasons
• Choosing animation timing and easing
• Refining drag gestures and component feedback

Review uncommitted changes, commits, branch differences, or pull requests in context. Identify bugs and concrete security weaknesses, explain when each issue occurs and how serious it is, and provide actionable feedback grounded in the surrounding code.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reviewing uncommitted changes before a commit
• Checking a specific commit or branch difference
• Reviewing a pull request before merging