shopify-built-for-shopify by tamiror6/shopify-app-skills
npx skills add https://github.com/tamiror6/shopify-app-skills --skill shopify-built-for-shopify此技能在开发过程中强制执行 Shopify 的"专为 Shopify 打造"质量标准,以确保应用满足 Shopify 应用商店的最高质量门槛。
参考:https://shopify.dev/docs/apps/launch/built-for-shopify/requirements
在审查代码或构建功能时使用此清单:
BFS 合规性审查:
- [ ] 应用嵌入在 Shopify 管理后台中(使用 App Bridge)
- [ ] 使用会话令牌身份验证
- [ ] 主要工作流程保持在 Shopify 管理后台内
- [ ] 无需额外的登录/注册
- [ ] 使用主题应用扩展(而非 Asset API 进行写入操作)
- [ ] 满足 Web Vitals 目标(LCP ≤2.5s, CLS ≤0.1, INP ≤200ms)
- [ ] 使用与后台样式匹配的 Polaris 组件
- [ ] 移动端响应式设计
- [ ] 使用导航菜单(s-app-nav)和上下文保存栏
- [ ] 错误消息为红色、上下文相关且有用
- [ ] 无暗黑模式或施压策略
- [ ] 高级功能已禁用并标记
- [ ] 推广内容可关闭
应用必须嵌入到 Shopify 管理后台中:
<!-- 添加到每个文档的 <head> 中 -->
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
// 使用会话令牌身份验证
import { authenticate } from "@shopify/shopify-app-remix/server";
export async function loader({ request }) {
const { session } = await authenticate.admin(request);
// ...
}
所有主要应用工作流程必须能在 Shopify 管理后台内完成:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
对于店面应用,请使用主题应用扩展,而不是 Asset API:
<!-- extensions/theme-extension/blocks/my-block.liquid -->
{% schema %}
{
"name": "我的应用区块",
"target": "section",
"settings": []
}
{% endschema %}
请勿使用 Asset API 来创建、修改或删除主题文件(允许读取操作)。
| 指标 | 目标 | 描述 |
|---|---|---|
| LCP | ≤ 2.5s | 最大内容绘制 |
| CLS | ≤ 0.1 | 累积布局偏移 |
| INP | ≤ 200ms | 交互到下一次绘制 |
// 懒加载重型组件
const HeavyChart = lazy(() => import('./HeavyChart'));
// 使用 React.memo 处理昂贵的渲染
const ExpensiveList = memo(({ items }) => (
// ...
));
// 使用骨架屏加载器避免布局偏移
<Suspense fallback={<SkeletonPage />}>
<AppContent />
</Suspense>
使用 Polaris Web 组件以匹配后台样式:
<!-- 使用 s-page 进行页面结构布局 -->
<s-page>
<s-title-bar title="我的页面">
<s-button slot="primary-action">保存</s-button>
</s-title-bar>
<s-layout>
<s-layout-section>
<s-card>
<s-text>卡片中的内容</s-text>
</s-card>
</s-layout-section>
</s-layout>
</s-page>
需要避免的拒绝原因:
使用 App Bridge 导航菜单:
<s-app-nav>
<s-nav-item href="/dashboard" selected>仪表板</s-nav-item>
<s-nav-item href="/settings">设置</s-nav-item>
</s-app-nav>
请勿:
对所有表单输入使用:
import { useAppBridge } from "@shopify/app-bridge-react";
import { SaveBar } from "@shopify/app-bridge/actions";
function SettingsForm() {
const app = useAppBridge();
const showSaveBar = () => {
const saveBar = SaveBar.create(app, {
saveAction: { disabled: false, loading: false },
discardAction: { disabled: false, loading: false },
});
saveBar.dispatch(SaveBar.Action.SHOW);
};
// ...
}
使用带有正确插槽的 s-modal:
<s-modal heading="确认操作">
<p>模态框内容在此</p>
<s-button slot="secondary-action">取消</s-button>
<s-button slot="primary-action" variant="primary">确认</s-button>
</s-modal>
必须包含:
<!-- 正确:红色、上下文相关、持久显示 -->
<s-text-field
label="邮箱"
error="请输入有效的邮箱地址"
/>
<!-- 错误:使用 toast 显示错误 -->
<!-- 错误:使用非红色的错误颜色 -->
<!-- 错误:字段问题使用页面顶部的错误提示 -->
| 禁止事项 | 原因 |
|---|---|
| 升级倒计时器 | 给商家施加压力 |
| "不了,谢谢,我宁愿少卖点" | 使用内疚/羞耻性语言 |
| 自动出现的模态框/弹出框 | 分散商家注意力 |
| 保证结果("增加 18% 的销售额") | 虚假宣传 |
| 评论激励("给 Pro 版打 5 星") | 操纵性行为 |
| 不可关闭的促销信息 | 使商家不堪重负 |
| 类似 Shopify 的图标/颜色 | 冒充行为 |
<!-- 功能必须在视觉上和功能上都处于禁用状态 -->
<s-card>
<s-text variant="headingMd">高级分析</s-text>
<s-badge tone="info">专业版计划</s-badge>
<s-button disabled>查看分析</s-button>
<s-link url="/upgrade">升级以解锁</s-link>
</s-card>
// 必须使用 Web Pixel 扩展,而非 script 标签
// extensions/web-pixel/src/index.ts
import { register } from "@shopify/web-pixels-extension";
register(({ analytics }) => {
analytics.subscribe("page_viewed", (event) => {
// 跟踪事件
});
});
# 使用折扣函数或原生 API
# 请勿使用草稿订单实现自定义折扣
# 使用 discountRedeemCodeBulkAdd 添加多个代码
mutation {
discountRedeemCodeBulkAdd(
discountId: "gid://shopify/DiscountCodeNode/123"
codes: [{ code: "CODE1" }, { code: "CODE2" }]
) {
bulkCreation {
id
}
}
}
同步所有退货生命周期事件:
在审查 Shopify 应用代码是否符合 BFS 标准时:
技术方面:
- [ ] App Bridge 脚本在 <head> 中
- [ ] 会话令牌身份验证(非 Cookie 身份验证)
- [ ] 主题应用扩展(无 Asset API 写入操作)
- [ ] Web Pixel 扩展(无用于跟踪的 script 标签)
- [ ] 针对应用类别的正确 API 使用
用户界面/用户体验:
- [ ] 全程使用 Polaris 组件
- [ ] 使用 s-app-nav 进行导航
- [ ] 表单使用上下文保存栏
- [ ] 使用带有正确插槽的 s-modal
- [ ] 响应式设计
- [ ] WCAG 2.1 AA 对比度
内容:
- [ ] 无结果保证
- [ ] 无施压策略
- [ ] 可关闭的推广内容
- [ ] 已禁用并标记的高级功能
- [ ] 清晰的错误消息(红色、上下文相关)
- [ ] 有帮助的新手指引
- [ ] 动态主页内容
每周安装
69
仓库
GitHub 星标
33
首次出现
2026年2月6日
安全审计
安装于
codex63
gemini-cli63
opencode63
github-copilot62
amp59
kimi-cli59
This skill enforces Shopify's Built for Shopify (BFS) quality standards during development to ensure apps meet the highest quality bar for the Shopify App Store.
Reference: https://shopify.dev/docs/apps/launch/built-for-shopify/requirements
Use this checklist when reviewing code or building features:
BFS Compliance Review:
- [ ] App is embedded in Shopify admin (App Bridge)
- [ ] Uses session token authentication
- [ ] Primary workflows stay within Shopify admin
- [ ] No additional login/signup required
- [ ] Uses theme app extensions (not Asset API for writes)
- [ ] Meets Web Vitals targets (LCP ≤2.5s, CLS ≤0.1, INP ≤200ms)
- [ ] Uses Polaris components matching admin styling
- [ ] Mobile responsive design
- [ ] Uses nav menu (s-app-nav) and contextual save bar
- [ ] Error messages are red, contextual, and helpful
- [ ] No dark patterns or pressure tactics
- [ ] Premium features are disabled and labeled
- [ ] Promotional content is dismissible
Apps MUST be embedded in the Shopify admin:
<!-- Add to <head> of every document -->
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
// Use session token authentication
import { authenticate } from "@shopify/shopify-app-remix/server";
export async function loader({ request }) {
const { session } = await authenticate.admin(request);
// ...
}
All primary app workflows MUST be completable within the Shopify admin:
For storefront apps, use theme app extensions instead of Asset API:
<!-- extensions/theme-extension/blocks/my-block.liquid -->
{% schema %}
{
"name": "My App Block",
"target": "section",
"settings": []
}
{% endschema %}
Do NOT use Asset API to create, modify, or delete theme files (reading is allowed).
| Metric | Target | Description |
|---|---|---|
| LCP | ≤ 2.5s | Largest Contentful Paint |
| CLS | ≤ 0.1 | Cumulative Layout Shift |
| INP | ≤ 200ms | Interaction to Next Paint |
// Lazy load heavy components
const HeavyChart = lazy(() => import('./HeavyChart'));
// Use React.memo for expensive renders
const ExpensiveList = memo(({ items }) => (
// ...
));
// Avoid layout shifts with skeleton loaders
<Suspense fallback={<SkeletonPage />}>
<AppContent />
</Suspense>
Use Polaris web components to match admin styling:
<!-- Use s-page for page structure -->
<s-page>
<s-title-bar title="My Page">
<s-button slot="primary-action">Save</s-button>
</s-title-bar>
<s-layout>
<s-layout-section>
<s-card>
<s-text>Content in cards</s-text>
</s-card>
</s-layout-section>
</s-layout>
</s-page>
Rejection reasons to avoid:
Use App Bridge nav menu:
<s-app-nav>
<s-nav-item href="/dashboard" selected>Dashboard</s-nav-item>
<s-nav-item href="/settings">Settings</s-nav-item>
</s-app-nav>
Do NOT:
Use for all form inputs:
import { useAppBridge } from "@shopify/app-bridge-react";
import { SaveBar } from "@shopify/app-bridge/actions";
function SettingsForm() {
const app = useAppBridge();
const showSaveBar = () => {
const saveBar = SaveBar.create(app, {
saveAction: { disabled: false, loading: false },
discardAction: { disabled: false, loading: false },
});
saveBar.dispatch(SaveBar.Action.SHOW);
};
// ...
}
Use s-modal with proper slots:
<s-modal heading="Confirm Action">
<p>Modal content here</p>
<s-button slot="secondary-action">Cancel</s-button>
<s-button slot="primary-action" variant="primary">Confirm</s-button>
</s-modal>
Must include:
<!-- CORRECT: Red, contextual, persistent -->
<s-text-field
label="Email"
error="Please enter a valid email address"
/>
<!-- WRONG: Using toast for errors -->
<!-- WRONG: Non-red error colors -->
<!-- WRONG: Top-of-page errors for field issues -->
| Don't | Why |
|---|---|
| Countdown timers for upgrades | Pressures merchants |
| "No thanks, I prefer less sales" | Guilt/shame language |
| Auto-appearing modals/popovers | Distracts merchants |
| Guarantee outcomes ("increase sales 18%") | False claims |
| Review incentives ("5-star for Pro") | Manipulative |
| Non-dismissible promotions | Overwhelms merchants |
| Shopify-like icons/colors | Impersonation |
<!-- Features must be visually AND functionally disabled -->
<s-card>
<s-text variant="headingMd">Advanced Analytics</s-text>
<s-badge tone="info">Pro Plan</s-badge>
<s-button disabled>View Analytics</s-button>
<s-link url="/upgrade">Upgrade to unlock</s-link>
</s-card>
// MUST use Web Pixel extensions, NOT script tags
// extensions/web-pixel/src/index.ts
import { register } from "@shopify/web-pixels-extension";
register(({ analytics }) => {
analytics.subscribe("page_viewed", (event) => {
// Track event
});
});
# Use discount functions or native APIs
# Do NOT use draft orders for custom discounts
# Use discountRedeemCodeBulkAdd for multiple codes
mutation {
discountRedeemCodeBulkAdd(
discountId: "gid://shopify/DiscountCodeNode/123"
codes: [{ code: "CODE1" }, { code: "CODE2" }]
) {
bulkCreation {
id
}
}
}
Sync all return lifecycle events:
When reviewing Shopify app code for BFS compliance:
Technical:
- [ ] App Bridge script in <head>
- [ ] Session token auth (no cookie auth)
- [ ] Theme app extensions (no Asset API writes)
- [ ] Web Pixel extensions (no script tags for tracking)
- [ ] Proper API usage for app category
UI/UX:
- [ ] Polaris components throughout
- [ ] s-app-nav for navigation
- [ ] Contextual save bar for forms
- [ ] s-modal with proper slots
- [ ] Responsive design
- [ ] WCAG 2.1 AA contrast
Content:
- [ ] No outcome guarantees
- [ ] No pressure tactics
- [ ] Dismissible promotional content
- [ ] Disabled + labeled premium features
- [ ] Clear error messages (red, contextual)
- [ ] Helpful onboarding
- [ ] Dynamic homepage content
Weekly Installs
69
Repository
GitHub Stars
33
First Seen
Feb 6, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
codex63
gemini-cli63
opencode63
github-copilot62
amp59
kimi-cli59
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
122,000 周安装
Xcode MCP 工具:AI 辅助 iOS/Swift 开发,自动化构建、测试与修复
99 周安装
ReactFlow 架构师:构建高性能、可扩展的交互式图表应用 | 分层导航与状态管理
100 周安装
PUA P10 战略层:AI 项目管理与战略制定工具,定方向管 P9,提升团队效率
69 周安装
PydanticAI测试指南:使用TestModel与FunctionModel进行智能体单元测试与VCR录制
100 周安装
Apple Bento 网格生成器:一键创建像素级完美设计布局,无需Figma/Keynote
102 周安装
Gemini Web API 客户端 - 支持文本/图像生成、多轮对话与逆向工程
69 周安装