@funnycode/myclaude 0.1.55 → 0.1.60

package/seed/marketplaces/ecc/skills/make-interfaces-feel-better/SKILL.md

@@ -1,151 +1,151 @@
----
-name: make-interfaces-feel-better
-description: Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states.
-origin: community
----
-
-# Make Interfaces Feel Better
-
-Use this skill for the small design-engineering details that compound into a
-more polished interface.
-
-Source: salvaged from stale community PR #1659 by `linus707`.
-
-## When to Use
-
-- The user says the UI feels off, flat, generic, cramped, jumpy, or unfinished.
-- You are building controls, cards, lists, dashboards, navigation, forms, or
-  toolbars.
-- A component needs hover, active, focus, enter, exit, loading, or empty states.
-- A frontend review needs specific before/after recommendations.
-
-## Core Principles
-
-### Concentric Radius
-
-For nearby nested rounded surfaces:
-
-```text
-outer radius = inner radius + padding
-```
-
-If padding is large, treat layers as separate surfaces instead of forcing the
-math. The point is optical coherence, not formula worship.
-
-### Optical Alignment
-
-Geometric centering is not always visual centering. Icon buttons, play
-triangles, arrows, stars, and asymmetric icons often need a small offset. Fix the
-SVG when possible; otherwise adjust with a pixel-level margin or padding change.
-
-### Shadows And Borders
-
-Use borders for separation and focus rings. Use layered shadows when a card,
-button, dropdown, or popover needs depth. Shadows should be transparent and
-subtle enough to work across backgrounds.
-
-### Text Wrapping
-
-- Use `text-wrap: balance` on headings and short titles.
-- Use `text-wrap: pretty` on short-to-medium body text, captions, descriptions,
-  and list items.
-- Avoid both on long prose, code, and preformatted content.
-- Use `font-variant-numeric: tabular-nums` for counters, timers, prices, tables,
-  and other updating numbers.
-
-### Font Smoothing
-
-On macOS, apply antialiased font smoothing at the root layout when the project
-does not already do so:
-
-```css
-html {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-```
-
-### Image Outlines
-
-Images often need a subtle inset outline so their edges do not blur into the
-surface.
-
-```css
-img {
-  outline: 1px solid rgba(0, 0, 0, 0.1);
-  outline-offset: -1px;
-}
-
-@media (prefers-color-scheme: dark) {
-  img {
-    outline-color: rgba(255, 255, 255, 0.1);
-  }
-}
-```
-
-Use neutral black or white alpha outlines. Do not tint image outlines with the
-brand palette.
-
-### Motion
-
-Use CSS transitions for interactive state changes because they can retarget
-when the user changes intent mid-motion. Reserve keyframes for staged
-one-shot entrances or loading sequences.
-
-Good motion defaults:
-
-- Enter: combine opacity, small `translateY`, and optionally blur.
-- Exit: shorter and quieter than enter, usually 150ms.
-- Press: `scale(0.96)` for tactile buttons, with a way to disable it when the
-  movement distracts.
-- Icon swaps: cross-fade with opacity, scale, and blur instead of instant
-  visibility toggles.
-
-### Transition Scope
-
-Never use `transition: all`. Specify the changed properties:
-
-```css
-.button {
-  transition-property: transform, background-color, box-shadow;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-}
-```
-
-Use `will-change` only for first-frame stutter on compositor-friendly
-properties such as `transform`, `opacity`, and `filter`. Never use
-`will-change: all`.
-
-### Hit Areas
-
-Interactive controls should have at least a 40x40px hit area, ideally 44x44px
-where the layout allows it. Expand with a pseudo-element when the visible icon
-is smaller, but do not let expanded hit areas overlap.
-
-## Review Output
-
-When reviewing a UI polish pass, report concrete changes in before/after rows:
-
-| Principle | Before | After |
-| --- | --- | --- |
-| Concentric radius | Same radius on parent and child | Parent radius accounts for padding |
-| Tabular numbers | Counter shifts as digits change | Counter uses `tabular-nums` |
-| Transition scope | `transition: all` | Explicit transition properties |
-
-Include file paths and properties when they are not obvious from the snippets.
-Omit principles that you checked but did not change.
-
-## Checklist
-
-- Nested rounded elements are optically coherent.
-- Icons are visually centered.
-- Buttons, cards, and popovers use borders or shadows for the right reason.
-- Headings and short text avoid awkward wrapping.
-- Dynamic numbers use tabular numerals.
-- Images have neutral outlines where needed.
-- Enter and exit animations are split, subtle, and interruptible where
-  appropriate.
-- Buttons have tactile active states without exaggerated motion.
-- `transition: all` and `will-change: all` are absent.
-- Small controls still have usable hit areas.
+---
+name: make-interfaces-feel-better
+description: Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states.
+origin: community
+---
+
+# Make Interfaces Feel Better
+
+Use this skill for the small design-engineering details that compound into a
+more polished interface.
+
+Source: salvaged from stale community PR #1659 by `linus707`.
+
+## When to Use
+
+- The user says the UI feels off, flat, generic, cramped, jumpy, or unfinished.
+- You are building controls, cards, lists, dashboards, navigation, forms, or
+  toolbars.
+- A component needs hover, active, focus, enter, exit, loading, or empty states.
+- A frontend review needs specific before/after recommendations.
+
+## Core Principles
+
+### Concentric Radius
+
+For nearby nested rounded surfaces:
+
+```text
+outer radius = inner radius + padding
+```
+
+If padding is large, treat layers as separate surfaces instead of forcing the
+math. The point is optical coherence, not formula worship.
+
+### Optical Alignment
+
+Geometric centering is not always visual centering. Icon buttons, play
+triangles, arrows, stars, and asymmetric icons often need a small offset. Fix the
+SVG when possible; otherwise adjust with a pixel-level margin or padding change.
+
+### Shadows And Borders
+
+Use borders for separation and focus rings. Use layered shadows when a card,
+button, dropdown, or popover needs depth. Shadows should be transparent and
+subtle enough to work across backgrounds.
+
+### Text Wrapping
+
+- Use `text-wrap: balance` on headings and short titles.
+- Use `text-wrap: pretty` on short-to-medium body text, captions, descriptions,
+  and list items.
+- Avoid both on long prose, code, and preformatted content.
+- Use `font-variant-numeric: tabular-nums` for counters, timers, prices, tables,
+  and other updating numbers.
+
+### Font Smoothing
+
+On macOS, apply antialiased font smoothing at the root layout when the project
+does not already do so:
+
+```css
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+```
+
+### Image Outlines
+
+Images often need a subtle inset outline so their edges do not blur into the
+surface.
+
+```css
+img {
+  outline: 1px solid rgba(0, 0, 0, 0.1);
+  outline-offset: -1px;
+}
+
+@media (prefers-color-scheme: dark) {
+  img {
+    outline-color: rgba(255, 255, 255, 0.1);
+  }
+}
+```
+
+Use neutral black or white alpha outlines. Do not tint image outlines with the
+brand palette.
+
+### Motion
+
+Use CSS transitions for interactive state changes because they can retarget
+when the user changes intent mid-motion. Reserve keyframes for staged
+one-shot entrances or loading sequences.
+
+Good motion defaults:
+
+- Enter: combine opacity, small `translateY`, and optionally blur.
+- Exit: shorter and quieter than enter, usually 150ms.
+- Press: `scale(0.96)` for tactile buttons, with a way to disable it when the
+  movement distracts.
+- Icon swaps: cross-fade with opacity, scale, and blur instead of instant
+  visibility toggles.
+
+### Transition Scope
+
+Never use `transition: all`. Specify the changed properties:
+
+```css
+.button {
+  transition-property: transform, background-color, box-shadow;
+  transition-duration: 150ms;
+  transition-timing-function: ease-out;
+}
+```
+
+Use `will-change` only for first-frame stutter on compositor-friendly
+properties such as `transform`, `opacity`, and `filter`. Never use
+`will-change: all`.
+
+### Hit Areas
+
+Interactive controls should have at least a 40x40px hit area, ideally 44x44px
+where the layout allows it. Expand with a pseudo-element when the visible icon
+is smaller, but do not let expanded hit areas overlap.
+
+## Review Output
+
+When reviewing a UI polish pass, report concrete changes in before/after rows:
+
+| Principle | Before | After |
+| --- | --- | --- |
+| Concentric radius | Same radius on parent and child | Parent radius accounts for padding |
+| Tabular numbers | Counter shifts as digits change | Counter uses `tabular-nums` |
+| Transition scope | `transition: all` | Explicit transition properties |
+
+Include file paths and properties when they are not obvious from the snippets.
+Omit principles that you checked but did not change.
+
+## Checklist
+
+- Nested rounded elements are optically coherent.
+- Icons are visually centered.
+- Buttons, cards, and popovers use borders or shadows for the right reason.
+- Headings and short text avoid awkward wrapping.
+- Dynamic numbers use tabular numerals.
+- Images have neutral outlines where needed.
+- Enter and exit animations are split, subtle, and interruptible where
+  appropriate.
+- Buttons have tactile active states without exaggerated motion.
+- `transition: all` and `will-change: all` are absent.
+- Small controls still have usable hit areas.

