Mobile App UI Design
ceorkm/mobile-app-ui-design
Design high-quality mobile app UI/UX screens, flows, and components.
使用 FlutterKit 设计系统、TDesign Flutter、Widget 与动画扩展实现或重构页面和组件，覆盖主题语义、响应式布局、安全区、深浅色和预览。用户要求编写 UI、修改布局、统一样式、实现组件或适配多尺寸屏幕时使用。
Install Fkit UI
$ npx skills add Joker-x-dev/FlutterKit --skill fkit-ui -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Joker-x-dev/FlutterKit fkit-ui --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-ui .claude/skills/fkit-ui && 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-ui" agent skill from https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-ui into .claude/skills/fkit-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fkit-ui", 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-uiType 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-ui -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Joker-x-dev/FlutterKit fkit-ui --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-ui .agents/skills/fkit-ui && 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-ui" agent skill from https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-ui into .agents/skills/fkit-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fkit-ui", 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-ui -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Joker-x-dev/FlutterKit fkit-ui --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-ui .cursor/skills/fkit-ui && 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-ui" agent skill from https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-ui into .cursor/skills/fkit-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fkit-ui", 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-ui--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-ui -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Joker-x-dev/FlutterKit fkit-ui --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-ui .gemini/skills/fkit-ui && 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-ui" agent skill from https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-ui into .gemini/skills/fkit-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fkit-ui", 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-uiInstalls 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-ui -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-ui .github/skills/fkit-ui && 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-ui" agent skill from https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-ui into .github/skills/fkit-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fkit-ui", 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-ui -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-ui --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-ui .opencode/skills/fkit-ui && 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-ui" agent skill from https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-ui into .opencode/skills/fkit-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fkit-ui", 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-ui- GitHub stars
- 127
- Token cost
- ~327 tokens
- SKILL.md length
- 75 words
- Files
- 2
- Skills in repo
- 9
- Repo updated
- First seen
- Licence
- MIT
At a glance
使用 FlutterKit 设计系统、TDesign Flutter、Widget 与动画扩展实现或重构页面和组件，覆盖主题语义、响应式布局、安全区、深浅色和预览。用户要求编写 UI、修改布局、统一样式、实现组件或适配多尺寸屏幕时使用。
- Works in 5 steps: lib/core/design_system/README.md → lib/core/design_system/extensions/extensi… → docs/tdesign-flutter/README.md 与目标组件页面 → …
- Tasks that involve Cross-platform mobile apps
- SKILL.md covers 必读资料, 固定检查顺序, 禁止事项 and 验证
- Calls git
What it does
Fkit UI is an agent skill from Joker-x-dev/FlutterKit. 使用 FlutterKit 设计系统、TDesign Flutter、Widget 与动画扩展实现或重构页面和组件，覆盖主题语义、响应式布局、安全区、深浅色和预览。用户要求编写 UI、修改布局、统一样式、实现组件或适配多尺寸屏幕时使用。
Its SKILL.md is about 330 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-ui”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- lib/core/design_system/README.md
- lib/core/design_system/extensions/extensions.dart
- docs/tdesign-flutter/README.md 与目标组件页面
- docs/flutter-kit/框架核心/design-system.md
- docs/flutter-kit/框架核心/widget-extensions.md
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 UI loads about 327 tokens when it runs. Until then it costs about 32 tokens; SKILL.md has 75 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). 75 words, ~327 tokens.
Download SKILL.mdSave it as
.claude/skills/fkit-ui/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- fkit-ui
- description
- 使用 FlutterKit 设计系统、TDesign Flutter、Widget 与动画扩展实现或重构页面和组件，覆盖主题语义、响应式布局、安全区、深浅色和预览。用户要求编写 UI、修改布局、统一样式、实现组件或适配多尺寸屏幕时使用。
FKit UI
必读资料
先阅读 AGENTS.md，再依次读取：
lib/core/design_system/README.mdlib/core/design_system/extensions/extensions.dartdocs/tdesign-flutter/README.md与目标组件页面docs/flutter-kit/框架核心/design-system.mddocs/flutter-kit/框架核心/widget-extensions.md
按需读取 docs/flutter-kit/框架核心/theme.md、docs/flutter-kit/框架核心/dark-mode.md、docs/flutter-kit/框架核心/animated-extensions.md，以及 docs/flutter-kit/扩展/ 下的屏幕适配、安全区与预览专题。检查扩展方法时打开 lib/core/design_system/extensions/widget/ 或 lib/core/design_system/extensions/animated/ 中的真实声明，不猜签名。
固定检查顺序
- 分析页面信息层级、交互状态、屏幕方向和断点需求。
- 在 TDesign 组件索引中查找已有组件，优先组合
TD*组件。 - 在完整布局规范和扩展统一入口中查找已有布局、间距、装饰、裁剪、滚动、手势、文本、变换和动画能力。
- 使用
AppTheme、语义尺寸、Shape、Shadow、Space和现有扩展实现布局。 - 将
Obx缩到实际读取 Rx 的最小区域，保持静态布局不重复重建。 - 处理深浅色、安全区、横竖屏、手机、平板与折叠屏。
- 为完整页面添加响应式 Preview，为模块组件添加 Widget Preview。
禁止事项
- 不硬编码颜色、间距、圆角、阴影或重复
EdgeInsets。 - 不按 TDesign Web、Vue、React 或旧版本文档推测 Dart 参数。
- 不在全局或静态字段缓存依赖主题上下文的 getter。
- 不忽略链式扩展包装顺序；背景、裁剪、点击和滚动的先后顺序必须符合目标 Widget 树。
- 不为单次样式需求新增跨项目通用扩展。
验证
运行相关 Widget/Preview 测试并检查无 overflow。至少验证浅色、深色和任务涉及的关键尺寸；涉及主导航时验证手机横竖屏状态一致性。执行相关分析与 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-ui of Joker-x-dev/FlutterKit.
- SKILL.md
- agents/openai.yaml
Open the folder on GitHubat commit ad83439
Compare with similar skills
Fkit UI 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 UI this skillJoker-x-dev/FlutterKit | 127 | — | ~327 | Automated safety check: Pass | MIT | |
| Mobile App UI Designceorkm/mobile-app-ui-design | 400 | — | ~2k | Automated safety check: Pass | None | |
| Cue AnimationsMilad-Akarie/cue | 119 | 1 repos | ~6.6k | Automated safety check: Pass | MIT | |
| Marionette Flutter Drive Appleancodepl/marionette_mcp | 473 | — | ~11k | Automated safety check: Pass | Apache-2.0 | |
| Tm Quick ActionFar-Se/tabame | 372 | — | ~4.3k | Automated safety check: Pass | MIT | |
| AnimationsVeryGoodOpenSource/vgv-ai-flutter-plugin | 169 | — | ~3.5k | Automated safety check: Pass | MIT |
Similar skills
Cue Animations
Milad-Akarie/cue
Flutter animation using the Cue package. An agent skill from Milad-Akarie/cue.
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.
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 UI
What does Fkit UI do?
使用 FlutterKit 设计系统、TDesign Flutter、Widget 与动画扩展实现或重构页面和组件，覆盖主题语义、响应式布局、安全区、深浅色和预览。用户要求编写 UI、修改布局、统一样式、实现组件或适配多尺寸屏幕时使用。. Fkit UI is an agent skill from Joker-x-dev/FlutterKit.
When should I use Fkit UI?
Fkit UI fits situations like: tasks that involve Cross-platform mobile apps.
How do I install Fkit UI in Claude Code?
Run `npx skills add Joker-x-dev/FlutterKit --skill fkit-ui -a claude-code`. Or copy the skill folder (.agents/skills/fkit-ui in Joker-x-dev/FlutterKit) into .claude/skills/fkit-ui in your project. Claude Code loads it when a task matches its description.
How do I install Fkit UI in Codex?
Run `npx skills add Joker-x-dev/FlutterKit --skill fkit-ui -a codex`. Or copy the skill folder (.agents/skills/fkit-ui in Joker-x-dev/FlutterKit) into .agents/skills/fkit-ui in your project. Codex loads it when a task matches its description.
Can I use Fkit UI 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-ui -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-ui, .gemini/skills/fkit-ui, .github/skills/fkit-ui and .opencode/skills/fkit-ui in your project.
What does Fkit UI need to run?
Going by SKILL.md and its folder, Fkit UI needs the command-line tools its instructions call (git).
Does Fkit UI 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 UI 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 UI use?
Fkit UI 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 UI use?
About 327 tokens (SKILL.md is roughly 1.3k 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 UI?
Skills that share tags, products or a category with Fkit UI: Mobile App UI Design (ceorkm/mobile-app-ui-design, 400 stars), Cue Animations (Milad-Akarie/cue, 119 stars), Marionette Flutter Drive App (leancodepl/marionette_mcp, 473 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 UI?
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.