@andespindola/crow-skills 0.1.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.
Files changed (121) hide show
  1. package/README.md +62 -0
  2. package/bin/npm-crow-skills.cjs +20 -0
  3. package/catalog.json +398 -0
  4. package/crow_skills/__init__.py +3 -0
  5. package/crow_skills/__main__.py +3 -0
  6. package/crow_skills/agents.py +45 -0
  7. package/crow_skills/cli.py +241 -0
  8. package/crow_skills/npm_entry.py +14 -0
  9. package/crow_skills/source.py +256 -0
  10. package/crow_skills/storage.py +396 -0
  11. package/docs/cli-security.md +33 -0
  12. package/docs/cli.md +138 -0
  13. package/package.json +35 -0
  14. package/release.json +607 -0
  15. package/skills/crow-accessibility/SKILL.md +33 -0
  16. package/skills/crow-agent-security/SKILL.md +33 -0
  17. package/skills/crow-api-test/SKILL.md +34 -0
  18. package/skills/crow-architecture/SKILL.md +33 -0
  19. package/skills/crow-backend/SKILL.md +33 -0
  20. package/skills/crow-behaviour/SKILL.md +70 -0
  21. package/skills/crow-behaviour/agents/openai.yaml +4 -0
  22. package/skills/crow-behaviour/references/orchestration.md +64 -0
  23. package/skills/crow-behaviour/references/quality-patterns.md +56 -0
  24. package/skills/crow-browser/SKILL.md +33 -0
  25. package/skills/crow-debug/SKILL.md +33 -0
  26. package/skills/crow-design/SKILL.md +33 -0
  27. package/skills/crow-discovery/SKILL.md +33 -0
  28. package/skills/crow-documents/SKILL.md +33 -0
  29. package/skills/crow-domain/SKILL.md +33 -0
  30. package/skills/crow-frontend/SKILL.md +33 -0
  31. package/skills/crow-growth/SKILL.md +33 -0
  32. package/skills/crow-infra/SKILL.md +38 -0
  33. package/skills/crow-infra/references/kubernetes.md +3 -0
  34. package/skills/crow-interface/NOTICE.md +20 -0
  35. package/skills/crow-interface/SKILL.md +55 -0
  36. package/skills/crow-interface/agents/impeccable_asset_producer.toml +43 -0
  37. package/skills/crow-interface/agents/impeccable_documenter.toml +28 -0
  38. package/skills/crow-interface/agents/impeccable_finish_reviewer.toml +42 -0
  39. package/skills/crow-interface/agents/impeccable_manual_edit_applier.toml +96 -0
  40. package/skills/crow-interface/agents/openai.yaml +3 -0
  41. package/skills/crow-interface/licenses/Apache-2.0.txt +191 -0
  42. package/skills/crow-interface/licenses/Impeccable-NOTICE.md +11 -0
  43. package/skills/crow-interface/licenses/modern-screenshot-MIT.txt +9 -0
  44. package/skills/crow-interface/licenses/platform-design-MIT.txt +21 -0
  45. package/skills/crow-interface/reference/adapt.md +320 -0
  46. package/skills/crow-interface/reference/adapt.native.md +60 -0
  47. package/skills/crow-interface/reference/android.md +48 -0
  48. package/skills/crow-interface/reference/animate.md +91 -0
  49. package/skills/crow-interface/reference/audit.md +139 -0
  50. package/skills/crow-interface/reference/audit.native.md +141 -0
  51. package/skills/crow-interface/reference/bolder.md +35 -0
  52. package/skills/crow-interface/reference/clarify.md +96 -0
  53. package/skills/crow-interface/reference/colorize.md +88 -0
  54. package/skills/crow-interface/reference/craft-floor.md +52 -0
  55. package/skills/crow-interface/reference/craft.md +7 -0
  56. package/skills/crow-interface/reference/critique.md +828 -0
  57. package/skills/crow-interface/reference/degraded/asset-producer.md +5 -0
  58. package/skills/crow-interface/reference/degraded/documenter.md +5 -0
  59. package/skills/crow-interface/reference/degraded/finish-reviewer.md +5 -0
  60. package/skills/crow-interface/reference/degraded/manual-edit-applier.md +5 -0
  61. package/skills/crow-interface/reference/delight.md +72 -0
  62. package/skills/crow-interface/reference/distill.md +113 -0
  63. package/skills/crow-interface/reference/doctor.md +56 -0
  64. package/skills/crow-interface/reference/document.md +418 -0
  65. package/skills/crow-interface/reference/extract.md +70 -0
  66. package/skills/crow-interface/reference/generate.md +103 -0
  67. package/skills/crow-interface/reference/harden.md +347 -0
  68. package/skills/crow-interface/reference/hooks.md +113 -0
  69. package/skills/crow-interface/reference/init.md +133 -0
  70. package/skills/crow-interface/reference/ios.md +53 -0
  71. package/skills/crow-interface/reference/layout.md +90 -0
  72. package/skills/crow-interface/reference/live-setup.md +106 -0
  73. package/skills/crow-interface/reference/live.md +329 -0
  74. package/skills/crow-interface/reference/new-work.md +149 -0
  75. package/skills/crow-interface/reference/onboard.md +236 -0
  76. package/skills/crow-interface/reference/operate.md +63 -0
  77. package/skills/crow-interface/reference/optimize.md +260 -0
  78. package/skills/crow-interface/reference/overdrive.md +129 -0
  79. package/skills/crow-interface/reference/polish.md +107 -0
  80. package/skills/crow-interface/reference/quieter.md +101 -0
  81. package/skills/crow-interface/reference/roles/asset-producer.md +38 -0
  82. package/skills/crow-interface/reference/roles/documenter.md +23 -0
  83. package/skills/crow-interface/reference/roles/finish-reviewer.md +37 -0
  84. package/skills/crow-interface/reference/roles/manual-edit-applier.md +91 -0
  85. package/skills/crow-interface/reference/routing.md +26 -0
  86. package/skills/crow-interface/reference/runtime.md +30 -0
  87. package/skills/crow-interface/reference/shape.md +61 -0
  88. package/skills/crow-interface/reference/typeset.md +86 -0
  89. package/skills/crow-interface/reference/visualize.md +48 -0
  90. package/skills/crow-interface/reference/workflow.md +53 -0
  91. package/skills/crow-interface/scripts/VERSION +1 -0
  92. package/skills/crow-interface/scripts/command-metadata.json +98 -0
  93. package/skills/crow-interface/scripts/data/font-index-failures.json +121 -0
  94. package/skills/crow-interface/scripts/data/font-index.json +1 -0
  95. package/skills/crow-interface/scripts/engine-manifest.json +13 -0
  96. package/skills/crow-interface/scripts/impeccable +106 -0
  97. package/skills/crow-interface/scripts/impeccable.cmd +3 -0
  98. package/skills/crow-interface/scripts/live-browser-dom.js +167 -0
  99. package/skills/crow-interface/scripts/live-browser-ignores.js +242 -0
  100. package/skills/crow-interface/scripts/live-browser-session.js +144 -0
  101. package/skills/crow-interface/scripts/live-browser.js +13510 -0
  102. package/skills/crow-interface/scripts/modern-screenshot.umd.js +14 -0
  103. package/skills/crow-media/SKILL.md +33 -0
  104. package/skills/crow-native-mobile/SKILL.md +33 -0
  105. package/skills/crow-observe/SKILL.md +33 -0
  106. package/skills/crow-performance/SKILL.md +38 -0
  107. package/skills/crow-performance/references/measurement.md +3 -0
  108. package/skills/crow-platform/SKILL.md +33 -0
  109. package/skills/crow-postgres/SKILL.md +33 -0
  110. package/skills/crow-product-leadership/SKILL.md +33 -0
  111. package/skills/crow-qa/SKILL.md +34 -0
  112. package/skills/crow-release/SKILL.md +35 -0
  113. package/skills/crow-reverse/SKILL.md +33 -0
  114. package/skills/crow-secrets/SKILL.md +33 -0
  115. package/skills/crow-security-review/SKILL.md +33 -0
  116. package/skills/crow-security-scan/SKILL.md +33 -0
  117. package/skills/crow-security-test/SKILL.md +33 -0
  118. package/skills/crow-seo/SKILL.md +33 -0
  119. package/skills/crow-skill-author/SKILL.md +34 -0
  120. package/skills/crow-spec/SKILL.md +33 -0
  121. package/skills/crow-threat-model/SKILL.md +33 -0