package/seed/marketplaces/ecc/skills/manim-video/SKILL.md

@@ -1,89 +1,89 @@
----
-name: manim-video
-description: Build reusable Manim explainers for technical concepts, graphs, system diagrams, and product walkthroughs, then hand off to the wider ECC video stack if needed. Use when the user wants a clean animated explainer rather than a generic talking-head script.
-origin: ECC
----
-
-# Manim Video
-
-Use Manim for technical explainers where motion, structure, and clarity matter more than photorealism.
-
-## When to Activate
-
-- the user wants a technical explainer animation
-- the concept is a graph, workflow, architecture, metric progression, or system diagram
-- the user wants a short product or launch explainer for X or a landing page
-- the visual should feel precise instead of generically cinematic
-
-## Tool Requirements
-
-- `manim` CLI for scene rendering
-- `ffmpeg` for post-processing if needed
-- `video-editing` for final assembly or polish
-- `remotion-video-creation` when the final package needs composited UI, captions, or additional motion layers
-
-## Default Output
-
-- short 16:9 MP4
-- one thumbnail or poster frame
-- storyboard plus scene plan
-
-## Workflow
-
-1. Define the core visual thesis in one sentence.
-2. Break the concept into 3 to 6 scenes.
-3. Decide what each scene proves.
-4. Write the scene outline before writing Manim code.
-5. Render the smallest working version first.
-6. Tighten typography, spacing, color, and pacing after the render works.
-7. Hand off to the wider video stack only if it adds value.
-
-## Scene Planning Rules
-
-- each scene should prove one thing
-- avoid overstuffed diagrams
-- prefer progressive reveal over full-screen clutter
-- use motion to explain state change, not just to keep the screen busy
-- title cards should be short and loaded with meaning
-
-## Network Graph Default
-
-For social-graph and network-optimization explainers:
-
-- show the current graph before showing the optimized graph
-- distinguish low-signal follow clutter from high-signal bridges
-- highlight warm-path nodes and target clusters
-- if useful, add a final scene showing the self-improvement lineage that informed the skill
-
-## Render Conventions
-
-- default to 16:9 landscape unless the user asks for vertical
-- start with a low-quality smoke test render
-- only push to higher quality after composition and timing are stable
-- export one clean thumbnail frame that reads at social size
-
-## Reusable Starter
-
-Use [assets/network_graph_scene.py](assets/network_graph_scene.py) as a starting point for network-graph explainers.
-
-Example smoke test:
-
-```bash
-manim -ql assets/network_graph_scene.py NetworkGraphExplainer
-```
-
-## Output Format
-
-Return:
-
-- core visual thesis
-- storyboard
-- scene outline
-- render plan
-- any follow-on polish recommendations
-
-## Related Skills
-
-- `video-editing` for final polish
-- `remotion-video-creation` for motion-heavy post-processing or compositing
-- `content-engine` when the animation is part of a broader launch
+---
+name: manim-video
+description: Build reusable Manim explainers for technical concepts, graphs, system diagrams, and product walkthroughs, then hand off to the wider ECC video stack if needed. Use when the user wants a clean animated explainer rather than a generic talking-head script.
+origin: ECC
+---
+
+# Manim Video
+
+Use Manim for technical explainers where motion, structure, and clarity matter more than photorealism.
+
+## When to Activate
+
+- the user wants a technical explainer animation
+- the concept is a graph, workflow, architecture, metric progression, or system diagram
+- the user wants a short product or launch explainer for X or a landing page
+- the visual should feel precise instead of generically cinematic
+
+## Tool Requirements
+
+- `manim` CLI for scene rendering
+- `ffmpeg` for post-processing if needed
+- `video-editing` for final assembly or polish
+- `remotion-video-creation` when the final package needs composited UI, captions, or additional motion layers
+
+## Default Output
+
+- short 16:9 MP4
+- one thumbnail or poster frame
+- storyboard plus scene plan
+
+## Workflow
+
+1. Define the core visual thesis in one sentence.
+2. Break the concept into 3 to 6 scenes.
+3. Decide what each scene proves.
+4. Write the scene outline before writing Manim code.
+5. Render the smallest working version first.
+6. Tighten typography, spacing, color, and pacing after the render works.
+7. Hand off to the wider video stack only if it adds value.
+
+## Scene Planning Rules
+
+- each scene should prove one thing
+- avoid overstuffed diagrams
+- prefer progressive reveal over full-screen clutter
+- use motion to explain state change, not just to keep the screen busy
+- title cards should be short and loaded with meaning
+
+## Network Graph Default
+
+For social-graph and network-optimization explainers:
+
+- show the current graph before showing the optimized graph
+- distinguish low-signal follow clutter from high-signal bridges
+- highlight warm-path nodes and target clusters
+- if useful, add a final scene showing the self-improvement lineage that informed the skill
+
+## Render Conventions
+
+- default to 16:9 landscape unless the user asks for vertical
+- start with a low-quality smoke test render
+- only push to higher quality after composition and timing are stable
+- export one clean thumbnail frame that reads at social size
+
+## Reusable Starter
+
+Use [assets/network_graph_scene.py](assets/network_graph_scene.py) as a starting point for network-graph explainers.
+
+Example smoke test:
+
+```bash
+manim -ql assets/network_graph_scene.py NetworkGraphExplainer
+```
+
+## Output Format
+
+Return:
+
+- core visual thesis
+- storyboard
+- scene outline
+- render plan
+- any follow-on polish recommendations
+
+## Related Skills
+
+- `video-editing` for final polish
+- `remotion-video-creation` for motion-heavy post-processing or compositing
+- `content-engine` when the animation is part of a broader launch

