Validation
Use our validator to check your Construct before submitting.
Installation
Install the Construct skill package (if you haven't already):
$ npm install -g @useworkapp/construct-skill
Basic Usage
$ construct-skill validate ./App.tsx
Or run directly with npx:
$ npx @useworkapp/construct-skill validate ./App.tsx
Output
Passing Validation
╔══════════════════════════════════════════════════════════════╗ ║ WORK CONSTRUCT VALIDATOR ║ ╚══════════════════════════════════════════════════════════════╝ File: ./App.tsx ✓ Construct passes all validations! ──────────────────────────────────────────────────────────── Status: PASS Errors: 0 | Warnings: 0 ────────────────────────────────────────────────────────────
With Warnings
╔══════════════════════════════════════════════════════════════╗ ║ WORK CONSTRUCT VALIDATOR ║ ╚══════════════════════════════════════════════════════════════╝ File: ./App.tsx WARNINGS: ⚠ Consider adding responsive breakpoints ⚠ Icon button found without aria-label ✓ Construct passes required validations (with warnings) ──────────────────────────────────────────────────────────── Status: PASS Errors: 0 | Warnings: 2 ────────────────────────────────────────────────────────────
Warnings don't block submission but should be addressed for better UX.
With Errors
╔══════════════════════════════════════════════════════════════╗ ║ WORK CONSTRUCT VALIDATOR ║ ╚══════════════════════════════════════════════════════════════╝ File: ./App.tsx ERRORS: ✗ External API calls (fetch) are not allowed ✗ Must have a default export WARNINGS: ⚠ Inline styles detected - use Tailwind classes instead ✗ Construct has validation errors that must be fixed. ──────────────────────────────────────────────────────────── Status: FAIL Errors: 2 | Warnings: 1 ────────────────────────────────────────────────────────────
Errors must be fixed before your Construct can be approved.
What It Checks
Errors (Must Fix)
- • No default export - Component must be default exported
- • External API calls - fetch, axios, XMLHttpRequest not allowed
- • CSS modules - .module.css imports not supported
- • External CSS - CSS file imports not supported
- • Wrong file type - Must be .tsx or .ts
Warnings (Should Fix)
- • Inline styles - Use Tailwind classes instead
- • Missing localStorage - Data should be persisted
- • No responsive breakpoints - Add sm: md: lg: classes
- • No dark mode - Use CSS variables or dark: variants
- • Icon buttons without aria-label - Accessibility issue
- • Unknown components - May be unsupported
- • Wrong storage key prefix - Should start with work-construct-
- • Missing form labels - Inputs should have Label components
Exit Codes
For CI/CD integration:
| Exit Code | Meaning |
|---|---|
| 0 | Validation passed (may have warnings) |
| 1 | Validation failed with errors |
# In CI pipeline construct-skill validate ./App.tsx || exit 1
Programmatic Usage
You can also use the validator as a library:
const { validateConstruct } = require("@useworkapp/construct-skill/bin/validate");
const result = validateConstruct("./App.tsx");
console.log(result);
// {
// valid: true,
// errors: [],
// warnings: ["Consider adding responsive breakpoints"]
// }Tips
Run early, run often
Validate as you build, not just at the end. Catching issues early saves time.
Address all warnings
Warnings indicate areas for improvement. Addressing them increases approval chances.
Use with AI assistants
If using Claude Code or OpenCode, the AI will automatically follow the Construct standards.