@biggora/claude-plugins 1.2.0 → 1.2.2

package/src/skills/tailwindcss-best-practices/references/typography-list-style.md

@@ -0,0 +1,65 @@
+---
+name: typography-list-style
+description: Controlling list marker style and position with list-style-type and list-style-position
+---
+
+# List Style
+
+Utilities for controlling the marker style and position of list items.
+
+## Usage
+
+### List style type
+
+```html
+<ul class="list-disc">
+  <li>Disc bullets (default for ul)</li>
+</ul>
+
+<ol class="list-decimal">
+  <li>Decimal numbers (default for ol)</li>
+</ol>
+
+<ul class="list-none">
+  <li>No markers (often with custom bullets via before/after)</li>
+</ul>
+
+<!-- Custom value -->
+<ol class="list-[upper-roman]">Roman numerals</ol>
+<ul class="list-(--my-marker)">Custom property</ul>
+```
+
+### List style position
+
+```html
+<!-- Bullets inside content flow -->
+<ul class="list-inside list-disc">
+  <li>5 cups chopped Porcini mushrooms</li>
+</ul>
+
+<!-- Bullets outside content flow (default) -->
+<ul class="list-outside list-disc">
+  <li>5 cups chopped Porcini mushrooms</li>
+</ul>
+```
+
+### Responsive
+
+```html
+<ul class="list-none md:list-disc md:list-outside">...</ul>
+```
+
+## Key Points
+
+- `list-disc` - disc bullets (ul default)
+- `list-decimal` - decimal numbers (ol default)
+- `list-none` - no markers
+- Custom: `list-[upper-roman]`, `list-[lower-alpha]`, `list-(--var)`
+- `list-inside` - markers inside content box
+- `list-outside` - markers outside content box (default)
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/list-style-type
+- https://tailwindcss.com/docs/list-style-position
+-->

package/src/skills/tailwindcss-best-practices/references/typography-text-align.md

@@ -0,0 +1,60 @@
+---
+name: typography-text-align
+description: Controlling text alignment with left, center, right, justify, and logical properties
+---
+
+# Text Align
+
+Utilities for controlling the alignment of text.
+
+## Usage
+
+### Basic alignment
+
+Use `text-left`, `text-center`, `text-right`, `text-justify`:
+
+```html
+<p class="text-left">Left aligned</p>
+<p class="text-center">Center aligned</p>
+<p class="text-right">Right aligned</p>
+<p class="text-justify">Justified text</p>
+```
+
+### Logical properties
+
+Use `text-start` and `text-end` for RTL-aware alignment:
+
+```html
+<div dir="ltr">
+  <p class="text-start">Left in LTR</p>
+  <p class="text-end">Right in LTR</p>
+</div>
+<div dir="rtl">
+  <p class="text-start">Right in RTL</p>
+  <p class="text-end">Left in RTL</p>
+</div>
+```
+
+### Responsive alignment
+
+```html
+<p class="text-left md:text-center lg:text-right">
+  Responsive alignment
+</p>
+```
+
+## Key Points
+
+- `text-left` - aligns to left edge
+- `text-center` - centers text
+- `text-right` - aligns to right edge
+- `text-justify` - justifies text (spaces words evenly)
+- `text-start` - aligns to start (left in LTR, right in RTL)
+- `text-end` - aligns to end (right in LTR, left in RTL)
+- Use logical properties (`text-start`, `text-end`) for internationalization
+- Common pattern: `text-center` for headings, `text-left` for body text
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/text-align
+-->

package/src/skills/tailwindcss-best-practices/references/visual-background.md

