本文へ移動
cccskills
無料GitHub で公開

mobile-onboarding

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 "移动端引导".

nexu-io/open-design
インストール方法を見る

含まれるファイル（2）

  • SKILL.md1.5 KB
  • example.html8.7 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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>

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

8-bit-orbit-video-template

無料

Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/open-design10.1万2026年10月12日 更新

ad-creative

無料

Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/open-design10.1万2026年10月12日 更新

after-hours-editorial-template

無料

Luxury dark-editorial HyperFrames template for three-page cinematic storyboards, inspired by haute couture title cards and magazine chapter spreads. Use when the user asks for premium fashion-style motion pages, moody serif-led storytelling, or a high-end dark presentation aesthetic with rich transitions.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/open-design10.1万2026年10月12日 更新

agent-browser

無料

Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking buttons, taking screenshots, extracting page data, reading selected OpenDesign browser-tab context, testing web apps, dogfooding OpenDesign previews, QA, bug hunts, or reviewing app quality. Prefer local OpenDesign preview URLs unless the user explicitly asks for external browsing.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/open-design10.1万2026年10月12日 更新

ai-music-album

無料

Full-lifecycle AI music album production — concept, lyric drafting, track sequencing, and export. Useful for indie album experiments and brand soundtracks.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/open-design10.1万2026年10月12日 更新

algorithmic-art

無料

Create generative art using p5.js with seeded randomness so every render is reproducible. Useful for procedural posters, motion-style stills, and artistic frame studies.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/open-design10.1万2026年10月12日 更新

nexu-io のスキルをすべて見る

このスキルの問題を報告する