xhs-mini-tool

Xiaohongshu Mini-Tool Development Guide

This Skill encodes the complete capability list and restriction rules of the Xiaohongshu mini-tool container, ensuring that the generated code can run normally within the Xiaohongshu container.

File Description

CONTAINER_RULES.md

Content: The runtime environment, available capabilities, unavailable capabilities, cross-origin rules, and WebGL boundaries of the mini-tool container.

When to Use: Must be followed every time before generating code for a Xiaohongshu mini-tool. This is a hard constraint and must not be violated.

BEST_PRACTICES.md

Content: Development best practices, including project structure, performance optimization, common pitfalls, and FAQ.

When to Use: Refer to this when you need to optimize performance, choose a technical solution, or encounter common problems.

Hard NEVER List

• NEVER Use Node.js, backend services, or server-side rendering (SSR) related code
• NEVER Use npm install to install dependencies; all third-party libraries must be imported via CDN
• NEVER Use eval()、new Function()、document.write()(prohibited by CSP)
• NEVER Use device-native APIs: Geolocation, Bluetooth, NFC, USB, AR/VR, camera/microphone (MediaDevices), Payment Request, push notifications, system-level permissions
• NEVER Use WebRTC
• NEVER Produce a total package size exceeding 5MB
• NEVER Use heavyweight 3D engines (Three.js, etc.)
• NEVER Omit the index.html entry file
• NEVER Ignore CORS requirements in Fetch/XHR requests
• NEVER Rely on autoplaying audio (must be triggered by user interaction)

Agent Workflow

1. Check requirement feasibility

After receiving the user's requirement, first check against CONTAINER_RULES.md :

• Does the requirement involve unavailable capabilities? If so, clearly inform the user and provide an alternative solution
• Is the requirement likely to exceed the 5MB package size limit?

2. Choose a technical solution

• Simple tools: pure HTML + CSS + JS, no framework needed
• Medium complexity: import lightweight frameworks such as Vue/React/Petite-Vue via CDN
• Need charts: import Chart.js / ECharts, etc. via CDN (mind the size)
• Need Canvas: use the Canvas 2D API directly

3. Generate code

Strictly follow these constraints:

• The entry file must be index.html
• All third-party libraries are imported via CDN <script> / <link> tags
• Mobile-first, use rem / vw / vh for responsive layout
• Touch events take priority over mouse events
• Use localStorage / IndexedDB for data persistence
• External API calls require confirming that the target server supports CORS

4. Check deliverables

After generation is complete, self-check:

• Includes the index.html entry
• No Node.js / npm dependencies
• No prohibited API calls (eval, Geolocation, MediaDevices, etc.)
• Total file size < 5MB
• Mobile adaptation (touch events, responsive layout)
• Audio playback is triggered by user interaction
• External requests are CORS-compatible