@@ -0,0 +1,76 @@
+---
+name: visual-background
+description: Background color, gradient, image, and attachment utilities
+---
+
+# Background
+
+Utilities for background color, gradients, images, and attachment.
+
+## Usage
+
+### Background color
+
+```html
+<div class="bg-white">White</div>
+<div class="bg-gray-100">Light gray</div>
+<div class="bg-blue-500">Blue</div>
+<div class="bg-sky-500/50">50% opacity</div>
+<div class="bg-[#1da1f2]">Arbitrary</div>
+<div class="bg-(--my-bg)">CSS variable</div>
+```
+
+Color palette follows theme (red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone).
+
+### Background image and gradient
+
+```html
+<div class="bg-gradient-to-r from-blue-500 to-purple-600">Linear gradient</div>
+<div class="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500">Multi-stop</div>
+
+<div class="bg-[url('/img/hero.jpg')]">Image</div>
+<div class="bg-[url('/img/hero.jpg')] bg-cover bg-center">Image with size/position</div>
+```
+
+Gradient directions: `to-t`, `to-tr`, `to-r`, `to-br`, `to-b`, `to-bl`, `to-l`, `to-tl`.
+
+### Background size and position
+
+```html
+<div class="bg-auto">auto</div>
+<div class="bg-cover">cover</div>
+<div class="bg-contain">contain</div>
+
+<div class="bg-center">center</div>
+<div class="bg-top">top</div>
+<div class="bg-bottom">bottom</div>
+<div class="bg-left">left</div>
+<div class="bg-right">right</div>
+<div class="bg-[position:2rem_2rem]">Arbitrary</div>
+```
+
+### Background repeat and attachment
+
+```html
+<div class="bg-repeat">repeat (default)</div>
+<div class="bg-no-repeat">no-repeat</div>
+<div class="bg-repeat-x">repeat-x</div>
+
+<div class="bg-fixed">fixed (parallax)</div>
+<div class="bg-local">local</div>
+<div class="bg-scroll">scroll</div>
+```
+
+## Key Points
+
+- Colors: `bg-{color}-{shade}`, opacity `/50`, arbitrary `bg-[#hex]`
+- Gradients: `bg-gradient-to-{dir}`, `from-*`, `via-*`, `to-*`
+- Image: `bg-[url('...')]`, `bg-cover`, `bg-center`, etc.
+- Size: `bg-auto`, `bg-cover`, `bg-contain`
+- Position: `bg-center`, `bg-top`, `bg-[position:...]`
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/background-color
+- https://tailwindcss.com/docs/background-image
+-->

package/src/skills/tailwindcss-best-practices/references/visual-border.md

@@ -0,0 +1,108 @@
+---
+name: visual-border
+description: Border width, color, style, and border radius
+---
+
+# Border
+
+Utilities for border width, color, style, and radius.
+
+## Usage
+
+### Border width
+
+```html
+<div class="border">1px all sides</div>
+<div class="border-2">2px</div>
+<div class="border-0">No border</div>
+
+<div class="border-t border-r border-b border-l">Per side</div>
+<div class="border-x-2">Horizontal</div>
+<div class="border-y">Vertical</div>
+```
+
+### Border color
+
+```html
+<div class="border border-gray-300">Gray border</div>
+<div class="border-2 border-blue-500">Blue</div>
+<div class="border border-red-500/50">With opacity</div>
+```
+
+### Border style
+
+```html
+<div class="border border-solid">Solid (default)</div>
+<div class="border border-dashed">Dashed</div>
+<div class="border border-dotted">Dotted</div>
+<div class="border border-double">Double</div>
+<div class="border border-none">None</div>
+```
+
+### Border radius
+
+```html
+<div class="rounded">Small (default)</div>
+<div class="rounded-sm">2px</div>
+<div class="rounded-md">6px</div>
+<div class="rounded-lg">8px</div>
+<div class="rounded-xl">12px</div>
+<div class="rounded-2xl">16px</div>
+<div class="rounded-full">Pill/circle</div>
+<div class="rounded-none">0</div>
+
+<div class="rounded-t-lg rounded-b-none">Per corner</div>
+<div class="rounded-s-md rounded-e-xl">Logical (start/end)</div>
+```
+
+### Divide (between children)
+
+```html
+<div class="divide-y divide-gray-200">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</div>
+<div class="divide-x divide-gray-300 flex">
+  <div>Col 1</div>
+  <div>Col 2</div>
+</div>
+```
+
+### Ring (focus outline)
+
+```html
+<button class="ring-2 ring-blue-500 ring-offset-2">Ring</button>
+<button class="focus:ring-3 focus:ring-blue-500">Focus ring</button>
+```
+
+### Outline
+
+Separate from border; used for focus states. In v4: `outline` = 1px; `outline-2`, `outline-4` for width. Use `outline-offset-2` for offset.
+
+```html
+<button class="outline outline-offset-2 outline-sky-500">Outline</button>
+<button class="focus:outline-2 focus:outline-cyan-500">Focus outline</button>
+<!-- Accessibility: invisible but visible in forced-colors -->
+<button class="focus:outline-hidden">Focus outline-hidden</button>
+```
+
+v4: `outline-none` = `outline-style: none`; `outline-hidden` = invisible but shows in forced-colors mode.
+
+## Key Points
+
+- Width: `border`, `border-{0,2,4,8}`, `border-{t,r,b,l,x,y}`
+- Color: `border-{color}`, opacity modifier
+- Radius: `rounded-{size}`, `rounded-full`, `rounded-{t,r,b,l,s,e}-*`, logical `rounded-s-*`, `rounded-e-*`
+- Divide: `divide-{x,y}`, `divide-{color}` for borders between flex/grid children
+- Ring: `ring`, `ring-{n}`, `ring-{color}`, `ring-offset-{n}` (v4 default ring = 1px; use `ring-3` for 3px)
+- Outline: `outline`, `outline-{n}`, `outline-{color}`, `outline-offset-{n}`, `outline-hidden`, `outline-none`
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/border-width
+- https://tailwindcss.com/docs/border-color
+- https://tailwindcss.com/docs/border-radius
+- https://tailwindcss.com/docs/divide-width
+- https://tailwindcss.com/docs/ring-width
+-->