@@ -0,0 +1,320 @@
1
+ <!-- Modified for Crow, 2026-10-20: portable paths and capability-specific corrections. Shared flow: workflow.md. Derived from Impeccable, Copyright 2025 Paul Bakaus, Apache-2.0. -->
2
+
3
+ > **Additional context needed**: target platforms/devices and usage contexts.
4
+
5
+ Adapt an existing design to a different context: another screen size, device, platform, or use case. The trap is treating adaptation as scaling. The job is rethinking the experience for the new context.
6
+
7
+ **Web only** (mobile web included). Native platforms (`ios` / `android` / `adaptive`) route to [adapt.native.md](adapt.native.md) instead; if the project is native, switch to it now.
8
+
9
+ ---
10
+
11
+ ## Assess Adaptation Challenge
12
+
13
+ Understand what needs adaptation and why:
14
+
15
+ 1. **Identify the source context**:
16
+ - What was it designed for originally? (Desktop web? Mobile app?)
17
+ - What assumptions were made? (Large screen? Mouse input? Fast connection?)
18
+ - What works well in current context?
19
+
20
+ 2. **Understand target context**:
21
+ - **Device**: Mobile, tablet, desktop, TV, watch, print?
22
+ - **Input method**: Touch, mouse, keyboard, voice, gamepad?
23
+ - **Screen constraints**: Size, resolution, orientation?
24
+ - **Connection**: Fast wifi, slow 3G, offline?
25
+ - **Usage context**: On-the-go vs desk, quick glance vs focused reading?
26
+ - **User expectations**: What do users expect on this platform?
27
+
28
+ 3. **Identify adaptation challenges**:
29
+ - What won't fit? (Content, navigation, features)
30
+ - What won't work? (Hover states on touch, tiny touch targets)
31
+ - What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)
32
+
33
+ **CRITICAL**: Adaptation is rethinking the experience for the new context, not scaling pixels.
34
+
35
+ ## Plan Adaptation Strategy
36
+
37
+ Create context-appropriate strategy:
38
+
39
+ ### Mobile Adaptation (Desktop → Mobile)
40
+
41
+ **Layout Strategy**:
42
+ - Single column instead of multi-column
43
+ - Vertical stacking instead of side-by-side
44
+ - Full-width components instead of fixed widths
45
+ - Bottom navigation instead of top/side navigation
46
+
47
+ **Interaction Strategy**:
48
+ - Touch targets 44x44px minimum (not hover-dependent)
49
+ - Swipe gestures where appropriate (lists, carousels)
50
+ - Bottom sheets instead of dropdowns
51
+ - Thumbs-first design (controls within thumb reach)
52
+ - Larger tap areas with more spacing
53
+
54
+ **Content Strategy**:
55
+ - Progressive disclosure (don't show everything at once)
56
+ - Prioritize primary content (secondary content in tabs/accordions)
57
+ - Shorter text (more concise)
58
+ - Larger text (16px minimum)
59
+
60
+ **Navigation Strategy**:
61
+ - Hamburger menu or bottom navigation
62
+ - Reduce navigation complexity
63
+ - Sticky headers for context
64
+ - Back button in navigation flow
65
+
66
+ ### Tablet Adaptation (Hybrid Approach)
67
+
68
+ **Layout Strategy**:
69
+ - Two-column layouts (not single or three-column)
70
+ - Side panels for secondary content
71
+ - Master-detail views (list + detail)
72
+ - Adaptive based on orientation (portrait vs landscape)
73
+
74
+ **Interaction Strategy**:
75
+ - Support both touch and pointer
76
+ - Touch targets 44x44px but allow denser layouts than phone
77
+ - Side navigation drawers
78
+ - Multi-column forms where appropriate
79
+
80
+ ### Desktop Adaptation (Mobile → Desktop)
81
+
82
+ **Layout Strategy**:
83
+ - Multi-column layouts (use horizontal space)
84
+ - Side navigation always visible
85
+ - Multiple information panels simultaneously
86
+ - Fixed widths with max-width constraints (don't stretch to 4K)
87
+
88
+ **Interaction Strategy**:
89
+ - Hover states for additional information
90
+ - Keyboard shortcuts
91
+ - Right-click context menus
92
+ - Drag and drop where helpful
93
+ - Multi-select with Shift/Cmd
94
+
95
+ **Content Strategy**:
96
+ - Show more information upfront (less progressive disclosure)
97
+ - Data tables with many columns
98
+ - Richer visualizations
99
+ - More detailed descriptions
100
+
101
+ ### Print Adaptation (Screen → Print)
102
+
103
+ **Layout Strategy**:
104
+ - Page breaks at logical points
105
+ - Remove navigation, footer, interactive elements
106
+ - Black and white (or limited color)
107
+ - Proper margins for binding
108
+
109
+ **Content Strategy**:
110
+ - Expand shortened content (show full URLs, hidden sections)
111
+ - Add page numbers, headers, footers
112
+ - Include metadata (print date, page title)
113
+ - Convert charts to print-friendly versions
114
+
115
+ ### Email Adaptation (Web → Email)
116
+
117
+ **Layout Strategy**:
118
+ - Narrow width (600px max)
119
+ - Single column only
120
+ - Inline CSS (no external stylesheets)
121
+ - Table-based layouts (for email client compatibility)
122
+
123
+ **Interaction Strategy**:
124
+ - Large, obvious CTAs (buttons not text links)
125
+ - No hover states (not reliable)
126
+ - Deep links to web app for complex interactions
127
+
128
+ ## Implement Adaptations
129
+
130
+ Apply changes systematically:
131
+
132
+ ### Responsive Breakpoints
133
+
134
+ Choose appropriate breakpoints:
135
+ - Mobile: 320px-767px
136
+ - Tablet: 768px-1023px
137
+ - Desktop: 1024px+
138
+ - Or content-driven breakpoints (where design breaks)
139
+
140
+ ### Layout Adaptation Techniques
141
+
142
+ - **CSS Grid/Flexbox**: Reflow layouts automatically
143
+ - **Container Queries**: Adapt based on container, not viewport
144
+ - **`clamp()`**: Fluid sizing between min and max
145
+ - **Media queries**: Different styles for different contexts
146
+ - **Display properties**: Show/hide elements per context
147
+
148
+ ### Touch Adaptation
149
+
150
+ - Increase touch target sizes (44x44px minimum)
151
+ - Add more spacing between interactive elements
152
+ - Remove hover-dependent interactions
153
+ - Add touch feedback (ripples, highlights)
154
+ - Consider thumb zones (easier to reach bottom than top)
155
+
156
+ ### Content Adaptation
157
+
158
+ - Use `display: none` sparingly (still downloads)
159
+ - Progressive enhancement (core content first, enhancements on larger screens)
160
+ - Lazy loading for off-screen content
161
+ - Responsive images (`srcset`, `picture` element)
162
+
163
+ ### Navigation Adaptation
164
+
165
+ - Transform complex nav to hamburger/drawer on mobile
166
+ - Bottom nav bar for mobile apps
167
+ - Persistent side navigation on desktop
168
+ - Breadcrumbs on smaller screens for context
169
+
170
+ **IMPORTANT**: Test on real devices. Device emulation in DevTools is helpful but not perfect.
171
+
172
+ **NEVER**:
173
+ - Hide core functionality on mobile (if it matters, make it work)
174
+ - Assume desktop = powerful device (consider accessibility, older machines)
175
+ - Use different information architecture across contexts (confusing)
176
+ - Break user expectations for platform (mobile users expect mobile patterns)
177
+ - Forget landscape orientation on mobile/tablet
178
+ - Use generic breakpoints blindly (use content-driven breakpoints)
179
+ - Ignore touch on desktop (many desktop devices have touch)
180
+
181
+ ## Verify Adaptations
182
+
183
+ Test thoroughly across contexts:
184
+
185
+ - **Real devices**: Test on actual phones, tablets, desktops
186
+ - **Different orientations**: Portrait and landscape
187
+ - **Different browsers**: Safari, Chrome, Firefox, Edge
188
+ - **Different OS**: iOS, Android, Windows, macOS
189
+ - **Different input methods**: Touch, mouse, keyboard
190
+ - **Edge cases**: Very small screens (320px), very large screens (4K)
191
+ - **Slow connections**: Test on throttled network
192
+
193
+ **Custom controls** (sliders, drag surfaces, scrollable control strips): a before/after slider can pass every width check above and still refuse to drag on iOS, so exercise each one in scope in the same batched round as the checks above:
194
+
195
+ - **Primary gesture**: Tap it and confirm it responds as designed, then drag it with the target input method; the drag must complete, not just start
196
+ - **Scroll across it**: A swipe along the page's scroll axis across the control scrolls the page or container without activating it; a drag that starts on the control along its axis moves the control, not the page. Neither failure throws an error, so try both
197
+ - **Evidence**: Say what produced the evidence: an emulated viewport, synthesized touch input through a browser tool, which engine ran it (Chromium is not Safari), or a physical device. Screenshots and resized viewports verify layout, never a gesture. Name what stayed untested and move on; unreachable hardware is a reported gap, not a blocker
198
+
199
+ When the adaptation feels native to each context, hand off to `$crow-interface polish` for the final pass.
200
+
201
+ ---
202
+
203
+ ## Reference Material
204
+
205
+ The sections below were previously `responsive-design.md` and live inline now so the adapt flow has its deep responsive reference in one place.
206
+
207
+ ### Responsive Design
208
+
209
+ #### Mobile-First: Write It Right
210
+
211
+ Start with base styles for mobile, use `min-width` queries to layer complexity. Desktop-first (`max-width`) means mobile loads unnecessary styles first.
212
+
213
+ #### Breakpoints: Content-Driven
214
+
215
+ Don't chase device sizes; let content tell you where to break. Start narrow, stretch until design breaks, add breakpoint there. Three breakpoints usually suffice (640, 768, 1024px). Use `clamp()` for fluid values without breakpoints.
216
+
217
+ #### Detect Input Method, Not Just Screen Size
218
+
219
+ **Screen size doesn't tell you input method.** A laptop with touchscreen, a tablet with keyboard. Use pointer and hover queries:
220
+
221
+ ```css
222
+ /* Fine pointer (mouse, trackpad) */
223
+ @media (pointer: fine) {
224
+ .button { padding: 8px 16px; }
225
+ }
226
+
227
+ /* Coarse pointer (touch, stylus) */
228
+ @media (pointer: coarse) {
229
+ .button { padding: 12px 20px; } /* Larger touch target */
230
+ }
231
+
232
+ /* Device supports hover */
233
+ @media (hover: hover) {
234
+ .card:hover { transform: translateY(-2px); }
235
+ }
236
+
237
+ /* Device doesn't support hover (touch) */
238
+ @media (hover: none) {
239
+ .card { /* No hover state - use active instead */ }
240
+ }
241
+ ```
242
+
243
+ **Critical**: Don't rely on hover for functionality. Touch users can't hover.
244
+
245
+ #### Safe Areas: Handle the Notch
246
+
247
+ Modern phones have notches, rounded corners, and home indicators. Use `env()`:
248
+
249
+ ```css
250
+ body {
251
+ padding-top: env(safe-area-inset-top);
252
+ padding-bottom: env(safe-area-inset-bottom);
253
+ padding-left: env(safe-area-inset-left);
254
+ padding-right: env(safe-area-inset-right);
255
+ }
256
+
257
+ /* With fallback */
258
+ .footer {
259
+ padding-bottom: max(1rem, env(safe-area-inset-bottom));
260
+ }
261
+ ```
262
+
263
+ **Enable viewport-fit** in your meta tag:
264
+ ```html
265
+ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
266
+ ```
267
+
268
+ #### Responsive Images: Get It Right
269
+
270
+ ##### srcset with Width Descriptors
271
+
272
+ ```html
273
+ <img
274
+ src="hero-800.jpg"
275
+ srcset="
276
+ hero-400.jpg 400w,
277
+ hero-800.jpg 800w,
278
+ hero-1200.jpg 1200w
279
+ "
280
+ sizes="(max-width: 768px) 100vw, 50vw"
281
+ alt="Hero image"
282
+ >
283
+ ```
284
+
285
+ **How it works**:
286
+ - `srcset` lists available images with their actual widths (`w` descriptors)
287
+ - `sizes` tells the browser how wide the image will display
288
+ - Browser picks the best file based on viewport width AND device pixel ratio
289
+
290
+ ##### Picture Element for Art Direction
291
+
292
+ When you need different crops/compositions (not just resolutions):
293
+
294
+ ```html
295
+ <picture>
296
+ <source media="(min-width: 768px)" srcset="wide.jpg">
297
+ <source media="(max-width: 767px)" srcset="tall.jpg">
298
+ <img src="fallback.jpg" alt="...">
299
+ </picture>
300
+ ```
301
+
302
+ #### Layout Adaptation Patterns
303
+
304
+ **Navigation**: Three stages: hamburger + drawer on mobile, horizontal compact on tablet, full with labels on desktop. **Tables**: Transform to cards on mobile using `display: block` and `data-label` attributes. **Progressive disclosure**: Use `<details>/<summary>` for content that can collapse on mobile.
305
+
306
+ #### Testing: Don't Trust DevTools Alone
307
+
308
+ DevTools device emulation is useful for layout but misses:
309
+
310
+ - Actual touch interactions
311
+ - Real CPU/memory constraints
312
+ - Network latency patterns
313
+ - Font rendering differences
314
+ - Browser chrome/keyboard appearances
315
+
316
+ **Test on at least**: One real iPhone, one real Android, a tablet if relevant. Cheap Android phones reveal performance issues you'll never see on simulators.
317
+
318
+ ---
319
+
320
+ **Avoid**: Desktop-first design. Device detection instead of feature detection. Separate mobile/desktop codebases. Ignoring tablet and landscape. Assuming all mobile devices are powerful.
@@ -0,0 +1,60 @@
1
+ <!-- Modified for Crow, 2026-10-20: portable paths and capability-specific corrections. Shared flow: workflow.md. Derived from Impeccable, Copyright 2025 Paul Bakaus, Apache-2.0. -->
2
+
3
+ > **Additional context needed**: target platforms/devices and usage contexts.
4
+
5
+ Adapt an existing **native** design (`ios` / `android` / `adaptive`) to a different context: another device class, orientation, platform, or origin. The trap is treating adaptation as scaling. The job is rethinking the experience for the new context, inside the platform conventions of [ios.md](ios.md) / [android.md](android.md); read the target platform's reference before planning if Setup hasn't already.
6
+
7
+ ## Assess Adaptation Challenge
8
+
9
+ 1. **Source context**: what was it designed for, and what assumptions did it make? (Phone-only? Portrait-only? One platform's idioms? A website?)
10
+ 2. **Target context**: which device class (phone, tablet, foldable), orientation, platform, and usage posture (one-handed on the go vs two-handed at rest)?
11
+ 3. **What breaks**: navigation that doesn't fit the target, layouts that stretch instead of restructure, gestures or controls that don't exist there?
12
+
13
+ ## Adaptation Strategies
14
+
15
+ ### Phone → Tablet (iPad / large screens)
16
+
17
+ - **Restructure, don't stretch.** A scaled-up phone UI on a tablet is the failure mode. Use size classes (iOS) / window size classes (Android) to switch structure.
18
+ - **Navigation changes shape**: tab bar stays or becomes a sidebar on iPad; Android navigation bar becomes a rail or drawer on expanded width.
19
+ - **Use the width**: split view / master-detail (list + detail side by side), multi-column grids, popovers where phones used sheets.
20
+ - **Multitasking is a size, not an edge case**: iPad Split View and Android multi-window can hand you a phone-width window on a tablet; size-class-driven layout handles both for free.
21
+
22
+ ### Orientation & foldables
23
+
24
+ - Landscape restructures (side-by-side panes, repositioned controls); never clip or letterbox. Lock orientation only when the task truly demands it.
25
+ - Foldables (Android): react to posture and hinge via window size classes; test folded, unfolded, and tabletop.
26
+
27
+ ### Platform → platform (iOS ↔ Android)
28
+
29
+ Translate idioms; never transplant them:
30
+
31
+ | iOS | Android |
32
+ |---|---|
33
+ | Tab bar | Navigation bar / rail / drawer |
34
+ | Edge-swipe back, back chevron | Predictive Back gesture / button |
35
+ | Switch, segmented control, system pickers | Material switch, chips, Material pickers |
36
+ | Action sheet | Bottom sheet / Material dialog |
37
+ | SF Symbols, SF Pro, Dynamic Type | Material Symbols, Roboto, sp scaling |
38
+ | Semantic system colors, materials | Material color roles, tonal elevation |
39
+ | System push/sheet transitions | Container transform, shared-axis, fade-through |
40
+
41
+ Rebuild navigation and controls in the target's vocabulary; carry over the brand's expressive layer (palette intent, type accent, motion personality) through the target's theming system.
42
+
43
+ ### Web → native (porting a website or web app)
44
+
45
+ Reconform, don't reflow. Replace web navigation with the platform's model, HTML-shaped controls with platform controls, hover affordances with touch-first ones, and px-based type with Dynamic Type / sp. Then treat the result to the full platform reference; the slop test there is the acceptance bar.
46
+
47
+ ## Implement & Verify
48
+
49
+ - Drive structure from **size classes / window size classes**, never from device-model checks.
50
+ - Respect safe areas and window insets in every new configuration (notch, hinge, status bar, keyboard).
51
+ - Test on simulators for breadth, then real hardware for truth: at least one phone and one tablet per shipped platform, both orientations, split-screen where supported.
52
+
53
+ When the adaptation feels native to each context, hand off to `$crow-interface polish` for the final pass.
54
+
55
+ **NEVER**:
56
+ - Ship a stretched phone layout on a tablet
57
+ - Port one platform's controls or navigation onto the other
58
+ - Hide core functionality on smaller devices (if it matters, make it work)
59
+ - Lock orientation to dodge a layout bug
60
+ - Trust simulators alone (posture, gestures, and performance need hardware)
@@ -0,0 +1,48 @@
1
+ <!-- Modified for Crow, 2026-10-20: portable paths and capability-specific corrections. Shared flow: workflow.md. Derived from Impeccable, Copyright 2025 Paul Bakaus, Apache-2.0. -->
2
+
3
+ # Android platform
4
+
5
+ For native Android apps: Jetpack Compose, Android Views, React Native, Expo, Flutter shipping to Android hardware.
6
+
7
+ On native, the visitor mode narrows what expression may override. Material Design 3 governs structure, navigation, and interaction in every mode; brand expresses through Material's theming (color roles, type scale, shape, motion). A Material-everywhere cross-platform app that also ships to iPhone still owes iOS its OS guarantees on that hardware: safe-area insets, Reduce Motion, edge-swipe back.
8
+
9
+ ## The Android slop test
10
+
11
+ Would a fluent Android user trust this app, or trip on off-spec components? The most common tell is an iOS app wearing Android's skin: a bottom-only navigation copied from iPhone, a back arrow that ignores the system Back gesture, Cupertino-shaped switches and dialogs. Material 3 is the rulebook; follow its components and theme the brand through it.
12
+
13
+ ## Layout & structure
14
+
15
+ - **Material navigation, matched to size.** Navigation bar (bottom, 3–5 destinations) on compact width; navigation rail or drawer on expanded width. Never ship a phone bottom-bar untouched on a tablet.
16
+ - **System Back always works.** Honor the predictive Back gesture and Back button; never trap the user or hijack the gesture.
17
+ - **Edge-to-edge with window insets.** Apply the status bar, navigation bar, display cutout, and IME insets so content never hides behind system bars or the keyboard.
18
+ - **Top app bar for screen context**; pair with a FAB when the screen has a single primary action.
19
+
20
+ ## Touch targets
21
+
22
+ - **48×48 dp minimum** for every touch target, with at least 8 dp between them.
23
+
24
+ ## Typography
25
+
26
+ - **Material type scale.** Display, Headline, Title, Body, Label roles (large/medium/small each). Map text to roles; never hand-pick sizes per screen.
27
+ - **Roboto is the system face**; theme a brand face in through the type scale, keeping body, labels, and controls legible and consistent.
28
+ - **sp units, never fixed px**, so type follows the system font-size setting.
29
+
30
+ ## Color & theming
31
+
32
+ - **Material color roles** (primary, on-primary, surface, surface-variant, secondary-container, outline, error). Role tokens resolve light/dark and contrast variants automatically; raw hex breaks there.
33
+ - **Dynamic Color (Material You)** where it fits: derive the scheme from the user's wallpaper on Android 12+, with a static fallback.
34
+ - **Dark theme is a first-class scheme.** Design and test it; never a quick invert.
35
+ - **Tonal elevation.** Convey elevation through the standard surface tonal levels (plus shadow where appropriate); no arbitrary drop shadows.
36
+
37
+ ## Components & motion
38
+
39
+ - **Material components.** Buttons (filled / tonal / outlined / text), FAB, switches, chips, snackbars, bottom sheets, Material dialogs, navigation bar/rail/drawer. Never port iOS controls or invent equivalents.
40
+ - **One FAB, one primary action.** Never stack FABs or spend one on a secondary task.
41
+ - **Snackbars for transient feedback** (actionable when useful, never a toast for that); dialogs only for decisions that must interrupt.
42
+ - **Material motion patterns.** Container transform, shared-axis, fade-through, with standard easing and durations; honor the system Remove animations setting with a crossfade or instant cut.
43
+
44
+ ## Verifying the build
45
+
46
+ - **Screenshots come from the emulator or a connected device, never a browser.** Build and install, then capture with `adb exec-out screencap -p > <path>` (pick a device with `adb -s <serial>` when several are attached). Capture every device class the app ships to, at least one phone and, when tablets are a target, one tablet, and write the files where the review flow expects them.
47
+ - **Dark theme and font scale belong in the pass.** `adb shell cmd uimode night yes` flips the theme; `adb shell settings put system font_scale 1.3` (restore `1.0` after) catches the clipped labels a fixed layout hides; with several targets attached, the capture's `-s <serial>` goes on these commands too.
48
+ - **Emulators give breadth; gestures, refresh rates, and performance need hardware.** Say which one produced the evidence.
@@ -0,0 +1,91 @@
1
+ <!-- Modified for Crow, 2026-10-20: portable paths and capability-specific corrections. Shared flow: workflow.md. Derived from Impeccable, Copyright 2025 Paul Bakaus, Apache-2.0. -->
2
+
3
+ > **Additional context needed**: performance constraints.
4
+
5
+ Use motion to explain state, relationship, and hierarchy, or to create one authored moment the surface has earned. Decoration without purpose is animation debt.
6
+
7
+ ---
8
+
9
+ ## Visitor mode
10
+
11
+ - **Persuade + Experience:** motion may carry the voice. Prefer one rehearsed focal sequence to repeated section reveals.
12
+ - **Operate + Read:** motion serves feedback, state, and continuity. Keep routine transitions fast and do not make users wait through page-load choreography.
13
+ - **Native (`ios` / `android` / `adaptive`):** follow the Motion section of [ios.md](ios.md) or [android.md](android.md), including the platform's Reduce Motion behavior. Do not apply the web tooling below.
14
+
15
+ ## Find the job
16
+
17
+ Inspect the existing motion language, interaction states, target devices, and performance budget. Find only the places where motion would:
18
+
19
+ - acknowledge an action;
20
+ - make a state change or spatial relationship legible;
21
+ - preserve continuity through navigation or layout change;
22
+ - direct attention at a meaningful moment;
23
+ - embody the selected visual world.
24
+
25
+ Ask only when a material constraint cannot be inferred. Do not animate a static area merely because it exists.
26
+
27
+ ## Set the motion thesis
28
+
29
+ Write a short plan before implementation:
30
+
31
+ - **Focal moment:** the one sequence or interaction that deserves authorship, if any.
32
+ - **Continuity:** the state, layout, or navigation changes that need explanation.
33
+ - **Feedback:** the controls and outcomes that need acknowledgment.
34
+ - **Budget:** which effects may be expensive and how often they run.
35
+
36
+ The focal moment must come from this product and surface concept. A generic fade-and-rise, hover lift, parallax layer, or scroll reveal is not a thesis.
37
+
38
+ ## Choose material by meaning
39
+
40
+ Transform and opacity are reliable foundations, not the entire palette. Choose properties for what the transition communicates:
41
+
42
+ - **Continuity and relationship:** shared-element motion, FLIP-style transforms, view transitions, or deliberate spatial movement.
43
+ - **Focus and depth:** bounded blur, filter, backdrop, light, or shadow changes.
44
+ - **Reveal and composition:** masks, clip paths, cropping, or controlled occlusion.
45
+ - **Material and energy:** color, gradient position, texture, distortion, or shader effects when the world and runtime support them.
46
+ - **State and feedback:** the smallest change that makes cause and result unmistakable.
47
+
48
+ Do not stack techniques for spectacle. One strong material idea, carried through the focal sequence and quiet supporting states, is usually enough.
49
+
50
+ Sibling stagger is appropriate when a list appears as a list. Cap the total delay, and never reinterpret every scrolled section as a staggered list.
51
+
52
+ ## Timing and easing
53
+
54
+ Timing should express distance and consequence:
55
+
56
+ | Duration | Typical use |
57
+ |---|---|
58
+ | 100–150 ms | immediate feedback |
59
+ | 150–300 ms | routine state change |
60
+ | 300–500 ms | layout, overlay, or view transition |
61
+ | 500–800 ms | a deliberately authored focal entrance |
62
+
63
+ Exit faster than entrance. Use natural deceleration such as `cubic-bezier(0.16, 1, 0.3, 1)` for confident arrivals; do not use bounce or elastic curves by reflex. Long feedback feels like latency.
64
+
65
+ ## Implement to the runtime
66
+
67
+ - Use CSS transitions and keyframes for declarative state and bounded sequences.
68
+ - Use Web Animations API or the project's existing motion library for interruption, sequencing, and dynamic values.
69
+ - Use View Transitions or shared-element techniques when continuity across states is the point.
70
+ - Use scroll-driven motion only when the scroll relationship itself carries meaning, with a robust fallback.
71
+ - Do not add a dependency for an effect the existing stack can express cleanly.
72
+
73
+ Keep content visible in the default state so failed scripts do not hide the page. Avoid casually animating layout-driving properties such as `width`, `height`, `top`, `left`, and margins; use FLIP, transforms, or grid techniques when appropriate. Bound blur, filter, shadow, canvas, and shader work to isolated regions. Apply `will-change` only during known animation. Measure on target viewports and devices rather than assuming transform means fast.
74
+
75
+ ## Accessibility and control
76
+
77
+ Respect autoplay and sound preferences. Any nonessential loop must stop when offscreen or hidden.
78
+
79
+ Every web animation needs a `prefers-reduced-motion` path with an intentional alternative. Remove or reduce spatial movement while preserving opacity, color, and state transitions that carry meaning. Reduced motion means fewer and gentler animations, not disabling all motion; feedback that confirms an action should remain legible.
80
+
81
+ ## Verify
82
+
83
+ - The focal motion is specific to the selected world and surface.
84
+ - Every supporting animation explains feedback, state, or relationship.
85
+ - Interruption and repeated use behave correctly.
86
+ - Desktop, mobile, and keyboard paths remain usable.
87
+ - The `prefers-reduced-motion` path reduces movement without erasing meaningful feedback or state changes.
88
+ - Expensive effects stay smooth on the target device.
89
+ - Removing an animation would lose meaning or authored character, not merely decoration.
90
+
91
+ When motion earns its place, hand off to `$crow-interface polish` for the final pass.
@@ -0,0 +1,139 @@
1
+ <!-- Modified for Crow, 2026-10-20: portable paths and capability-specific corrections. Shared flow: workflow.md. Derived from Impeccable, Copyright 2025 Paul Bakaus, Apache-2.0. -->
2
+
3
+ Run systematic **technical** quality checks and generate a comprehensive report. Don't fix issues; document them for other commands to address.
4
+
5
+ This is a code-level audit, not a design critique. Check what's measurable and verifiable in the implementation.
6
+
7
+ **Web only.** Native platforms (`ios` / `android` / `adaptive`) route to [audit.native.md](audit.native.md) instead; if the project is native, switch to it now.
8
+
9
+ ## Diagnostic Scan
10
+
11
+ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below.
12
+
13
+ ### 1. Accessibility (A11y)
14
+
15
+ **Check for**:
16
+ - **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA)
17
+ - **Motion sensitivity**: `prefers-reduced-motion` needs an intentional alternative that preserves state change and hierarchy; flag a global `0.01ms` kill that destroys useful feedback, flashing above threshold, and motion that blocks focus, reading, or task completion
18
+ - **Missing ARIA**: Interactive elements without proper roles, labels, or states
19
+ - **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps
20
+ - **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons
21
+ - **Alt text**: Missing or poor image descriptions
22
+ - **Form issues**: Inputs without labels, poor error messaging, missing required indicators
23
+
24
+ **Score 0-4**: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA)
25
+
26
+ ### 2. Performance
27
+
28
+ **Check for**:
29
+ - **Layout thrashing**: Reading/writing layout properties in loops
30
+ - **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames
31
+ - **Missing optimization**: Images without lazy loading, unoptimized assets
32
+ - **will-change overuse**: `will-change` applied broadly or left on at rest (it is a targeted hint for known expensive animations, not a baseline requirement)
33
+ - **Bundle size**: Unnecessary imports, unused dependencies
34
+ - **Render performance**: Unnecessary re-renders, missing memoization
35
+
36
+ **Score 0-4**: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized)
37
+
38
+ ### 3. Theming
39
+
40
+ **Check for**:
41
+ - **Hard-coded colors**: Colors not using design tokens
42
+ - **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme
43
+ - **Inconsistent tokens**: Using wrong tokens, mixing token types
44
+ - **Theme switching issues**: Values that don't update on theme change
45
+
46
+ **Score 0-4**: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly)
47
+
48
+ ### 4. Responsive Design
49
+
50
+ **Check for**:
51
+ - **Fixed widths**: Hard-coded widths that break on mobile
52
+ - **Touch targets**: Interactive elements < 44x44px
53
+ - **Broken touch interaction**: Custom sliders, drag surfaces, and scrollable control strips whose primary gesture fails under touch, that swallow page scroll or lose the drag to it, or that stay stuck after an interrupted gesture. Code tells: mouse-only handlers, no `touch-action` on a pointer-event drag surface, drag state that nothing clears on cancel, lost capture, or blur. Exercise the gesture when a browser tool can synthesize touch (a rendered viewport proves layout, not the gesture), then say what produced the evidence (emulated viewport, synthesized touch, which engine, physical device) and what stayed untested
54
+ - **Horizontal scroll**: Content overflow on narrow viewports
55
+ - **Text scaling**: Layouts that break when text size increases
56
+ - **Missing breakpoints**: No mobile/tablet variants
57
+
58
+ **Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets, gestures work under touch)
59
+
60
+ ### 5. Implementation Integrity (CRITICAL)
61
+
62
+ Run the bundled detector and verify each finding in context. Look for repeated implementation shortcuts, design-system drift, misleading or decorative content, and structure that is interchangeable with an unrelated product. Keep deterministic findings separate from visual judgment and call out false positives.
63
+
64
+ **Score 0-4**: 0=systemic drift, 1=major repeated failures, 2=several verified issues, 3=minor isolated issues, 4=coherent and intentional
65
+
66
+ ## Generate Report
67
+
68
+ ### Audit Health Score
69
+
70
+ | # | Dimension | Score | Key Finding |
71
+ |---|-----------|-------|-------------|
72
+ | 1 | Accessibility | ? | [most critical a11y issue or "--"] |
73
+ | 2 | Performance | ? | |
74
+ | 3 | Responsive Design | ? | |
75
+ | 4 | Theming | ? | |
76
+ | 5 | Implementation Integrity | ? | |
77
+ | **Total** | | **??/20** | **[Rating band]** |
78
+
79
+ **Rating bands**: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues)
80
+
81
+ ### Implementation Integrity Verdict
82
+ **Start here.** Pass/fail: does the implementation express a coherent product-specific system? Cite verified evidence and detector findings.
83
+
84
+ ### Executive Summary
85
+ - Audit Health Score: **??/20** ([rating band])
86
+ - Total issues found (count by severity: P0/P1/P2/P3)
87
+ - Top 3-5 critical issues
88
+ - Recommended next steps
89
+
90
+ ### Detailed Findings by Severity
91
+
92
+ Tag every issue with **P0-P3 severity**:
93
+ - **P0 Blocking**: Prevents task completion. Fix immediately
94
+ - **P1 Major**: Significant difficulty or WCAG AA violation. Fix before release
95
+ - **P2 Minor**: Annoyance, workaround exists. Fix in next pass
96
+ - **P3 Polish**: Nice-to-fix, no real user impact. Fix if time permits
97
+
98
+ For each issue, document:
99
+ - **[P?] Issue name**
100
+ - **Location**: Component, file, line
101
+ - **Category**: Accessibility / Performance / Theming / Responsive / Implementation Integrity
102
+ - **Impact**: How it affects users
103
+ - **WCAG/Standard**: Which standard it violates (if applicable)
104
+ - **Recommendation**: How to fix it
105
+ - **Suggested command**: Which command to use (prefer: $crow-interface adapt, $crow-interface animate, $crow-interface audit, $crow-interface bolder, $crow-interface clarify, $crow-interface colorize, $crow-interface critique, $crow-interface delight, $crow-interface distill, $crow-interface document, $crow-interface harden, $crow-interface layout, $crow-interface onboard, $crow-interface optimize, $crow-interface overdrive, $crow-interface polish, $crow-interface quieter, $crow-interface shape, $crow-interface typeset)
106
+
107
+ ### Patterns & Systemic Issues
108
+
109
+ Identify recurring problems that indicate systemic gaps rather than one-off mistakes:
110
+ - "Hard-coded colors appear in 15+ components, should use design tokens"
111
+ - "Touch targets consistently too small (<44px) throughout mobile experience"
112
+
113
+ ### Positive Findings
114
+
115
+ Note what's working well: good practices to maintain and replicate.
116
+
117
+ ## Recommended Actions
118
+
119
+ List recommended commands in priority order (P0 first, then P1, then P2):
120
+
121
+ 1. **[P?] `$command-name`**: Brief description (specific context from audit findings)
122
+ 2. **[P?] `$command-name`**: Brief description (specific context)
123
+
124
+ **Rules**: Only recommend commands from: $crow-interface adapt, $crow-interface animate, $crow-interface audit, $crow-interface bolder, $crow-interface clarify, $crow-interface colorize, $crow-interface critique, $crow-interface delight, $crow-interface distill, $crow-interface document, $crow-interface harden, $crow-interface layout, $crow-interface onboard, $crow-interface optimize, $crow-interface overdrive, $crow-interface polish, $crow-interface quieter, $crow-interface shape, $crow-interface typeset. Map findings to the most appropriate command. End with `$crow-interface polish` as the final step if any fixes were recommended.
125
+
126
+ After presenting the summary, tell the user:
127
+
128
+ > You can ask me to run these one at a time, all at once, or in any order you prefer.
129
+ >
130
+ > Re-run `$crow-interface audit` after fixes to see your score improve.
131
+
132
+ **IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters.
133
+
134
+ **NEVER**:
135
+ - Report issues without explaining impact (why does this matter?)
136
+ - Provide generic recommendations (be specific and actionable)
137
+ - Skip positive findings (celebrate what works)
138
+ - Forget to prioritize (everything can't be P0)
139
+ - Report false positives without verification