---
slug: "kuiklyui-ai"
source_type: "readme"
source_url: "https://cdn.jsdelivr.net/gh/tencent-tds/kuiklyui-ai@main/README.md"
repo: "https://github.com/tencent-tds/kuiklyui-ai"
source_file: "README.md"
branch: "main"
---
# KuiklyUI-AI 

> **NOTE: This repository is currently in development. Skills and rules are being progressively released and refined.**

AI can be used to build AI-driven Kuikly apps and accelerate development workflows. You can use AI tools like [Cursor](https://cursor.com/home) and [CodeBuddy](https://www.codebuddy.ai/) for code generation and scaffolding.

## Available Rules

| Rule | Description |
|---|---|
| [kuiklyDSL.mdc](https://github.com/tencent-tds/kuiklyui-ai/blob/HEAD/rules/kuiklyDSL.mdc) | Kuikly DSL cross-platform development guidelines covering architecture, coding, UI, performance, and state management best practices. |
| [kuiklyComposeDSL.mdc](https://github.com/tencent-tds/kuiklyui-ai/blob/HEAD/rules/kuiklyComposeDSL.mdc) | Kuikly Compose DSL cross-platform development guidelines covering component usage, API differences, and best practices. |

### How to use Rules

Rules are written in the `.mdc` format and loaded by [CodeBuddy](https://www.codebuddy.ai/) as project-level context. Choose the rule that matches the DSL you are using:

- Use **`kuiklyDSL.mdc`** when developing with the Kuikly DSL.
- Use **`kuiklyComposeDSL.mdc`** when developing with the Kuikly Compose DSL.

#### CodeBuddy

1. Create a `.codebuddy/rules/` directory in your project root (if it does not already exist).
2. Copy the desired `.mdc` file(s) from this repo into `.codebuddy/rules/`, for example:
   ```
   your-project/
   └── .codebuddy/
       └── rules/
           ├── kuiklyDSL.mdc
           └── kuiklyComposeDSL.mdc
   ```
3. CodeBuddy will automatically load these rules and apply them when generating or editing code.

#### Other AI tools (Cursor / Claude Code / Windsurf, etc.)

The `.mdc` files are plain Markdown with a small YAML front-matter, so they can also be reused by other AI coding tools — just place them in the directory each tool expects, or rename/convert as needed:

| Tool | Target location | Notes |
|---|---|---|
| Cursor | `.cursor/rules/kuiklyDSL.mdc` | Native `.mdc` support, copy as-is. |
| Claude Code | `CLAUDE.md` (project root) | Concatenate the rule body into `CLAUDE.md`, or reference it via `@rules/kuiklyDSL.mdc`. |
| Other tools | Custom instructions / system prompt | Paste the rule body into the tool's custom instructions field. |


> Tip: You can extend the official rules with your own project conventions (directory layout, naming, architecture decisions, etc.) so that AI better follows your team's standards.

## Available Skills

| Skill | Description |
|---|---|
| [kuikly-ui-framework](https://github.com/tencent-tds/kuiklyui-ai/blob/HEAD/skills/kuikly-ui-framework/SKILL.md) | Assists with Kuikly UI framework development including components (View, Text, Button, List, Image, etc.), modules (Router, Network, SP, etc.), layouts, events, and routing. Use when building Kuikly pages or working with UI components. |
| [kuikly-animation](https://github.com/tencent-tds/kuiklyui-ai/blob/HEAD/skills/kuikly-animation/SKILL.md) | Implements animated effects in Kuikly DSL using declarative (animate + reactive variables) and imperative (animateToAttr + ViewRef) approaches. Use when adding transform, opacity, backgroundColor, or frame animations. |
| [kuikly-expand-view](https://github.com/tencent-tds/kuiklyui-ai/blob/HEAD/skills/kuikly-expand-view/SKILL.md) | Creates custom UI components that expose native Views to the Kuikly side. Use when extending Kuikly with platform-specific UI components across Android, iOS, HarmonyOS, H5, and Mini Programs. |
| [kuikly-expand-api](https://github.com/tencent-tds/kuiklyui-ai/blob/HEAD/skills/kuikly-expand-api/SKILL.md) | Creates custom Modules to extend native APIs and enable bidirectional communication between Kuikly and native platforms. Use when accessing platform-specific functionality not available in Kuikly core. |
| [kuikly-network-and-json](https://github.com/tencent-tds/kuiklyui-ai/blob/HEAD/skills/kuikly-network-and-json/SKILL.md) | Handles HTTP requests and JSON data processing via Kuikly NetworkModule. Use when making network requests, parsing JSON, or uploading/downloading binary data. |
| [kuikly-reactive-observer](https://github.com/tencent-tds/kuiklyui-ai/blob/HEAD/skills/kuikly-reactive-observer/SKILL.md) | Manages reactive state updates and template directives (vfor, vif, vbind, etc.) in Kuikly DSL. Use when implementing data-driven UI updates, list rendering, or conditional rendering. |
| [kuikly-coroutines-threading](https://github.com/tencent-tds/kuiklyui-ai/blob/HEAD/skills/kuikly-coroutines-threading/SKILL.md) | Guides asynchronous programming with Kuikly built-in coroutines, kotlinx coroutines, and kuiklyx coroutine libraries. Use when executing background tasks, switching threads, or updating UI from async contexts. |
| [kuikly-assets-resource](https://github.com/tencent-tds/kuiklyui-ai/blob/HEAD/skills/kuikly-assets-resource/SKILL.md) | Manages asset files and resource loading across platforms (Android, iOS, HarmonyOS, H5, Mini Programs). Use when adding local image resources or configuring asset bundling. |
| [kuikly-visibility-exposure](https://github.com/tencent-tds/kuiklyui-ai/blob/HEAD/skills/kuikly-visibility-exposure/SKILL.md) | Implements visibility events (didAppear, didDisappear, willAppear, willDisappear, appearPercentage) for exposure tracking. Use when reporting component visibility or monitoring scroll-based exposure. |
| [kuikly-multi-module-config](https://github.com/tencent-tds/kuiklyui-ai/blob/HEAD/skills/kuikly-multi-module-config/SKILL.md) | Configures multi-module Kuikly projects. Use when creating new Kuikly sub-modules, setting up multi-module parameters, or resolving KuiklyCoreEntry conflicts. |
| [kuikly-compose-interop-dsl](https://github.com/tencent-tds/kuiklyui-ai/blob/HEAD/skills/kuikly-compose-interop-dsl/SKILL.md) | Integrates Kuikly DSL components within Compose DSL pages. Use when embedding DeclarativeBaseView/ViewContainer in Compose or calling Kuikly Modules from Compose. |
| [kuikly-recomposition-analyzer](https://github.com/tencent-tds/kuiklyui-ai/blob/HEAD/skills/kuikly-recomposition-analyzer/SKILL.md) | Analyze KuiklyUI Compose DSL recomposition performance issues from Recomposition Profiler output. Use when analyzing profiler_report.json / profiler_frames.jsonl log files or optimizing recomposition performance. |

### Install and update

```
// Install
npx skills add Tencent-TDS/KuiklyUI-AI/skills

// update
npx skills update Tencent-TDS/KuiklyUI-AI/skills
```