package/src/skills/tailwindcss-best-practices/references/visual-effects.md

@@ -0,0 +1,111 @@
+---
+name: visual-effects
+description: Box shadow, opacity, mix-blend, and filter effects
+---
+
+# Effects
+
+Utilities for box shadow, opacity, mix-blend, and filters.
+
+## Usage
+
+### Box shadow
+
+```html
+<div class="shadow-sm">Small</div>
+<div class="shadow">Default</div>
+<div class="shadow-md">Medium</div>
+<div class="shadow-lg">Large</div>
+<div class="shadow-xl">Extra large</div>
+<div class="shadow-2xl">2xl</div>
+<div class="shadow-none">None</div>
+
+<div class="shadow-lg shadow-blue-500/50">Colored shadow</div>
+<div class="shadow-[0_0_15px_rgba(0,0,0,0.2)]">Arbitrary</div>
+```
+
+### Opacity
+
+```html
+<div class="opacity-0">Invisible</div>
+<div class="opacity-50">50%</div>
+<div class="opacity-100">Full</div>
+```
+
+### Mix blend mode
+
+```html
+<div class="mix-blend-normal">Normal</div>
+<div class="mix-blend-multiply">Multiply</div>
+<div class="mix-blend-screen">Screen</div>
+<div class="mix-blend-overlay">Overlay</div>
+```
+
+### Backdrop blur and filter
+
+```html
+<div class="backdrop-blur-sm">Blur backdrop</div>
+<div class="backdrop-blur-md">Medium blur</div>
+<div class="backdrop-blur-none">No blur</div>
+
+<div class="backdrop-opacity-50">Backdrop opacity</div>
+```
+
+### Filter (blur, brightness, contrast, etc.)
+
+```html
+<div class="blur-sm">Blur</div>
+<div class="brightness-90">Brightness</div>
+<div class="contrast-125">Contrast</div>
+<div class="grayscale">Grayscale</div>
+<div class="invert">Invert</div>
+<div class="sepia">Sepia</div>
+<div class="blur-none">No filter</div>
+```
+
+### Object fit (images/video)
+
+```html
+<img class="object-contain" /> <!-- Fit within bounds -->
+<img class="object-cover" />   <!-- Cover area, may crop -->
+<img class="object-fill" />    <!-- Stretch -->
+<img class="object-none" />    <!-- No resize -->
+<img class="object-scale-down" /> <!-- contain or none, whichever is smaller -->
+<img class="object-top object-cover" /> <!-- Position -->
+```
+
+### Drop shadow with colors (v4.1+)
+
+```html
+<svg class="drop-shadow-xl drop-shadow-cyan-500/50">Logo</svg>
+<img class="drop-shadow-lg drop-shadow-blue-500">Image</img>
+```
+
+Drop shadows can now take color utilities and opacity modifiers, just like box shadows.
+
+### Shadow opacity modifiers (v4.1+)
+
+All shadow types support opacity modifiers:
+
+```html
+<div class="shadow-lg/50">50% opacity box shadow</div>
+<div class="drop-shadow-xl/75">75% opacity drop shadow</div>
+```
+
+## Key Points
+
+- Shadow: `shadow-{size}`, `shadow-{color}/opacity`, `shadow-none`
+- Shadow opacity: `shadow-lg/50` (v4.1+)
+- Drop shadow colors: `drop-shadow-{color}`, `drop-shadow-{color}/{opacity}` (v4.1+)
+- Opacity: `opacity-{0-100}`
+- Mix blend: `mix-blend-{mode}`
+- Backdrop: `backdrop-blur-*`, `backdrop-opacity-*`
+- Filter: `blur-*`, `brightness-*`, `contrast-*`, `grayscale`, `invert`, `sepia`
+- **v4 scale shift**: v3's `shadow` → v4's `shadow-sm`, v3's `shadow-sm` → v4's `shadow-xs`
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/box-shadow
+- https://tailwindcss.com/docs/opacity
+- https://tailwindcss.com/docs/backdrop-blur
+-->

