How aandronic95/ios-liquid-glass-vue-js-skill works
This repository is a Claude Agent Skill that guides Claude in creating Vue interfaces with an iOS Liquid Glass design. The main workflow is Claude applying the design guidance to produce an app or single-file prototype; the runnable Vue demo illustrates the guidance with reusable components. The README documents design tokens, CSS materials, interaction patterns, responsive guidance, and QA rules. Source excerpts are partial, so demo component wiring is shown only where supported by the sampled App.vue.
Main entry points: App.vue Demo composition · SKILL.md Design guidance · IosDeviceFrame.vue Device frame · IosScreen.vue Screen and scroll
Components 19
Claude Skill
- Design guidance
SKILL.md
Vue Demo
- Demo composition
demo/src/App.vue - Device frame
demo/src/ios/IosDeviceFrame.vue - Screen and scroll
demo/src/ios/IosScreen.vue - Navigation bars
demo/src/ios/IosNavBar.vue - Tab bar
demo/src/ios/IosTabBar.vue - Lists and rows
demo/src/ios/IosListRow.vue - Toggle control
demo/src/ios/IosToggle.vue - Segmented control
demo/src/ios/IosSegmented.vue - Search field
demo/src/ios/IosSearchField.vue - Button
demo/src/ios/IosButton.vue - Modal sheet
demo/src/ios/IosSheet.vue - Alert dialog
demo/src/ios/IosAlert.vue
Visual Foundations
- Design tokens
demo/src/ios/tokens.css - Typography and motion
demo/src/ios/base.css - Glass materials
demo/src/ios/glass.css
Other components
- App requester
- Claude
- Generated app
Connections 14
- App requester → Claude: requests interface
- Claude → Design guidance: applies guidance
- Claude → Generated app: builds app
- Demo composition → Device frame: composes
- Demo composition → Screen and scroll: composes
- Demo composition → Navigation bars: composes
- Demo composition → Tab bar: composes
- Demo composition → Lists and rows: composes
- Demo composition → Toggle control: composes
- Demo composition → Segmented control: composes
- Demo composition → Search field: composes
- Demo composition → Button: composes
- Demo composition → Modal sheet: composes
- Demo composition → Alert dialog: composes