Mobile App UI Design
ceorkm/mobile-app-ui-design
Design high-quality mobile app UI/UX screens, flows, and components.
实现和维护 FlutterKit 主题、深色模式、主题颜色预设、持久化恢复、系统栏同步与国际化。用户要求修改主题、深浅色、颜色 JSON、语言切换、文案资源或 ThemeDemo 时使用。
Install Fkit Theme
$ npx skills add Joker-x-dev/FlutterKit --skill fkit-theme -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Joker-x-dev/FlutterKit fkit-theme --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Joker-x-dev/FlutterKit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/fkit-theme .claude/skills/fkit-theme && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "fkit-theme" agent skill from https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-theme into .claude/skills/fkit-theme/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fkit-theme", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-themeType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Joker-x-dev/FlutterKit --skill fkit-theme -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Joker-x-dev/FlutterKit fkit-theme --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Joker-x-dev/FlutterKit.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/fkit-theme .agents/skills/fkit-theme && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "fkit-theme" agent skill from https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-theme into .agents/skills/fkit-theme/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fkit-theme", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Joker-x-dev/FlutterKit --skill fkit-theme -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Joker-x-dev/FlutterKit fkit-theme --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Joker-x-dev/FlutterKit.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/fkit-theme .cursor/skills/fkit-theme && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "fkit-theme" agent skill from https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-theme into .cursor/skills/fkit-theme/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fkit-theme", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Joker-x-dev/FlutterKit.git --path .agents/skills/fkit-theme--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Joker-x-dev/FlutterKit --skill fkit-theme -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Joker-x-dev/FlutterKit fkit-theme --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Joker-x-dev/FlutterKit.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/fkit-theme .gemini/skills/fkit-theme && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "fkit-theme" agent skill from https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-theme into .gemini/skills/fkit-theme/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fkit-theme", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Joker-x-dev/FlutterKit fkit-themeInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Joker-x-dev/FlutterKit --skill fkit-theme -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Joker-x-dev/FlutterKit.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/fkit-theme .github/skills/fkit-theme && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "fkit-theme" agent skill from https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-theme into .github/skills/fkit-theme/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fkit-theme", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Joker-x-dev/FlutterKit --skill fkit-theme -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Joker-x-dev/FlutterKit fkit-theme --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Joker-x-dev/FlutterKit.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/fkit-theme .opencode/skills/fkit-theme && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "fkit-theme" agent skill from https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-theme into .opencode/skills/fkit-theme/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fkit-theme", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
fkit-theme- GitHub stars
- 127
- Token cost
- ~253 tokens
- SKILL.md length
- 65 words
- Files
- 2
- Skills in repo
- 9
- Repo updated
- First seen
- Licence
- MIT
At a glance
实现和维护 FlutterKit 主题、深色模式、主题颜色预设、持久化恢复、系统栏同步与国际化。用户要求修改主题、深浅色、颜色 JSON、语言切换、文案资源或 ThemeDemo 时使用。
- Works in 5 steps: 从 assets/json/ 中的主题 JSON 与… → 保持 ThemeInitializer → Application → Obx… → 通过 Repository 持久化主题模式、颜色和语言；不要在 View… → …
- Tasks that involve Cross-platform mobile apps
- SKILL.md covers 必读资料, 主题工作流, 国际化工作流 and 验证
- Calls git
What it does
Fkit Theme is an agent skill from Joker-x-dev/FlutterKit. 实现和维护 FlutterKit 主题、深色模式、主题颜色预设、持久化恢复、系统栏同步与国际化。用户要求修改主题、深浅色、颜色 JSON、语言切换、文案资源或 ThemeDemo 时使用。
Its SKILL.md is about 250 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).
It sits in Mobile, covering Cross-platform mobile apps. It works with Flutter. The repository describes itself as: 基于 GetX + TDesign 的 Flutter 项目模板，整合常用功能和开发实践. The licence is MIT.
When your agent uses it
- Tasks that involve Cross-platform mobile apps
Example prompts
- “/fkit-theme”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- 从 assets/json/ 中的主题 JSON 与 ThemeColorPreset 确认浅色、深色名称和回退关系。
- 保持 ThemeInitializer → Application → Obx → TDesign/Material/AppTheme → System UI 的现有更新链路。
- 通过 Repository 持久化主题模式、颜色和语言；不要在 View 直接写存储。
- 使用语义颜色与字体，不为深色模式复制两套业务 Widget。
- 修改主题 token 时验证所有引用方、预览和 ThemeDemo。
What it can do on your machine
Read from SKILL.md and the folder at commit ad83439. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
git
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use git, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Fkit Theme loads about 253 tokens when it runs. Until then it costs about 26 tokens; SKILL.md has 65 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from Joker-x-dev/FlutterKit at commit ad83439, republished under its MIT licence (© Joker-x-dev). 65 words, ~253 tokens.
Download SKILL.mdSave it as
.claude/skills/fkit-theme/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- fkit-theme
- description
- 实现和维护 FlutterKit 主题、深色模式、主题颜色预设、持久化恢复、系统栏同步与国际化。用户要求修改主题、深浅色、颜色 JSON、语言切换、文案资源或 ThemeDemo 时使用。
FKit Theme
必读资料
先阅读 AGENTS.md，再读取：
docs/flutter-kit/框架核心/theme.mddocs/flutter-kit/框架核心/dark-mode.mddocs/flutter-kit/框架核心/localization.mddocs/flutter-kit/框架核心/design-system.mddocs/tdesign-flutter/全局配置/深色模式.md
核对 ThemeInitializer、Application、main.dart、ThemeColorPreset、主题 Repository/DataSource 和现有主题测试。
主题工作流
- 从
assets/json/中的主题 JSON 与ThemeColorPreset确认浅色、深色名称和回退关系。 - 保持 ThemeInitializer → Application →
Obx→ TDesign/Material/AppTheme → System UI 的现有更新链路。 - 通过 Repository 持久化主题模式、颜色和语言；不要在 View 直接写存储。
- 使用语义颜色与字体，不为深色模式复制两套业务 Widget。
- 修改主题 token 时验证所有引用方、预览和 ThemeDemo。
国际化工作流
- 公共文案放 Core localization，业务文案放对应 Feature localization。
- 同步 key、中文、英文映射和聚合注册，避免页面硬编码可翻译文案。
- 保持接口返回文本和动态业务内容不进入静态翻译表。
验证
运行主题初始化、AppTheme、主题 Demo、语言响应性等相关测试。检查浅色、深色、跟随系统、颜色预设恢复、系统栏和 Preview，再执行静态分析与 git diff --check。
© Joker-x-dev, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file in .agents/skills/fkit-theme of Joker-x-dev/FlutterKit.
- SKILL.md
- agents/openai.yaml
Open the folder on GitHubat commit ad83439
Compare with similar skills
Fkit Theme next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Fkit Theme this skillJoker-x-dev/FlutterKit | 127 | — | ~253 | Automated safety check: Pass | MIT | |
| Mobile App UI Designceorkm/mobile-app-ui-design | 403 | — | ~2k | Automated safety check: Pass | None | |
| Marionette Flutter Drive Appleancodepl/marionette_mcp | 482 | — | ~11k | Automated safety check: Pass | Apache-2.0 | |
| Cue AnimationsMilad-Akarie/cue | 119 | 1 repos | ~6.6k | Automated safety check: Pass | MIT | |
| Tm Quick ActionFar-Se/tabame | 372 | — | ~4.3k | Automated safety check: Pass | MIT | |
| AnimationsVeryGoodOpenSource/vgv-ai-flutter-plugin | 170 | — | ~3.5k | Automated safety check: Pass | MIT |
Similar skills
Marionette Flutter Drive App
leancodepl/marionette_mcp
Set up and drive a running Flutter app (debug or profile) with Marionette — an AI agent's hands and eyes for the app.
Cue Animations
Milad-Akarie/cue
Flutter animation using the Cue package. An agent skill from Milad-Akarie/cue.
Tm Quick Action
Far-Se/tabame
Build or revise Tabame quick menu top-bar buttons in lib/widgets/itzy/quickmenu/button.dart.
Animations
VeryGoodOpenSource/vgv-ai-flutter-plugin
Best practices for Flutter animations using the built-in animation framework, covering implicit animations, explicit AnimationController animations, page transitions, and Material 3 motion tokens.
Flutter Riverpod State Management
andrewyng/context-hub
Guides Flutter state management with Riverpod: choosing provider types, wiring ConsumerWidgets, handling async state and lifecycle, and overriding providers in tests.
More from Joker-x-dev/FlutterKit
All 9 skills in this repoFkit Setup
Joker-x-dev/FlutterKit
将 FlutterKit 脚手架初始化为新的应用项目，统一修改应用显示名称、Dart 包名、Android Application ID、Apple Bundle ID、Linux/Windows 标识、Web 名称、运行时品牌文案、Logo、桌面图标和启动页。用户拉取模板后要求改名、改包名、替换品牌资源或完成首次项目配置时使用。
Fkit Audit
Joker-x-dev/FlutterKit
审查 FlutterKit 项目或指定模块的架构边界、命名、注释、TDesign 与设计系统使用、预览、测试、生成文件和多端配置。用户要求全盘扫描、代码审查、架构检查、注释检查、预览完整性检查或质量报告时使用。
Fkit Data
Joker-x-dev/FlutterKit
实现和维护 FlutterKit 数据访问链路，覆盖实体、请求、响应、Repository、网络、数据库、本地存储、RequestHelper、分页与全局 Service。用户要求接入接口、持久化数据、创建模型、处理请求结果或实现网络列表时使用。
Fkit Feature
Joker-x-dev/FlutterKit
创建、修改和重构 FlutterKit 业务模块与页面，覆盖基础父类选择、View、Logic、State、Binding、按需目录、国际化、路由接入和预览。用户要求新增 Feature、页面、模块目录、页面模板或调整页面分层时使用。
Fkit Native
Joker-x-dev/FlutterKit
管理 FlutterKit 多端运行时资源、应用图标、原生启动页、Android/iOS/Web/桌面端配置和发布构建。用户要求生成图标、启动页、FlutterGen 资源、同步原生底座、排查原生缓存或执行多端打包时使用。
Fkit Nav
Joker-x-dev/FlutterKit
配置和维护 FlutterKit 模块化导航，覆盖 Routes、Pages、Navigator、Binding、Params、Result、Guard 与跨模块跳转。用户要求新增路由、页面跳转、传参、结果回传、登录拦截或修复导航状态时使用。
Related
Works with
Categories
Questions about Fkit Theme
What does Fkit Theme do?
实现和维护 FlutterKit 主题、深色模式、主题颜色预设、持久化恢复、系统栏同步与国际化。用户要求修改主题、深浅色、颜色 JSON、语言切换、文案资源或 ThemeDemo 时使用。. Fkit Theme is an agent skill from Joker-x-dev/FlutterKit.
When should I use Fkit Theme?
Fkit Theme fits situations like: tasks that involve Cross-platform mobile apps.
How do I install Fkit Theme in Claude Code?
Run `npx skills add Joker-x-dev/FlutterKit --skill fkit-theme -a claude-code`. Or copy the skill folder (.agents/skills/fkit-theme in Joker-x-dev/FlutterKit) into .claude/skills/fkit-theme in your project. Claude Code loads it when a task matches its description.
How do I install Fkit Theme in Codex?
Run `npx skills add Joker-x-dev/FlutterKit --skill fkit-theme -a codex`. Or copy the skill folder (.agents/skills/fkit-theme in Joker-x-dev/FlutterKit) into .agents/skills/fkit-theme in your project. Codex loads it when a task matches its description.
Can I use Fkit Theme in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Joker-x-dev/FlutterKit --skill fkit-theme -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/fkit-theme, .gemini/skills/fkit-theme, .github/skills/fkit-theme and .opencode/skills/fkit-theme in your project.
What does Fkit Theme need to run?
Going by SKILL.md and its folder, Fkit Theme needs the command-line tools its instructions call (git).
Does Fkit Theme access the network?
SKILL.md contains no URLs. Its commands use git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Fkit Theme safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Fkit Theme use?
Fkit Theme is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Fkit Theme use?
About 253 tokens (SKILL.md is roughly 1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Fkit Theme?
Skills that share tags, products or a category with Fkit Theme: Mobile App UI Design (ceorkm/mobile-app-ui-design, 403 stars), Marionette Flutter Drive App (leancodepl/marionette_mcp, 482 stars), Cue Animations (Milad-Akarie/cue, 119 stars) and Tm Quick Action (Far-Se/tabame, 372 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Fkit Theme?
Joker-x-dev (a GitHub user) maintains it in Joker-x-dev/FlutterKit, which has 127 GitHub stars. The repository holds 9 skills in this directory. The repository was last updated on July 26, 2026.
Source: Joker-x-dev/FlutterKit on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.