package/src/skills/tailwindcss-best-practices/references/visual-svg.md

@@ -0,0 +1,82 @@
+---
+name: visual-svg
+description: Styling SVG elements with fill, stroke, and stroke-width utilities
+---
+
+# SVG Styling
+
+Utilities for styling SVG fill and stroke. Essential when working with icon sets like Heroicons.
+
+## Usage
+
+### Fill
+
+```html
+<!-- Theme colors -->
+<svg class="fill-blue-500">...</svg>
+<svg class="fill-indigo-500 hover:fill-indigo-600">...</svg>
+
+<!-- Inherit from text color -->
+<button class="text-indigo-600 hover:text-white">
+  <svg class="size-5 fill-current">...</svg>
+  Check for updates
+</button>
+
+<!-- Special values -->
+<svg class="fill-none">...</svg>
+<svg class="fill-inherit">...</svg>
+<svg class="fill-transparent">...</svg>
+
+<!-- Custom -->
+<svg class="fill-[#243c5a]">...</svg>
+<svg class="fill-(--my-fill)">...</svg>
+```
+
+### Stroke
+
+```html
+<!-- Theme colors -->
+<svg class="stroke-cyan-500" fill="none">...</svg>
+
+<!-- Inherit from text -->
+<button class="text-pink-600 hover:text-white">
+  <svg class="size-5 stroke-current" fill="none">...</svg>
+  Download
+</button>
+
+<!-- Special values -->
+<svg class="stroke-none stroke-inherit stroke-transparent">...</svg>
+```
+
+### Stroke width
+
+```html
+<svg class="stroke-1">Thin stroke</svg>
+<svg class="stroke-2">Medium stroke</svg>
+<svg class="stroke-[1.5]">Custom width</svg>
+<svg class="stroke-(length:--my-stroke)">Custom property</svg>
+```
+
+### Combined
+
+```html
+<svg class="size-6 fill-blue-500 stroke-blue-700 stroke-2" fill="none">
+  <!-- Outlined icon with colored stroke -->
+</svg>
+```
+
+## Key Points
+
+- `fill-*` / `stroke-*` - all theme colors (e.g. `fill-red-500`)
+- `fill-current` / `stroke-current` - use current text color (common for icons in buttons)
+- `fill-none` / `stroke-none` - no fill/stroke
+- `stroke-1`, `stroke-2`, etc. - stroke width (number = px)
+- Custom: `fill-[#hex]`, `stroke-(--var)`, `stroke-[1.5]`
+- Use with variants: `hover:fill-blue-600`, `md:stroke-2`
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/fill
+- https://tailwindcss.com/docs/stroke
+- https://tailwindcss.com/docs/stroke-width
+-->

package/src/skills/test-mobile-app/SKILL.md

@@ -151,15 +151,20 @@ python3 scripts/run_tests.py --apk path/to/app.apk --device emulator-5554 --outp
 
 ### Test Execution Without Emulator (Static Mode)
 
