메뉴
Run React build, lint, type-check, and test validation. Use after modifying React components, hooks, or configuration. Catches TypeScript errors, Tailwind issues, and build failures before commit.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | react-validation |
| description | Run React build, lint, type-check, and test validation. Use after modifying React components, hooks, or configuration. Catches TypeScript errors, Tailwind issues, and build failures before commit. |
| argument-hint | Optional: 'build' | 'lint' | 'types' | 'test' | 'all' (default: all) |
Validate React frontend code quality — build, lint, type-check, and test.
react_app/src/npm run build fails and you need diagnosticscd react_app && npm run build
Build includes TypeScript compilation — catches both type errors and import issues.
cd react_app && npx tsc --noEmit
cd react_app && npx eslint src/ --max-warnings 0
cd react_app && npx vitest run
cd react_app && npm run dev
# Opens at http://localhost:5173
Run these in order before committing frontend changes:
cd react_app && npm run buildls react_app/src/hooks/ — verify you didn't recreate an existing hookfind react_app/src -name "*.css" ! -name "index.css" — should return nothing| Error | Cause | Fix |
|---|---|---|
TS2307: Cannot find module | Wrong import path | Check if file was moved — use relative paths |
TS2339: Property does not exist | Wrong type or missing field | Check TypeScript types in types/ |
TS2345: Argument not assignable | Type mismatch in hook/component | Verify Pydantic model matches TS type |
Module not found | Missing dependency | cd react_app && npm install <pkg> |
| Tailwind class not applied | Typo in class name | Check Tailwind docs for correct utility name |
Before creating a new hook, check:
ls react_app/src/hooks/
21 hooks across 11 files already exist. See frontend.agent.md for the full list.
Before creating a new component, check:
ls react_app/src/components/
ls react_app/src/components/design/
ls react_app/src/components/import/
ls react_app/src/components/viewport/
ls react_app/src/components/ui/
Hard-learned development rules by domain — Python, FastAPI, React, Testing. Prevents the specific mistakes that caused 70+ audit findings across v0.21.0-v0.21.3.
Mandatory pre-merge quality checks for production code — security scan, packaging test, API consistency, no silent failures. Prevents the issues that caused 4 emergency releases in v0.21.x.
Pre-release validation — packaging verification, user acceptance testing, security scan, API drift detection. Prevents the recurring pattern of shipping broken wheels and missing files.
Test the library from an end-user perspective — pip install, import, run all workflows. Catches packaging, import, and API issues that internal tests miss.
Discover exact API function signatures, parameter names, and types from structural_lib. Use BEFORE wrapping or calling any API function. Prevents the #1 agent mistake: guessing parameter names (b_mm not width, fck not concrete_grade).
Run a structured innovation research cycle — discover gaps, propose novel capabilities, prototype and validate breakthrough ideas for structural engineering.