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 and CodeBuddy for code generation and scaffolding.

Available Rules

Rule	Description
kuiklyDSL.mdc	Kuikly DSL cross-platform development guidelines covering architecture, coding, UI, performance, and state management best practices.
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 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	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	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	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	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	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	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	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	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	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	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	Integrates Kuikly DSL components within Compose DSL pages. Use when embedding DeclarativeBaseView/ViewContainer in Compose or calling Kuikly Modules from Compose.
kuikly-recomposition-analyzer	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