design-agent-skills 1.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +380 -0
- package/VERSION +1 -0
- package/bin/cli.mjs +45 -0
- package/bootstrap.sh +32 -0
- package/install.sh +689 -0
- package/package.json +36 -0
- package/skills/accessibility-agents/SKILL.md +52 -0
- package/skills/accessibility-agents/stub.yaml +5 -0
- package/skills/accessibility-catalogue/SKILL.md +45 -0
- package/skills/accessibility-catalogue/stub.yaml +3 -0
- package/skills/addyosmani-quality/SKILL.md +72 -0
- package/skills/addyosmani-quality/stub.yaml +6 -0
- package/skills/ai-graphic-design-skill/SKILL.md +65 -0
- package/skills/ai-graphic-design-skill/stub.yaml +5 -0
- package/skills/algorithmic-art/SKILL.md +59 -0
- package/skills/algorithmic-art/stub.yaml +5 -0
- package/skills/animate-css-skill/SKILL.md +55 -0
- package/skills/animate-css-skill/stub.yaml +5 -0
- package/skills/animate-skill/SKILL.md +64 -0
- package/skills/animate-skill/stub.yaml +5 -0
- package/skills/anthropics-skills/SKILL.md +72 -0
- package/skills/anthropics-skills/stub.yaml +12 -0
- package/skills/antvis-chart-skills/SKILL.md +61 -0
- package/skills/antvis-chart-skills/stub.yaml +6 -0
- package/skills/apple-hig-skills/SKILL.md +66 -0
- package/skills/apple-hig-skills/stub.yaml +6 -0
- package/skills/baseline-ui/SKILL.md +54 -0
- package/skills/baseline-ui/stub.yaml +5 -0
- package/skills/bencium-ux-designer/SKILL.md +54 -0
- package/skills/bencium-ux-designer/stub.yaml +5 -0
- package/skills/brand-design-md/SKILL.md +65 -0
- package/skills/brand-design-md/stub.yaml +5 -0
- package/skills/callstack-agent-skills/SKILL.md +56 -0
- package/skills/callstack-agent-skills/stub.yaml +6 -0
- package/skills/cc-slidev/SKILL.md +54 -0
- package/skills/cc-slidev/stub.yaml +5 -0
- package/skills/claud3/SKILL.md +54 -0
- package/skills/claud3/stub.yaml +5 -0
- package/skills/claude-pm-skills/SKILL.md +53 -0
- package/skills/claude-pm-skills/stub.yaml +5 -0
- package/skills/claude-wireframe-skill/SKILL.md +63 -0
- package/skills/claude-wireframe-skill/stub.yaml +5 -0
- package/skills/claude2figma/SKILL.md +54 -0
- package/skills/claude2figma/stub.yaml +5 -0
- package/skills/claudedesignskills/SKILL.md +59 -0
- package/skills/claudedesignskills/stub.yaml +5 -0
- package/skills/cloudai-threejs/SKILL.md +51 -0
- package/skills/cloudai-threejs/stub.yaml +6 -0
- package/skills/cloudflare-web-perf/SKILL.md +60 -0
- package/skills/cloudflare-web-perf/stub.yaml +5 -0
- package/skills/color-expert/SKILL.md +62 -0
- package/skills/color-expert/stub.yaml +5 -0
- package/skills/composio-artifacts/SKILL.md +63 -0
- package/skills/composio-artifacts/stub.yaml +5 -0
- package/skills/content-catalogue/SKILL.md +105 -0
- package/skills/content-catalogue/stub.yaml +3 -0
- package/skills/coreyhaines-marketing/SKILL.md +59 -0
- package/skills/coreyhaines-marketing/stub.yaml +6 -0
- package/skills/creative-director/SKILL.md +60 -0
- package/skills/creative-director/stub.yaml +5 -0
- package/skills/css-animation-skill/SKILL.md +63 -0
- package/skills/css-animation-skill/stub.yaml +5 -0
- package/skills/d3js-skill/SKILL.md +58 -0
- package/skills/d3js-skill/stub.yaml +5 -0
- package/skills/data-analysis-skill/SKILL.md +64 -0
- package/skills/data-analysis-skill/stub.yaml +5 -0
- package/skills/data-viz-agent/SKILL.md +60 -0
- package/skills/data-viz-agent/stub.yaml +5 -0
- package/skills/deanpeters-pm-skills/SKILL.md +76 -0
- package/skills/deanpeters-pm-skills/stub.yaml +6 -0
- package/skills/design-auditor/SKILL.md +62 -0
- package/skills/design-auditor/stub.yaml +5 -0
- package/skills/design-brief/SKILL.md +58 -0
- package/skills/design-brief/stub.yaml +5 -0
- package/skills/design-catalogue/SKILL.md +346 -0
- package/skills/design-catalogue/stub.yaml +3 -0
- package/skills/design-consultation/SKILL.md +58 -0
- package/skills/design-consultation/stub.yaml +5 -0
- package/skills/design-engineering-catalogue/SKILL.md +92 -0
- package/skills/design-engineering-catalogue/stub.yaml +3 -0
- package/skills/design-for-ai/SKILL.md +58 -0
- package/skills/design-for-ai/stub.yaml +5 -0
- package/skills/design-html/SKILL.md +59 -0
- package/skills/design-html/stub.yaml +5 -0
- package/skills/design-lab/SKILL.md +54 -0
- package/skills/design-lab/stub.yaml +5 -0
- package/skills/design-review-garrytan/SKILL.md +58 -0
- package/skills/design-review-garrytan/stub.yaml +5 -0
- package/skills/design-tokens-skill/SKILL.md +68 -0
- package/skills/design-tokens-skill/stub.yaml +5 -0
- package/skills/design-with-claude/SKILL.md +51 -0
- package/skills/design-with-claude/stub.yaml +5 -0
- package/skills/designer-skills/SKILL.md +52 -0
- package/skills/designer-skills/stub.yaml +5 -0
- package/skills/digidai-pm/SKILL.md +60 -0
- package/skills/digidai-pm/stub.yaml +5 -0
- package/skills/distinctive-frontend/SKILL.md +55 -0
- package/skills/distinctive-frontend/stub.yaml +5 -0
- package/skills/email-html-mjml/SKILL.md +54 -0
- package/skills/email-html-mjml/stub.yaml +5 -0
- package/skills/emilkowalski-skill/SKILL.md +60 -0
- package/skills/emilkowalski-skill/stub.yaml +7 -0
- package/skills/excalidraw-agents365/SKILL.md +56 -0
- package/skills/excalidraw-agents365/stub.yaml +5 -0
- package/skills/excalidraw-diagram/SKILL.md +58 -0
- package/skills/excalidraw-diagram/stub.yaml +5 -0
- package/skills/expo-skills/SKILL.md +56 -0
- package/skills/expo-skills/stub.yaml +21 -0
- package/skills/extract-design-md/SKILL.md +58 -0
- package/skills/extract-design-md/stub.yaml +5 -0
- package/skills/extract-design-system/SKILL.md +53 -0
- package/skills/extract-design-system/stub.yaml +5 -0
- package/skills/fal-ai-skills/SKILL.md +56 -0
- package/skills/fal-ai-skills/stub.yaml +6 -0
- package/skills/figma-catalogue/SKILL.md +57 -0
- package/skills/figma-catalogue/stub.yaml +3 -0
- package/skills/figma-official-skills/SKILL.md +80 -0
- package/skills/figma-official-skills/stub.yaml +6 -0
- package/skills/figma-skill/SKILL.md +52 -0
- package/skills/figma-skill/stub.yaml +5 -0
- package/skills/figma-variables-tokens-generator/SKILL.md +54 -0
- package/skills/figma-variables-tokens-generator/stub.yaml +5 -0
- package/skills/fixing-accessibility/SKILL.md +54 -0
- package/skills/fixing-accessibility/stub.yaml +5 -0
- package/skills/fixing-motion-performance/SKILL.md +54 -0
- package/skills/fixing-motion-performance/stub.yaml +5 -0
- package/skills/framer-motion-skills/SKILL.md +55 -0
- package/skills/framer-motion-skills/stub.yaml +5 -0
- package/skills/frontend-design/SKILL.md +65 -0
- package/skills/frontend-design/stub.yaml +5 -0
- package/skills/frontend-slides/SKILL.md +59 -0
- package/skills/frontend-slides/stub.yaml +5 -0
- package/skills/generative-media-skills/SKILL.md +56 -0
- package/skills/generative-media-skills/stub.yaml +4 -0
- package/skills/google-fonts-skill/SKILL.md +69 -0
- package/skills/google-fonts-skill/stub.yaml +4 -0
- package/skills/google-stitch-skills/SKILL.md +71 -0
- package/skills/google-stitch-skills/stub.yaml +6 -0
- package/skills/gsap-skills/SKILL.md +55 -0
- package/skills/gsap-skills/stub.yaml +5 -0
- package/skills/guizang-ppt/SKILL.md +58 -0
- package/skills/guizang-ppt/stub.yaml +5 -0
- package/skills/hand-drawn-diagrams/SKILL.md +57 -0
- package/skills/hand-drawn-diagrams/stub.yaml +5 -0
- package/skills/hig-doctor/SKILL.md +59 -0
- package/skills/hig-doctor/stub.yaml +6 -0
- package/skills/huashu-design/SKILL.md +64 -0
- package/skills/huashu-design/stub.yaml +5 -0
- package/skills/hyperframes/SKILL.md +60 -0
- package/skills/hyperframes/stub.yaml +5 -0
- package/skills/impeccable/SKILL.md +75 -0
- package/skills/impeccable/stub.yaml +8 -0
- package/skills/ink-google/SKILL.md +58 -0
- package/skills/ink-google/stub.yaml +5 -0
- package/skills/interface-design-dammyjay/SKILL.md +55 -0
- package/skills/interface-design-dammyjay/stub.yaml +5 -0
- package/skills/liquid-glass-skill/SKILL.md +54 -0
- package/skills/liquid-glass-skill/stub.yaml +5 -0
- package/skills/logo-designer-skill/SKILL.md +56 -0
- package/skills/logo-designer-skill/stub.yaml +5 -0
- package/skills/make-interfaces-better/SKILL.md +60 -0
- package/skills/make-interfaces-better/stub.yaml +5 -0
- package/skills/markdown-viewer-skills/SKILL.md +70 -0
- package/skills/markdown-viewer-skills/stub.yaml +6 -0
- package/skills/marp-slide-quality/SKILL.md +63 -0
- package/skills/marp-slide-quality/stub.yaml +5 -0
- package/skills/marp-slides/SKILL.md +63 -0
- package/skills/marp-slides/stub.yaml +5 -0
- package/skills/mastepanoski-skills/SKILL.md +52 -0
- package/skills/mastepanoski-skills/stub.yaml +5 -0
- package/skills/microsoft-skills/SKILL.md +51 -0
- package/skills/microsoft-skills/stub.yaml +6 -0
- package/skills/mobile-app-design/SKILL.md +67 -0
- package/skills/mobile-app-design/stub.yaml +5 -0
- package/skills/mobile-app-ui-design/SKILL.md +65 -0
- package/skills/mobile-app-ui-design/stub.yaml +5 -0
- package/skills/motion-catalogue/SKILL.md +69 -0
- package/skills/motion-catalogue/stub.yaml +3 -0
- package/skills/motion-design-skill/SKILL.md +55 -0
- package/skills/motion-design-skill/stub.yaml +5 -0
- package/skills/nanobanan-ppt/SKILL.md +64 -0
- package/skills/nanobanan-ppt/stub.yaml +5 -0
- package/skills/neo-user-journey/SKILL.md +62 -0
- package/skills/neo-user-journey/stub.yaml +5 -0
- package/skills/nimbalyst-skills/SKILL.md +59 -0
- package/skills/nimbalyst-skills/stub.yaml +7 -0
- package/skills/open-design/SKILL.md +55 -0
- package/skills/open-design/stub.yaml +4 -0
- package/skills/openai-skills/SKILL.md +67 -0
- package/skills/openai-skills/stub.yaml +6 -0
- package/skills/p5js-hermes/SKILL.md +62 -0
- package/skills/p5js-hermes/stub.yaml +5 -0
- package/skills/phuryn-pm-skills/SKILL.md +56 -0
- package/skills/phuryn-pm-skills/stub.yaml +6 -0
- package/skills/plan-design-review/SKILL.md +58 -0
- package/skills/plan-design-review/stub.yaml +5 -0
- package/skills/platform-design-skills/SKILL.md +52 -0
- package/skills/platform-design-skills/stub.yaml +6 -0
- package/skills/pm-skills/SKILL.md +55 -0
- package/skills/pm-skills/stub.yaml +5 -0
- package/skills/react-doctor/SKILL.md +55 -0
- package/skills/react-doctor/stub.yaml +5 -0
- package/skills/remotion/SKILL.md +59 -0
- package/skills/remotion/stub.yaml +5 -0
- package/skills/revealjs-skill/SKILL.md +54 -0
- package/skills/revealjs-skill/stub.yaml +5 -0
- package/skills/shadcn-ui/SKILL.md +54 -0
- package/skills/shadcn-ui/stub.yaml +5 -0
- package/skills/shader-dev/SKILL.md +60 -0
- package/skills/shader-dev/stub.yaml +5 -0
- package/skills/simota-agent-skills/SKILL.md +53 -0
- package/skills/simota-agent-skills/stub.yaml +5 -0
- package/skills/sleek-design-mobile-apps/SKILL.md +56 -0
- package/skills/sleek-design-mobile-apps/stub.yaml +4 -0
- package/skills/slidev-skill/SKILL.md +54 -0
- package/skills/slidev-skill/stub.yaml +5 -0
- package/skills/softaworks-agent-toolkit/SKILL.md +58 -0
- package/skills/softaworks-agent-toolkit/stub.yaml +6 -0
- package/skills/software-mansion-skills/SKILL.md +63 -0
- package/skills/software-mansion-skills/stub.yaml +11 -0
- package/skills/superdesign-skill/SKILL.md +53 -0
- package/skills/superdesign-skill/stub.yaml +4 -0
- package/skills/swiftui-claude-skills/SKILL.md +54 -0
- package/skills/swiftui-claude-skills/stub.yaml +5 -0
- package/skills/swiftui-patterns/SKILL.md +54 -0
- package/skills/swiftui-patterns/stub.yaml +5 -0
- package/skills/taste-design-stitch/SKILL.md +58 -0
- package/skills/taste-design-stitch/stub.yaml +5 -0
- package/skills/taste-skill/SKILL.md +74 -0
- package/skills/taste-skill/stub.yaml +5 -0
- package/skills/threejs-claude-skill-package/SKILL.md +54 -0
- package/skills/threejs-claude-skill-package/stub.yaml +5 -0
- package/skills/threejs-ecs-ts/SKILL.md +54 -0
- package/skills/threejs-ecs-ts/stub.yaml +5 -0
- package/skills/tui-design-skill/SKILL.md +56 -0
- package/skills/tui-design-skill/stub.yaml +5 -0
- package/skills/ui-craft/SKILL.md +58 -0
- package/skills/ui-craft/stub.yaml +5 -0
- package/skills/ui-ux-pro-max/SKILL.md +64 -0
- package/skills/ui-ux-pro-max/stub.yaml +7 -0
- package/skills/ux-designer-skill/SKILL.md +62 -0
- package/skills/ux-designer-skill/stub.yaml +5 -0
- package/skills/ux-ui-mastery/SKILL.md +53 -0
- package/skills/ux-ui-mastery/stub.yaml +5 -0
- package/skills/vercel-skills/SKILL.md +65 -0
- package/skills/vercel-skills/stub.yaml +6 -0
- package/skills/wcag-ai-skill/SKILL.md +52 -0
- package/skills/wcag-ai-skill/stub.yaml +5 -0
- package/skills/wcag-audit-patterns/SKILL.md +53 -0
- package/skills/wcag-audit-patterns/stub.yaml +5 -0
- package/skills/webgpu-claude-skill/SKILL.md +54 -0
- package/skills/webgpu-claude-skill/stub.yaml +5 -0
- package/skills/wiggle-claude-skill/SKILL.md +63 -0
- package/skills/wiggle-claude-skill/stub.yaml +5 -0
- package/skills/wireframe-skill/SKILL.md +63 -0
- package/skills/wireframe-skill/stub.yaml +5 -0
- package/skills/wireframer/SKILL.md +59 -0
- package/skills/wireframer/stub.yaml +5 -0
- package/skills/wondelai-skills/SKILL.md +57 -0
- package/skills/wondelai-skills/stub.yaml +11 -0
- package/skills/work-with-design-systems/SKILL.md +67 -0
- package/skills/work-with-design-systems/stub.yaml +5 -0
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: markdown-viewer-skills
|
|
3
|
+
description: |
|
|
4
|
+
14 visualization skills across 5 rendering engines: Vega-Lite, PlantUML,
|
|
5
|
+
JSON Canvas, HTML/CSS, and Infographic templates. The most complete data
|
|
6
|
+
visualization and diagram collection — charts, UML, cloud architecture,
|
|
7
|
+
network diagrams, mind maps, and 70+ infographic templates.
|
|
8
|
+
triggers:
|
|
9
|
+
- "markdown viewer"
|
|
10
|
+
- "vega chart"
|
|
11
|
+
- "PlantUML"
|
|
12
|
+
- "JSON Canvas"
|
|
13
|
+
- "infographic"
|
|
14
|
+
- "UML diagram"
|
|
15
|
+
- "cloud architecture diagram"
|
|
16
|
+
- "network diagram"
|
|
17
|
+
das:
|
|
18
|
+
category: data-visualization
|
|
19
|
+
upstream: "https://github.com/markdown-viewer/skills"
|
|
20
|
+
version: latest
|
|
21
|
+
install: false
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
# markdown-viewer-skills
|
|
25
|
+
|
|
26
|
+
> Catalogue stub — full package: [markdown-viewer/skills](https://github.com/markdown-viewer/skills)
|
|
27
|
+
|
|
28
|
+
## Decision tree
|
|
29
|
+
|
|
30
|
+
Run this before any chart, diagram, or infographic work:
|
|
31
|
+
|
|
32
|
+
1. **Is the package already installed?**
|
|
33
|
+
Check: `~/.design-agent-skills/skills/vega/SKILL.md` exists (representative skill).
|
|
34
|
+
- Yes → invoke the relevant skill by name and proceed
|
|
35
|
+
- No → go to step 2
|
|
36
|
+
|
|
37
|
+
2. **Do you have shell access?**
|
|
38
|
+
- Yes → run the install command below, then invoke the skill
|
|
39
|
+
- No → show the user the install command, ask them to run it, then proceed once confirmed
|
|
40
|
+
|
|
41
|
+
## Install command
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
npx skills add markdown-viewer/skills
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Invoke after install
|
|
48
|
+
|
|
49
|
+
14 skills across 5 rendering engines:
|
|
50
|
+
|
|
51
|
+
| Skill | Engine | Use case |
|
|
52
|
+
|-------|--------|----------|
|
|
53
|
+
| `vega` | Vega-Lite | bar, line, scatter, heatmap, radar, word cloud |
|
|
54
|
+
| `infographic` | HTML/CSS | 70+ templates: KPI cards, timelines, roadmaps, SWOT |
|
|
55
|
+
| `canvas` | JSON Canvas | mind maps, knowledge graphs, concept maps |
|
|
56
|
+
| `architecture` | HTML/CSS | layer diagrams, 13 layouts × 12 styles |
|
|
57
|
+
| `infocard` | HTML/CSS | editorial info cards, 13 layouts × 14 styles |
|
|
58
|
+
| `uml` | PlantUML | 14 UML types + 9,500 mxgraph icons |
|
|
59
|
+
| `cloud` | PlantUML | AWS, Azure, GCP, Kubernetes icons |
|
|
60
|
+
| `network` | PlantUML | Cisco/Citrix network device icons |
|
|
61
|
+
| `security` | PlantUML | IAM, encryption, firewall, compliance |
|
|
62
|
+
| `archimate` | PlantUML | enterprise architecture, ArchiMate layers |
|
|
63
|
+
| `bpmn` | PlantUML | business process, EIP, Lean Mapping |
|
|
64
|
+
| `data-analytics` | PlantUML | ETL/ELT, data warehouse, ML workflows |
|
|
65
|
+
| `iot` | PlantUML | IoT devices, sensors, edge computing |
|
|
66
|
+
| `mindmap` | PlantUML | mind map syntax with directional branches |
|
|
67
|
+
|
|
68
|
+
## What it does
|
|
69
|
+
|
|
70
|
+
The most complete visualization skill collection: 14 skills across 5 rendering engines with 98%+ format coverage. Covers everything from simple charts to enterprise architecture diagrams, cloud topology, and polished infographic templates.
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: marp-slide-quality
|
|
3
|
+
description: |
|
|
4
|
+
Analyzes and improves Marp Markdown presentations using SlideGauge quality scoring —
|
|
5
|
+
detects overflow, contrast issues, text density, and structural problems before rendering.
|
|
6
|
+
Use as a companion to marp-slides, run after slide creation.
|
|
7
|
+
triggers:
|
|
8
|
+
- "marp slide quality"
|
|
9
|
+
- "SlideGauge"
|
|
10
|
+
- "marp-slide-quality"
|
|
11
|
+
- "nibzard marp"
|
|
12
|
+
das:
|
|
13
|
+
type: skill
|
|
14
|
+
category: presentations
|
|
15
|
+
upstream: "https://github.com/nibzard/marp-slide-quality"
|
|
16
|
+
upstream_path: "SKILL.md"
|
|
17
|
+
version: latest
|
|
18
|
+
install: true
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
# marp-slide-quality
|
|
22
|
+
|
|
23
|
+
> Catalogue stub — full skill: [nibzard/marp-slide-quality](https://github.com/nibzard/marp-slide-quality)
|
|
24
|
+
|
|
25
|
+
## Decision tree
|
|
26
|
+
|
|
27
|
+
1. **Is the full skill already installed?**
|
|
28
|
+
Check whether the skill at this location still has a `das:` block:
|
|
29
|
+
- Global: `grep -q "^das:" ~/.agents/skills/marp-slide-quality/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
|
|
30
|
+
- Project: `grep -q "^das:" .agents/skills/marp-slide-quality/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
|
|
31
|
+
- No `das:` block → full skill installed, invoke it and proceed
|
|
32
|
+
- `das:` block present → go to step 2
|
|
33
|
+
|
|
34
|
+
2. **Detect scope, then install:**
|
|
35
|
+
|
|
36
|
+
To detect scope:
|
|
37
|
+
```bash
|
|
38
|
+
[ -e ~/.agents/skills/marp-slide-quality ] && echo "global" || echo "project"
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
**Global** (installed with `-g`):
|
|
42
|
+
```bash
|
|
43
|
+
npx skills add nibzard/marp-slide-quality --skill marp-slide-quality -g -y
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
**Project** (installed without `-g`):
|
|
47
|
+
```bash
|
|
48
|
+
npx skills add nibzard/marp-slide-quality --skill marp-slide-quality -y
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Invoke after install
|
|
52
|
+
|
|
53
|
+
Skill name: `marp-slide-quality`, triggers: "marp slide quality", "SlideGauge", "marp-slide-quality", "nibzard marp"
|
|
54
|
+
|
|
55
|
+
## What it does
|
|
56
|
+
|
|
57
|
+
Runs SlideGauge quality analysis on Marp Markdown presentations before they are rendered, catching problems that only appear visually at render time. Detects content overflow (text spilling past slide boundaries), insufficient color contrast, excessive text density, missing structure elements, and layout anti-patterns. Produces a scored report with specific fix recommendations. Best used as a post-creation review pass after marp-slides generates the initial deck.
|
|
58
|
+
|
|
59
|
+
## When NOT to use
|
|
60
|
+
|
|
61
|
+
- Reveal.js or Slidev presentations — SlideGauge is Marp-specific
|
|
62
|
+
- Creating slides from scratch — use marp-slides first, then run this for quality review
|
|
63
|
+
- When you need Marp rendered output — this analyzes the Markdown source, not the render
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: marp-slides
|
|
3
|
+
description: |
|
|
4
|
+
Marp presentation skill with 22 curated example decks, SVG charts, dashboard components,
|
|
5
|
+
and dark/light themes. Teaches slide composition and visual quality patterns for
|
|
6
|
+
Markdown-based presentations rendered with the Marp framework.
|
|
7
|
+
triggers:
|
|
8
|
+
- "Marp"
|
|
9
|
+
- "marp-slides"
|
|
10
|
+
- "Marp presentation"
|
|
11
|
+
- "robonuggets slides"
|
|
12
|
+
das:
|
|
13
|
+
type: skill
|
|
14
|
+
category: presentations
|
|
15
|
+
upstream: "https://github.com/robonuggets/marp-slides"
|
|
16
|
+
upstream_path: "SKILL.md"
|
|
17
|
+
version: latest
|
|
18
|
+
install: true
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
# marp-slides
|
|
22
|
+
|
|
23
|
+
> Catalogue stub — full skill: [robonuggets/marp-slides](https://github.com/robonuggets/marp-slides)
|
|
24
|
+
|
|
25
|
+
## Decision tree
|
|
26
|
+
|
|
27
|
+
1. **Is the full skill already installed?**
|
|
28
|
+
Check whether the skill at this location still has a `das:` block:
|
|
29
|
+
- Global: `grep -q "^das:" ~/.agents/skills/marp-slides/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
|
|
30
|
+
- Project: `grep -q "^das:" .agents/skills/marp-slides/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
|
|
31
|
+
- No `das:` block → full skill installed, invoke it and proceed
|
|
32
|
+
- `das:` block present → go to step 2
|
|
33
|
+
|
|
34
|
+
2. **Detect scope, then install:**
|
|
35
|
+
|
|
36
|
+
To detect scope:
|
|
37
|
+
```bash
|
|
38
|
+
[ -e ~/.agents/skills/marp-slides ] && echo "global" || echo "project"
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
**Global** (installed with `-g`):
|
|
42
|
+
```bash
|
|
43
|
+
npx skills add robonuggets/marp-slides --skill marp-slides -g -y
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
**Project** (installed without `-g`):
|
|
47
|
+
```bash
|
|
48
|
+
npx skills add robonuggets/marp-slides --skill marp-slides -y
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Invoke after install
|
|
52
|
+
|
|
53
|
+
Skill name: `marp-slides`, triggers: "Marp", "marp-slides", "Marp presentation", "robonuggets slides"
|
|
54
|
+
|
|
55
|
+
## What it does
|
|
56
|
+
|
|
57
|
+
Creates Marp Markdown presentations informed by 22 curated real-world example decks covering different content types and visual styles. Includes SVG-based chart components, dashboard-style layout components, and dark/light theme variants. The examples teach the skill correct slide composition: appropriate information density, visual hierarchy, and component reuse patterns.
|
|
58
|
+
|
|
59
|
+
## When NOT to use
|
|
60
|
+
|
|
61
|
+
- Animated or interactive slides — use revealjs-skill instead
|
|
62
|
+
- Vue-component developer presentations — use slidev-skill instead
|
|
63
|
+
- Quality-checking an existing Marp deck — use marp-slide-quality as a companion after creation
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: mastepanoski-skills
|
|
3
|
+
description: |
|
|
4
|
+
Six UX/UI audit skills: ux-audit-rethink (7 UX factors), nielsen-heuristics-audit, wcag-accessibility-audit (POUR framework), don-norman-principles-audit, cognitive-walkthrough, and ui-design-review. Each skill is a structured audit methodology.
|
|
5
|
+
triggers:
|
|
6
|
+
- "mastepanoski"
|
|
7
|
+
- "Don Norman audit"
|
|
8
|
+
- "cognitive walkthrough"
|
|
9
|
+
- "POUR accessibility"
|
|
10
|
+
- "ux-audit-rethink"
|
|
11
|
+
das:
|
|
12
|
+
type: package
|
|
13
|
+
category: accessibility-quality
|
|
14
|
+
upstream: "https://github.com/mastepanoski/claude-skills"
|
|
15
|
+
version: latest
|
|
16
|
+
install: false
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
# mastepanoski-skills
|
|
20
|
+
|
|
21
|
+
> Catalogue stub — full package: [mastepanoski/claude-skills](https://github.com/mastepanoski/claude-skills)
|
|
22
|
+
|
|
23
|
+
## Decision tree
|
|
24
|
+
|
|
25
|
+
1. **Is the package already installed?**
|
|
26
|
+
Check your agent's skills directory for `mastepanoski-skills` with content beyond this stub.
|
|
27
|
+
- Yes → invoke and proceed
|
|
28
|
+
- No → go to step 2
|
|
29
|
+
|
|
30
|
+
2. **Which agent?**
|
|
31
|
+
- Claude Code / Cursor → `npx skills add mastepanoski/claude-skills`
|
|
32
|
+
- Other → see [GitHub README](https://github.com/mastepanoski/claude-skills)
|
|
33
|
+
|
|
34
|
+
## Install command
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
npx skills add mastepanoski/claude-skills
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Invoke after install
|
|
41
|
+
|
|
42
|
+
- Skill name: `mastepanoski-skills`
|
|
43
|
+
- Trigger phrases: "mastepanoski", "Don Norman audit", "cognitive walkthrough", "POUR accessibility", "ux-audit-rethink"
|
|
44
|
+
|
|
45
|
+
## What it does
|
|
46
|
+
|
|
47
|
+
Six structured UX/UI audit skills covering distinct methodological frameworks: `ux-audit-rethink` (7-factor UX evaluation), `nielsen-heuristics-audit` (10 Nielsen heuristics), `wcag-accessibility-audit` (POUR framework — Perceivable, Operable, Understandable, Robust), `don-norman-principles-audit` (The Design of Everyday Things principles), `cognitive-walkthrough` (task-based usability analysis), and `ui-design-review` (visual UI assessment). Each skill follows a structured methodology and produces actionable findings.
|
|
48
|
+
|
|
49
|
+
## When NOT to use
|
|
50
|
+
|
|
51
|
+
- Automated code-level fixes — use `react-doctor` for component-level remediation
|
|
52
|
+
- Core Web Vitals and performance — use `cloudflare-web-perf`
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: microsoft-skills
|
|
3
|
+
description: |
|
|
4
|
+
2 official Microsoft skills: frontend design review for distinctive interfaces,
|
|
5
|
+
and dark-themed React with Tailwind and animations. Both target production-quality
|
|
6
|
+
UI with strong visual identity.
|
|
7
|
+
triggers:
|
|
8
|
+
- "Microsoft skill"
|
|
9
|
+
- "frontend design review"
|
|
10
|
+
- "dark theme React"
|
|
11
|
+
- "frontend UI dark"
|
|
12
|
+
das:
|
|
13
|
+
category: official-suites
|
|
14
|
+
upstream: "https://github.com/microsoft/skills"
|
|
15
|
+
version: latest
|
|
16
|
+
install: false
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
# microsoft-skills
|
|
20
|
+
|
|
21
|
+
> Catalogue stub — full package: [microsoft/skills](https://github.com/microsoft/skills)
|
|
22
|
+
|
|
23
|
+
## Decision tree
|
|
24
|
+
|
|
25
|
+
1. **Is a Microsoft skill already installed?**
|
|
26
|
+
Check: `~/.design-agent-skills/skills/frontend-design-review/SKILL.md` exists.
|
|
27
|
+
- Yes → invoke the specific skill by name and proceed
|
|
28
|
+
- No → go to step 2
|
|
29
|
+
|
|
30
|
+
2. **Do you have shell access?**
|
|
31
|
+
- Yes → run the install command below, then invoke the skill
|
|
32
|
+
- No → show the user the install command, ask them to run it, then proceed once confirmed
|
|
33
|
+
|
|
34
|
+
## Install command
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
# Review and create distinctive interfaces
|
|
38
|
+
npx skills add microsoft/frontend-design-review
|
|
39
|
+
|
|
40
|
+
# Dark-themed React with Tailwind and animations
|
|
41
|
+
npx skills add microsoft/frontend-ui-dark-ts
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Invoke after install
|
|
45
|
+
|
|
46
|
+
- `frontend-design-review` — "frontend design review", "distinctive interface"
|
|
47
|
+
- `frontend-ui-dark-ts` — "dark theme UI", "dark React", "dark Tailwind"
|
|
48
|
+
|
|
49
|
+
## What it does
|
|
50
|
+
|
|
51
|
+
Microsoft's two official frontend skills: one for reviewing and producing distinctive, non-generic interfaces; one for building dark-themed React/TypeScript UIs with Tailwind and animations. Both enforce strong visual identity over default aesthetics.
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: mobile-app-design
|
|
3
|
+
description: |
|
|
4
|
+
Comprehensive mobile app UI/UX design skill covering iOS HIG, Android
|
|
5
|
+
Material 3, accessibility standards, React Native best practices, touch
|
|
6
|
+
targets, thumb zones, and adaptive patterns. 26,000+ words of detailed
|
|
7
|
+
documentation.
|
|
8
|
+
triggers:
|
|
9
|
+
- "mobile app design"
|
|
10
|
+
- "Android design"
|
|
11
|
+
- "touch targets"
|
|
12
|
+
- "thumb zones"
|
|
13
|
+
- "Material 3"
|
|
14
|
+
- "mobile UI UX"
|
|
15
|
+
das:
|
|
16
|
+
type: skill
|
|
17
|
+
category: visual-components
|
|
18
|
+
upstream: "https://github.com/awesome-skills/mobile-app-design"
|
|
19
|
+
upstream_path: "SKILL.md"
|
|
20
|
+
version: latest
|
|
21
|
+
install: true
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
# mobile-app-design
|
|
25
|
+
|
|
26
|
+
> Catalogue stub — full skill: [awesome-skills/mobile-app-design](https://github.com/awesome-skills/mobile-app-design)
|
|
27
|
+
|
|
28
|
+
## Decision tree
|
|
29
|
+
|
|
30
|
+
1. **Is the full skill already installed?**
|
|
31
|
+
Check whether the skill at this location still has a `das:` block:
|
|
32
|
+
- Global: `grep -q "^das:" ~/.agents/skills/mobile-app-design/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
|
|
33
|
+
- Project: `grep -q "^das:" .agents/skills/mobile-app-design/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
|
|
34
|
+
- No `das:` block → full skill installed, invoke it and proceed
|
|
35
|
+
- `das:` block present → go to step 2
|
|
36
|
+
|
|
37
|
+
2. **Detect scope, then install:**
|
|
38
|
+
|
|
39
|
+
To detect scope:
|
|
40
|
+
```bash
|
|
41
|
+
[ -e ~/.agents/skills/mobile-app-design ] && echo "global" || echo "project"
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
**Global** (installed with `-g`):
|
|
45
|
+
```bash
|
|
46
|
+
npx skills add awesome-skills/mobile-app-design --skill mobile-app-design -g -y
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
**Project** (installed without `-g`):
|
|
50
|
+
```bash
|
|
51
|
+
npx skills add awesome-skills/mobile-app-design --skill mobile-app-design -y
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Invoke after install
|
|
55
|
+
|
|
56
|
+
- Skill name: `mobile-app-design`
|
|
57
|
+
- Triggers: "mobile app design", "iOS design", "Android design", "touch targets", "thumb zones"
|
|
58
|
+
|
|
59
|
+
## What it does
|
|
60
|
+
|
|
61
|
+
26,000+ words of mobile UI/UX design guidance. Covers Apple iOS Human Interface Guidelines, Android Material 3, WCAG mobile accessibility, React Native implementation best practices, correct touch target sizing, thumb-zone ergonomics, and adaptive layout patterns for phones and tablets. Use for any cross-platform mobile design decision.
|
|
62
|
+
|
|
63
|
+
## When NOT to use
|
|
64
|
+
|
|
65
|
+
- Apple HIG-only work — use `apple-hig-skills`
|
|
66
|
+
- SwiftUI-specific implementation — use `swiftui-patterns`
|
|
67
|
+
- Professional mobile UI craft patterns — use `mobile-app-ui-design`
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: mobile-app-ui-design
|
|
3
|
+
description: |
|
|
4
|
+
Professional mobile app UI design skill focused on creating intentional,
|
|
5
|
+
smooth, personal, and alive interfaces modeled on patterns from top-tier apps.
|
|
6
|
+
triggers:
|
|
7
|
+
- "mobile UI"
|
|
8
|
+
- "mobile-app-ui-design"
|
|
9
|
+
- "alive interfaces"
|
|
10
|
+
- "smooth mobile"
|
|
11
|
+
- "intentional mobile"
|
|
12
|
+
- "ceorkm"
|
|
13
|
+
das:
|
|
14
|
+
type: skill
|
|
15
|
+
category: visual-components
|
|
16
|
+
upstream: "https://github.com/ceorkm/mobile-app-ui-design"
|
|
17
|
+
upstream_path: "SKILL.md"
|
|
18
|
+
version: latest
|
|
19
|
+
install: true
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
# mobile-app-ui-design
|
|
23
|
+
|
|
24
|
+
> Catalogue stub — full skill: [ceorkm/mobile-app-ui-design](https://github.com/ceorkm/mobile-app-ui-design)
|
|
25
|
+
|
|
26
|
+
## Decision tree
|
|
27
|
+
|
|
28
|
+
1. **Is the full skill already installed?**
|
|
29
|
+
Check whether the skill at this location still has a `das:` block:
|
|
30
|
+
- Global: `grep -q "^das:" ~/.agents/skills/mobile-app-ui-design/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
|
|
31
|
+
- Project: `grep -q "^das:" .agents/skills/mobile-app-ui-design/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
|
|
32
|
+
- No `das:` block → full skill installed, invoke it and proceed
|
|
33
|
+
- `das:` block present → go to step 2
|
|
34
|
+
|
|
35
|
+
2. **Detect scope, then install:**
|
|
36
|
+
|
|
37
|
+
To detect scope:
|
|
38
|
+
```bash
|
|
39
|
+
[ -e ~/.agents/skills/mobile-app-ui-design ] && echo "global" || echo "project"
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
**Global** (installed with `-g`):
|
|
43
|
+
```bash
|
|
44
|
+
npx skills add ceorkm/mobile-app-ui-design --skill mobile-app-ui-design -g -y
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
**Project** (installed without `-g`):
|
|
48
|
+
```bash
|
|
49
|
+
npx skills add ceorkm/mobile-app-ui-design --skill mobile-app-ui-design -y
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Invoke after install
|
|
53
|
+
|
|
54
|
+
- Skill name: `mobile-app-ui-design`
|
|
55
|
+
- Triggers: "mobile UI", "mobile-app-ui-design", "alive interfaces", "smooth mobile"
|
|
56
|
+
|
|
57
|
+
## What it does
|
|
58
|
+
|
|
59
|
+
Craft-focused mobile UI design skill modeled on the visual and interaction patterns of top-tier apps. Guides creating interfaces that feel intentional (purposeful hierarchy and spacing), smooth (natural motion and transitions), personal (adapted to context and user), and alive (responsive micro-interactions). Use when quality of craft is the primary concern.
|
|
60
|
+
|
|
61
|
+
## When NOT to use
|
|
62
|
+
|
|
63
|
+
- Cross-platform guidelines and platform rules — use `mobile-app-design`
|
|
64
|
+
- Platform-specific HIG compliance — use `apple-hig-skills`
|
|
65
|
+
- Sleek platform integration — use `sleek-design-mobile-apps`
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: motion-catalogue
|
|
3
|
+
description: |
|
|
4
|
+
Domain navigator for motion, animation, 3D, and generative media skills.
|
|
5
|
+
Routes to the right skill for GSAP, Framer Motion, Three.js, Lottie,
|
|
6
|
+
shaders, generative art, video, and AI media generation.
|
|
7
|
+
triggers:
|
|
8
|
+
- "motion skills"
|
|
9
|
+
- "animation skill"
|
|
10
|
+
- "GSAP skill"
|
|
11
|
+
- "Three.js skill"
|
|
12
|
+
- "Framer Motion skill"
|
|
13
|
+
- "Lottie skill"
|
|
14
|
+
- "shader skill"
|
|
15
|
+
- "generative art skill"
|
|
16
|
+
- "WebGL skill"
|
|
17
|
+
- "video generation skill"
|
|
18
|
+
- "creative coding skill"
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
# motion-catalogue
|
|
22
|
+
|
|
23
|
+
Domain navigator for motion design, animation, 3D, shaders, and generative media.
|
|
24
|
+
Activate when the user asks for a skill in one of these areas.
|
|
25
|
+
|
|
26
|
+
→ For the full catalogue across all domains: use `design-catalogue`.
|
|
27
|
+
|
|
28
|
+
## When to use
|
|
29
|
+
|
|
30
|
+
Activate when the user:
|
|
31
|
+
- Asks about animation libraries (GSAP, Framer Motion, Lottie, CSS animations)
|
|
32
|
+
- Wants 3D (Three.js, WebGPU, shaders, WebGL, R3F)
|
|
33
|
+
- Needs generative art (p5.js, algorithmic art, creative coding)
|
|
34
|
+
- Wants video/media generation (Remotion, fal.ai, generative media)
|
|
35
|
+
|
|
36
|
+
## Motion & Animation
|
|
37
|
+
|
|
38
|
+
| Skill | Best for |
|
|
39
|
+
|-------|----------|
|
|
40
|
+
| [`gsap-skills`](../gsap-skills/SKILL.md) | Official GSAP: 8 skills — core, timeline, ScrollTrigger, Flip, Draggable, SplitText |
|
|
41
|
+
| [`framer-motion-skills`](../framer-motion-skills/SKILL.md) | 6 Framer Motion skills: core, Next.js, variants, scroll, gestures, layout |
|
|
42
|
+
| [`motion-design-skill`](../motion-design-skill/SKILL.md) | Official LottieFiles: timing, easing, choreography, Disney 12 principles |
|
|
43
|
+
| [`animate-skill`](../animate-skill/SKILL.md) | Emil-inspired Next.js/React patterns: hover, toast, text reveal, modals |
|
|
44
|
+
| [`animate-css-skill`](../animate-css-skill/SKILL.md) | Animate.css v4 + scroll triggers + RTL + prefers-reduced-motion |
|
|
45
|
+
| [`css-animation-skill`](../css-animation-skill/SKILL.md) | Scrapes live app design language → standalone animation file |
|
|
46
|
+
| [`wiggle-claude-skill`](../wiggle-claude-skill/SKILL.md) | Animates SVG logos → Lottie JSON → GIF + MP4 |
|
|
47
|
+
| [`emilkowalski-skill`](../emilkowalski-skill/SKILL.md) | Animation decision framework, easing curves, interaction principles |
|
|
48
|
+
| [`claudedesignskills`](../claudedesignskills/SKILL.md) | 22-skill bundle: Three.js, GSAP, R3F, Framer, Babylon, A-Frame, PixiJS, Rive, Lottie |
|
|
49
|
+
| [`hyperframes`](../hyperframes/SKILL.md) | "Write HTML → render video": GSAP/CSS/Lottie/Three.js + TTS (HeyGen) |
|
|
50
|
+
|
|
51
|
+
## Generative Art & Creative Coding
|
|
52
|
+
|
|
53
|
+
| Skill | Best for |
|
|
54
|
+
|-------|----------|
|
|
55
|
+
| [`algorithmic-art`](../algorithmic-art/SKILL.md) | Generative art with p5.js, flow fields, particle systems |
|
|
56
|
+
| [`p5js-hermes`](../p5js-hermes/SKILL.md) | p5.js creative coding: noise, particles, GLSL, audio-reactive |
|
|
57
|
+
| [`remotion`](../remotion/SKILL.md) | Programmatic video with React |
|
|
58
|
+
|
|
59
|
+
## 3D, Shaders & Media
|
|
60
|
+
|
|
61
|
+
| Skill | Best for |
|
|
62
|
+
|-------|----------|
|
|
63
|
+
| [`shader-dev`](../shader-dev/SKILL.md) | GLSL shaders: ray marching, fluid simulation, WebGL effects |
|
|
64
|
+
| [`cloudai-threejs`](../cloudai-threejs/SKILL.md) | Three.js 3D scenes, animations, WebGL |
|
|
65
|
+
| [`webgpu-claude-skill`](../webgpu-claude-skill/SKILL.md) | Three.js TSL, node materials, GPU compute, WGSL — r183+ |
|
|
66
|
+
| [`threejs-ecs-ts`](../threejs-ecs-ts/SKILL.md) | Three.js + Entity Component Systems + TypeScript |
|
|
67
|
+
| [`threejs-claude-skill-package`](../threejs-claude-skill-package/SKILL.md) | 24 skills: WebGL, WebGPU, R3F, physics, IFC/BIM architecture |
|
|
68
|
+
| [`fal-ai-skills`](../fal-ai-skills/SKILL.md) | fal.ai image/video and 3D model generation |
|
|
69
|
+
| [`generative-media-skills`](../generative-media-skills/SKILL.md) | 41 workflows: Midjourney v7, Flux Kontext, Kling 3.0, Veo3, Suno audio |
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: motion-design-skill
|
|
3
|
+
description: |
|
|
4
|
+
Official LottieFiles motion design principles — timing curves, easing, choreography,
|
|
5
|
+
Disney's 12 principles adapted for UI. Implementation-agnostic: works with CSS, GSAP,
|
|
6
|
+
Framer Motion, Lottie. Supports 40+ agents.
|
|
7
|
+
triggers:
|
|
8
|
+
- "motion design"
|
|
9
|
+
- "animation principles"
|
|
10
|
+
- "LottieFiles"
|
|
11
|
+
- "Disney principles UI"
|
|
12
|
+
- "timing curves"
|
|
13
|
+
das:
|
|
14
|
+
type: package
|
|
15
|
+
category: motion-animation
|
|
16
|
+
upstream: "https://github.com/lottiefiles/motion-design-skill"
|
|
17
|
+
version: latest
|
|
18
|
+
install: false
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
# motion-design-skill
|
|
22
|
+
|
|
23
|
+
> Catalogue stub — full package: [lottiefiles/motion-design-skill](https://github.com/lottiefiles/motion-design-skill)
|
|
24
|
+
|
|
25
|
+
## Decision tree
|
|
26
|
+
|
|
27
|
+
1. **Is the package already installed?**
|
|
28
|
+
Check: your agent's skills directory contains `motion-design-skill` with content beyond this stub.
|
|
29
|
+
- Yes → invoke `motion-design-skill` and proceed
|
|
30
|
+
- No → go to step 2
|
|
31
|
+
|
|
32
|
+
2. **Which agent are you on?**
|
|
33
|
+
- Claude Code → `npx skills add LottieFiles/motion-design-skill`
|
|
34
|
+
- Cursor → `npx skills add LottieFiles/motion-design-skill`
|
|
35
|
+
- Other → `npx skills add LottieFiles/motion-design-skill` or see [GitHub README](https://github.com/lottiefiles/motion-design-skill)
|
|
36
|
+
|
|
37
|
+
## Install command
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
npx skills add LottieFiles/motion-design-skill
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Invoke after install
|
|
44
|
+
|
|
45
|
+
- Skill name: `motion-design-skill`
|
|
46
|
+
- Trigger phrases: "motion design", "animation principles", "LottieFiles", "Disney principles UI", "timing curves"
|
|
47
|
+
|
|
48
|
+
## What it does
|
|
49
|
+
|
|
50
|
+
Official LottieFiles motion design principles skill. Covers timing curves, easing functions, animation choreography, and Disney's 12 classic animation principles adapted for UI contexts. Helps agents reason about when to animate, how to choose easing, how to sequence compound animations, and how to balance energy and weight in motion. Implementation-agnostic — the guidance applies equally to CSS transitions, GSAP, Framer Motion, Lottie, or any other animation toolchain. Supports 40+ AI coding agents.
|
|
51
|
+
|
|
52
|
+
## When NOT to use
|
|
53
|
+
|
|
54
|
+
- GLSL/shader-level animation (use `shader-dev`)
|
|
55
|
+
- Specific framework implementation (use `gsap-skills` or `framer-motion-skills`)
|