# aandronic95/ios-liquid-glass-vue-js-skill architecture

> Architecture diagram of the GitHub repository aandronic95/ios-liquid-glass-vue-js-skill, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/aandronic95/ios-liquid-glass-vue-js-skill
- Repository: https://github.com/aandronic95/ios-liquid-glass-vue-js-skill

## Overview

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: [`demo/src/App.vue`](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/App.vue) (Demo composition), [`SKILL.md`](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/SKILL.md) (Design guidance), [`demo/src/ios/IosDeviceFrame.vue`](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosDeviceFrame.vue) (Device frame), [`demo/src/ios/IosScreen.vue`](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosScreen.vue) (Screen and scroll)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_skill["Claude Skill"]
  node_skillguide["Design guidance<br/>[SKILL.md]"]
end

subgraph group_demo["Vue Demo"]
  node_demoapp["Demo composition<br/>[App.vue]"]
  node_device["Device frame<br/>[IosDeviceFrame.vue]"]
  node_screen["Screen and scroll<br/>[IosScreen.vue]"]
  node_navigation["Navigation bars<br/>[IosNavBar.vue]"]
  node_tabs["Tab bar<br/>[IosTabBar.vue]"]
  node_lists["Lists and rows<br/>[IosListRow.vue]"]
  node_toggle["Toggle control<br/>[IosToggle.vue]"]
  node_segmented["Segmented control<br/>[IosSegmented.vue]"]
  node_search["Search field<br/>[IosSearchField.vue]"]
  node_button["Button<br/>[IosButton.vue]"]
  node_sheet["Modal sheet<br/>[IosSheet.vue]"]
  node_alert["Alert dialog<br/>[IosAlert.vue]"]
end

subgraph group_styling["Visual Foundations"]
  node_tokens["Design tokens<br/>[tokens.css]"]
  node_base["Typography and motion<br/>[base.css]"]
  node_glass["Glass materials<br/>[glass.css]"]
end

node_developer(("App requester"))
node_claude(("Claude"))
node_result["Generated app"]

node_developer -->|"requests interface"| node_claude
node_claude -->|"applies guidance"| node_skillguide
node_claude -->|"builds app"| node_result
node_demoapp -->|"composes"| node_device
node_demoapp -->|"composes"| node_screen
node_demoapp -->|"composes"| node_navigation
node_demoapp -->|"composes"| node_tabs
node_demoapp -->|"composes"| node_lists
node_demoapp -->|"composes"| node_toggle
node_demoapp -->|"composes"| node_segmented
node_demoapp -->|"composes"| node_search
node_demoapp -->|"composes"| node_button
node_demoapp -->|"composes"| node_sheet
node_demoapp -->|"composes"| node_alert

click node_skillguide "https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/SKILL.md"
click node_demoapp "https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/App.vue"
click node_device "https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosDeviceFrame.vue"
click node_screen "https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosScreen.vue"
click node_navigation "https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosNavBar.vue"
click node_tabs "https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosTabBar.vue"
click node_lists "https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosListRow.vue"
click node_toggle "https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosToggle.vue"
click node_segmented "https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosSegmented.vue"
click node_search "https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosSearchField.vue"
click node_button "https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosButton.vue"
click node_sheet "https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosSheet.vue"
click node_alert "https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosAlert.vue"
click node_tokens "https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/tokens.css"
click node_base "https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/base.css"
click node_glass "https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/glass.css"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_skillguide toneBlue
class node_demoapp,node_device,node_screen,node_navigation,node_tabs,node_lists,node_toggle,node_segmented,node_search,node_button,node_sheet,node_alert toneAmber
class node_tokens,node_base,node_glass,node_developer toneMint
class node_claude,node_result toneIndigo
```

## Components

### Claude Skill

- [Design guidance](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/SKILL.md): `SKILL.md`

### Vue Demo

- [Demo composition](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/App.vue): `demo/src/App.vue`
- [Device frame](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosDeviceFrame.vue): `demo/src/ios/IosDeviceFrame.vue`
- [Screen and scroll](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosScreen.vue): `demo/src/ios/IosScreen.vue`
- [Navigation bars](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosNavBar.vue): `demo/src/ios/IosNavBar.vue`
- [Tab bar](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosTabBar.vue): `demo/src/ios/IosTabBar.vue`
- [Lists and rows](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosListRow.vue): `demo/src/ios/IosListRow.vue`
- [Toggle control](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosToggle.vue): `demo/src/ios/IosToggle.vue`
- [Segmented control](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosSegmented.vue): `demo/src/ios/IosSegmented.vue`
- [Search field](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosSearchField.vue): `demo/src/ios/IosSearchField.vue`
- [Button](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosButton.vue): `demo/src/ios/IosButton.vue`
- [Modal sheet](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosSheet.vue): `demo/src/ios/IosSheet.vue`
- [Alert dialog](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/IosAlert.vue): `demo/src/ios/IosAlert.vue`

### Visual Foundations

- [Design tokens](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/tokens.css): `demo/src/ios/tokens.css`
- [Typography and motion](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/base.css): `demo/src/ios/base.css`
- [Glass materials](https://github.com/aandronic95/ios-liquid-glass-vue-js-skill/blob/main/demo/src/ios/glass.css): `demo/src/ios/glass.css`

### Other components

- **App requester**
- **Claude**
- **Generated app**

## Connections

- 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