wizz-method 1.3.1 → 1.4.0
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/package.json +1 -1
- package/skills-registry.yaml +12 -2
- package/src/modules/wizz/_shared/token-economy.md +3 -0
- package/src/modules/wizz/agents/wizz-ads/customize.toml +1 -0
- package/src/modules/wizz/agents/wizz-copy/customize.toml +1 -0
- package/src/modules/wizz/agents/wizz-designer/customize.toml +1 -0
- package/src/modules/wizz/agents/wizz-growth/customize.toml +1 -0
- package/src/modules/wizz/agents/wizz-maestro/customize.toml +1 -0
- package/src/modules/wizz/agents/wizz-memoria/customize.toml +1 -0
- package/src/modules/wizz/agents/wizz-qa/customize.toml +1 -0
- package/src/modules/wizz/agents/wizz-seo/customize.toml +1 -0
- package/src/modules/wizz/agents/wizz-social/customize.toml +1 -0
- package/src/modules/wizz/overrides/wizz-agent-analyst.toml +1 -0
- package/src/modules/wizz/overrides/wizz-agent-architect.toml +1 -0
- package/src/modules/wizz/overrides/wizz-agent-dev.toml +1 -0
- package/src/modules/wizz/overrides/wizz-agent-pm.toml +1 -0
- package/src/modules/wizz/overrides/wizz-agent-tech-writer.toml +1 -0
- package/src/modules/wizz/overrides/wizz-agent-ux-designer.toml +1 -0
- package/src/skills-lib/ai-product-design/SKILL.md +85 -0
- package/src/skills-lib/ai-product-design/references/LICENSE +21 -0
- package/src/skills-lib/ai-product-design/references/ai-alignment-reasoning/bias-detection-design/SKILL.md +37 -0
- package/src/skills-lib/ai-product-design/references/ai-alignment-reasoning/consent-and-agency/SKILL.md +37 -0
- package/src/skills-lib/ai-product-design/references/ai-alignment-reasoning/escalation-design/SKILL.md +40 -0
- package/src/skills-lib/ai-product-design/references/ai-alignment-reasoning/guardrail-design/SKILL.md +36 -0
- package/src/skills-lib/ai-product-design/references/ai-alignment-reasoning/harm-anticipation/SKILL.md +108 -0
- package/src/skills-lib/ai-product-design/references/ai-alignment-reasoning/transparency-patterns/SKILL.md +36 -0
- package/src/skills-lib/ai-product-design/references/ai-alignment-reasoning/trust-calibration/SKILL.md +102 -0
- package/src/skills-lib/ai-product-design/references/ai-alignment-reasoning/value-specification/SKILL.md +39 -0
- package/src/skills-lib/ai-product-design/references/design-agent-orchestration/agent-role-design/SKILL.md +37 -0
- package/src/skills-lib/ai-product-design/references/design-agent-orchestration/failure-recovery/SKILL.md +37 -0
- package/src/skills-lib/ai-product-design/references/design-agent-orchestration/handoff-protocols/SKILL.md +45 -0
- package/src/skills-lib/ai-product-design/references/design-agent-orchestration/human-in-the-loop/SKILL.md +39 -0
- package/src/skills-lib/ai-product-design/references/design-agent-orchestration/observability-design/SKILL.md +48 -0
- package/src/skills-lib/ai-product-design/references/design-agent-orchestration/state-management/SKILL.md +95 -0
- package/src/skills-lib/ai-product-design/references/design-agent-orchestration/task-decomposition/SKILL.md +36 -0
- package/src/skills-lib/ai-product-design/references/evaluation/comparative-evaluation/SKILL.md +39 -0
- package/src/skills-lib/ai-product-design/references/evaluation/failure-taxonomy/SKILL.md +47 -0
- package/src/skills-lib/ai-product-design/references/evaluation/heuristic-evaluation-ai/SKILL.md +46 -0
- package/src/skills-lib/ai-product-design/references/evaluation/longitudinal-measurement/SKILL.md +38 -0
- package/src/skills-lib/ai-product-design/references/evaluation/output-quality-rubrics/SKILL.md +41 -0
- package/src/skills-lib/ai-product-design/references/evaluation/task-success-metrics/SKILL.md +35 -0
- package/src/skills-lib/ai-product-design/references/evaluation/user-satisfaction-signals/SKILL.md +50 -0
- package/src/skills-lib/ai-product-design/references/model-interaction-design/context-window-design/SKILL.md +28 -0
- package/src/skills-lib/ai-product-design/references/model-interaction-design/conversation-patterns/SKILL.md +37 -0
- package/src/skills-lib/ai-product-design/references/model-interaction-design/feedback-loops/SKILL.md +35 -0
- package/src/skills-lib/ai-product-design/references/model-interaction-design/frustration-detection/SKILL.md +91 -0
- package/src/skills-lib/ai-product-design/references/model-interaction-design/generative-ui/SKILL.md +34 -0
- package/src/skills-lib/ai-product-design/references/model-interaction-design/mixed-initiative-flow/SKILL.md +39 -0
- package/src/skills-lib/ai-product-design/references/model-interaction-design/multimodal-orchestration/SKILL.md +94 -0
- package/src/skills-lib/ai-product-design/references/model-interaction-design/progressive-disclosure/SKILL.md +33 -0
- package/src/skills-lib/ai-product-design/references/prompt-architecture/chain-of-thought-design/SKILL.md +45 -0
- package/src/skills-lib/ai-product-design/references/prompt-architecture/constraint-specification/SKILL.md +50 -0
- package/src/skills-lib/ai-product-design/references/prompt-architecture/context-engineering/SKILL.md +45 -0
- package/src/skills-lib/ai-product-design/references/prompt-architecture/few-shot-patterns/SKILL.md +47 -0
- package/src/skills-lib/ai-product-design/references/prompt-architecture/prompt-versioning/SKILL.md +42 -0
- package/src/skills-lib/ai-product-design/references/prompt-architecture/system-prompt-structure/SKILL.md +50 -0
- package/src/skills-lib/ai-product-design/references/prompt-architecture/template-design/SKILL.md +42 -0
- package/src/skills-lib/ai-product-design/references/system-behavior-shaping/behavioral-consistency/SKILL.md +36 -0
- package/src/skills-lib/ai-product-design/references/system-behavior-shaping/cultural-adaptation/SKILL.md +38 -0
- package/src/skills-lib/ai-product-design/references/system-behavior-shaping/domain-voice/SKILL.md +51 -0
- package/src/skills-lib/ai-product-design/references/system-behavior-shaping/emotional-design/SKILL.md +51 -0
- package/src/skills-lib/ai-product-design/references/system-behavior-shaping/error-personality/SKILL.md +45 -0
- package/src/skills-lib/ai-product-design/references/system-behavior-shaping/persona-architecture/SKILL.md +38 -0
- package/src/skills-lib/ai-product-design/references/system-behavior-shaping/tone-calibration/SKILL.md +39 -0
- package/src/skills-lib/algorithmic-art/LICENSE.txt +202 -0
- package/src/skills-lib/algorithmic-art/SKILL.md +405 -0
- package/src/skills-lib/algorithmic-art/templates/generator_template.js +223 -0
- package/src/skills-lib/algorithmic-art/templates/viewer.html +599 -0
- package/src/skills-lib/animate/README.md +41 -0
- package/src/skills-lib/animate/SKILL.md +179 -0
- package/src/skills-lib/animate/examples/animate-height.tsx +75 -0
- package/src/skills-lib/animate/examples/app-store-card.tsx +164 -0
- package/src/skills-lib/animate/examples/card-hover.tsx +79 -0
- package/src/skills-lib/animate/examples/feedback-popover.tsx +119 -0
- package/src/skills-lib/animate/examples/multi-step-flow.tsx +128 -0
- package/src/skills-lib/animate/examples/shared-layout.tsx +64 -0
- package/src/skills-lib/animate/examples/text-reveal.tsx +70 -0
- package/src/skills-lib/animate/examples/toast-stacking.tsx +95 -0
- package/src/skills-lib/animate/references/css-animations.md +232 -0
- package/src/skills-lib/animate/references/easing-and-timing.md +105 -0
- package/src/skills-lib/animate/references/framer-motion.md +356 -0
- package/src/skills-lib/animate/references/performance-accessibility.md +185 -0
- package/src/skills-lib/auth-and-secrets/SKILL.md +10 -0
- package/src/skills-lib/canvas-design/LICENSE.txt +202 -0
- package/src/skills-lib/canvas-design/SKILL.md +130 -0
- package/src/skills-lib/canvas-design/canvas-fonts/ArsenalSC-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/ArsenalSC-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/BigShoulders-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/BigShoulders-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/BigShoulders-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Boldonse-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Boldonse-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/BricolageGrotesque-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/BricolageGrotesque-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/BricolageGrotesque-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/CrimsonPro-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/CrimsonPro-Italic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/CrimsonPro-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/CrimsonPro-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/DMMono-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/DMMono-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/EricaOne-OFL.txt +94 -0
- package/src/skills-lib/canvas-design/canvas-fonts/EricaOne-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/GeistMono-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/GeistMono-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/GeistMono-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Gloock-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Gloock-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/IBMPlexMono-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/IBMPlexMono-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/IBMPlexMono-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/IBMPlexSerif-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/IBMPlexSerif-BoldItalic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/IBMPlexSerif-Italic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/IBMPlexSerif-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/InstrumentSans-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/InstrumentSans-BoldItalic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/InstrumentSans-Italic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/InstrumentSans-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/InstrumentSans-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/InstrumentSerif-Italic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/InstrumentSerif-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Italiana-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Italiana-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/JetBrainsMono-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/JetBrainsMono-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/JetBrainsMono-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Jura-Light.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Jura-Medium.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Jura-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/LibreBaskerville-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/LibreBaskerville-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Lora-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Lora-BoldItalic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Lora-Italic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Lora-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Lora-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/NationalPark-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/NationalPark-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/NationalPark-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/NothingYouCouldDo-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/NothingYouCouldDo-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Outfit-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Outfit-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Outfit-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/PixelifySans-Medium.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/PixelifySans-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/PoiretOne-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/PoiretOne-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/RedHatMono-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/RedHatMono-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/RedHatMono-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Silkscreen-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Silkscreen-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/SmoochSans-Medium.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/SmoochSans-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Tektur-Medium.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Tektur-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/Tektur-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/WorkSans-Bold.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/WorkSans-BoldItalic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/WorkSans-Italic.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/WorkSans-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/WorkSans-Regular.ttf +0 -0
- package/src/skills-lib/canvas-design/canvas-fonts/YoungSerif-OFL.txt +93 -0
- package/src/skills-lib/canvas-design/canvas-fonts/YoungSerif-Regular.ttf +0 -0
- package/src/skills-lib/design-motion-principles/SKILL.md +122 -0
- package/src/skills-lib/design-motion-principles/references/accessibility.md +52 -0
- package/src/skills-lib/design-motion-principles/references/anti-checklist.md +274 -0
- package/src/skills-lib/design-motion-principles/references/audit-checklist.md +137 -0
- package/src/skills-lib/design-motion-principles/references/creation-gotchas.md +36 -0
- package/src/skills-lib/design-motion-principles/references/demo-shell.html +275 -0
- package/src/skills-lib/design-motion-principles/references/emil-kowalski.md +121 -0
- package/src/skills-lib/design-motion-principles/references/jakub-krehel.md +80 -0
- package/src/skills-lib/design-motion-principles/references/jhey-tompkins.md +122 -0
- package/src/skills-lib/design-motion-principles/references/motion-cookbook.md +529 -0
- package/src/skills-lib/design-motion-principles/references/output-format.md +346 -0
- package/src/skills-lib/design-motion-principles/references/performance.md +82 -0
- package/src/skills-lib/design-motion-principles/references/report-template.html +1006 -0
- package/src/skills-lib/design-motion-principles/workflows/audit.md +203 -0
- package/src/skills-lib/design-motion-principles/workflows/create.md +87 -0
- package/src/skills-lib/web-security/SKILL.md +47 -4
- package/src/skills-lib/wizz-router/SKILL.md +4 -1
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
# Workflow: Audit Mode
|
|
2
|
+
|
|
3
|
+
Review existing motion design and produce a per-designer report. Reconnaissance first, then a full audit, then a structured report. Never apply rules blindly.
|
|
4
|
+
|
|
5
|
+
## Required Reading
|
|
6
|
+
|
|
7
|
+
Read as you reach each step (not all upfront):
|
|
8
|
+
1. `references/audit-checklist.md` — your systematic guide (STEP 2)
|
|
9
|
+
2. The weighted designer file(s) — `emil-kowalski.md`, `jakub-krehel.md`, `jhey-tompkins.md` (STEP 2)
|
|
10
|
+
3. `references/accessibility.md` — mandatory every audit (STEP 2)
|
|
11
|
+
4. `references/anti-checklist.md` — the quality gate: AI-slop motion categories + anti-patterns to flag (STEP 2)
|
|
12
|
+
5. `references/output-format.md` — the report template, HTML mode + terminal mode (STEP 3)
|
|
13
|
+
6. `references/demo-shell.html` — the demo-card template for HTML-mode per-finding demos (STEP 3)
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## STEP 1: Context Reconnaissance (DO THIS FIRST)
|
|
18
|
+
|
|
19
|
+
Before auditing any code, understand the project context.
|
|
20
|
+
|
|
21
|
+
### Gather Context
|
|
22
|
+
|
|
23
|
+
Check these sources:
|
|
24
|
+
1. **CLAUDE.md** — Any explicit context about the project's purpose or design intent
|
|
25
|
+
2. **package.json** — What type of app? (Next.js marketing site vs Electron productivity app vs mobile PWA)
|
|
26
|
+
3. **Existing animations** — Grep for `motion`, `animate`, `transition`, `@keyframes`. What durations are used? What patterns exist?
|
|
27
|
+
4. **Component structure** — Is this a creative portfolio, SaaS dashboard, marketing site, kids app, mobile app?
|
|
28
|
+
|
|
29
|
+
### Motion Gap Analysis (CRITICAL - Don't Skip)
|
|
30
|
+
|
|
31
|
+
After finding existing animations, actively search for **missing** animations. These are UI changes that happen without any transition:
|
|
32
|
+
|
|
33
|
+
**Search for conditional renders without AnimatePresence:**
|
|
34
|
+
```bash
|
|
35
|
+
# Find conditional renders: {condition && <Component />}
|
|
36
|
+
grep -n "&&\s*(" --include="*.tsx" --include="*.jsx" -r .
|
|
37
|
+
|
|
38
|
+
# Find ternary UI swaps: {condition ? <A /> : <B />}
|
|
39
|
+
grep -n "?\s*<" --include="*.tsx" --include="*.jsx" -r .
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
**For each conditional render found, check:**
|
|
43
|
+
- Is it wrapped in `<AnimatePresence>`?
|
|
44
|
+
- Does the component inside have enter/exit animations?
|
|
45
|
+
- If NO to both → this is a **motion gap** that needs fixing
|
|
46
|
+
|
|
47
|
+
**Common motion gap patterns:**
|
|
48
|
+
- `{isOpen && <Modal />}` — Modal appears/disappears instantly
|
|
49
|
+
- `{mode === "a" && <ControlsA />}` — Controls swap without transition
|
|
50
|
+
- `{isLoading ? <Spinner /> : <Content />}` — Loading state snaps
|
|
51
|
+
- `style={{ height: isExpanded ? 200 : 0 }}` — Height changes without CSS transition
|
|
52
|
+
- Inline styles with dynamic values but no `transition` property
|
|
53
|
+
|
|
54
|
+
**Where to look for motion gaps:**
|
|
55
|
+
- Inspector/settings panels with mode switches
|
|
56
|
+
- Conditional form fields
|
|
57
|
+
- Tab content areas
|
|
58
|
+
- Expandable/collapsible sections
|
|
59
|
+
- Toast/notification systems
|
|
60
|
+
- Loading states
|
|
61
|
+
- Error states
|
|
62
|
+
|
|
63
|
+
### State Your Inference
|
|
64
|
+
|
|
65
|
+
After gathering context, tell the user what you found and propose a weighting:
|
|
66
|
+
|
|
67
|
+
```
|
|
68
|
+
## Reconnaissance Complete
|
|
69
|
+
|
|
70
|
+
**Project type**: [What you inferred — e.g., "Kids educational app, mobile-first PWA"]
|
|
71
|
+
**Existing animation style**: [What you observed — e.g., "Spring animations (500-600ms), framer-motion, active:scale patterns"]
|
|
72
|
+
**Likely intent**: [Your inference — e.g., "Delight and engagement for young children"]
|
|
73
|
+
|
|
74
|
+
**Motion gaps found**: [Number] conditional renders without AnimatePresence
|
|
75
|
+
- [List the files/areas with gaps, e.g., "Settings panel mode switches", "Loading states"]
|
|
76
|
+
|
|
77
|
+
**Proposed perspective weighting**:
|
|
78
|
+
- **Primary**: [Designer] — [Why]
|
|
79
|
+
- **Secondary**: [Designer] — [Why]
|
|
80
|
+
- **Selective**: [Designer] — [When applicable]
|
|
81
|
+
|
|
82
|
+
Does this approach sound right? Should I adjust the weighting before proceeding with the full audit?
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Use the Context-to-Perspective Mapping table in SKILL.md to propose the weighting.
|
|
86
|
+
|
|
87
|
+
### Wait for User Confirmation
|
|
88
|
+
|
|
89
|
+
**STOP and wait for the user to confirm or adjust.** Do not proceed to the full audit until they respond.
|
|
90
|
+
|
|
91
|
+
If `AskUserQuestion` is available, present the decision as tappable options:
|
|
92
|
+
- **Confirm weighting** — Proceed with the proposed primary/secondary/selective designers
|
|
93
|
+
- **Adjust primary** — Swap which designer is primary (e.g., prioritize delight over restraint)
|
|
94
|
+
- **Adjust secondary** — Change the secondary lens while keeping primary
|
|
95
|
+
- **Rebuild weighting** — The project type inference was wrong; start over
|
|
96
|
+
|
|
97
|
+
Otherwise ask in plain text: "Does this weighting sound right, or should I adjust?"
|
|
98
|
+
|
|
99
|
+
If they adjust (e.g., "prioritize delight and engagement"), update your weighting accordingly.
|
|
100
|
+
|
|
101
|
+
---
|
|
102
|
+
|
|
103
|
+
## STEP 2: Full Audit (After User Confirms)
|
|
104
|
+
|
|
105
|
+
Once the user confirms, perform the complete audit by reading the reference files in this order:
|
|
106
|
+
|
|
107
|
+
### 2a. Read the Audit Checklist First
|
|
108
|
+
**Read `references/audit-checklist.md`** — Use this as your systematic guide. It provides the structured checklist of what to evaluate.
|
|
109
|
+
|
|
110
|
+
### 2b. Read Designer Files for Your Weighted Perspectives
|
|
111
|
+
Based on your context weighting, read the relevant designer files:
|
|
112
|
+
- **Read `references/emil-kowalski.md`** if Emil is primary/secondary — Restraint philosophy, frequency rules, decision frameworks
|
|
113
|
+
- **Read `references/jakub-krehel.md`** if Jakub is primary/secondary — Production polish philosophy, what to check
|
|
114
|
+
- **Read `references/jhey-tompkins.md`** if Jhey is primary/secondary — Playful experimentation philosophy, opportunities to surface
|
|
115
|
+
|
|
116
|
+
### 2c. Read Topical References as Needed
|
|
117
|
+
- **Read `references/accessibility.md`** — MANDATORY. Always check for prefers-reduced-motion. No exceptions.
|
|
118
|
+
- **Read `references/anti-checklist.md`** — Apply this as the audit's quality gate. AI-slop categories at the top (pulsing indicators, hover-scale-on-everything, stagger-spam, etc.) trigger findings; perspective-specific and general anti-patterns sit below. Each category includes a frequency heuristic so single intentional uses don't trip the gate.
|
|
119
|
+
- **Read `references/performance.md`** — If you see complex animations, check for GPU optimization issues
|
|
120
|
+
- **Read `references/motion-cookbook.md`** — Reference when making specific implementation recommendations (the recommended fix code, including the per-finding demo motion in HTML mode)
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
## STEP 3: Output Format (HTML by default)
|
|
125
|
+
|
|
126
|
+
The audit produces a **self-contained HTML report** with auto-looping CSS demos beside Critical and Important findings. **Read `references/output-format.md`** for the full template (both HTML mode and terminal mode).
|
|
127
|
+
|
|
128
|
+
### Default behavior — write and open the HTML report
|
|
129
|
+
|
|
130
|
+
1. **Resolve the write location.** The file is written to `motion-audits/{project-name}-{ISO-date}.html` in the audited project's root.
|
|
131
|
+
- **Audited project root**: run `git rev-parse --show-toplevel` from the agent's cwd. If it succeeds, use that path. If it fails (no `.git` ancestor), use cwd.
|
|
132
|
+
- **`{project-name}`**: the `name` field from `package.json` at the project root if it exists; else the `name` field from `pyproject.toml`; else the basename of the project root. Strip any scoping prefix (`@scope/pkg` → `pkg`) and sanitize to lowercase kebab-case (`[a-z0-9-]`, replace others with `-`).
|
|
133
|
+
- **`{ISO-date}`**: today's date as `YYYY-MM-DD`.
|
|
134
|
+
- Example: `<project-root>/motion-audits/my-app-2026-05-20.html`.
|
|
135
|
+
- Do not modify `.gitignore`. The user sees `motion-audits/` in `git status` and decides whether to ignore it.
|
|
136
|
+
|
|
137
|
+
2. **Read `references/demo-shell.html`** and use it as the template for each demo card. Embed one card per Critical + Important finding (Opportunities do not get demo cards). Use the suffixed-naming contract — `@keyframes motion-{n}-...` and `.demo-card-{n}__motion-target`, `{n}` = the finding's 1-indexed position across the whole report — so multiple findings don't collide on CSS names.
|
|
138
|
+
|
|
139
|
+
3. **Generate per-finding motion code** by reading the audited code, the relevant lens reference, and `references/motion-cookbook.md` for the recipe. Use the shell's 0% / 66% / 100% cadence at `animation-duration: 3s` (~2s motion, ~1s hold, loop). The `@keyframes` 100% state must match the motion-target's default static rendering so the shell's `prefers-reduced-motion` guard shows the correct final visual.
|
|
140
|
+
|
|
141
|
+
4. **Write the file.** Create `motion-audits/` if it doesn't exist. Write the complete self-contained HTML document.
|
|
142
|
+
|
|
143
|
+
5. **Open in the default browser** via OS-detected Bash dispatch:
|
|
144
|
+
|
|
145
|
+
```bash
|
|
146
|
+
path="<absolute path to the HTML file>"
|
|
147
|
+
if [ -n "$WSL_DISTRO_NAME" ] || grep -qi microsoft /proc/version 2>/dev/null; then
|
|
148
|
+
win_path=$(wslpath -w "$path")
|
|
149
|
+
cmd.exe /c start "" "$win_path" 2>/dev/null
|
|
150
|
+
else
|
|
151
|
+
case "$(uname -s)" in
|
|
152
|
+
Darwin) open "$path" ;;
|
|
153
|
+
Linux) xdg-open "$path" ;;
|
|
154
|
+
MINGW*|MSYS*|CYGWIN*) start "" "$path" ;;
|
|
155
|
+
*) echo "Unknown platform — open this file manually: $path" ;;
|
|
156
|
+
esac
|
|
157
|
+
fi
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
If the open command returns non-zero or the platform is unrecognized, print `Open this file in your browser: {absolute path}` and continue. Never abort the audit because of a failed browser-open.
|
|
161
|
+
|
|
162
|
+
6. **Print the 3-line terminal summary:**
|
|
163
|
+
|
|
164
|
+
```
|
|
165
|
+
🎬 Motion audit complete — 🔴 {N} Critical · 🟡 {N} Important · 🟢 {N} Opportunities
|
|
166
|
+
📄 Report: {absolute path}
|
|
167
|
+
💡 Want the full report inline instead? Re-run with --terminal or say "show inline".
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
### Terminal mode (flag-triggered)
|
|
171
|
+
|
|
172
|
+
When the user signals terminal mode (`--terminal` / `--inline` / `--no-html` flag, or "show the full report inline" / "skip the HTML" / "terminal only"), **skip the HTML write and the browser-open** and render the decorated-markdown report inline per `references/output-format.md` terminal mode. Do not print the 3-line summary in this case.
|
|
173
|
+
|
|
174
|
+
Do not summarize the audit content in either mode — users want full per-lens perspectives.
|
|
175
|
+
|
|
176
|
+
---
|
|
177
|
+
|
|
178
|
+
## Agent Gotchas (Self-Check Before Writing the Report)
|
|
179
|
+
|
|
180
|
+
Common failure modes during HTML report generation. Most break silently or only manifest when a second finding lands in the same report.
|
|
181
|
+
|
|
182
|
+
- **Don't reuse keyframe or class names across findings.** Each demo uses `@keyframes motion-{n}-...` and `.demo-card-{n}__motion-target` where `{n}` is the 1-indexed position across the WHOLE report. Duplicate names mean the second finding shadows the first and the first demo breaks silently.
|
|
183
|
+
- **Don't redefine the shell's CSS variables.** Per-finding code uses `var(--bg)`, `var(--fg)`, `var(--border)`, `var(--accent)`, `var(--loop-dim)`, `var(--sans)`, `var(--mono)`. Hard-coding colors or fonts breaks dark mode and typography consistency.
|
|
184
|
+
- **Don't write per-finding overrides inside the `prefers-reduced-motion` block.** The shell's guard collapses all `[class*="__motion-target"]` animations. Make the `@keyframes` 100% state match the motion-target's default static rendering instead.
|
|
185
|
+
- **Don't include demo cards for Opportunities.** Demos are reserved for Critical and Important. Surface Opportunities in text only.
|
|
186
|
+
- **Don't animate the report itself.** No entrance, scroll, or mount animations on the report chrome — only the demo cards animate. Animating the report reproduces the AI-slop patterns the audit exists to catch.
|
|
187
|
+
- **Don't write to cwd if `git rev-parse --show-toplevel` succeeds.** The report goes to `{project-root}/motion-audits/`. Only fall back to cwd when git returns nonzero.
|
|
188
|
+
- **Don't abort the audit if browser-open fails.** A non-zero exit code is a "no default handler" condition, not an error. Print the path and continue.
|
|
189
|
+
- **Don't modify `.gitignore`.** The skill never touches it. The user adds `motion-audits/` themselves if they want.
|
|
190
|
+
- **Don't summarize per-lens findings.** Each section needs its own findings + working-well items + the `Through {Designer}'s lens:` summary.
|
|
191
|
+
|
|
192
|
+
---
|
|
193
|
+
|
|
194
|
+
## Success Criteria
|
|
195
|
+
|
|
196
|
+
- [ ] Context gathered (CLAUDE.md, package.json, existing animations, structure)
|
|
197
|
+
- [ ] Motion gap analysis run — conditional renders checked for missing animation
|
|
198
|
+
- [ ] Weighting proposed and confirmed by the user
|
|
199
|
+
- [ ] Audit checklist worked through systematically
|
|
200
|
+
- [ ] Anti-checklist applied — AI-slop categories checked against the codebase
|
|
201
|
+
- [ ] Accessibility checked — prefers-reduced-motion verified (mandatory)
|
|
202
|
+
- [ ] HTML report written to `motion-audits/`, opened in browser, 3-line summary printed (or terminal-mode report rendered inline when flagged)
|
|
203
|
+
- [ ] Report follows output-format.md with full per-lens sections; Critical + Important findings have looping demo cards
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# Workflow: Create Mode
|
|
2
|
+
|
|
3
|
+
Build interactive components with purposeful motion. Light discovery, then generate against the cookbook.
|
|
4
|
+
|
|
5
|
+
## Required Reading
|
|
6
|
+
|
|
7
|
+
Read before generating:
|
|
8
|
+
1. `references/motion-cookbook.md` — the recipe source for all motion code
|
|
9
|
+
2. `references/accessibility.md` — `prefers-reduced-motion` is mandatory in everything you generate
|
|
10
|
+
3. `references/creation-gotchas.md` — Claude's failure modes when writing motion; self-check against these
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## STEP 1: Light Discovery
|
|
15
|
+
|
|
16
|
+
Establish two things — project context and designer weighting — before generating. Keep it to 1-2 questions.
|
|
17
|
+
|
|
18
|
+
### Infer First, Ask Second
|
|
19
|
+
|
|
20
|
+
Check what you can already see:
|
|
21
|
+
- **The request** — what component, what interaction, what stack (React / Framer Motion / CSS / HTML)?
|
|
22
|
+
- **CLAUDE.md, package.json, existing components** — project type and existing animation conventions (durations, easing, libraries)
|
|
23
|
+
|
|
24
|
+
### Propose Context + Weighting
|
|
25
|
+
|
|
26
|
+
Map the project type to a perspective weighting using the Context-to-Perspective Mapping table in SKILL.md. State your inference in one short block:
|
|
27
|
+
|
|
28
|
+
```
|
|
29
|
+
Building: [what — e.g. "a notification toast, React + Framer Motion"]
|
|
30
|
+
Project context: [inferred — e.g. "productivity SaaS dashboard"]
|
|
31
|
+
Proposed weighting: Primary [Designer] · Secondary [Designer]
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
If `AskUserQuestion` is available and the weighting is genuinely ambiguous, offer:
|
|
35
|
+
- **Confirm** — proceed with the proposed weighting
|
|
36
|
+
- **Adjust** — change primary/secondary designer
|
|
37
|
+
|
|
38
|
+
Otherwise ask in plain text: "Does this weighting sound right, or should I adjust?"
|
|
39
|
+
|
|
40
|
+
### Wait Gate
|
|
41
|
+
|
|
42
|
+
For non-trivial components, **confirm context before generating**. For a small, well-specified request ("add a press-scale to this button"), state the inference in one line and skip straight to STEP 3 — don't manufacture a question.
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
## STEP 2: Load Weighted Knowledge
|
|
47
|
+
|
|
48
|
+
Based on the confirmed weighting, read the relevant designer file(s):
|
|
49
|
+
- **Read `references/emil-kowalski.md`** if Emil is primary/secondary — restraint, the frequency rule, when NOT to animate
|
|
50
|
+
- **Read `references/jakub-krehel.md`** if Jakub is primary/secondary — production polish judgment, subtlety bar
|
|
51
|
+
- **Read `references/jhey-tompkins.md`** if Jhey is primary/secondary — playful expression, what motion could become
|
|
52
|
+
|
|
53
|
+
The designer files give you the **judgment** (should this animate, what feel). The cookbook gives you the **code**.
|
|
54
|
+
|
|
55
|
+
If the component involves complex or numerous animations, also read `references/performance.md`.
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
## STEP 3: Generate
|
|
60
|
+
|
|
61
|
+
Build the component. Apply, in order:
|
|
62
|
+
|
|
63
|
+
1. **The frequency gate (Emil)** — Should this animate at all? High-frequency or keyboard-initiated interactions get minimal or no motion. Decide before adding anything.
|
|
64
|
+
2. **Recipes from the cookbook** — Use the weighted designer's patterns. Enter = opacity + translateY + blur. Exit subtler than enter. Custom easing or springs, never bare `ease`.
|
|
65
|
+
3. **Accessibility** — Every animation ships with `prefers-reduced-motion` handling, in the same code. No exceptions, no follow-up.
|
|
66
|
+
4. **Performance** — Animate `transform` / `opacity` / `filter` only. Never `width` / `height` / `top` / `left`.
|
|
67
|
+
5. **Context-appropriate timing** — Emil-weighted → under 300ms. Jakub → 200-500ms polish. Jhey → whatever serves the effect.
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## STEP 4: Self-Check
|
|
72
|
+
|
|
73
|
+
Before presenting, verify the generated code against every item in `references/creation-gotchas.md`. Fix anything that matches a gotcha.
|
|
74
|
+
|
|
75
|
+
Then briefly tell the user the motion decisions you made and why — which designer weighting drove the timing, easing, and whether something was deliberately left un-animated.
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## Success Criteria
|
|
80
|
+
|
|
81
|
+
- [ ] Context and weighting confirmed (or inference stated for trivial requests)
|
|
82
|
+
- [ ] Frequency gate applied — motion is purposeful, not decorative-by-default
|
|
83
|
+
- [ ] Recipes drawn from the cookbook, matched to the designer weighting
|
|
84
|
+
- [ ] `prefers-reduced-motion` handled in all generated motion
|
|
85
|
+
- [ ] Only `transform` / `opacity` / `filter` animated
|
|
86
|
+
- [ ] Code self-checked against creation-gotchas.md
|
|
87
|
+
- [ ] Motion decisions explained to the user
|
|
@@ -2,12 +2,30 @@
|
|
|
2
2
|
name: web-security
|
|
3
3
|
description: >
|
|
4
4
|
Revisar segurança de apps web. Usar quando: auditar vulnerabilidades, antes de deploy/PR, implementar auth,
|
|
5
|
-
adicionar endpoint de API, lidar com input de usuário, configurar headers, CSP, rate limiting,
|
|
6
|
-
|
|
5
|
+
adicionar endpoint de API, lidar com input de usuário, configurar headers, CSP, rate limiting, CORS, clickjacking,
|
|
6
|
+
IDOR, SQL injection, vazamento de PII/dados na resposta, enumeração de usuário, OWASP Top 10.
|
|
7
|
+
Inclui triagem de falhas recorrentes de pentest + checklist das 8 vulnerabilidades e exemplos para Next.js + Supabase + Clerk.
|
|
7
8
|
---
|
|
8
9
|
|
|
9
10
|
# Web Security (OWASP Top 10)
|
|
10
11
|
|
|
12
|
+
## Falhas recorrentes em pentest (rankeadas por severidade)
|
|
13
|
+
|
|
14
|
+
As que mais aparecem numa auditoria, com a correção direta. Use como triagem rápida.
|
|
15
|
+
|
|
16
|
+
| # | Falha | Severidade | Correção | Onde |
|
|
17
|
+
|---|-------|-----------|----------|------|
|
|
18
|
+
| 1 | SQL Injection | 🔴 Crítica (parada de linha) | Query parametrizada / query-builder, nunca interpolar string | seção 3 |
|
|
19
|
+
| 2 | IDOR (recurso por ID sem checar dono) | 🔴 Crítica (parada de linha) | Validar posse do recurso no servidor a cada request | seção 1 |
|
|
20
|
+
| 3 | Rate limit ausente (brute force grátis) | 🟠 Alta | Limite por IP **e** por conta + lockout/CAPTCHA no login | Rate Limiting |
|
|
21
|
+
| 4 | CORS refletindo o `Origin` | 🟠 Alta | Allowlist de origens, nunca ecoar o `Origin` recebido | CORS |
|
|
22
|
+
| 5 | PII/dado demais na resposta (até hash de senha) | 🟠 Alta | Retornar só os campos necessários (allowlist de saída) | Vazamento na resposta |
|
|
23
|
+
| 6 | JWT na URL / token vivo pós-logout | 🟠 Alta | Token no header `Authorization` + revogar no logout | auth-and-secrets |
|
|
24
|
+
| 7 | Enumeração de usuário (erro revela se e-mail existe) | 🟡 Média | Mensagem genérica + resposta em tempo constante | auth-and-secrets |
|
|
25
|
+
| 8 | Clickjacking (sem header) | 🟡 Média (1 min) | `X-Frame-Options: DENY` + CSP `frame-ancestors 'none'` | Headers |
|
|
26
|
+
|
|
27
|
+
> As duas primeiras (SQLi e IDOR) são **parada de linha**: apareceu, corrige antes de qualquer coisa.
|
|
28
|
+
|
|
11
29
|
## 1. Broken Access Control
|
|
12
30
|
- Verifique permissões no servidor, nunca apenas no frontend
|
|
13
31
|
- IDOR (Insecure Direct Object Reference): valide se o usuário tem acesso ao recurso pelo ID
|
|
@@ -34,8 +52,11 @@ description: >
|
|
|
34
52
|
- Verifique Origin/Referer em requests sensíveis
|
|
35
53
|
|
|
36
54
|
## Headers de segurança obrigatórios
|
|
55
|
+
|
|
56
|
+
`X-Frame-Options: DENY` + `frame-ancestors 'none'` no CSP mata **clickjacking** (o site não pode ser embutido em `<iframe>` de outro domínio). Fix de 1 minuto, sempre presente.
|
|
57
|
+
|
|
37
58
|
```
|
|
38
|
-
Content-Security-Policy: default-src 'self'
|
|
59
|
+
Content-Security-Policy: default-src 'self'; frame-ancestors 'none'
|
|
39
60
|
X-Frame-Options: DENY
|
|
40
61
|
X-Content-Type-Options: nosniff
|
|
41
62
|
Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
|
|
@@ -75,11 +96,33 @@ async headers() {
|
|
|
75
96
|
> **Cuidado:** CSP errada quebra o app. Teste sempre em dev antes de subir. Ajuste os domínios (`script-src`, `connect-src`) conforme os serviços reais do projeto.
|
|
76
97
|
|
|
77
98
|
## Rate Limiting
|
|
78
|
-
- Login:
|
|
99
|
+
- Login: limite por IP **e** por conta (só por IP não segura brute force distribuído; só por conta não segura scan de vários e-mails)
|
|
79
100
|
- APIs públicas: limite por IP e por token
|
|
80
101
|
- Endpoints de reset de senha: especialmente restritivos
|
|
81
102
|
- Endpoints de cobrança (checkout, portal): sempre com rate limit
|
|
82
103
|
- Comparações de token/secret: use `crypto.timingSafeEqual` (nunca `!==`)
|
|
104
|
+
- Sem rate limit = brute force de graça. Somar lockout/CAPTCHA após N falhas no login
|
|
105
|
+
|
|
106
|
+
## CORS
|
|
107
|
+
- **Nunca reflita o header `Origin` recebido** de volta em `Access-Control-Allow-Origin` (isso libera qualquer site a chamar sua API com credenciais)
|
|
108
|
+
- Use uma **allowlist explícita** de origens: compare o `Origin` recebido contra a lista e só então ecoe o valor exato daquela origem
|
|
109
|
+
- `Access-Control-Allow-Credentials: true` NUNCA junto de `Access-Control-Allow-Origin: *`
|
|
110
|
+
- Padrão = negar: origem desconhecida → sem headers CORS (o browser bloqueia sozinho)
|
|
111
|
+
```ts
|
|
112
|
+
const ALLOWED = new Set(["https://app.exemplo.com", "https://exemplo.com"])
|
|
113
|
+
const origin = req.headers.get("origin")
|
|
114
|
+
if (origin && ALLOWED.has(origin)) {
|
|
115
|
+
res.headers.set("Access-Control-Allow-Origin", origin) // valor exato, nunca "*" com credentials
|
|
116
|
+
res.headers.set("Vary", "Origin")
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Vazamento de dados na resposta (over-fetch / PII)
|
|
121
|
+
- Retorne **só os campos que a tela precisa**: monte um DTO/allowlist de saída, nunca devolva a row inteira do banco
|
|
122
|
+
- NUNCA inclua `password`, `password_hash`, tokens, secrets ou colunas internas na resposta de API (é a falha mais grave da lista de PII)
|
|
123
|
+
- Supabase: `.select('id, name, email')` explícito, nunca `.select('*')` em endpoint que responde ao cliente
|
|
124
|
+
- Objeto do usuário logado: serialize por um mapper que só expõe campos públicos
|
|
125
|
+
- Erros: não vaze stack trace, SQL nem nome de tabela pro cliente. Mensagem genérica no response, detalhe só no log do servidor
|
|
83
126
|
|
|
84
127
|
---
|
|
85
128
|
|
|
@@ -125,7 +125,7 @@ Se nenhuma skill/MCP instalado mapear o pedido, primeiro **classifique o que fal
|
|
|
125
125
|
| Cloud spend, custo de infra, right-sizing, AWS/GCP billing | `cloud-and-infra` | 1 |
|
|
126
126
|
| Auth, secrets, tokens, OAuth, JWT, Clerk, permissões | `auth-and-secrets` + `security-reviewer` | 1 |
|
|
127
127
|
| Dependências, packages, vulnerabilidades, npm audit | `database-and-deps` | 2 |
|
|
128
|
-
| Segurança, XSS, CSRF,
|
|
128
|
+
| Segurança, XSS, CSRF, SQLi, IDOR, OWASP, rate limit, CORS, clickjacking, PII na resposta, enumeração de usuário, headers | `web-security` + `security-reviewer` + `auth-and-secrets` | 1 |
|
|
129
129
|
| Desktop, Electron, contextIsolation, code signing | `desktop-security` | 2 |
|
|
130
130
|
|
|
131
131
|
### Área Técnica — Código e Qualidade
|
|
@@ -142,6 +142,7 @@ Se nenhuma skill/MCP instalado mapear o pedido, primeiro **classifique o que fal
|
|
|
142
142
|
| Segunda opinião, revisão crítica adversarial | `adversarial-reviewer` | 2 |
|
|
143
143
|
| Plano técnico, breakdown de tasks, handoff de dev | `implementation-planner` | 2 |
|
|
144
144
|
| Novo projeto, iniciar app, ponto de partida, onboarding dev | `inicio-de-projeto` | 1 |
|
|
145
|
+
| Construir/melhorar agente ou produto de IA, escrever/revisar system prompt, persona/tom, guardrails, few-shot, chain-of-thought, orquestração multi-agente, avaliar saída de IA | `ai-product-design` | 1 |
|
|
145
146
|
|
|
146
147
|
### Área de Design e UI
|
|
147
148
|
|
|
@@ -153,6 +154,8 @@ Se nenhuma skill/MCP instalado mapear o pedido, primeiro **classifique o que fal
|
|
|
153
154
|
| Regras de frontend, código UI determinístico, 44 regras, audit de frontend | `impeccable` (se instalada) | 2 |
|
|
154
155
|
| Design system HTML-native, filosofia visual, review 5-dim, export MP4 | `huashu-design` (se instalada) | 2 |
|
|
155
156
|
| Animação, motion, vídeo programático em código, Remotion, Three.js, 3D, WebGL | `motion-3d-director` + `remotion-best-practices` | 1 |
|
|
157
|
+
| Craft de animação/micro-interação, easing, timing, reduced-motion, "essa animação travou/tá ruim" | `animate` + `design-motion-principles` | 2 |
|
|
158
|
+
| Gerar imagem por código: carrossel, quote card, infográfico (PNG/PDF editável), fundo/textura generativa de hero | `canvas-design` + `algorithmic-art` | 2 |
|
|
156
159
|
| Renderizar vídeo de HTML/CSS (HTML→MP4, agent-native) | CLI `hyperframes` (registry designer; `npx skills add heygen-com/hyperframes`) | 2 |
|
|
157
160
|
| **Editar/cortar vídeo** (cortes, selects, roughcut) | CLI `buttercut` (registry designer; **só Apple Silicon**, clone-and-run no projeto, deps pesadas) | 1 |
|
|
158
161
|
| Gerar vídeo-ad/imagem por IA (Sora/Veo/Kling) + publicar Meta | CLI `arcads` (registry `ads`; git clone + Arcads API key) | 1 |
|