Skills apple-design
📦

apple-design

Content revision r1 Safe ⚙️ External commands

Design Fluid Apple-Inspired Web Interfaces

Gesture-driven web interfaces often feel delayed, rigid, or visually inconsistent. This skill provides practical guidance for responsive motion, materials, typography, accessibility, and interaction design.

Supports: Claude Codex Code(CC)
🥉 78 Bronze

This skill is part of a pack

Install the whole pack to get every skill the task needs, in one command.

KeywayTech Coding Skills · 19 skills Install whole pack

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request
Review the Skillstore skill "apple-design" from https://skillstore.io/skills/emilkowalski-apple-design.md and its manifest at https://skillstore.io/api/skills/emilkowalski-apple-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/emilkowalski-apple-design.md Signed manifest GET /api/skills/emilkowalski-apple-design/manifest Signed lockfile GET /api/skills/emilkowalski-apple-design/lockfile

Test it

Using "apple-design". Review a card carousel that snaps only after the finger releases.

Expected outcome:

  • Add continuous one-to-one tracking during the drag.
  • Project the resting position from release velocity before choosing a snap point.
  • Carry release velocity into an interruptible spring and preserve the original grab offset.

Using "apple-design". Recommend motion for a dismissible settings sheet.

Expected outcome:

Use a responsive spring with limited bounce, symmetric entry and exit paths, source-aware origin, drag interruption, and a reduced-motion cross-fade.

Using "apple-design". Audit a translucent toolbar with low-contrast text.

Expected outcome:

Increase foreground contrast, avoid stacked translucent layers, strengthen material separation, and provide solid alternatives for reduced transparency and increased contrast.

Security Audit

Safe
v2 • 7/21/2026 Open versioned report

All 62 static findings are false positives caused by Markdown code delimiters and ordinary design terminology. The single skill file contains educational web-design guidance and examples, with no executable commands, reconnaissance, data collection, or prompt-injection attempt found.

1
Files scanned
283
Lines analyzed
0
Review items
0
False positives ignored

Risk Factors

⚙️ External commands (48)
SKILL.md:8 SKILL.md:24 SKILL.md:28-34 SKILL.md:34-42 SKILL.md:42-43 SKILL.md:43-45 SKILL.md:45-51 SKILL.md:51-61 SKILL.md:61-73 SKILL.md:73 SKILL.md:77-78 SKILL.md:78-84 SKILL.md:84 SKILL.md:85 SKILL.md:86 SKILL.md:88 SKILL.md:90-98 SKILL.md:98-106 SKILL.md:106-108 SKILL.md:108-110 SKILL.md:110 SKILL.md:120-129 SKILL.md:129-131 SKILL.md:131-138 SKILL.md:138-149 SKILL.md:149-154 SKILL.md:154-160 SKILL.md:160-169 SKILL.md:169 SKILL.md:173-175 SKILL.md:175-183 SKILL.md:183-189 SKILL.md:189-203 SKILL.md:203-204 SKILL.md:204-205 SKILL.md:205-209 SKILL.md:209-216 SKILL.md:216-222 SKILL.md:222 SKILL.md:225 SKILL.md:228-237 SKILL.md:237-269 SKILL.md:269 SKILL.md:270 SKILL.md:271-272 SKILL.md:272 SKILL.md:280-281 SKILL.md:281
No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.
Audited by: claude View Audit History →
Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report
Security Assessment

Copy report link

https://skillstore.io/skills/emilkowalski-apple-design/audits/2?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/emilkowalski-apple-design/security.svg)](https://skillstore.io/skills/emilkowalski-apple-design?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/emilkowalski-apple-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/emilkowalski-apple-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/emilkowalski-apple-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
Academic citations (APA · BibTeX · CFF)

APA citation

emilkowalski. (2026). apple-design security audit report (audit version 2) [Author version unspecified]. Skillstore. https://skillstore.io/skills/emilkowalski-apple-design/audits/2

BibTeX citation

@techreport{emilkowalski-emilkowalski-apple-design-2026, author = {emilkowalski}, title = {apple-design security audit report (audit version 2)}, institution = {Skillstore}, year = {2026}, number = {2}, url = {https://skillstore.io/skills/emilkowalski-apple-design/audits/2}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "apple-design security audit report (audit version 2)" version: "unspecified" type: report authors: - name: "emilkowalski" date-released: "2026-07-21" url: "https://skillstore.io/skills/emilkowalski-apple-design/audits/2" identifiers: - type: other value: "skillstore:emilkowalski-apple-design:audit:2" description: "Skillstore immutable audit report identifier"

Skillstore Score

Why this score Evidence Confidence: High
55
Architecture
85
Maintainability
87
Content
65
Community
83
Spec Compliance

What You Can Build

Improve Product Interactions

Review buttons, sheets, drawers, and gestures for immediate feedback, interruptibility, momentum, and predictable spatial behavior.

Implement Fluid Web Motion

Translate interaction specifications into pointer events, spring animations, velocity handoff, rubber-banding, and accessible motion alternatives.

Audit Interface Quality

Evaluate motion, materials, typography, hierarchy, accessibility, and interaction consistency before a product release.

Try These Prompts

Review Basic Feedback 
Review this button interaction for immediate feedback and accessibility. Identify latency, unclear states, and specific improvements.
Design a Bottom Sheet 
Design a mobile bottom sheet with direct dragging, velocity-aware release, snap points, interruption, rubber-banding, and reduced-motion behavior.
Audit an Interaction Flow 
Audit this interface flow using Apple-inspired principles. Cover feedback, spatial consistency, gesture conflicts, materials, typography, accessibility, and user agency.
Define a Motion System 
Create a web motion system for these components. Define spring families, velocity rules, interruption behavior, gesture thresholds, accessibility alternatives, and validation tests.

Best Practices

  • Test interactions with real pointer movement, reversal, interruption, and rapid repeated input.
  • Tune motion from the current visible state and preserve velocity across gesture-to-animation handoffs.
  • Validate every motion and material choice with reduced-motion, transparency, contrast, and text-size settings.

Avoid

  • Do not lock input until an animation finishes or restart motion from a stale target value.
  • Do not add bounce, blur, sound, or haptics without a clear interaction purpose.
  • Do not treat visual polish as a substitute for predictable navigation, readable text, and user control.

Frequently Asked Questions

Does this skill generate complete interface code?
It provides design guidance and focused examples. Complete production components still require implementation, integration, testing, and product-specific decisions.
Which interactions benefit most from this guidance?
Drag, swipe, sheet, drawer, carousel, menu, modal, slider, and other gesture-driven interactions benefit most.
Does every animation need a spring?
No. Springs suit interruptible physical interactions, while short fades or simple transitions can suit non-gesture state changes.
How does the skill address accessibility?
It covers reduced motion, reduced transparency, increased contrast, scalable typography, continuous feedback, and alternatives to vestibular motion.
Can I use these principles outside Apple platforms?
Yes. The guidance translates interaction and motion principles to web interfaces while respecting browser and device constraints.
Are the sample spring values universal?
No. They are starting points that require tuning for component size, travel distance, input velocity, library behavior, and product tone.

Developer Details

License

MIT

Skillstore revision

r1

Version notice

The author did not declare a version.

Repository

https://github.com/emilkowalski/skills/tree/main/skills/apple-design/

Ref

d1c4c60b80afc545d96b5e8a51c19b2fdc81df70

Maintenance freshness

7/20/2026

Usage

2 downloads · 1 views

File structure

📄 SKILL.md