# boraoztunc/skills architecture

> Architecture diagram of the GitHub repository boraoztunc/skills, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/boraoztunc/skills
- Repository: https://github.com/boraoztunc/skills

## Overview

The README describes a collection of Claude Code skills invoked by slash command; the supplied tree does not include their skill-definition files. The concrete runtime shown here is the vendored Stageshow skill: a browser playground mounts demos built with a React kit for stills and cursor-driven motion, alongside teaching examples. The graph focuses on that runtime and its documented purpose. Edges are limited to relationships shown in excerpts or the source index; other README-listed skill domains are not expanded because their source paths are absent.

Main entry points: [`stageshow/kit/stage.tsx`](https://github.com/boraoztunc/skills/blob/main/stageshow/kit/stage.tsx) (Stage canvas), [`stageshow/playground/main.tsx`](https://github.com/boraoztunc/skills/blob/main/stageshow/playground/main.tsx) (Playground entry), [`stageshow/teaching/contrasts.tsx`](https://github.com/boraoztunc/skills/blob/main/stageshow/teaching/contrasts.tsx) (Contrast lessons), [`stageshow/playground/preview.tsx`](https://github.com/boraoztunc/skills/blob/main/stageshow/playground/preview.tsx) (Demo mount)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_playback["Demo playback"]
  node_playground["Playground entry<br/>[main.tsx]"]
  node_playback_driver["Playback driver<br/>[playback.ts]"]
  node_preview_mount["Demo mount<br/>[preview.tsx]"]
  node_catalog["Demo catalog<br/>[catalog.ts]"]
end

subgraph group_kit["Stageshow kit"]
  node_stage["Stage canvas<br/>[stage.tsx]"]
  node_actions["Interaction scripts<br/>[act.ts]"]
  node_clock["Virtual clock<br/>[clock.ts]"]
  node_measure["Geometry measurement<br/>[measure.ts]"]
  node_cursor["Cursor rendering<br/>[cursor.tsx]"]
  node_cursor_glyphs["Cursor glyphs<br/>[cursors.tsx]"]
  node_look["Stage appearance<br/>[looks.ts]"]
  node_reduced_motion["Reduced motion<br/>[reduced-motion.ts]"]
  node_frames["Window and device frames<br/>[phone.tsx]"]
  node_motion["Motion components<br/>[Roll.tsx]"]
  node_controls["UI controls<br/>[Field.tsx]"]
  node_parts["UI parts<br/>[Row.tsx]"]
end

subgraph group_teaching["Teaching examples"]
  node_composition["Composition lessons<br/>[composition.tsx]"]
  node_contrasts["Contrast lessons<br/>[contrasts.tsx]"]
  node_continuity["Continuity lessons<br/>[continuity.tsx]"]
  node_relationships["Relationship lessons<br/>[relationships.tsx]"]
  node_scenes["Scene lessons<br/>[scenes.tsx]"]
  node_style["Style lessons<br/>[style.tsx]"]
end

node_user(("Skill user"))

node_user -.->|"opens demo"| node_playground
node_playground -->|"creates playback"| node_playback_driver
node_playground -->|"installs virtual time"| node_clock
node_playground -->|"mounts demo"| node_preview_mount
node_preview_mount -->|"loads contrasts"| node_contrasts
node_playground -->|"loads viewer"| node_catalog
node_stage -->|"uses scripts"| node_actions
node_stage -->|"renders cursor"| node_cursor
node_stage -->|"measures targets"| node_measure
node_stage -->|"provides appearance"| node_look
node_stage -->|"uses clock"| node_clock
node_cursor -->|"renders glyphs"| node_cursor_glyphs
node_motion -->|"checks preference"| node_reduced_motion
node_frames -->|"reads appearance"| node_look
node_controls -->|"uses icon"| node_parts
node_parts -->|"uses window"| node_frames
node_contrasts -->|"compares lessons"| node_composition
node_contrasts -->|"compares lessons"| node_continuity
node_contrasts -->|"compares lessons"| node_relationships
node_contrasts -->|"uses kit"| node_stage
node_composition -->|"uses kit"| node_stage
node_continuity -->|"uses kit"| node_stage
node_relationships -->|"uses kit"| node_stage
node_scenes -->|"uses kit"| node_stage
node_style -->|"uses kit"| node_stage

click node_playground "https://github.com/boraoztunc/skills/blob/main/stageshow/playground/main.tsx"
click node_playback_driver "https://github.com/boraoztunc/skills/blob/main/stageshow/playground/playback.ts"
click node_preview_mount "https://github.com/boraoztunc/skills/blob/main/stageshow/playground/preview.tsx"
click node_catalog "https://github.com/boraoztunc/skills/blob/main/stageshow/playground/catalog.ts"
click node_stage "https://github.com/boraoztunc/skills/blob/main/stageshow/kit/stage.tsx"
click node_actions "https://github.com/boraoztunc/skills/blob/main/stageshow/kit/act.ts"
click node_clock "https://github.com/boraoztunc/skills/blob/main/stageshow/kit/clock.ts"
click node_measure "https://github.com/boraoztunc/skills/blob/main/stageshow/kit/measure.ts"
click node_cursor "https://github.com/boraoztunc/skills/blob/main/stageshow/kit/cursor.tsx"
click node_cursor_glyphs "https://github.com/boraoztunc/skills/blob/main/stageshow/kit/cursors.tsx"
click node_look "https://github.com/boraoztunc/skills/blob/main/stageshow/kit/looks.ts"
click node_reduced_motion "https://github.com/boraoztunc/skills/blob/main/stageshow/kit/reduced-motion.ts"
click node_frames "https://github.com/boraoztunc/skills/blob/main/stageshow/kit/phone.tsx"
click node_motion "https://github.com/boraoztunc/skills/blob/main/stageshow/kit/motion/Roll.tsx"
click node_controls "https://github.com/boraoztunc/skills/blob/main/stageshow/kit/controls/Field.tsx"
click node_parts "https://github.com/boraoztunc/skills/blob/main/stageshow/kit/parts/Row.tsx"
click node_composition "https://github.com/boraoztunc/skills/blob/main/stageshow/teaching/composition.tsx"
click node_contrasts "https://github.com/boraoztunc/skills/blob/main/stageshow/teaching/contrasts.tsx"
click node_continuity "https://github.com/boraoztunc/skills/blob/main/stageshow/teaching/continuity.tsx"
click node_relationships "https://github.com/boraoztunc/skills/blob/main/stageshow/teaching/relationships.tsx"
click node_scenes "https://github.com/boraoztunc/skills/blob/main/stageshow/teaching/scenes.tsx"
click node_style "https://github.com/boraoztunc/skills/blob/main/stageshow/teaching/style.tsx"

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_playground,node_playback_driver,node_preview_mount,node_catalog,node_user toneBlue
class node_stage,node_actions,node_clock,node_measure,node_cursor,node_cursor_glyphs,node_look,node_reduced_motion,node_frames,node_motion,node_controls,node_parts toneAmber
class node_composition,node_contrasts,node_continuity,node_relationships,node_scenes,node_style toneMint
```

## Components

### Demo playback

- [Playground entry](https://github.com/boraoztunc/skills/blob/main/stageshow/playground/main.tsx): `stageshow/playground/main.tsx`
- [Playback driver](https://github.com/boraoztunc/skills/blob/main/stageshow/playground/playback.ts): `stageshow/playground/playback.ts`
- [Demo mount](https://github.com/boraoztunc/skills/blob/main/stageshow/playground/preview.tsx): `stageshow/playground/preview.tsx`
- [Demo catalog](https://github.com/boraoztunc/skills/blob/main/stageshow/playground/catalog.ts): `stageshow/playground/catalog.ts`

### Stageshow kit

- [Stage canvas](https://github.com/boraoztunc/skills/blob/main/stageshow/kit/stage.tsx): `stageshow/kit/stage.tsx`
- [Interaction scripts](https://github.com/boraoztunc/skills/blob/main/stageshow/kit/act.ts): `stageshow/kit/act.ts`
- [Virtual clock](https://github.com/boraoztunc/skills/blob/main/stageshow/kit/clock.ts): `stageshow/kit/clock.ts`
- [Geometry measurement](https://github.com/boraoztunc/skills/blob/main/stageshow/kit/measure.ts): `stageshow/kit/measure.ts`
- [Cursor rendering](https://github.com/boraoztunc/skills/blob/main/stageshow/kit/cursor.tsx): `stageshow/kit/cursor.tsx`
- [Cursor glyphs](https://github.com/boraoztunc/skills/blob/main/stageshow/kit/cursors.tsx): `stageshow/kit/cursors.tsx`
- [Stage appearance](https://github.com/boraoztunc/skills/blob/main/stageshow/kit/looks.ts): `stageshow/kit/looks.ts`
- [Reduced motion](https://github.com/boraoztunc/skills/blob/main/stageshow/kit/reduced-motion.ts): `stageshow/kit/reduced-motion.ts`
- [Window and device frames](https://github.com/boraoztunc/skills/blob/main/stageshow/kit/phone.tsx): `stageshow/kit/phone.tsx`
- [Motion components](https://github.com/boraoztunc/skills/blob/main/stageshow/kit/motion/Roll.tsx): `stageshow/kit/motion/Roll.tsx`
- [UI controls](https://github.com/boraoztunc/skills/blob/main/stageshow/kit/controls/Field.tsx): `stageshow/kit/controls/Field.tsx`
- [UI parts](https://github.com/boraoztunc/skills/blob/main/stageshow/kit/parts/Row.tsx): `stageshow/kit/parts/Row.tsx`

### Teaching examples

- [Composition lessons](https://github.com/boraoztunc/skills/blob/main/stageshow/teaching/composition.tsx): `stageshow/teaching/composition.tsx`
- [Contrast lessons](https://github.com/boraoztunc/skills/blob/main/stageshow/teaching/contrasts.tsx): `stageshow/teaching/contrasts.tsx`
- [Continuity lessons](https://github.com/boraoztunc/skills/blob/main/stageshow/teaching/continuity.tsx): `stageshow/teaching/continuity.tsx`
- [Relationship lessons](https://github.com/boraoztunc/skills/blob/main/stageshow/teaching/relationships.tsx): `stageshow/teaching/relationships.tsx`
- [Scene lessons](https://github.com/boraoztunc/skills/blob/main/stageshow/teaching/scenes.tsx): `stageshow/teaching/scenes.tsx`
- [Style lessons](https://github.com/boraoztunc/skills/blob/main/stageshow/teaching/style.tsx): `stageshow/teaching/style.tsx`

### Other components

- **Skill user**

## Connections

- Skill user → Playground entry: opens demo
- Playground entry → Playback driver: creates playback (evidence: `stageshow/playground/main.tsx`)
- Playground entry → Virtual clock: installs virtual time (evidence: `stageshow/playground/main.tsx`)
- Playground entry → Demo mount: mounts demo (evidence: `stageshow/playground/main.tsx`)
- Demo mount → Contrast lessons: loads contrasts (evidence: `stageshow/playground/preview.tsx`)
- Playground entry → Demo catalog: loads viewer (evidence: `stageshow/playground/main.tsx`)
- Stage canvas → Interaction scripts: uses scripts (evidence: `stageshow/kit/stage.tsx`)
- Stage canvas → Cursor rendering: renders cursor (evidence: `stageshow/kit/stage.tsx`)
- Stage canvas → Geometry measurement: measures targets (evidence: `stageshow/kit/stage.tsx`)
- Stage canvas → Stage appearance: provides appearance (evidence: `stageshow/kit/stage.tsx`)
- Stage canvas → Virtual clock: uses clock (evidence: `stageshow/kit/stage.tsx`)
- Cursor rendering → Cursor glyphs: renders glyphs (evidence: `stageshow/kit/cursor.tsx`)
- Motion components → Reduced motion: checks preference (evidence: `stageshow/kit/motion/Roll.tsx`)
- Window and device frames → Stage appearance: reads appearance (evidence: `stageshow/kit/phone.tsx`)
- UI controls → UI parts: uses icon (evidence: `stageshow/kit/controls/Field.tsx`)
- UI parts → Window and device frames: uses window (evidence: `stageshow/kit/parts/Row.tsx`)
- Contrast lessons → Composition lessons: compares lessons (evidence: `stageshow/teaching/contrasts.tsx`)
- Contrast lessons → Continuity lessons: compares lessons (evidence: `stageshow/teaching/contrasts.tsx`)
- Contrast lessons → Relationship lessons: compares lessons (evidence: `stageshow/teaching/contrasts.tsx`)
- Contrast lessons → Stage canvas: uses kit (evidence: `stageshow/teaching/contrasts.tsx`)
- Composition lessons → Stage canvas: uses kit (evidence: `stageshow/teaching/composition.tsx`)
- Continuity lessons → Stage canvas: uses kit (evidence: `stageshow/teaching/continuity.tsx`)
- Relationship lessons → Stage canvas: uses kit (evidence: `stageshow/teaching/relationships.tsx`)
- Scene lessons → Stage canvas: uses kit (evidence: `stageshow/teaching/scenes.tsx`)
- Style lessons → Stage canvas: uses kit (evidence: `stageshow/teaching/style.tsx`)