Agent skill

Native App Designer

by curiositech in curiositech/some_claude_skills

Creates breathtaking iOS/Mac and web apps with organic, non-AI aesthetic.

MITAuto-check: notesMobile

Install Native App Designer

skills CLI
$ npx skills add curiositech/some_claude_skills --skill native-app-designer -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install curiositech/some_claude_skills native-app-designer --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/curiositech/some_claude_skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/native-app-designer .claude/skills/native-app-designer && rm -rf skills-src

Use ~/.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/

Facts

Skill name
native-app-designer
GitHub stars
243
Token cost
~1.9k tokens
SKILL.md length
668 words
Files
6 (incl. references)
Skills in repo
109
Repo updated
First seen
Licence
MIT

At a glance

Creates breathtaking iOS/Mac and web apps with organic, non-AI aesthetic.

  • React/Vue animations
  • SKILL.md covers When to Use This Skill, MCP Integrations, Common Anti-Patterns and Design Philosophy: Beyond…, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Native-feel web apps

What it does

Native App Designer is an agent skill from curiositech/some_claude_skills. Creates breathtaking iOS/Mac and web apps with organic, non-AI aesthetic. Expert in SwiftUI, React animations, physics-based motion, and human-crafted design. Use for iOS/Mac app UI, React/Vue animations, native-feel web apps, physics-based motion design. Activate on "SwiftUI", "iOS app", "native app", "React animation", "motion design", "UIKit", "physics animation". NOT for backend logic, API design (use backend-architect), simple static sites (use web-design-expert), or pure graphic design (use…

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files (for example `.claude-plugin/plugin.json`, `CHANGELOG.md` and `references/custom-shaders.md`).

It sits in Mobile, covering iOS development, Motion graphics and Design systems. It works with iOS, React, SwiftUI and Vue.js. The repository describes itself as: Claude skills that make my life easier. The licence is MIT.

When your agent uses it

  • React/Vue animations
  • Native-feel web apps
  • Physics-based motion design

Example prompts

  • “SwiftUI”
  • “iOS app”
  • “native app”
  • “/native-app-designer”

Requirements

  • Pre-approved tools (allowed-tools): Read, Write, Edit, Bash, mcp__magic__21st_magic_component_builder, mcp__magic__21st_magic_component_refiner, mcp__stability-ai__stability-ai-generate-image, mcp__firecrawl__firecrawl_search

What it can do on your machine

Read from SKILL.md and the folder at commit 6713fc7. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Edit
    • Bash
    • mcp__magic__21st_magic_component_builder
    • mcp__magic__21st_magic_component_refiner
    • mcp__stability-ai__stability-ai-generate-image
    • mcp__firecrawl__firecrawl_search

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are swift).

    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

Native App Designer loads about 1.9k tokens when it runs, and up to ~6.5k if it reads all its reference files. Until then it costs about 136 tokens; SKILL.md has 668 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~136
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~6.5k

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: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Read, Write, Edit, Bash, mcp__magic__21st_magic_component_builder, mcp__magic__21st_magic_component_

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 curiositech/some_claude_skills at commit 6713fc7, republished under its MIT licence (© curiositech). 668 words, ~1,916 tokens.

Download SKILL.mdSave it as .claude/skills/native-app-designer/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
native-app-designer
description
Creates breathtaking iOS/Mac and web apps with organic, non-AI aesthetic. Expert in SwiftUI, React animations, physics-based motion, and human-crafted design. Use for iOS/Mac app UI, React/Vue animations, native-feel web apps, physics-based motion design. Activate on "SwiftUI", "iOS app", "native app", "React animation", "motion design", "UIKit", "physics animation". NOT for backend logic, API design (use backend-architect), simple static sites (use web-design-expert), or pure graphic design (use design-system-creator).
allowed-tools
Read, Write, Edit, Bash, mcp__magic__21st_magic_component_builder, mcp__magic__21st_magic_component_refiner, mcp__stability-ai__stability-ai-generate-image, mcp__firecrawl__firecrawl_search
metadata.category
Design & Creative
metadata.tags
ios, swiftui, react, animations, motion

Native App Designer

Elite native app designer specializing in breathtaking, human-centered applications that feel organic and alive—never generic or AI-generated.

When to Use This Skill

