TechSkillPlanet · 技趣星球
用技术创造乐趣 · Create Joy with Technology
Cross-platform UI component libraries sharing one Sky Planet design system:
blue-sky brand, cloud surfaces, island-style controls, soft borders, playful motion.
English · 简体中文 · 日本語 · 한국어 · 非技术 · 用 AI 做页面
| One visual language | Shared semantic tokens in design/tokens/ — same names across Android, iOS, Web, Flutter, Mini Program, and Kuikly |
| Eight publishable stacks | Each stack ships a real library + runnable samples (samples always depend on the local library) |
| Small, consistent APIs | Common props: variant, disabled, selected / checked, text / title / message, runtime theme refresh |
| Open & packaged | MIT · public registries at 0.2.1 (npm / Maven Central / pub.dev / SPM / CocoaPods) |
| Stack | Package | Registry |
|---|---|---|
| Android View | io.github.techskillplanet:planet-components-android |
Maven Central |
| iOS SwiftUI | PlanetComponents |
SPM · CocoaPods |
| React Web | @techskillplanet/planet-components-react |
npm |
| Vue Web | @techskillplanet/planet-components-vue |
npm |
| React Native | @techskillplanet/planet-components-react-native |
npm |
| Flutter | tech_skill_planet_components |
pub.dev |
| WeChat Mini Program | @techskillplanet/planet-components-miniprogram |
npm |
| Kuikly (KMP) | io.github.techskillplanet:planet-components-kuikly |
Maven Central |
Full install snippets: 简体中文（完整） · 日本語 · 한국어.
0.2.1 published 2026-09-10 across all eight stacks (npm · Maven Central · pub.dev · SPM / CocoaPods).
| Stack | Package | Status |
|---|---|---|
| Android View | io.github.techskillplanet:planet-components-android:0.2.1 |
Published |
| iOS SwiftUI | PlanetComponents 0.2.1 (SPM tag + CocoaPods) |
Published |
| React Web | @techskillplanet/planet-components-react@0.2.1 |
Published |
| Vue Web | @techskillplanet/planet-components-vue@0.2.1 |
Published |
| React Native | @techskillplanet/planet-components-react-native@0.2.1 |
Published |
| Flutter | tech_skill_planet_components 0.2.1 |
Published |
| Mini Program | @techskillplanet/planet-components-miniprogram@0.2.1 |
Published |
| Kuikly | io.github.techskillplanet:planet-components-kuikly:0.2.1 |
Published |
Pick your stack — all examples use the public 0.2.1 packages.
React Web
npm install @techskillplanet/planet-components-reactimport { TspButton, starPlanetTheme } from '@techskillplanet/planet-components-react';
import '@techskillplanet/planet-components-react/styles.css';
<TspButton text="Get Started" variant="primary" theme={starPlanetTheme} onTap={() => {}} />Android View
implementation "io.github.techskillplanet:planet-components-android:0.2.1"BasicThemeManager.init(context, "sky_planet_day", "island_raised");iOS SwiftUI (SPM)
.package(url: "https://github.com/techskillplanet/planet-components", from: "0.2.1")
// product: PlanetComponentsFlutter
dependencies:
tech_skill_planet_components: ^0.2.1Kuikly
repositories {
mavenCentral()
maven { url = uri("https://mirrors.tencent.com/repository/maven-tencent/") }
}
dependencies {
implementation("io.github.techskillplanet:planet-components-kuikly:0.2.1")
}- Brand: 技趣星球 / TechSkillPlanet
- Direction: Sky Planet — sky-blue primary (
#31A8FF), cloud surfaces, island-raised controls - Tokens:
design/tokens/color_token.json·design/tokens/style_token.json - Contract:
docs/COMPONENT_CONTRACT.md·component_contract.json
Themes (where supported): Sky / Night / Mint / Sunrise, with style profiles such as island_raised.
planet-components/
├── design/tokens/ # shared color + style tokens
├── android/ # View (Java) library + samples
├── ios-swiftui/ # SwiftUI library + samples
├── react-web/ · vue-web/ # Web libraries + samples
├── react-native/ # RN library + samples
├── flutter/ # Dart library + samples
├── miniprogram/ # WeChat Mini Program
├── kuikly/ # Tencent Kuikly / KMP
├── docs/ # structure, contract, AI plugin
└── tools/ # structure checks, publish helpers
Each stack: library/ (publishable) + samples/ (local dependency only).
| Doc | Description |
|---|---|
| README.zh-CN.md | Full Chinese guide (install per stack) |
| PUBLISHING.md | Release playbooks (npm / Maven / pub / SPM / CocoaPods) |
| docs/PLATFORM_STRUCTURE.md | One-component-one-file rules |
| docs/COMPONENT_CONTRACT.md | Cross-platform component contract |
| docs/AI_FOR_EVERYONE.md | Non-engineers: build pages with AI (Chinese) |
| docs/prompts/ | Copy-paste prompts (zh / en) |
| docs/AI_PLUGIN.md | Agent Skills load paths: npx skills / Cursor Plugins / install-ai-plugin.sh |
| .agents/README.md | Built-in skill catalog (v0.2.1) |
| AGENTS.md | Repo rules for coding agents |
node tools/check-structure.cjs
node tools/check-token-drift.cjs
node tools/check-contract-inventory.cjs
./tools/headless-check.sh # full eight-stack gate (local)CI (.github/workflows/ci.yml) runs the three Node checks plus React/Vue/RN/Mini package tests on every PR; native Flutter/Android/Kuikly assemble on main / manual dispatch.
Accessibility baseline: docs/A11Y.md. React Storybook: cd react-web/library && npm run storybook.
See README.zh-CN.md for per-stack build / pack commands. Publishing scripts live under android/scripts/, kuikly/scripts/, and tools/publish-npm-web.sh.
MIT © TechSkillPlanet