开发技能

Create HTML or plain-text emails from JSON specifications with React Email. This skill guides reusable email components, conditional content, server-side rendering, and browser previews for transactional messages such as signup notifications and marketing emails.

中文简介正在准备中。当前显示英语简介。

• Create signup notifications and other transactional emails
• Build marketing emails from JSON specifications
• Vary email content using state and conditions

Build Vue 3 interfaces from JSON specifications, including AI-generated layouts. The skill covers component registration, named content areas, synchronized form values, conditional visibility, validation, actions, and connections to external state management.

中文简介正在准备中。当前显示英语简介。

• Display AI-generated JSON interfaces in Vue 3
• Build forms with synchronized values and validation
• Switch visible content based on application state

Add and troubleshoot a developer panel in Svelte 5 json-render apps. Inspect JSON screen definitions, edit application state, review action and streaming timelines, browse component catalogs, and select elements directly from the page.

中文简介正在准备中。当前显示英语简介。

• Add a developer panel to a Svelte app
• Inspect screen definitions and edit application state
• Review action and streaming timelines

Build MCP Apps that display interactive json-render interfaces inside clients such as Claude and ChatGPT. The skill covers a Node.js server, a React view, and packaging the interface into a single HTML file.

中文简介正在准备中。当前显示英语简介。

• Build an interactive UI inside an MCP client
• Add json-render tools to an existing MCP server
• Package a React interface into one HTML file

Connect json-render to Redux or Redux Toolkit so UI state reads and writes use a Redux store. The skill explains how to select the relevant state and dispatch actions that replace it when updates occur.

中文简介正在准备中。当前显示英语简介。

• Connecting json-render to an existing Redux store
• Using a Redux Toolkit slice for UI state
• Configuring state selection and update actions

Helps build custom code exporters from json-render UI specifications. Covers walking the UI tree, collecting components, state references, and actions, and formatting property values for JSX, the markup syntax used in React.

中文简介正在准备中。当前显示英语简介。

• Build a custom exporter for Next.js or Remix
• List components and actions used in a UI specification
• Convert property values into JSX attributes

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

Add and troubleshoot the json-render inspection panel in SolidJS applications. This skill covers panel setup for examining specifications, editing state, reviewing action and stream timelines, browsing component catalogs, and selecting page elements for inspection.

中文简介正在准备中。当前显示英语简介。

• Add an inspection panel to a SolidJS app
• Inspect JSON specifications and edit application state
• Review action and stream timelines

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

Study a reference adaptation connecting the shared skillopt_sleep cycle to a custom DeepSeek backend for OpenClaw. It provides prototype wrappers, sample tasks, and a porting checklist for developers building an integration.

中文简介正在准备中。当前显示英语简介。

• Study a prototype DeepSeek backend for OpenClaw
• Identify changes needed for current engine interfaces
• Review sample tasks and environment-specific settings

Build desktop applications with GPUI Kit, a Rust framework. Guides setup, component selection, state management, themes, and background work, and explains UI integration tests that simulate input and check component behavior.

中文简介正在准备中。当前显示英语简介。

• Setting up a GPUI Kit desktop app
• Implementing forms and data tables
• Organizing state, events, and background tasks

Maintain LangBot skill assets by organizing operating rules, reference guides, test cases, fixtures, and troubleshooting entries. Check existing material before adding files, keep detailed instructions in one place, and verify that indexes stay current.

中文简介正在准备中。当前显示英语简介。

• Add a skill without duplicating existing guidance
• Organize reference guides and test cases
• Consolidate troubleshooting for shared causes

Develop and debug LangBot's backend and web frontend. The skill guides environment setup, API additions, authentication, database migrations, and testing, including updates to matching MCP tools so agents can use changed API features.

中文简介正在准备中。当前显示英语简介。

• Set up the LangBot backend and frontend for development
• Add an API endpoint and its matching MCP tool
• Update the database schema with Alembic

Build and debug LangBot plugins that handle messages, commands, and AI tool calls. The skill covers SDK usage, common errors, test environment setup, WebSocket message testing, and preparation for publishing to LangBot Space.

中文简介正在准备中。当前显示英语简介。

• Create a plugin that reacts to incoming messages
• Fix plugin SDK errors and missing responses
• Test group and private chats through WebSocket

Prepare a local LangBot environment for development and browser testing. The skill covers service startup, shared connection settings, browser access, proxy troubleshooting, and reusable login profiles, with guidance for Linux and WSL environments.

中文简介正在准备中。当前显示英语简介。

• Prepare a local Linux or WSL development environment
• Start services and verify WebUI access
• Choose Computer Use or Playwright MCP for browser control

Develop and migrate LangBot messaging adapters for Event-Based Agents, its event-driven architecture. Check conversion into shared event and message formats, implement platform APIs, and verify behavior through unit tests and real platform interactions.

中文简介正在准备中。当前显示英语简介。

• Adding a messaging platform adapter to LangBot
• Migrating an existing adapter to the EBA layout
• Testing event and message conversion in both directions

Understand a public GitHub repository through GitDiagram's architecture overview. Get an explanation of its main components, source paths, and connections, plus Mermaid diagram source and an interactive diagram for exploring the code.

中文简介正在准备中。当前显示英语简介。

• Getting an overview of an unfamiliar public repository
• Finding source paths for major components
• Understanding connections and data flow

Explore how a public GitHub repository is organized using GitDiagram. Get explanations tied to component names and source paths, an interactive architecture diagram, and a narrated explainer video when one is available.

中文简介正在准备中。当前显示英语简介。

• Preparing to work in an unfamiliar public codebase
• Understanding major components and their source paths
• Exploring component connections in an interactive diagram

Build and improve React interfaces with guidance on component structure, hooks, state management, and Server Components. Review unnecessary rendering, extract reusable logic, and implement accessible forms and loading states using established React patterns.

中文简介正在准备中。当前显示英语简介。

• Reviewing component structure and shared state
• Investigating unnecessary rendering
• Extracting reusable custom hooks

Design Redis caching, leaderboards, notifications, and message processing. Helps choose data structures, write Lua scripts for operations that run together without interference, and plan expiration, memory use, and persistence settings.

中文简介正在准备中。当前显示英语简介。

• Designing caches with expiration times
• Building leaderboards and request rate limits
• Processing messages with Redis Streams

Helps write and improve Python code with type hints, tests, and organized package settings. Covers dependency management, asynchronous tasks that wait on external operations, and profiling to identify performance bottlenecks before making changes.

中文简介正在准备中。当前显示英语简介。

• Refactoring Python code with type hints and tests
• Organizing package settings and dependencies
• Implementing concurrent input and output tasks

Create and improve shell scripts for routine tasks, deployment, and system administration. Covers input checks, error handling, logging, cleanup, and choosing between Bash features and POSIX rules for scripts that work across different systems.

中文简介正在准备中。当前显示英语简介。

• Automating routine system administration tasks
• Adding error handling and logs to existing scripts
• Making scripts work across macOS and Linux

Design and review TypeScript code with safer types and readable structures. Covers strict compiler settings, generics for reusable typed code, type guards for checking unknown values, and utility types for transforming existing definitions.

中文简介正在准备中。当前显示英语简介。

• Review TypeScript strict mode settings
• Design reusable functions with generics
• Replace unsafe assertions with type guards

Helps compile Rust and C into WebAssembly for browsers and servers. Covers JavaScript integration, WASI interfaces for accessing system resources, typed component connections, and practical ways to tune binary size, execution speed, and memory use.

中文简介正在准备中。当前显示英语简介。

• Run Rust code in a browser
• Build portable server modules with WASI
• Connect components written in different languages