✅ Use for:

  • iOS/Mac app UI design with SwiftUI or UIKit
  • React/Vue/Svelte apps with delightful animations
  • Physics-based motion design and micro-interactions
  • Native-feel Progressive Web Apps (PWAs)
  • App onboarding flows with personality
  • Custom shader effects (Metal/WebGL)
  • Component library design with character

❌ Do NOT use for:

  • Backend API logic → use backend-architect
  • Simple static websites → use web-design-expert
  • Design system tokens only → use design-system-creator
  • Graphic design/brand identity → use design-system-creator
  • Accessibility-first ADHD apps → use adhd-design-expert
  • Retro/vaporwave aesthetics → use vaporwave-glassomorphic-ui-designer

MCP Integrations

Available MCPs
MCPPurpose
21st Century DevComponent inspiration and building
Stability AIGenerate design assets and mockups
FirecrawlResearch design patterns
Figma MCP (if configured)Import designs from Figma
Apple Developer Docs MCP (community)Access SwiftUI/UIKit documentation
Component Inspiration Workflow
1. Search 21st.dev for modern patterns
2. Analyze animation timing, color usage, hierarchy
3. Adapt (don't copy) - add your personality
4. Use mcp__magic__21st_magic_component_builder to scaffold
5. Refine with mcp__magic__21st_magic_component_refiner

Common Anti-Patterns

Anti-Pattern: Generic Card Syndrome

What it looks like: Every component is a white card with shadow Why it's wrong: Creates monotonous, AI-generated aesthetic What to do instead: Mix layouts—cards, lists, grids, overlays, inline elements

Anti-Pattern: Linear Animation Death

What it looks like: .animation(.linear(duration: 0.3)) Why it's wrong: Feels robotic, lifeless, unnatural What to do instead: Use spring physics with response/damping parameters

Anti-Pattern: Rainbow Vomit

What it looks like: Using every color in the palette everywhere Why it's wrong: No visual hierarchy, overwhelming What to do instead: Restrained palette with purposeful color usage

Anti-Pattern: Animation Overload

What it looks like: Everything bounces, slides, and fades constantly Why it's wrong: Distracting, overwhelming, hides content What to do instead: Animate intentionally—guide attention, provide feedback

Anti-Pattern: Inconsistent Spacing

What it looks like: Random margins (8px, 14px, 23px...) Why it's wrong: Feels unpolished, chaotic What to do instead: 4pt or 8pt grid system with consistent rhythm

Design Philosophy: Beyond Generic

What Makes Apps Look "AI-Generated" (AVOID)
  • ❌ Perfectly centered everything with no visual rhythm
  • ❌ Generic gradients (linear purple-to-blue everywhere)
  • ❌ Oversized, ultra-rounded corners on everything
  • ❌ Stock illustrations with same flat art style
  • ❌ Over-reliance on cards with identical spacing
  • ❌ Soulless animations (generic slide-in-from-bottom)
What Makes Apps Feel Human-Crafted (DO THIS)
  • ✅ Asymmetry with purpose: Break the grid intentionally
  • ✅ Unexpected details: Easter eggs, playful copy, personality
  • ✅ Organic motion: Physics-based animations, spring dynamics
  • ✅ Textural elements: Subtle noise, gradients with character
  • ✅ Thoughtful hierarchy: Visual weight that guides naturally
  • ✅ Emotional color: Palettes that evoke feeling
  • ✅ Contextual adaptation: UI that responds to content and state
Show full SKILL.md (274 more words)Show less

App Personality Types

Choose a personality and commit to it:

PersonalityAnimationColorTypography
PlayfulBouncy springs, overshootsWarm, saturatedRounded, friendly
ProfessionalCrisp, confidentSophisticated, mutedClean, weighted
MinimalSubtle, restrainedLimited palettePerfect spacing
VibrantEnergetic, expressiveBold, unexpectedDynamic contrast
NaturalOrganic, flowingEarthy, warmSoft, approachable

Motion Design Principles

Spring Physics Cheat Sheet
swift
// Snappy, responsive
.spring(response: 0.3, dampingFraction: 0.7)

// Bouncy, playful
.spring(response: 0.5, dampingFraction: 0.5)

// Smooth, elegant
.spring(response: 0.6, dampingFraction: 0.8)

// Dramatic, slow
.spring(response: 0.8, dampingFraction: 0.6)
Animation Timing
  • Immediate feedback: 0-100ms (button press)
  • Quick transitions: 150-300ms (page change)
  • Deliberate animations: 300-500ms (onboarding)
  • Dramatic moments: 500-1000ms (celebrations)

Details That Delight

Small touches that make users smile:

  • Pull-to-refresh with personality (not just a spinner)
  • Empty states with character and guidance
  • Loading states that entertain
  • Success states that celebrate
  • Error states that empathize
  • Haptic feedback on key interactions

Platform-Specific Best Practices

iOS Native
  • Use system materials (.ultraThinMaterial, .regularMaterial)
  • Respect safe areas and Dynamic Island
  • Support Dynamic Type (accessibility)
  • Implement haptic feedback strategically
  • Use SF Symbols with weight matching
  • Support dark mode with semantic colors
Web Native Feel
  • 60fps animations using transform/opacity
  • CSS containment for performance
  • Pull-to-refresh implementation
  • PWA install prompt
  • Reduced motion support
  • Touch-friendly targets (44px minimum)

Tools & Libraries

iOS
  • SwiftUI: Declarative UI framework
  • UIKit: When SwiftUI isn't enough
  • Lottie: After Effects animations
  • SF Symbols: Apple's icon system
Web
  • Framer Motion: React animation library
  • GSAP: JavaScript animation powerhouse
  • react-spring: Physics-based React animations
  • Lottie Web: Cross-platform animations
Design
  • Figma: Primary design tool
  • Principle: Advanced prototyping
  • 21st.dev: Component inspiration

Technical references for deep dives:

  • /references/swiftui-patterns.md - SwiftUI components, animations, color palettes
  • /references/react-patterns.md - React/Vue patterns, Framer Motion, responsive design
  • /references/custom-shaders.md - Metal and WebGL shaders for unique effects

Philosophy: The difference between good and breathtaking is soul. Every pixel should have purpose. Every animation should feel inevitable. Every interaction should delight.

© curiositech, 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 5 other files (references) in .claude/skills/native-app-designer of curiositech/some_claude_skills.

  • SKILL.md
  • .claude-plugin/plugin.json
  • CHANGELOG.md
  • references/custom-shaders.md
  • references/react-patterns.md
  • references/swiftui-patterns.md

Open the folder on GitHubat commit 6713fc7

Compare with similar skills

Native App Designer 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.

Native App Designer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Native App Designer this skillcuriositech/some_claude_skills243—~1.9kAutomated safety check: NotesMIT
Frontend Designavibebuilder/claude-prime120—~2.1kAutomated safety check: PassMIT
Frontend DesignAnastasiyaW/codex-claude-code-config154—~1.1kAutomated safety check: PassMIT
iOS DevelopmentAnastasiyaW/codex-claude-code-config154—~2.2kAutomated safety check: PassMIT
macOS Hig DesignerLeoYeAI/openclaw-master-skills2.2k—~5.6kAutomated safety check: PassMIT
Hig Project Contextraintree-technology/hig-doctor1435 repos~1.2kAutomated safety check: PassMIT

Similar skills

  • Frontend Design

    avibebuilder/claude-prime

    Builds distinctive, production-grade UIs that avoid generic AI aesthetics.

    120 GitHub stars~2.1k tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed
  • Frontend Design

    AnastasiyaW/codex-claude-code-config

    Создание высококачественных, визуально выдающихся фронтенд-интерфейсов.

    154 GitHub stars~1.1k tokensUpdated today
    Frontend & DesignAuto-check passed
  • iOS Development

    AnastasiyaW/codex-claude-code-config

    Comprehensive iOS app development skill. An agent skill from AnastasiyaW/codex-claude-code-config.

    154 GitHub stars~2.2k tokensUpdated today
    MobileAuto-check passed
  • macOS Hig Designer

    LeoYeAI/openclaw-master-skills

    Design native macOS apps following Apple's Human Interface Guidelines and Liquid Glass design system.

    2.2k GitHub stars~5.6k tokensUpdated 2 mo ago
    MobileAuto-check passed
  • Hig Project Context

    raintree-technology/hig-doctor

    Create or update a shared Apple design context document that other HIG skills use to tailor guidance.

    143 GitHub starsUsed in 5 repos~1.2k tokens
    MobileAuto-check passed
  • Hig Components Content

    raintree-technology/hig-doctor

    Apple Human Interface Guidelines for content display components.

    143 GitHub starsUsed in 5 repos~1.3k tokens
    MobileAuto-check passed

More from curiositech/some_claude_skills

All 109 skills in this repo
  • Crisis Detection Intervention AI

    curiositech/some_claude_skills

    Detect crisis signals in user content using NLP, mental health sentiment analysis, and safe intervention protocols.

    243 GitHub starsUsed in 3 repos~3.8k tokens
    Auto-check passed
  • Form Validation Architect

    curiositech/some_claude_skills

    End-to-end form handling with react-hook-form, Zod schemas, validation patterns, error messaging, field arrays, and multi-step wizards.

    243 GitHub stars~3.8k tokensUpdated 1 mo ago
    Auto-check passed
  • Competitive Cartographer

    curiositech/some_claude_skills

    Strategic analyst that maps competitive landscapes, identifies white space opportunities, and provides positioning recommendations.

    243 GitHub starsUsed in 1 repo~1.3k tokens
    Auto-check passed
  • GitHub Actions Pipeline Builder

    curiositech/some_claude_skills

    Build production CI/CD pipelines with GitHub Actions. An agent skill from curiositech/some_claude_skills.

    243 GitHub stars~2.8k tokensUpdated 1 mo ago
    Auto-check: notes
  • Computer Vision Pipeline

    curiositech/some_claude_skills

    Build production computer vision pipelines for object detection, tracking, and video analysis.

    243 GitHub starsUsed in 1 repo~4k tokens
    Auto-check passed
  • Design Archivist

    curiositech/some_claude_skills

    Long-running design anthropologist that builds comprehensive visual databases from 500-1000 real-world examples, extracting color palettes, typography patterns, layout systems, and interaction…

    243 GitHub starsUsed in 1 repo~1.6k tokens
    Auto-check passed

Questions about Native App Designer

What does Native App Designer do?

Creates breathtaking iOS/Mac and web apps with organic, non-AI aesthetic. Native App Designer is an agent skill from curiositech/some_claude_skills. Creates breathtaking iOS/Mac and web apps with organic, non-AI aesthetic.

When should I use Native App Designer?

Native App Designer fits situations like: React/Vue animations; native-feel web apps; physics-based motion design.

How do I install Native App Designer in Claude Code?

Run `npx skills add curiositech/some_claude_skills --skill native-app-designer -a claude-code`. Or copy the skill folder (.claude/skills/native-app-designer in curiositech/some_claude_skills) into .claude/skills/native-app-designer in your project. Claude Code loads it when a task matches its description.

How do I install Native App Designer in Codex?

Run `npx skills add curiositech/some_claude_skills --skill native-app-designer -a codex`. Or copy the skill folder (.claude/skills/native-app-designer in curiositech/some_claude_skills) into .agents/skills/native-app-designer in your project. Codex loads it when a task matches its description.

Can I use Native App Designer 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 curiositech/some_claude_skills --skill native-app-designer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/native-app-designer, .gemini/skills/native-app-designer, .github/skills/native-app-designer and .opencode/skills/native-app-designer in your project.

What does Native App Designer need to run?

SKILL.md names no scripts, command-line tools or credentials: Native App Designer is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Write, Edit, Bash, mcp__magic__21st_magic_component_builder, mcp__magic__21st_magic_component_refiner, mcp__stability-ai__stability-ai-generate-image, mcp__firecrawl__firecrawl_search.

Does Native App Designer 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 Native App Designer safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Native App Designer use?

Native App Designer 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 Native App Designer use?

About 1.9k tokens (SKILL.md is roughly 7.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 4.6k tokens, read only when the agent opens those files.

What are the alternatives to Native App Designer?

Skills that share tags, products or a category with Native App Designer: Frontend Design (avibebuilder/claude-prime, 120 stars), Frontend Design (AnastasiyaW/codex-claude-code-config, 154 stars), iOS Development (AnastasiyaW/codex-claude-code-config, 154 stars) and macOS Hig Designer (LeoYeAI/openclaw-master-skills, 2.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Native App Designer?

curiositech (a GitHub organization) maintains it in curiositech/some_claude_skills, which has 243 GitHub stars. The repository holds 109 skills in this directory. The repository was last updated on September 6, 2026.

Source: curiositech/some_claude_skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.