# Pre-Delivery Checklist

Before delivering TKE UI code, verify these items:

## Visual Quality

- [ ] No emojis used as icons (use `tk-icon icon-tk-*` instead) - Search: `"icon emoji"`
- [ ] All icons from TKE icon system
- [ ] Hover states don't cause layout shift - Search: `"hover feedback"`
- [ ] Use TKE color variables (`var(--primary)`, `var(--gray-*)`) not hardcoded colors - Search: `"color variable"`
- [ ] Use TKE border-radius variables (`var(--border-radius)`) not custom values - Search: `"border-radius variable"`
- [ ] Separate cards for each functional section (search form, table, timeline, etc.) - Search: `"card blocking"`, `"card grouping"`
- [ ] Use `card border-0 shadow-sm mb-3` for standard card styling - Search: `"card border-0 shadow-sm mb-3"`

## Interaction

- [ ] All clickable elements have `cursor-pointer`
- [ ] Hover states provide clear visual feedback
- [ ] Transitions are smooth (150-300ms)
- [ ] Focus states visible for keyboard navigation

## Forms

- [ ] Required fields marked with `star_mark` - Search: `"required field"`
- [ ] Labels linked to inputs with `for` and `id` - Search: `"form label"`
- [ ] Form layout uses correct column widths (`col-lg-2` to `col-lg-4` for labels, `col-lg-8` to `col-lg-9` for inputs) - Search: `"form layout col-lg"`
- [ ] Form spacing consistent (`mb-2` between rows) - Search: `"form spacing mb-2"`
- [ ] Date pickers use `datepicker` with `icon-tk-calendar` (not native `<input type="date">`) - Search: `"datepicker"`, `"日期选择器"`

## Layout

- [ ] Responsive at 320px, 768px, 1024px, 1440px - Search: `"responsive"`
- [ ] Tables wrapped in `.table-responsive` - Search: `"table responsive"`
- [ ] Table headers use `table-title` class - Search: `"table table-title"`
- [ ] Tables have pagination (DataTable `paging: true` or Bootstrap pagination) - Search: `"table pagination"`
- [ ] Tables have column sorting (DataTable `ordering: true`) - Search: `"表头 排序"`, `"column sort"`
- [ ] No horizontal scroll on mobile
- [ ] Consistent max-width for containers

## Accessibility

- [ ] All images have alt text
- [ ] Form inputs have labels
- [ ] Icon-only buttons have `aria-label`
- [ ] Color is not the only indicator
- [ ] Proper heading hierarchy (h1 to h6)