-If no emulator is available, Claude can:
-1. Analyze source code / screenshots statically
-2. Write all test scenarios
+If no emulator is available (which is common — most users won't have Appium set up),
+Claude can still provide significant value:
+1. Analyze source code / screenshots / APK statically
+2. Generate use cases and write all test scenarios
 3. Mark execution status as `MANUAL_REQUIRED`
-4. Generate a report with all test cases ready to be run manually
+4. Generate a comprehensive report with all test cases ready to be run manually
+5. Provide step-by-step manual testing instructions the user can follow
+
+This is the **most common execution path** — don't treat it as a fallback.
+Make the static report just as polished and detailed as the automated one.
 
 Use `--static` flag:
 ```bash
-python3 scripts/run_tests.py --static --output results/
+python3 scripts/run_tests.py --static --tests tests.json --output results/
 ```
 
 ---
@@ -208,5 +213,5 @@ Read `references/report-template.md` for report structure details.
 - **Locators**: Prefer `accessibility id` > `resource-id` > `xpath`. Never use index-based xpath.
 - **Waits**: Always use explicit waits (`WebDriverWait`), never `time.sleep`.
 - **Screenshots**: Capture on every assertion failure automatically.
-- **Crash detection**: After every interaction, check for crash dialogs (`scripts/crash_detector.py`).
+- **Crash detection**: After every interaction, check for crash dialogs (the `check_for_crash()` function in `scripts/run_tests.py` handles this automatically).
 - **Language**: Generate use cases and reports in the language the user is using.

package/src/skills/test-mobile-app/scripts/analyze_apk.py

@@ -50,10 +50,21 @@ def analyze_apk(apk_path: str) -> dict:
 
         # String resources (sample)
         try:
-            for lang, strings in apk.get_strings_analysis().items():
-                sample = list(strings.keys())[:30]
-                result["strings_sample"] = sample
-                break
+            # Try modern androguard API first, fall back to legacy
+            try:
+                from androguard.core.axml import AXMLPrinter
+                res_parser = apk.get_android_resources()
+                if res_parser:
+                    strings = res_parser.get_resolved_strings()
+                    if strings:
+                        for lang_strings in strings.values():
+                            result["strings_sample"] = list(lang_strings.values())[:30]
+                            break
+            except (ImportError, AttributeError):
+                # Fallback: extract string-like values from manifest
+                manifest_xml = apk.get_android_manifest_xml()
+                if manifest_xml is not None:
+                    result["strings_sample"] = []
         except Exception:
             pass
 

package/src/skills/test-mobile-app/scripts/check_environment.py

@@ -44,11 +44,12 @@ def check_appium_python():
 
 def check_python_deps():
     missing = []
-    for pkg in ["pytest", "jinja2", "PIL"]:
+    pkg_map = {"pytest": "pytest", "jinja2": "jinja2", "PIL": "pillow"}
+    for import_name, install_name in pkg_map.items():
         try:
-            __import__(pkg)
+            __import__(import_name)
         except ImportError:
-            missing.append(pkg)
+            missing.append(install_name)
     if missing:
         raise RuntimeError(f"Missing packages: {missing}. Run: pip install {' '.join(missing)} --break-system-packages")
     return "All Python deps OK"
@@ -66,12 +67,11 @@ def check_avd():
 def main():
     checks = [
         ("ADB", check_adb),
-        ("Android Emulator Binary", check_emulator),
+        ("Android Virtual Devices", check_avd),
         ("Connected Device/Emulator", check_emulator),
         ("Appium Server", check_appium_server),
         ("Appium Python Client", check_appium_python),
         ("Python Dependencies", check_python_deps),
-        ("Android Virtual Devices", check_avd),
     ]
 
     print("\n🔍 MOBILE TESTING ENVIRONMENT CHECK")

package/src/skills/test-mobile-app/scripts/run_tests.py

@@ -81,7 +81,7 @@ def safe_find(driver, by, value, timeout=10):
     )
 
 
-def check_for_crash(driver) -> str | None:
+def check_for_crash(driver):
     """Returns crash message if a crash dialog is detected, else None."""
     try:
         # Look for common crash dialog text