mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-05-07 02:51:50 +00:00
refactor(concept-diagrams): rename + tighten v1k22's skill for merge
Salvage of PR #11045 (original by v1k22). Changes on top of the original commit: - Rename 'architecture-visualization-svg-diagrams' -> 'concept-diagrams' to differentiate from the existing architecture-diagram skill. architecture-diagram stays as the dark-themed Cocoon-style option for software/infra; concept-diagrams covers physics, chemistry, math, engineering, physical objects, and educational visuals. - Trigger description scoped to actual use cases; removed the 'always use this skill' language and long phrase-capture list to stop colliding with architecture-diagram, excalidraw, generative-widgets, manim-video. - Default output is now a standalone self-contained HTML file (works offline, no server). The preview server is opt-in and no longer part of the default workflow. - When the server IS used: bind to 127.0.0.1 instead of 0.0.0.0 (was a LAN exposure hazard on shared networks) and let the OS pick a free ephemeral port instead of hard-coding 22223 (collision prone). - Shrink SKILL.md from 1540 to 353 lines by extracting reusable material into linked files: - templates/template.html (host page with full CSS design system) - references/physical-shape-cookbook.md - references/infrastructure-patterns.md - references/dashboard-patterns.md All 15 examples kept intact. - Add dhandhalyabhavik@gmail.com -> v1k22 to AUTHOR_MAP. Preserves v1k22's authorship on the underlying commit.
This commit is contained in:
Teknium
Teknium
parent
9a4766fc18
commit
19c589a20b
22 changed files with 757 additions and 1541 deletions
|
|
@ -0,0 +1,172 @@
|
|||
# Feature Film Production Pipeline
|
||||
|
||||
A phased workflow showing the five stages of filmmaking, using containers with inner nodes and horizontal sub-flows within a phase.
|
||||
|
||||
## Key Patterns Used
|
||||
|
||||
- **Phase containers**: Large rounded rectangles with neutral background and dashed borders
|
||||
- **Inner task nodes**: Smaller colored nodes inside containers for sub-tasks
|
||||
- **Horizontal flow within container**: Post-production shows sequential pipeline with arrows (Editing → Color → VFX → Sound → Score)
|
||||
- **Consistent phase spacing**: ~30px gap between phase containers
|
||||
- **Phase labels with subtitles**: Each container has title + description
|
||||
|
||||
## Diagram
|
||||
|
||||
```xml
|
||||
<svg width="100%" viewBox="0 0 680 780" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
|
||||
markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||||
<path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
|
||||
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Phase 1: Development -->
|
||||
<g>
|
||||
<rect x="40" y="30" width="600" height="110" rx="16" stroke-width="1" stroke-dasharray="6 4" fill="var(--bg-secondary)" stroke="var(--border)"/>
|
||||
<text class="th" x="66" y="56">Development</text>
|
||||
<text class="ts" x="66" y="74">Concept to greenlight</text>
|
||||
</g>
|
||||
<g class="node c-purple">
|
||||
<rect x="70" y="90" width="160" height="36" rx="6" stroke-width="0.5"/>
|
||||
<text class="ts" x="150" y="108" text-anchor="middle" dominant-baseline="central">Script / screenplay</text>
|
||||
</g>
|
||||
<g class="node c-purple">
|
||||
<rect x="260" y="90" width="160" height="36" rx="6" stroke-width="0.5"/>
|
||||
<text class="ts" x="340" y="108" text-anchor="middle" dominant-baseline="central">Financing / budget</text>
|
||||
</g>
|
||||
<g class="node c-purple">
|
||||
<rect x="450" y="90" width="160" height="36" rx="6" stroke-width="0.5"/>
|
||||
<text class="ts" x="530" y="108" text-anchor="middle" dominant-baseline="central">Casting leads</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrow to Phase 2 -->
|
||||
<line x1="340" y1="140" x2="340" y2="170" class="arr" marker-end="url(#arrow)"/>
|
||||
|
||||
<!-- Phase 2: Pre-production -->
|
||||
<g>
|
||||
<rect x="40" y="170" width="600" height="110" rx="16" stroke-width="1" stroke-dasharray="6 4" fill="var(--bg-secondary)" stroke="var(--border)"/>
|
||||
<text class="th" x="66" y="196">Pre-production</text>
|
||||
<text class="ts" x="66" y="214">Planning and preparation</text>
|
||||
</g>
|
||||
<g class="node c-teal">
|
||||
<rect x="70" y="230" width="160" height="36" rx="6" stroke-width="0.5"/>
|
||||
<text class="ts" x="150" y="248" text-anchor="middle" dominant-baseline="central">Storyboards</text>
|
||||
</g>
|
||||
<g class="node c-teal">
|
||||
<rect x="260" y="230" width="160" height="36" rx="6" stroke-width="0.5"/>
|
||||
<text class="ts" x="340" y="248" text-anchor="middle" dominant-baseline="central">Location scouting</text>
|
||||
</g>
|
||||
<g class="node c-teal">
|
||||
<rect x="450" y="230" width="160" height="36" rx="6" stroke-width="0.5"/>
|
||||
<text class="ts" x="530" y="248" text-anchor="middle" dominant-baseline="central">Crew hiring</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrow to Phase 3 -->
|
||||
<line x1="340" y1="280" x2="340" y2="310" class="arr" marker-end="url(#arrow)"/>
|
||||
|
||||
<!-- Phase 3: Production -->
|
||||
<g>
|
||||
<rect x="40" y="310" width="600" height="110" rx="16" stroke-width="1" stroke-dasharray="6 4" fill="var(--bg-secondary)" stroke="var(--border)"/>
|
||||
<text class="th" x="66" y="336">Production</text>
|
||||
<text class="ts" x="66" y="354">Principal photography</text>
|
||||
</g>
|
||||
<g class="node c-coral">
|
||||
<rect x="70" y="370" width="160" height="36" rx="6" stroke-width="0.5"/>
|
||||
<text class="ts" x="150" y="388" text-anchor="middle" dominant-baseline="central">Filming / shooting</text>
|
||||
</g>
|
||||
<g class="node c-coral">
|
||||
<rect x="260" y="370" width="160" height="36" rx="6" stroke-width="0.5"/>
|
||||
<text class="ts" x="340" y="388" text-anchor="middle" dominant-baseline="central">Production sound</text>
|
||||
</g>
|
||||
<g class="node c-coral">
|
||||
<rect x="450" y="370" width="160" height="36" rx="6" stroke-width="0.5"/>
|
||||
<text class="ts" x="530" y="388" text-anchor="middle" dominant-baseline="central">VFX plates</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrow to Phase 4 -->
|
||||
<line x1="340" y1="420" x2="340" y2="450" class="arr" marker-end="url(#arrow)"/>
|
||||
|
||||
<!-- Phase 4: Post-production -->
|
||||
<g>
|
||||
<rect x="40" y="450" width="600" height="150" rx="16" stroke-width="1" stroke-dasharray="6 4" fill="var(--bg-secondary)" stroke="var(--border)"/>
|
||||
<text class="th" x="66" y="476">Post-production</text>
|
||||
<text class="ts" x="66" y="494">Assembly and finishing</text>
|
||||
</g>
|
||||
<g class="node c-amber">
|
||||
<rect x="70" y="510" width="110" height="36" rx="6" stroke-width="0.5"/>
|
||||
<text class="ts" x="125" y="528" text-anchor="middle" dominant-baseline="central">Editing</text>
|
||||
</g>
|
||||
<g class="node c-amber">
|
||||
<rect x="195" y="510" width="110" height="36" rx="6" stroke-width="0.5"/>
|
||||
<text class="ts" x="250" y="528" text-anchor="middle" dominant-baseline="central">Color grade</text>
|
||||
</g>
|
||||
<g class="node c-amber">
|
||||
<rect x="320" y="510" width="90" height="36" rx="6" stroke-width="0.5"/>
|
||||
<text class="ts" x="365" y="528" text-anchor="middle" dominant-baseline="central">VFX</text>
|
||||
</g>
|
||||
<g class="node c-amber">
|
||||
<rect x="425" y="510" width="100" height="36" rx="6" stroke-width="0.5"/>
|
||||
<text class="ts" x="475" y="528" text-anchor="middle" dominant-baseline="central">Sound mix</text>
|
||||
</g>
|
||||
<g class="node c-amber">
|
||||
<rect x="540" y="510" width="80" height="36" rx="6" stroke-width="0.5"/>
|
||||
<text class="ts" x="580" y="528" text-anchor="middle" dominant-baseline="central">Score</text>
|
||||
</g>
|
||||
<!-- Flow arrows within post -->
|
||||
<line x1="180" y1="528" x2="195" y2="528" class="arr" marker-end="url(#arrow)"/>
|
||||
<line x1="305" y1="528" x2="320" y2="528" class="arr" marker-end="url(#arrow)"/>
|
||||
<line x1="410" y1="528" x2="425" y2="528" class="arr" marker-end="url(#arrow)"/>
|
||||
<line x1="525" y1="528" x2="540" y2="528" class="arr" marker-end="url(#arrow)"/>
|
||||
<!-- Final delivery label -->
|
||||
<g class="node c-amber">
|
||||
<rect x="240" y="556" width="200" height="32" rx="6" stroke-width="0.5"/>
|
||||
<text class="ts" x="340" y="572" text-anchor="middle" dominant-baseline="central">Final master / DCP</text>
|
||||
</g>
|
||||
<line x1="340" y1="546" x2="340" y2="556" class="arr" marker-end="url(#arrow)"/>
|
||||
|
||||
<!-- Arrow to Phase 5 -->
|
||||
<line x1="340" y1="600" x2="340" y2="630" class="arr" marker-end="url(#arrow)"/>
|
||||
|
||||
<!-- Phase 5: Distribution -->
|
||||
<g>
|
||||
<rect x="40" y="630" width="600" height="110" rx="16" stroke-width="1" stroke-dasharray="6 4" fill="var(--bg-secondary)" stroke="var(--border)"/>
|
||||
<text class="th" x="66" y="656">Distribution</text>
|
||||
<text class="ts" x="66" y="674">Release and exhibition</text>
|
||||
</g>
|
||||
<g class="node c-blue">
|
||||
<rect x="70" y="690" width="160" height="36" rx="6" stroke-width="0.5"/>
|
||||
<text class="ts" x="150" y="708" text-anchor="middle" dominant-baseline="central">Film festivals</text>
|
||||
</g>
|
||||
<g class="node c-blue">
|
||||
<rect x="260" y="690" width="160" height="36" rx="6" stroke-width="0.5"/>
|
||||
<text class="ts" x="340" y="708" text-anchor="middle" dominant-baseline="central">Theatrical release</text>
|
||||
</g>
|
||||
<g class="node c-blue">
|
||||
<rect x="450" y="690" width="160" height="36" rx="6" stroke-width="0.5"/>
|
||||
<text class="ts" x="530" y="708" text-anchor="middle" dominant-baseline="central">Streaming / VOD</text>
|
||||
</g>
|
||||
</svg>
|
||||
```
|
||||
|
||||
## Color Assignments
|
||||
|
||||
| Element | Color | Reason |
|
||||
|---------|-------|--------|
|
||||
| Phase containers | Neutral (dashed) | Subtle grouping, doesn't compete with content |
|
||||
| Development tasks | `c-purple` | Creative/concept work |
|
||||
| Pre-production tasks | `c-teal` | Planning and preparation |
|
||||
| Production tasks | `c-coral` | Active filming (main event) |
|
||||
| Post-production tasks | `c-amber` | Processing/refinement |
|
||||
| Distribution tasks | `c-blue` | Outward delivery/release |
|
||||
|
||||
## Layout Notes
|
||||
|
||||
- **ViewBox**: 680×780 (standard width, tall for 5 phases)
|
||||
- **Container style**: Dashed border (`stroke-dasharray="6 4"`), neutral fill (`var(--bg-secondary)`), `stroke-width="1"`
|
||||
- **Container height**: 110px for 3-node phases, 150px for post-production (more complex)
|
||||
- **Inner node dimensions**: 160×36px for standard tasks, variable width for post-production sequential flow
|
||||
- **Phase gap**: 30px between containers
|
||||
- **Horizontal sub-flow**: Post-production uses tightly packed nodes with arrows between them to show sequence
|
||||
- **Convergence node**: "Final master / DCP" sits below the horizontal flow, collecting all post outputs
|
||||
Loading…
Add table
Add a link
Reference in a new issue