@codyswann/lisa 4.74.9 → 4.75.0

package/plugins/lisa-expo-devin/skills/gluestack-nativewind/scripts/validate_styling.py

@@ -0,0 +1,424 @@
+#!/usr/bin/env python3
+# This file is managed by Lisa.
+# Do not edit directly — changes will be overwritten on the next `lisa` run.
+"""
+Validates Gluestack UI v3 and NativeWind v4 styling patterns.
+
+This script detects common styling violations:
+1. Direct React Native imports with Gluestack equivalents
+2. Raw color values without semantic tokens
+3. Inline style objects where className could be used
+4. Arbitrary bracket notation values
+5. Non-scale spacing values
+
+Usage:
+    python3 validate_styling.py [path]
+
+Arguments:
+    path    Optional path to validate. Defaults to current directory.
+            Can be a file or directory.
+"""
+
+import json
+import os
+import re
+import sys
+from dataclasses import dataclass
+from pathlib import Path
+from typing import Optional
+
+
+@dataclass
+class Violation:
+    """Represents a styling violation."""
+    file: str
+    line: int
+    rule: str
+    message: str
+    severity: str = "error"
+
+
+# React Native components that have Gluestack equivalents
+RN_TO_GLUESTACK_MAP = {
+    "View": "Box",
+    "Text": "Text (from @/components/ui/text)",
+    "TouchableOpacity": "Pressable",
+    "TouchableHighlight": "Pressable",
+    "TouchableWithoutFeedback": "Pressable",
+    "Image": "Image (from @/components/ui/image)",
+    "ScrollView": "ScrollView (from @/components/ui/scroll-view)",
+    "TextInput": "Input + InputField",
+    "FlatList": "FlashList",
+    "SectionList": "FlashList",
+    "ActivityIndicator": "Spinner",
+    "Modal": "Modal (from @/components/ui/modal)",
+}
+
+# Raw colors that should be semantic tokens
+RAW_COLOR_PATTERNS = [
+    # Tailwind raw colors (red, green, blue, yellow, gray, etc.)
+    r'\b(text|bg|border|ring|fill|stroke)-(red|green|blue|yellow|orange|purple|pink|indigo|cyan|teal|emerald|lime|amber|violet|fuchsia|rose|sky|slate|gray|zinc|neutral|stone)-\d{2,3}\b',
+    # White/black that should be typography-0 or typography-950
+    r'\btext-white\b',
+    r'\btext-black\b',
+    r'\bbg-white\b',
+    r'\bbg-black\b',
+]
+
+# Semantic tokens that ARE allowed
+ALLOWED_SEMANTIC_PATTERNS = [
+    r'\b(text|bg|border|ring)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background|indicator)-',
+]
+
+# Arbitrary value patterns (bracket notation)
+ARBITRARY_VALUE_PATTERNS = [
+    r'\b[a-z]+-\[\d+px\]',  # p-[13px], m-[27px]
+    r'\b[a-z]+-\[\d+rem\]',  # p-[1.3rem]
+    r'\b[a-z]+-\[\d+%\]',   # w-[50%] (sometimes acceptable)
+    r'\bgap-\[\d+',         # gap-[15px]
+    r'\bspace-[xy]-\[\d+',  # space-x-[10px]
+]
+
+# Non-standard spacing values (not in Tailwind scale)
+# Valid values: 0, px, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96
+VALID_SPACING_VALUES = {
+    "0", "px", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "5", "6",
+    "7", "8", "9", "10", "11", "12", "14", "16", "20", "24", "28", "32",
+    "36", "40", "44", "48", "52", "56", "60", "64", "72", "80", "96"
+}
+
+# Exceptions - files/patterns to skip
+SKIP_PATTERNS = [
+    r'node_modules',
+    r'\.test\.',
+    r'\.spec\.',
+    r'__tests__',
+    r'components/ui/',  # UI primitives are allowed to use any styling
+    r'\.d\.ts$',
+    r'tailwind\.config',
+    r'\.config\.',
+]
+
+
+SEALED_DESIGN_SYSTEM_MARKERS = [
+    ".claude/rules/use-the-design-library.md",
+    ".claude/rules/figma-design-system.md",
+    "docs/design-system/tokens.md",
+    "docs/design-system-rfc.md",
+]
+
+ATOM_BARREL_MARKERS = [
+    "components/atoms/index.ts",
+    "components/atoms/index.tsx",
+    "src/components/atoms/index.ts",
+    "src/components/atoms/index.tsx",
+]
+
+
+def find_project_roots(path: str) -> list[Path]:
+    """Find candidate roots for marker detection, from nearest to farthest.
+
+    Returns all package boundaries (package.json or .git directories) found
+    when walking up from ``path``.  In a monorepo this means both the inner
+    package root and the workspace root are returned, so seal markers stored at
+    the workspace level are not missed.
+    """
+    current = Path(path).resolve()
+    if current.is_file():
+        current = current.parent
+
+    return [
+        candidate
+        for candidate in [current, *current.parents]
+        if (candidate / "package.json").exists() or (candidate / ".git").exists()
+    ] or [current]
+
+
+def has_design_system_eslint_rule(project_root: Path) -> bool:
+    """Detect project-owned design-system lint rules.
+
+    Only matches actual rule/plugin identifier syntax (``design-system/``) so
+    that comments, package names, or arbitrary strings containing
+    ``design-system`` as a substring do not trigger a false positive.
+    """
+    eslint_files = [
+        ".eslintrc",
+        ".eslintrc.js",
+        ".eslintrc.cjs",
+        ".eslintrc.yaml",
+        ".eslintrc.yml",
+        ".eslintrc.json",
+        "eslint.config.js",
+        "eslint.config.mjs",
+        "eslint.config.cjs",
+        "eslint.config.ts",
+        "eslint.config.mts",
+        "eslint.config.cts",
+    ]
+
+    for eslint_file in eslint_files:
+        path = project_root / eslint_file
+        if not path.exists() or not path.is_file():
+            continue
+        try:
+            content = path.read_text(encoding="utf-8")
+        except UnicodeDecodeError:
+            continue
+        if re.search(r"\bdesign-system/", content):
+            return True
+
+    # Check package.json eslintConfig field explicitly so that dependency
+    # names (e.g. "design-system" in dependencies) don't cause false positives.
+    package_json_path = project_root / "package.json"
+    if package_json_path.exists() and package_json_path.is_file():
+        try:
+            pkg = json.loads(package_json_path.read_text(encoding="utf-8"))
+            eslint_config = pkg.get("eslintConfig")
+            if eslint_config is not None:
+                eslint_config_str = json.dumps(eslint_config)
+                if re.search(r"\bdesign-system/", eslint_config_str):
+                    return True
+        except (json.JSONDecodeError, UnicodeDecodeError):
+            pass
+
+    return False
+
+
+def has_sealed_design_system(path: str) -> bool:
+    """Check whether this project has a closed local design-system seal."""
+    project_roots = find_project_roots(path)
+    has_seal_marker = any(
+        (root / marker).exists()
+        for root in project_roots
+        for marker in SEALED_DESIGN_SYSTEM_MARKERS
+    )
+    has_atom_barrel = any(
+        (root / marker).exists()
+        for root in project_roots
+        for marker in ATOM_BARREL_MARKERS
+    )
+
+    if has_seal_marker or has_atom_barrel:
+        return True
+    return any(has_design_system_eslint_rule(root) for root in project_roots)
+
+
+def should_skip_file(file_path: str) -> bool:
+    """Check if file should be skipped."""
+    for pattern in SKIP_PATTERNS:
+        if re.search(pattern, file_path):
+            return True
+    return False
+
+
+def is_semantic_color(match: str) -> bool:
+    """Check if a color class uses semantic tokens."""
+    for pattern in ALLOWED_SEMANTIC_PATTERNS:
+        if re.search(pattern, match):
+            return True
+    return False
+
+
+def check_rn_imports(content: str, file_path: str) -> list[Violation]:
+    """Check for React Native imports that should be Gluestack."""
+    violations = []
+    lines = content.split('\n')
+
+    for i, line in enumerate(lines, 1):
+        # Check for import from react-native
+        if 'from "react-native"' in line or "from 'react-native'" in line:
+            for rn_component, gluestack_equiv in RN_TO_GLUESTACK_MAP.items():
+                # Check if component is imported
+                if re.search(rf'\b{rn_component}\b', line):
+                    violations.append(Violation(
+                        file=file_path,
+                        line=i,
+                        rule="gluestack-components",
+                        message=f"Use Gluestack '{gluestack_equiv}' instead of React Native '{rn_component}'",
+                    ))
+
+    return violations
+
+
+def check_raw_colors(content: str, file_path: str) -> list[Violation]:
+    """Check for raw color values instead of semantic tokens."""
+    violations = []
+    lines = content.split('\n')
+
+    for i, line in enumerate(lines, 1):
+        # Skip comments
+        if line.strip().startswith('//') or line.strip().startswith('*'):
+            continue
+
+        for pattern in RAW_COLOR_PATTERNS:
+            matches = re.findall(pattern, line)
+            for match in matches:
+                if isinstance(match, tuple):
+                    match = '-'.join(match)
+                if not is_semantic_color(match):
+                    violations.append(Violation(
+                        file=file_path,
+                        line=i,
+                        rule="semantic-tokens",
+                        message=f"Use semantic color token instead of raw color '{match}'",
+                    ))
+
+    return violations
+
+
+def check_arbitrary_values(content: str, file_path: str) -> list[Violation]:
+    """Check for arbitrary bracket notation values."""
+    violations = []
+    lines = content.split('\n')
+
+    for i, line in enumerate(lines, 1):
+        # Skip comments
+        if line.strip().startswith('//') or line.strip().startswith('*'):
+            continue
+
+        for pattern in ARBITRARY_VALUE_PATTERNS:
+            matches = re.findall(pattern, line)
+            for match in matches:
+                violations.append(Violation(
+                    file=file_path,
+                    line=i,
+                    rule="no-arbitrary-values",
+                    message=f"Avoid arbitrary values '{match}'. Use spacing scale instead.",
+                    severity="warning",
+                ))
+
+    return violations
+
+
+def check_non_scale_spacing(content: str, file_path: str) -> list[Violation]:
+    """Check for spacing values not in the standard scale."""
+    violations = []
+    lines = content.split('\n')
+
+    # Pattern to match spacing classes: p-X, m-X, gap-X, etc.
+    spacing_pattern = r'\b(p|px|py|pt|pr|pb|pl|ps|pe|m|mx|my|mt|mr|mb|ml|ms|me|gap|gap-x|gap-y|space-x|space-y)-(\d+\.?\d*)\b'
+
+    for i, line in enumerate(lines, 1):
+        # Skip comments
+        if line.strip().startswith('//') or line.strip().startswith('*'):
+            continue
+
+        matches = re.findall(spacing_pattern, line)
+        for prefix, value in matches:
+            if value not in VALID_SPACING_VALUES:
+                violations.append(Violation(
+                    file=file_path,
+                    line=i,
+                    rule="spacing-scale",
+                    message=f"Spacing value '{value}' is not in the standard scale. Use a valid value: {', '.join(sorted(VALID_SPACING_VALUES, key=lambda x: float(x) if x != 'px' else 0.1))}",
+                    severity="warning",
+                ))
+
+    return violations
+
+
+def validate_file(file_path: str) -> list[Violation]:
+    """Validate a single file for styling violations."""
+    if should_skip_file(file_path):
+        return []
+
+    # Only check TypeScript/JavaScript files
+    if not file_path.endswith(('.tsx', '.ts', '.jsx', '.js')):
+        return []
+
+    try:
+        with open(file_path, 'r', encoding='utf-8') as f:
+            content = f.read()
+    except (IOError, UnicodeDecodeError):
+        return []
+
+    violations = []
+    violations.extend(check_rn_imports(content, file_path))
+    violations.extend(check_raw_colors(content, file_path))
+    violations.extend(check_arbitrary_values(content, file_path))
+    violations.extend(check_non_scale_spacing(content, file_path))
+
+    return violations
+
+
+def validate_directory(directory: str) -> list[Violation]:
+    """Validate all files in a directory recursively."""
+    violations = []
+
+    for root, dirs, files in os.walk(directory):
+        # Skip node_modules and other excluded directories
+        dirs[:] = [d for d in dirs if not should_skip_file(os.path.join(root, d))]
+
+        for file in files:
+            file_path = os.path.join(root, file)
+            violations.extend(validate_file(file_path))
+
+    return violations
+
+
+def format_violation(violation: Violation) -> str:
+    """Format a violation for display."""
+    severity_icon = "❌" if violation.severity == "error" else "⚠️"
+    return f"{severity_icon} {violation.file}:{violation.line} [{violation.rule}] {violation.message}"
+
+
+def main():
+    """Main entry point."""
+    # Get path from command line or use current directory
+    path = sys.argv[1] if len(sys.argv) > 1 else "."
+
+    # Resolve to absolute path
+    path = os.path.abspath(path)
+
+    if not os.path.exists(path):
+        print(f"❌ Path not found: {path}")
+        sys.exit(1)
+
+    if has_sealed_design_system(path):
+        print("Sealed design system detected; deferring to the project's design-library rules.")
+        print("Skipping generic Gluestack NativeWind validation.")
+        sys.exit(0)
+
+    print(f"🔍 Validating styling patterns in: {path}\n")
+
+    # Validate
+    if os.path.isfile(path):
+        violations = validate_file(path)
+    else:
+        violations = validate_directory(path)
+
+    # Report results
+    if not violations:
+        print("✅ No styling violations found!")
+        sys.exit(0)
+
+    # Group by file
+    by_file: dict[str, list[Violation]] = {}
+    for v in violations:
+        if v.file not in by_file:
+            by_file[v.file] = []
+        by_file[v.file].append(v)
+
+    # Print violations
+    error_count = 0
+    warning_count = 0
+
+    for file_path, file_violations in sorted(by_file.items()):
+        print(f"\n📄 {file_path}")
+        for v in sorted(file_violations, key=lambda x: x.line):
+            print(f"   {format_violation(v)}")
+            if v.severity == "error":
+                error_count += 1
+            else:
+                warning_count += 1
+
+    print(f"\n📊 Summary: {error_count} errors, {warning_count} warnings")
+
+    # Exit with error if there are errors
+    if error_count > 0:
+        sys.exit(1)
+    sys.exit(0)
+
+
+if __name__ == "__main__":
+    main()

