SkillHey.
スキルを投稿

Appllama App Design Skill

Appllama/appllama-skills

Build native-feeling, benchmark-quality mobile app screens (Expo / React Native). Use when designing or implementing any mobile UI — screens, flows, onboarding, paywalls, tab bars, sheets, settings, empty states — or when polishing motion, navigation, typography, dark mode, or perceived performance. Enforces Apple HIG fidelity, semantic colors, native controls, anti-slop discipline, navigation semantics (push vs replace, modal vs sheet vs overlay, the one-way doors where back must not exist), purposeful Reanimated motion, a full-motion simulator-verified iteration loop, and a study-real-apps-first workflow (pairs with the Appllama MCP). Trigger on "build a screen", "make this screen better", "design the onboarding", "wire up this flow", "polish the UI", "make it feel native", or any mobile design/implementation task.

内容更新日:

GitHub で見る
npx skills add Appllama/appllama-skills --skill appllama-app-design-skill
5,183スター262フォークリポジトリの最終プッシュ

このスキルについて

Build native-feeling, benchmark-quality mobile app screens (Expo / React Native). Use when designing or implementing any mobile UI — screens, flows, onboarding, paywalls, tab bars, sheets, settings, empty states — or when polishing motion, navigation, typography, dark mode, or perceived performance. Enforces Apple HIG fidelity, semantic colors, native controls, anti-slop discipline, navigation semantics (push vs replace, modal vs sheet vs overlay, the one-way doors where back must not exist), purposeful Reanimated motion, a full-motion simulator-verified iteration loop, and a study-real-apps-first workflow (pairs with the Appllama MCP). Trigger on "build a screen", "make this screen better", "design the onboarding", "wire up this flow", "polish the UI", "make it feel native", or any mobile design/implementation task.

おすすめする理由

Summarized from the original Appllama/appllama-skills SKILL.md by Appllama; the original upstream instructions were used.

役立つこと

  • Use this workflow when the task matches the original Appllama App Design Skill instructions.

使う前に

  • Read the original SKILL.md and referenced files in Appllama/appllama-skills.

資料・参照元

元の資料は以下のリンクから確認できます。実践のヒントは SkillHey による編集上の提案です。

SkillHey 編集
react nativemobile design

類似するスキル

Sleek Mobile App Design

Sleek

Design mobile app screens with Sleek and implement selected designs in React Native or HTML.

  • mobile design
  • react native
  • ui design
601スター55フォーク
リポジトリの最終プッシュ

React Native Best Practices

Callstack

Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.

  • react native
  • mobile development
1708スター120フォーク
リポジトリの最終プッシュ

Expo Native UI Guidelines

Expo

Build beautiful, native-feeling Expo screens. Covers Apple HIG styling, semantic colors, native controls, SF Symbols, media, visual effects, gradients, storage, and responsive layout. For routing and navigation, use the expo-router skill; for motion and animation, use the expo-animation skill.

  • expo
  • react native
4153スター269フォーク
リポジトリの最終プッシュ

Building Animations in Expo

Emil Kowalski

Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use `animate`.

  • react native
  • expo
  • animation
5.7万スター3336フォーク
リポジトリの最終プッシュ