screen-structure-checker

name	screen-structure-checker
description	Skill kiểm tra cấu trúc thư mục screens theo kiến trúc quản lý tập trung. Sử dụng khi cần (1) audit cấu trúc screen mới tạo, (2) kiểm tra toàn bộ screens trong dự án, (3) tìm các vi phạm naming convention, (4) phát hiện file cần refactor do quá lớn.

Screen Structure Checker

Skill này kiểm tra cấu trúc thư mục của các screen components để đảm bảo tuân thủ kiến trúc quản lý tập trung.

Mục Đích

• Audit cấu trúc: Quét và đánh giá cấu trúc thư mục screens
• Phát hiện vi phạm: Tìm các screen không tuân theo kiến trúc chuẩn
• Đề xuất cải thiện: Gợi ý cách sửa cho từng vi phạm
• Báo cáo chi tiết: Xuất kết quả dạng dễ đọc

Khi Nào Sử Dụng

Skill này nên được trigger khi:

• Người dùng hỏi về "kiểm tra cấu trúc screen"
• Người dùng yêu cầu "audit screens" hoặc "validate structure"
• Cần review code quality của screens
• Tạo screen mới và muốn kiểm tra đúng convention

Cách Sử Dụng

1. Kiểm Tra Một Screen Cụ Thể

Chạy script với đường dẫn đến thư mục screen:

python3 scripts/check_structure.py /path/to/screens/ScreenName

Output mẫu:

📊 Screen Structure Report: home-screen
========================================

✅ PASSED (4/6 rules)
├─ ✅ Has index.tsx or main component
├─ ✅ Has components/ directory
├─ ✅ Has hooks/ directory
├─ ⚠️ Missing types/ directory
├─ ✅ Correct naming convention
└─ ⚠️ 2 files exceed 200 lines

🔧 Recommendations:
1. Create types/ directory for TypeScript interfaces
2. Refactor index.tsx (476 lines) - consider splitting

2. Kiểm Tra Toàn Bộ Screens

python3 scripts/check_structure.py /path/to/screens --all

3. Xuất Báo Cáo JSON

python3 scripts/check_structure.py /path/to/screens/ScreenName --json

Các Rules Kiểm Tra

Rule	Mô tả	Severity
has_main_component	Có index.tsx hoặc {ScreenName}.tsx	❌ Error
has_components_dir	Có thư mục components/	⚠️ Warning
has_hooks_dir	Có thư mục hooks/	⚠️ Warning
has_types_dir	Có thư mục types/	💡 Info
naming_convention	File/folder đúng convention	❌ Error
file_size_limit	Không có file > 200 lines	⚠️ Warning
barrel_exports	Có index.ts trong sub-dirs	💡 Info

Kiến Trúc Chuẩn

Tham khảo chi tiết tại references/architecture-rules.md.

{ScreenName}/
├── index.tsx              # Component chính (BẮT BUỘC)
├── components/            # Sub-components
│   ├── cards/
│   ├── sections/
│   └── index.ts           # Barrel export
├── hooks/                 # Custom hooks
│   ├── useScreenData.ts
│   └── index.ts
├── types/                 # TypeScript types
├── utils/                 # Helper functions
├── constants/             # Constants
└── README.md              # Documentation

Tích Hợp Với Workflow

Skill này hoạt động tốt với:

• /implement-workflow: Verify screen mới tạo đúng cấu trúc
• /ultra-think: Phân tích chi tiết các vi phạm
• /ui-ux-pro-max: Đảm bảo components được tổ chức đúng