$npx -y skills add trabian/fluxwing-skills --skill fluxwing-validatorValidate uxscii components and screens against schema with interactive menu or direct script calls
| 1 | # Fluxwing Validator |
| 2 | |
| 3 | Validate uxscii components and screens against JSON Schema with interactive workflows. |
| 4 | |
| 5 | ## Overview |
| 6 | |
| 7 | This skill provides two modes of operation: |
| 8 | |
| 9 | 1. **Interactive Mode**: User invocation with menu and minimal output |
| 10 | 2. **Direct Mode**: Script calls from other skills with verbose output |
| 11 | |
| 12 | ## When to Use This Skill |
| 13 | |
| 14 | **User says:** |
| 15 | - "Validate my components" |
| 16 | - "Check if everything is valid" |
| 17 | - "Run validation on my screens" |
| 18 | - "Validate the project" |
| 19 | |
| 20 | **Other skills:** Call validator scripts directly (see Technical Reference below) |
| 21 | |
| 22 | ## Interactive Validation Workflow |
| 23 | |
| 24 | ### Step 1: Present Validation Options |
| 25 | |
| 26 | Use AskUserQuestion to present menu: |
| 27 | |
| 28 | ``` |
| 29 | What would you like to validate? |
| 30 | ``` |
| 31 | |
| 32 | **Options:** |
| 33 | 1. **Everything in this project** - Validates all components and screens |
| 34 | 2. **Just components** - Validates `./fluxwing/components/*.uxm` |
| 35 | 3. **Just screens** - Validates `./fluxwing/screens/*.uxm` |
| 36 | 4. **Let me specify a file or pattern** - Custom path/glob pattern |
| 37 | |
| 38 | ### Step 2: Check What Exists |
| 39 | |
| 40 | Before running validation, check if directories exist: |
| 41 | |
| 42 | ```bash |
| 43 | # Check for components |
| 44 | test -d ./fluxwing/components |
| 45 | |
| 46 | # Check for screens |
| 47 | test -d ./fluxwing/screens |
| 48 | ``` |
| 49 | |
| 50 | **If neither exists:** |
| 51 | - Inform user: "No components or screens found. Create some first!" |
| 52 | - Exit cleanly |
| 53 | |
| 54 | **If option 4 (custom) selected:** |
| 55 | - Ask user for the pattern/file path |
| 56 | - Validate it's not empty |
| 57 | - Proceed with user-provided pattern |
| 58 | |
| 59 | ### Step 3: Run Validation |
| 60 | |
| 61 | Based on user selection: |
| 62 | |
| 63 | **Option 1: Everything** |
| 64 | ```bash |
| 65 | # Validate components |
| 66 | node {SKILL_ROOT}/validate-batch.js \ |
| 67 | "./fluxwing/components/*.uxm" \ |
| 68 | "{SKILL_ROOT}/../fluxwing-component-creator/schemas/uxm-component.schema.json" \ |
| 69 | --json |
| 70 | |
| 71 | # Validate screens |
| 72 | node {SKILL_ROOT}/validate-batch.js \ |
| 73 | "./fluxwing/screens/*.uxm" \ |
| 74 | "{SKILL_ROOT}/../fluxwing-component-creator/schemas/uxm-component.schema.json" \ |
| 75 | --screens \ |
| 76 | --json |
| 77 | ``` |
| 78 | |
| 79 | **Option 2: Just components** |
| 80 | ```bash |
| 81 | node {SKILL_ROOT}/validate-batch.js \ |
| 82 | "./fluxwing/components/*.uxm" \ |
| 83 | "{SKILL_ROOT}/../fluxwing-component-creator/schemas/uxm-component.schema.json" \ |
| 84 | --json |
| 85 | ``` |
| 86 | |
| 87 | **Option 3: Just screens** |
| 88 | ```bash |
| 89 | node {SKILL_ROOT}/validate-batch.js \ |
| 90 | "./fluxwing/screens/*.uxm" \ |
| 91 | "{SKILL_ROOT}/../fluxwing-component-creator/schemas/uxm-component.schema.json" \ |
| 92 | --screens \ |
| 93 | --json |
| 94 | ``` |
| 95 | |
| 96 | **Option 4: Custom pattern** |
| 97 | ```bash |
| 98 | # Use user-provided pattern |
| 99 | node {SKILL_ROOT}/validate-batch.js \ |
| 100 | "${userPattern}" \ |
| 101 | "{SKILL_ROOT}/../fluxwing-component-creator/schemas/uxm-component.schema.json" \ |
| 102 | --json |
| 103 | ``` |
| 104 | |
| 105 | ### Step 4: Parse Results and Show Minimal Summary |
| 106 | |
| 107 | Parse JSON output from validator to extract: |
| 108 | - `total`: Total files validated |
| 109 | - `passed`: Number of valid files |
| 110 | - `failed`: Number of failed files |
| 111 | - `warnings`: Total warning count |
| 112 | |
| 113 | **Display minimal summary:** |
| 114 | |
| 115 | ``` |
| 116 | ✓ 12/14 components valid |
| 117 | ✗ 2/14 components failed |
| 118 | ⚠ 3 warnings total |
| 119 | ``` |
| 120 | |
| 121 | **If all passed:** |
| 122 | ``` |
| 123 | ✓ All 14 components valid |
| 124 | ⚠ 3 warnings |
| 125 | ``` |
| 126 | |
| 127 | **If everything failed:** |
| 128 | ``` |
| 129 | ✗ All 14 components failed |
| 130 | ``` |
| 131 | |
| 132 | **If nothing to validate:** |
| 133 | ``` |
| 134 | No files found matching pattern |
| 135 | ``` |
| 136 | |
| 137 | ### Step 5: Ask About Details |
| 138 | |
| 139 | Use AskUserQuestion to ask: |
| 140 | |
| 141 | ``` |
| 142 | Show error details? |
| 143 | ``` |
| 144 | |
| 145 | **Options:** |
| 146 | 1. **Yes** - Display full validation output |
| 147 | 2. **No** - Clean exit |
| 148 | |
| 149 | ### Step 6: Display Details (if requested) |
| 150 | |
| 151 | If user selects "Yes", show full validation output including: |
| 152 | |
| 153 | **Failed files section:** |
| 154 | ``` |
| 155 | Failed Files: |
| 156 | |
| 157 | ✗ broken-button (./fluxwing/components/broken-button.uxm) |
| 158 | Errors: 2 |
| 159 | 1. must have required property 'fidelity' |
| 160 | 2. ASCII template file not found |
| 161 | |
| 162 | ✗ old-card (./fluxwing/components/old-card.uxm) |
| 163 | Errors: 1 |
| 164 | 1. invalid version format |
| 165 | ``` |
| 166 | |
| 167 | **Passed with warnings section:** |
| 168 | ``` |
| 169 | Passed with Warnings: |
| 170 | |
| 171 | ✓ login-screen (2 warnings) |
| 172 | ✓ dashboard (1 warning) |
| 173 | ``` |
| 174 | |
| 175 | **Fully passed section (optional, only if not too many):** |
| 176 | ``` |
| 177 | Fully Passed: |
| 178 | |
| 179 | ✓ primary-button |
| 180 | ✓ secondary-button |
| 181 | ✓ email-input |
| 182 | ... |
| 183 | ``` |
| 184 | |
| 185 | ## Edge Cases |
| 186 | |
| 187 | ### No fluxwing directory exists |
| 188 | ``` |
| 189 | No components or screens found. Create some first! |
| 190 | ``` |
| 191 | |
| 192 | ### Empty directories |
| 193 | ``` |
| 194 | ✓ 0/0 components valid |
| 195 | ``` |
| 196 | |
| 197 | ### Invalid glob pattern (option 4) |
| 198 | ``` |
| 199 | No files found matching pattern: ${pattern} |
| 200 | ``` |
| 201 | |
| 202 | ### Validation script fails to execute |
| 203 | ``` |
| 204 | Error: Cannot execute validator. Node.js required. |
| 205 | ``` |
| 206 | |
| 207 | ## Technical Reference (For Other Skills) |
| 208 | |
| 209 | ### Direct Script Calls |
| 210 | |
| 211 | Other skills (component-creator, screen-scaffolder) call validator scripts directly: |
| 212 | |
| 213 | **Validate single component:** |
| 214 | ```bash |
| 215 | node {SKILL_ROOT}/../fluxwing-validator/validate-component.js \ |
| 216 | ./fluxwing/components/button.uxm \ |
| 217 | {SKILL_ROOT}/schemas/uxm-component.schema.json |
| 218 | ``` |
| 219 | |
| 220 | **Validate single screen:** |
| 221 | ```bash |
| 222 | node {SKILL_ROOT}/../fluxwing-validator/validate-screen.js \ |
| 223 | ./fluxwing/screens/login-s |