Add initial project structure with essential files

- Created .gitignore to exclude build artifacts and dependencies. - Added index.html as the main entry point for the application. - Included LICENSE file with Apache 2.0 terms. - Initialized package.json and package-lock.json for project dependencies. - Added pnpm-lock.yaml for package management. - Created QUICKSTART.md for setup instructions. - Added README.md and README.zh-CN.md for project documentation in English and Chinese.
2026-04-28 12:25:59 +08:00
commit a98096a042
258 changed files with 67862 additions and 0 deletions
@@ -0,0 +1,52 @@
+---
+name: mobile-onboarding
+description: |
+  A multi-screen mobile onboarding flow rendered as three phone frames
+  side by side — splash, value-prop, sign-in. Status bar, swipe dots,
+  primary CTA. Use when the brief mentions "mobile onboarding", "iOS
+  onboarding", "phone signup", or "移动端引导".
+triggers:
+  - "mobile onboarding"
+  - "ios onboarding"
+  - "android onboarding"
+  - "phone signup"
+  - "app onboarding"
+  - "移动端引导"
+ocd:
+  mode: prototype
+  platform: mobile
+  scenario: design
+  featured: 5
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  example_prompt: "Design a 3-screen mobile onboarding flow for a meditation app — welcome, value props, sign-in."
+---
+
+# Mobile Onboarding Skill
+
+Produce a three-screen mobile onboarding flow on a single HTML page.
+
+## Workflow
+
+1. Read DESIGN.md.
+2. Identify the app + audience.
+3. Layout: three phone frames side by side. Each phone:
+   - Status bar (time, battery, signal).
+   - Hero artwork or icon.
+   - Headline + supporting paragraph.
+   - 3-dot pagination.
+   - Primary CTA (full-width pill button).
+   - "Skip" or alt action top-right.
+4. Last phone is the sign-in / continue-with options screen.
+5. Strong typography, gentle gradients, accessible contrast.
+
+## Output contract
+
+```
+<artifact identifier="mobile-onboarding-name" type="text/html" title="Mobile Onboarding">
+<!doctype html>...</artifact>
+```