package/plugins/lisa-expo-devin/skills/jira-add-journey/SKILL.md

@@ -0,0 +1,140 @@
+---
+name: jira-add-journey
+description: "Add a Validation Journey section to an existing JIRA ticket by reading the ticket description, understanding the feature, and generating the journey steps, viewports, and assertions."
+---
+
+# Add Validation Journey to Existing JIRA Ticket
+
+Read an existing JIRA ticket, understand the feature or fix it describes, analyze the codebase to determine the user flow, and append a Validation Journey section to the ticket description.
+
+## Arguments
+
+`$ARGUMENTS`: `<TICKET_ID>`
+
+- `TICKET_ID` (required): JIRA ticket key (e.g., `PROJ-123`)
+
+## Prerequisites
+
+- `JIRA_API_TOKEN` environment variable set
+- `jira-cli` configured. Prefer the config Lisa writes at
+  `.lisa/jira-cli/.config.yml` (the `setup-jira-cli` SessionStart hook writes it
+  from `JIRA_SERVER` / `JIRA_LOGIN` / `JIRA_PROJECT` on a project whose
+  `tracker` is `jira`), and pass it explicitly with `--config`. A developer's
+  own `~/.config/.jira/.config.yml` still works as jira-cli's default when no
+  `--config` is given.
+
+## Workflow
+
+### Step 1: Read the Ticket
+
+Use the Atlassian MCP or jira-cli to read the full ticket details:
+
+```bash
+# Run from the project root. --config pins jira-cli to the file Lisa's
+# setup-jira-cli hook wrote, instead of the machine's own ~/.config/.jira.
+# jira-cli resolves --config > JIRA_CONFIG_FILE > ~/.config/.jira/.config.yml,
+# and a --config path that does not exist fails closed with "Missing
+# configuration file." rather than silently using the default.
+jira --config .lisa/jira-cli/.config.yml issue view <TICKET_ID>
+```
+
+If `.lisa/jira-cli/.config.yml` does not exist, drop `--config` to fall back to
+the machine's own jira-cli config — but say so in your report rather than
+letting the Lisa-written config go quietly unused.
+
+Extract:
+- Title and description (what the feature/fix is)
+- Acceptance criteria (what needs to be verified)
+- Components or labels (frontend, mobile, responsive, etc.)
+- Any linked tickets or parent epic context
+
+### Step 2: Check for Existing Journey
+
+Run the parser to see if a Validation Journey already exists:
+
+```bash
+python3 .claude/skills/jira-journey/scripts/parse-plan.py <TICKET_ID> 2>&1
+```
+
+If the parser succeeds and returns steps, the ticket already has a journey. Report this to the user and stop.
+
+### Step 3: Analyze the Feature
+
+Based on the ticket description and acceptance criteria:
+
+1. **Identify the UI surface** — Which pages, modals, or components are affected?
+2. **Identify the user flow** — What steps does a user take to exercise the feature?
+3. **Identify visual checkpoints** — At which states should screenshots be captured?
+4. **Identify viewports** — Does this feature have responsive behavior? Always include Desktop. Add Mobile for responsive changes.
+5. **Identify assertions** — What must be visually true for the feature to be correct?
+
+Use the Explore agent or read the codebase directly to understand:
+- Which components are involved (search by ticket ID, feature name, or file paths mentioned in the ticket)
+- What testIDs exist (for Playwright interaction)
+- What the user flow looks like (Container/View structure, navigation, modals)
+
+### Step 4: Draft the Validation Journey
+
+Compose the journey following the format:
+
+```text
+h2. Validation Journey
+
+h3. Prerequisites
+- List what must be true before starting (backend, auth, feature flags)
+
+h3. Steps
+1. First action the user takes
+2. Second action [SCREENSHOT: descriptive-name]
+3. Continue the flow
+4. Final verification [SCREENSHOT: final-state]
+
+h3. Viewports
+||Name||Width||Height||
+|Desktop|1512|768|
+|Mobile|375|812|
+
+h3. Assertions
+- Testable visual statement about the expected behavior
+- Another assertion about responsive layout
+```
+
+### Guidelines for Drafting
+
+1. **3-7 screenshot markers** — Enough to prove the feature, not so many that execution is slow
+2. **Concrete steps** — "Click the 'Add action' button" not "Interact with the controls"
+3. **Include auth if needed** — If the journey requires login, include credentials in Prerequisites
+4. **Name feature flags explicitly** — If the feature is behind a PostHog flag, name it
+5. **Assertions must be testable** — "Buttons stacked vertically on mobile" not "Layout looks good"
+6. **Screenshot names in kebab-case** — `confirm-step-disabled`, `modal-open`, `form-error`
+
+### Step 5: Present to User for Approval
+
+Display the drafted Validation Journey to the user and ask for confirmation before appending it to the ticket. The user may want to:
+- Add or remove steps
+- Change screenshot markers
+- Adjust viewports or assertions
+- Modify prerequisites
+
+### Step 6: Append to Ticket Description
+
+After user approval, use the JIRA REST API to append the Validation Journey to the existing ticket description.
+
+Use the Atlassian MCP `updateJiraIssue` to update the description field. The journey section must be appended **after** the existing description content, not replace it.
+
+### Step 7: Verify
+
+Run the parser again to confirm the journey was added correctly:
+
+```bash
+python3 .claude/skills/jira-journey/scripts/parse-plan.py <TICKET_ID>
+```
+
+The parser should now return the steps, viewports, and assertions from the newly added section.
+
+## When to Use This Skill
+
+- Ticket was created before the Validation Journey convention was established
+- Ticket was created manually without following `lisa:jira-create` guidelines
+- Ticket needs a journey added or updated based on implementation progress
+- During sprint planning, to ensure all frontend tickets have journeys before work starts