planet-components

Cross-stack UI component libraries implementing a Sky Planet design system: shared semantic tokens, small consistent APIs, themeable palettes (Sky/Night/Mint/Sunrise), token-driven styles and runnable samples.

#web
#ui
#resources
#react
#localization
#flutter
#design-system
#automation
#apple
#android-ui

Suggest an edit

Android

iOS

GitHub stars4

Authorstechskillplanet

Dependents0

LicenseMIT License

Creation date4 months ago

Last activity9 days ago

Latest release0.2.1 (9 days ago)

GitHub repository Wiki page

Planet Components

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 做页面

Why Planet Components?


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)

Supported platforms (v0.2.1)

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: 简体中文（完整） · 日本語 · 한국어.

Release status (public registries)

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

Quick start

Pick your stack — all examples use the public 0.2.1 packages.

React Web

npm install @techskillplanet/planet-components-react

import { 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: PlanetComponents

Flutter

dependencies:
  tech_skill_planet_components: ^0.2.1

Kuikly

repositories {
    mavenCentral()
    maven { url = uri("https://mirrors.tencent.com/repository/maven-tencent/") }
}
dependencies {
    implementation("io.github.techskillplanet:planet-components-kuikly:0.2.1")
}

Design system

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.

Repository layout

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).

Documentation

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

Local development

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.

License

MIT © TechSkillPlanet