package/seed/marketplaces/ecc/skills/manim-video/assets/network_graph_scene.py

@@ -1,52 +1,52 @@
-from manim import DOWN, LEFT, RIGHT, UP, Circle, Create, FadeIn, FadeOut, Scene, Text, VGroup, CurvedArrow
-
-
-class NetworkGraphExplainer(Scene):
-    def construct(self):
-        title = Text("Connections Optimizer", font_size=40).to_edge(UP)
-        subtitle = Text("Prune low-signal follows. Strengthen warm paths.", font_size=20).next_to(title, DOWN)
-
-        you = Circle(radius=0.45, color="#4F8EF7").shift(LEFT * 4 + DOWN * 0.5)
-        you_label = Text("You", font_size=22).move_to(you.get_center())
-
-        stale_a = Circle(radius=0.32, color="#7A7A7A").shift(LEFT * 1.6 + UP * 1.2)
-        stale_b = Circle(radius=0.32, color="#7A7A7A").shift(LEFT * 1.2 + DOWN * 1.4)
-        bridge = Circle(radius=0.38, color="#21A179").shift(RIGHT * 0.2 + UP * 0.2)
-        target = Circle(radius=0.42, color="#FF9F1C").shift(RIGHT * 3.2 + UP * 0.7)
-        new_target = Circle(radius=0.42, color="#FF9F1C").shift(RIGHT * 3.0 + DOWN * 1.4)
-
-        stale_a_label = Text("stale", font_size=18).move_to(stale_a.get_center())
-        stale_b_label = Text("noise", font_size=18).move_to(stale_b.get_center())
-        bridge_label = Text("bridge", font_size=18).move_to(bridge.get_center())
-        target_label = Text("target", font_size=18).move_to(target.get_center())
-        new_target_label = Text("add", font_size=18).move_to(new_target.get_center())
-
-        edge_stale_a = CurvedArrow(you.get_right(), stale_a.get_left(), angle=0.2, color="#7A7A7A")
-        edge_stale_b = CurvedArrow(you.get_right(), stale_b.get_left(), angle=-0.2, color="#7A7A7A")
-        edge_bridge = CurvedArrow(you.get_right(), bridge.get_left(), angle=0.0, color="#21A179")
-        edge_target = CurvedArrow(bridge.get_right(), target.get_left(), angle=0.1, color="#21A179")
-        edge_new_target = CurvedArrow(bridge.get_right(), new_target.get_left(), angle=-0.12, color="#21A179")
-
-        self.play(FadeIn(title), FadeIn(subtitle))
-        self.play(
-            Create(you),
-            FadeIn(you_label),
-            Create(stale_a),
-            Create(stale_b),
-            Create(bridge),
-            Create(target),
-            FadeIn(stale_a_label),
-            FadeIn(stale_b_label),
-            FadeIn(bridge_label),
-            FadeIn(target_label),
-        )
-        self.play(Create(edge_stale_a), Create(edge_stale_b), Create(edge_bridge), Create(edge_target))
-
-        optimize = Text("Optimize the graph", font_size=24).to_edge(DOWN)
-        self.play(FadeIn(optimize))
-        self.play(FadeOut(stale_a), FadeOut(stale_b), FadeOut(stale_a_label), FadeOut(stale_b_label), FadeOut(edge_stale_a), FadeOut(edge_stale_b))
-        self.play(Create(new_target), FadeIn(new_target_label), Create(edge_new_target))
-
-        final_group = VGroup(you, you_label, bridge, bridge_label, target, target_label, new_target, new_target_label)
-        self.play(final_group.animate.shift(UP * 0.1))
-        self.wait(1)
+from manim import DOWN, LEFT, RIGHT, UP, Circle, Create, FadeIn, FadeOut, Scene, Text, VGroup, CurvedArrow
+
+
+class NetworkGraphExplainer(Scene):
+    def construct(self):
+        title = Text("Connections Optimizer", font_size=40).to_edge(UP)
+        subtitle = Text("Prune low-signal follows. Strengthen warm paths.", font_size=20).next_to(title, DOWN)
+
+        you = Circle(radius=0.45, color="#4F8EF7").shift(LEFT * 4 + DOWN * 0.5)
+        you_label = Text("You", font_size=22).move_to(you.get_center())
+
+        stale_a = Circle(radius=0.32, color="#7A7A7A").shift(LEFT * 1.6 + UP * 1.2)
+        stale_b = Circle(radius=0.32, color="#7A7A7A").shift(LEFT * 1.2 + DOWN * 1.4)
+        bridge = Circle(radius=0.38, color="#21A179").shift(RIGHT * 0.2 + UP * 0.2)
+        target = Circle(radius=0.42, color="#FF9F1C").shift(RIGHT * 3.2 + UP * 0.7)
+        new_target = Circle(radius=0.42, color="#FF9F1C").shift(RIGHT * 3.0 + DOWN * 1.4)
+
+        stale_a_label = Text("stale", font_size=18).move_to(stale_a.get_center())
+        stale_b_label = Text("noise", font_size=18).move_to(stale_b.get_center())
+        bridge_label = Text("bridge", font_size=18).move_to(bridge.get_center())
+        target_label = Text("target", font_size=18).move_to(target.get_center())
+        new_target_label = Text("add", font_size=18).move_to(new_target.get_center())
+
+        edge_stale_a = CurvedArrow(you.get_right(), stale_a.get_left(), angle=0.2, color="#7A7A7A")
+        edge_stale_b = CurvedArrow(you.get_right(), stale_b.get_left(), angle=-0.2, color="#7A7A7A")
+        edge_bridge = CurvedArrow(you.get_right(), bridge.get_left(), angle=0.0, color="#21A179")
+        edge_target = CurvedArrow(bridge.get_right(), target.get_left(), angle=0.1, color="#21A179")
+        edge_new_target = CurvedArrow(bridge.get_right(), new_target.get_left(), angle=-0.12, color="#21A179")
+
+        self.play(FadeIn(title), FadeIn(subtitle))
+        self.play(
+            Create(you),
+            FadeIn(you_label),
+            Create(stale_a),
+            Create(stale_b),
+            Create(bridge),
+            Create(target),
+            FadeIn(stale_a_label),
+            FadeIn(stale_b_label),
+            FadeIn(bridge_label),
+            FadeIn(target_label),
+        )
+        self.play(Create(edge_stale_a), Create(edge_stale_b), Create(edge_bridge), Create(edge_target))
+
+        optimize = Text("Optimize the graph", font_size=24).to_edge(DOWN)
+        self.play(FadeIn(optimize))
+        self.play(FadeOut(stale_a), FadeOut(stale_b), FadeOut(stale_a_label), FadeOut(stale_b_label), FadeOut(edge_stale_a), FadeOut(edge_stale_b))
+        self.play(Create(new_target), FadeIn(new_target_label), Create(edge_new_target))
+
+        final_group = VGroup(you, you_label, bridge, bridge_label, target, target_label, new_target, new_target_label)
+        self.play(final_group.animate.shift(UP * 0.1))
+        self.wait(1)