React Native Best Practices
vercel-labs/openreview
A prioritized rule set for React Native and Expo apps covering list performance, animation, navigation, UI patterns, state, rendering, monorepos and configuration.
为 FlutterKit 页面和组件新增、修复或审查 Widget Preview，覆盖响应式设备注解、Logic 注入、静态 Preview Data、网络状态和深浅色检查。用户提到预览、Widget Preview、页面预览、组件预览或全量补预览时使用。
Install Fkit Preview
$ npx skills add Joker-x-dev/FlutterKit --skill fkit-preview -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Joker-x-dev/FlutterKit fkit-preview --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-preview .claude/skills/fkit-preview && 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-preview" agent skill from https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-preview into .claude/skills/fkit-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fkit-preview", 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-previewType 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-preview -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Joker-x-dev/FlutterKit fkit-preview --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-preview .agents/skills/fkit-preview && 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-preview" agent skill from https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-preview into .agents/skills/fkit-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fkit-preview", 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-preview -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Joker-x-dev/FlutterKit fkit-preview --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-preview .cursor/skills/fkit-preview && 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-preview" agent skill from https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-preview into .cursor/skills/fkit-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fkit-preview", 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-preview--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-preview -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Joker-x-dev/FlutterKit fkit-preview --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-preview .gemini/skills/fkit-preview && 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-preview" agent skill from https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-preview into .gemini/skills/fkit-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fkit-preview", 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-previewInstalls 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-preview -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-preview .github/skills/fkit-preview && 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-preview" agent skill from https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-preview into .github/skills/fkit-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fkit-preview", 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-preview -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-preview --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-preview .opencode/skills/fkit-preview && 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-preview" agent skill from https://github.com/Joker-x-dev/FlutterKit/tree/main/.agents/skills/fkit-preview into .opencode/skills/fkit-preview/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fkit-preview", 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-preview- GitHub stars
- 127
- Token cost
- ~242 tokens
- SKILL.md length
- 53 words
- Files
- 2
- Skills in repo
- 9
- Repo updated
- First seen
- Licence
- MIT
At a glance
为 FlutterKit 页面和组件新增、修复或审查 Widget Preview，覆盖响应式设备注解、Logic 注入、静态 Preview Data、网络状态和深浅色检查。用户提到预览、Widget Preview、页面预览、组件预览或全量补预览时使用。
- Works in 6 steps: 区分完整页面和独立组件。完整页面默认使用… → 将顶层 previewXxx 函数放在当前 View/Widget… → 页面通过构造参数注入 Logic，不依赖路由… → …
- Mobile work in your project
- SKILL.md covers 必读资料, 工作流 and 验证
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Fkit Preview is an agent skill from Joker-x-dev/FlutterKit. 为 FlutterKit 页面和组件新增、修复或审查 Widget Preview，覆盖响应式设备注解、Logic 注入、静态 Preview Data、网络状态和深浅色检查。用户提到预览、Widget Preview、页面预览、组件预览或全量补预览时使用。
Its SKILL.md is about 240 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. The repository describes itself as: 基于 GetX + TDesign 的 Flutter 项目模板，整合常用功能和开发实践. The licence is MIT.
When your agent uses it
- Mobile work in your project
Example prompts
- “/fkit-preview”
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- 区分完整页面和独立组件。完整页面默认使用 @ResponsivePreview()，组件使用 @WidgetPreview()；只在明确需要单设备时使用 Mobile、Tablet 或 Foldable 注解。
- 将顶层 previewXxx 函数放在当前 View/Widget 文件末尾，保持右侧预览聚焦当前文件。
- 页面通过构造参数注入 Logic，不依赖路由 Binding；不要为预览新增大量回调参数或复制 Content Widget。
- 网络、分页和刷新页面写入稳定的 Preview Data，并切换到成功状态；禁止真实网络、数据库或异步初始化。
- 组件使用真实业务模型的静态预览数据。组件正式 API 没有点击事件时，不为预览伪造 onTap。
- 检查手机、折叠屏、平板以及工具栏深浅色切换。
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
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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 Preview loads about 242 tokens when it runs. Until then it costs about 36 tokens; SKILL.md has 53 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). 53 words, ~242 tokens.
Download SKILL.mdSave it as
.claude/skills/fkit-preview/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- fkit-preview
- description
- 为 FlutterKit 页面和组件新增、修复或审查 Widget Preview，覆盖响应式设备注解、Logic 注入、静态 Preview Data、网络状态和深浅色检查。用户提到预览、Widget Preview、页面预览、组件预览或全量补预览时使用。
FKit Preview
必读资料
先阅读 AGENTS.md、docs/flutter-kit/扩展/widget-preview.md、docs/flutter-kit/业务功能/view.md，再检查：
lib/core/ui/preview/app_preview_annotations.dartlib/core/ui/preview/app_preview.dart- 当前 Feature 已有 Preview
test/core/ui/preview/feature_preview_test.dart
工作流
- 区分完整页面和独立组件。完整页面默认使用
@ResponsivePreview()，组件使用@WidgetPreview()；只在明确需要单设备时使用 Mobile、Tablet 或 Foldable 注解。 - 将顶层
previewXxx函数放在当前 View/Widget 文件末尾，保持右侧预览聚焦当前文件。 - 页面通过构造参数注入 Logic，不依赖路由 Binding；不要为预览新增大量回调参数或复制 Content Widget。
- 网络、分页和刷新页面写入稳定的 Preview Data，并切换到成功状态；禁止真实网络、数据库或异步初始化。
- 组件使用真实业务模型的静态预览数据。组件正式 API 没有点击事件时，不为预览伪造
onTap。 - 检查手机、折叠屏、平板以及工具栏深浅色切换。
验证
运行 test/core/ui/preview/feature_preview_test.dart 与相关 Widget 测试。确认预览可独立构建、没有 overflow、没有 GetX 注册缺失，也没有真实外部请求。
© 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-preview of Joker-x-dev/FlutterKit.
- SKILL.md
- agents/openai.yaml
Open the folder on GitHubat commit ad83439
Compare with similar skills
Fkit Preview 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 Preview this skillJoker-x-dev/FlutterKit | 127 | — | ~242 | Automated safety check: Pass | MIT | |
| React Native Best Practicesvercel-labs/openreview | 1.7k | 17 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Swiftui Protwostraws/SwiftUI-Agent-Skill | 5.1k | 2 repos | ~1.5k | Automated safety check: Pass | MIT | |
| Kortix Brandkortix-ai/suna | 20k | — | ~4k | Automated safety check: Pass | Custom licence | |
| Ip As LogoKartikLabhshetwar/better-shot | 2.4k | 1 repos | ~4.3k | Automated safety check: Pass | MIT | |
| Compose Multiplatform Patternsmonta-app/ocpp-emulator | 180 | 5 repos | ~2k | Automated safety check: Pass | Apache-2.0 |
Similar skills
- Official
Swiftui Pro
twostraws/SwiftUI-Agent-Skill
Comprehensively reviews SwiftUI code for best practices on modern APIs, maintainability, and performance.
Kortix Brand
kortix-ai/suna
Load FIRST for anything that carries the Kortix look or voice: product or mobile UI, copy of any kind, decks, social, images, email, CLI output, anything with the logo, and reviews of these.
Ip As Logo
KartikLabhshetwar/better-shot
Generate extremely simple, cute, personified square character images with rounded heavy forms, two purposeful character colors, one solid background color, and a dominant lower-corner composition.
Compose Multiplatform Patterns
monta-app/ocpp-emulator
Compose Multiplatform and Jetpack Compose patterns for KMP projects — state management, navigation, theming, performance, and platform-specific UI.
Aso Appstore Screenshots
adamlyttleapps/claude-skill-aso-appstore-screenshots
Generate high-converting App Store screenshots by analyzing your app's codebase, discovering core benefits, and creating ASO-optimized screenshot images using Nano Banana Pro.
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
Categories
Questions about Fkit Preview
What does Fkit Preview do?
为 FlutterKit 页面和组件新增、修复或审查 Widget Preview，覆盖响应式设备注解、Logic 注入、静态 Preview Data、网络状态和深浅色检查。用户提到预览、Widget Preview、页面预览、组件预览或全量补预览时使用。. Fkit Preview is an agent skill from Joker-x-dev/FlutterKit.
When should I use Fkit Preview?
Fkit Preview fits situations like: mobile work in your project.
How do I install Fkit Preview in Claude Code?
Run `npx skills add Joker-x-dev/FlutterKit --skill fkit-preview -a claude-code`. Or copy the skill folder (.agents/skills/fkit-preview in Joker-x-dev/FlutterKit) into .claude/skills/fkit-preview in your project. Claude Code loads it when a task matches its description.
How do I install Fkit Preview in Codex?
Run `npx skills add Joker-x-dev/FlutterKit --skill fkit-preview -a codex`. Or copy the skill folder (.agents/skills/fkit-preview in Joker-x-dev/FlutterKit) into .agents/skills/fkit-preview in your project. Codex loads it when a task matches its description.
Can I use Fkit Preview 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-preview -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-preview, .gemini/skills/fkit-preview, .github/skills/fkit-preview and .opencode/skills/fkit-preview in your project.
What does Fkit Preview need to run?
SKILL.md names no scripts, command-line tools or credentials: Fkit Preview is instructions for the agent only.
Does Fkit Preview access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Fkit Preview 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 Preview use?
Fkit Preview 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 Preview use?
About 242 tokens (SKILL.md is roughly 968 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 Preview?
Skills that share tags, products or a category with Fkit Preview: React Native Best Practices (vercel-labs/openreview, 1.7k stars), Swiftui Pro (twostraws/SwiftUI-Agent-Skill, 5.1k stars), Kortix Brand (kortix-ai/suna, 20k stars) and Ip As Logo (KartikLabhshetwar/better-shot, 2.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Fkit Preview?
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.