---
name: tke-UI-design
description: "TKE UI/UX design intelligence with keyword-based BM25 search. Search TKE UI standards by keywords (components, forms, tables, layouts, colors, typography, best practices). Actions: design, build, create, implement, review, fix, improve TKE frontend code. Use keyword search to find relevant TKE standards before generating code. Use when working on TKE projects requiring TK Elevator UI Element Standards compliance."
---
# TKE UI/UX

Searchable database of TKE UI standards, components, forms, tables, layouts, colors, typography, and best practices. Use BM25 search to find relevant TKE standards before generating code.

## Quick Start

1. **Search TKE standards** using `scripts/search.py` to find relevant components and patterns
2. **For base pages**: Use `templates/template.html` as starting point
3. **For incremental pages**: Generate code snippets based on search results
4. **Check resource requirements** in CSV search results' "Notes" column

## Prerequisites

Check if Python is installed:

```bash
python3 --version || python --version
```

If Python is not installed, install it based on user's OS:

**macOS:**

```bash
brew install python3
```

**Ubuntu/Debian:**

```bash
sudo apt update && sudo apt install python3
```

**Windows:**

```powershell
winget install Python.Python.3.12
```

---

## How to Use This Skill

When user requests TKE UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:

### Step 0: Determine Page Type

**First, identify the page type from user request:**

- **Base Page**: Creating a new complete HTML page

  - Keywords: "create page", "new page", "build page", "generate page", "make a page"
  - Action: Use full template from `<skill-path>/designing-tke-frontends/templates/template.html` (in skill package, NOT project root)
  - Output: Complete HTML file with header, navigation, and content area
- **Incremental Page**: Adding components/features to existing page

  - Keywords: "add modal", "add form field", "add table column", "add button", "modify existing", "update page"
  - Action: Generate code snippets only
  - Output: HTML snippets + initialization code + resource requirements

**If unclear, ask user or default to Base Page for safety.**

### Step 1: Analyze User Requirements

Extract key information from user request:
- **Page type**: Base page or incremental page (from Step 0)
- **Component type**: button, card, modal, form, table, etc.
- **Layout pattern**: search form, action buttons, card form, etc.
- **Form elements**: input, select, datepicker, checkbox, radio, etc.
- **Specific needs**: required field, validation, responsive, accessibility, etc.

### Step 2: Search Relevant TKE Standards

Use `search.py` multiple times to gather comprehensive TKE standards. Search until you have enough context.

```bash
python3 <skill-path>/designing-tke-frontends/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
```

**Recommended search order:**

1. **Component** - Get TKE component standards (buttons, cards, modals)
2. **Form** - Get form layout and element standards
3. **Table** - Get table and DataTables standards (if needed)
4. **Layout** - Get layout patterns (search forms, action buttons)
5. **Pattern** - Get component combinations (modal with form, card with form)
6. **Icon** - Get TKE icon system (if icons needed)
7. **Color** - Get TKE color system (if color customization needed)
8. **Typography** - Get TKE typography system (if typography customization needed)
9. **Responsive** - Get responsive breakpoint guidelines (if responsive design needed)
10. **Practice** - Get best practices and common mistakes

### Step 3: Apply TKE Standards

After gathering search results, apply TKE standards:

- **Colors**: Primary `#7000bd`, Orange `#f16b08`, Gray scale
- **Typography**: TKETYPE font family, fs-1 to fs-6 sizes
- **Components**: Use TKE standard classes (btn-primary, card, etc.)
- **Icons**: Use TKE icon system (`tk-icon icon-tk-*`) - NEVER use emojis

### Step 4: Generate Code Based on Page Type

#### For Base Pages (基础页面)

1. **Use Base Template**
   - Copy `templates/template.html` as starting point
   - Template already includes:
     - Complete HTML structure (header, navigation, breadcrumb)
     - Required CSS: Bootstrap 5.3.3, TKE main.css
     - Required JS: jQuery 3.6.0, TKE main-nav.js, Bootstrap 5.3.3
     - Optional CSS/JS libraries (commented out, uncomment as needed)
2. **Design Content Area Only**

   - Focus on `<section class="content">` section
   - Do NOT modify header/navigation (already included in template)
   - Apply search results to content area
3. **Add Required Resources**
   - Check CSV search results for component requirements (see "Notes" column)
   - Uncomment optional CSS/JS in template if needed:
     - Select2: `static/select2/4.0.3/select2.min.css` and `select2.full.min.js`
     - Datepicker: `static/datepicker/2.0/datepicker3.css` and `bootstrap-datepicker.js`
     - DataTables: `static/datatables/1.10.7/dataTables.bootstrap.css` and `.js` files
     - Summernote: `summernote-bs5.min.css` and `summernote-bs5.js`
     - floatThead: `static/floatThead-2.1.4/dist/jquery.floatThead.min.js`
     - Treeview: `jquery.treeview.css` and `jquery.treeview.js`
4. **Initialize Components**

   - Add initialization code in template's `<script>` section
   - Use `$(function(){ ... })` wrapper

#### For Incremental Pages

1. **Generate Code Snippets Only**

   - Provide HTML snippets for the component/feature
   - Include only the necessary code (no full page structure)

2. **Check Resource Requirements**
   - Review CSV search results for required libraries (check "Notes" column)
   - **Warn user** if additional CSS/JS libraries are needed
   - Provide exact resource paths and load order

3. **Provide Initialization Code**
   - Include JavaScript initialization code
   - Specify where to add it (in existing `$(function(){})` block)

4. **Match Existing Patterns**
   - Check user's existing page structure
   - Match column widths (`col-lg-2`, `col-lg-9`)
   - Match spacing (`mb-2`, `mb-3`)
   - Match existing component patterns

---

## Search Reference

### Available Domains

| Domain         | Use For                                               | Example Keywords                                                        |
| -------------- | ----------------------------------------------------- | ----------------------------------------------------------------------- |
| `component`  | TKE components (Buttons, Cards, Modals, Alerts, Tabs) | button, card, modal, alert, tab, progress, icon                         |
| `form`       | Form elements and layouts                             | form, input, select, datepicker, checkbox, radio, required, validation  |
| `table`      | Tables and DataTables                                 | table, datatable, pagination, responsive, fixed columns                 |
| `layout`     | Layout patterns                                       | search, action buttons, card form, horizontal form, vertical form       |
| `color`      | TKE color system                                      | primary, secondary, orange, gray, color, hex, text-primary, bg-primary  |
| `typography` | TKE typography system                                 | font, typography, heading, fs-1, fs-2, fs-3, fs-4, fs-5, fs-6           |
| `practice`   | Best practices and common mistakes                    | accessibility, responsive, performance, icon, cursor, hover, transition |
| `pattern`    | Component combinations                                | modal form, card form, table actions, button group icon                 |
| `icon`       | TKE icon system                                       | icon, tk-icon, icon-tk-search, icon-tk-edit, icon-tk-delete             |
| `responsive` | Responsive breakpoints                                | col-sm, col-md, col-lg, col-xl, breakpoint, mobile, tablet              |

---

## Example Workflow

### Example 1: Base Page

**User request:** "Create a search form page for TKE project"

**AI should:**

```bash
# Step 0: Identify as Base Page (creating new page)
# Step 1: Search for TKE standards
python3 <skill-path>/designing-tke-frontends/scripts/search.py "search filter form" --domain layout
python3 <skill-path>/designing-tke-frontends/scripts/search.py "input select form-control" --domain form
python3 <skill-path>/designing-tke-frontends/scripts/search.py "button primary search" --domain component
python3 <skill-path>/designing-tke-frontends/scripts/search.py "form layout responsive" --domain practice

# Step 2-3: Apply standards
# Step 4: Use templates/template.html as base
#         Design only <section class="content"> section
#         Check if Select2 is needed, uncomment in template if yes
#         Add initialization code in template's script section
```

**Output:** Complete HTML file with header, navigation, and search form in content area.

### Example 2: Incremental Page

**User request:** "Add a modal to existing page for editing user info"

**AI should:**

```bash
# Step 0: Identify as Incremental Page (adding to existing)
# Step 1: Search for modal standards
python3 <skill-path>/designing-tke-frontends/scripts/search.py "modal form" --domain component
python3 <skill-path>/designing-tke-frontends/scripts/search.py "form input" --domain form

# Step 2-3: Apply standards
# Step 4: Generate modal HTML snippet only
#         Check if Bootstrap is already loaded (should be, but verify)
#         Provide initialization code snippet
```

**Output:** 
- Modal HTML snippet (to add to existing page)
- Initialization code snippet (to add to existing script block)
- Resource check: "Ensure Bootstrap 5.3.3 JS is loaded (should be in base template)"

---

## Tips for Better Results

1. **Be specific with keywords** - "button primary action" > "button"
2. **Search multiple times** - Different keywords reveal different insights
3. **Combine domains** - Component + Form + Layout = Complete solution
4. **Always check practices** - Search "icon", "cursor", "hover", "accessibility" for common issues
5. **Iterate** - If first search doesn't match, try different keywords

---

## TKE Standards Summary

### Colors

- **Primary**: `#7000bd` (--primary)
- **Primary Hover**: `#a31aff` (--primary-hover)
- **Primary Active**: `#58008d` (--primary-active)
- **Orange**: `#f16b08` (--orange)
- **Green**: `#237c00` (--green)
- **Red**: `#a80012` (--red)
- **Gray Scale**: --gray-001 to --gray-006

### Typography

- **Font Family**: TKETYPE
- **Sizes**: fs-1 (30px) to fs-6 (12px)
- **Headings**: h1 (30px) to h6 (12px)

### Components

- **Buttons**: `btn btn-primary`, `btn btn-secondary`, `btn btn-low`
- **Cards**: `card`, `card-header`, `card-body`, `card-title`
  - **Card Blocking**: Use separate `card mb-3` for each functional section (search form, data table, timeline, etc.). Each major feature should be its own card. Use `card border-0 shadow-sm mb-3` for standard styling.
  - **Don't**: Put all content (search form, table, timeline) in a single card. Each functional section should be a separate card.
- **Forms**: `form-control`, `col-form-label`, `text-lg-end`
- **Tables**: `table table-sm table-bordered table-striped table-hover`
- **Icons**: `tk-icon icon-tk-*` (NEVER use emojis)

### Framework

- **Bootstrap**: 5.3.3
- **jQuery**: 3.6.0
- **Select2**: 4.0.3
- **DataTables**: 1.10.7

---

## Static Resources Reference

**Important**: All static resources are located at **project root**, not in skill directory.

### Resource Paths

#### Required Resources (Included in Base Template)

**CSS:**

- `static/bootstrap/bootstrap-5.3.3/css/bootstrap.css` - Bootstrap framework
- `tk/css/main.css` - TKE custom styles

**JavaScript:**

- `static/jQuery/3.6.0/jquery.min.js` - jQuery (must load first)
- `tk/js/main-nav.js` - TKE navigation script
- `static/bootstrap/bootstrap-5.3.3/js/bootstrap.bundle.js` - Bootstrap JS

#### Optional Resources (Uncomment in Template as Needed)

**CSS Libraries:**

- `static/select2/4.0.3/select2.min.css` - Select2 dropdown styling
- `static/datepicker/2.0/datepicker3.css` - Datepicker styling
- `static/daterangepicker/2.10.3/daterangepicker.css` - Date range picker
- `static/datatables/1.10.7/dataTables.bootstrap.css` - DataTables styling
- `summernote-bs5.min.css` - Rich text editor (Summernote)
- `jquery.treeview.css` - Treeview component

**JavaScript Libraries:**

- `static/select2/4.0.3/select2.full.min.js` - Select2 dropdown
- `static/datepicker/2.0/bootstrap-datepicker.js` - Datepicker
- `static/daterangepicker/2.10.3/daterangepicker.js` - Date range picker
- `static/datatables/1.10.7/jquery.dataTables.min.js` - DataTables core
- `static/datatables/1.10.7/dataTables.bootstrap.min.js` - DataTables Bootstrap integration
- `summernote-bs5.js` - Rich text editor (Summernote)
- `jquery.treeview.js` - Treeview component
- `static/floatThead-2.1.4/dist/jquery.floatThead.min.js` - Sticky table headers

#### Image Resources

**Empty States & Error Pages:**

- `tk/img/responsive/no-data.png` - No data empty state
- `tk/img/responsive/no-task.png` - No task empty state
- `tk/img/responsive/error_one.png` - Error page image
- `tk/img/responsive/error_bc.png` - Standard error page image
- `tk/img/responsive/404.png` - 404 page image
- `tk/img/responsive/nopermission_person.png` - No permission page person
- `tk/img/responsive/nopermission_bc.png` - No permission page bottom
- `tk/img/responsive/systemmaintenance.png` - System maintenance page

### Component Resource Mapping

When generating code, check CSV search results for component requirements:

| Component           | Required Resources                                                                          | Check CSV Notes Column |
| ------------------- | ------------------------------------------------------------------------------------------- | ---------------------- |
| Select2             | `select2.min.css`, `select2.full.min.js`                                                | Yes                    |
| Datepicker          | `datepicker3.css`, `bootstrap-datepicker.js`                                            | Yes                    |
| DataTables          | `dataTables.bootstrap.css`, `jquery.dataTables.min.js`, `dataTables.bootstrap.min.js` | Yes                    |
| Summernote          | `summernote-bs5.min.css`, `summernote-bs5.js`                                           | Yes                    |
| Treeview            | `jquery.treeview.css`, `jquery.treeview.js`                                             | Yes                    |
| Sticky Header Table | `jquery.floatThead.min.js`                                                                | Yes                    |
| Empty State         | `tk/img/responsive/no-data.png`                                                           | Yes                    |
| Error Page          | `tk/img/responsive/error_*.png`                                                           | Yes                    |

**Always check CSV search results' "Notes" column for resource requirements!**

---

## Common Rules for Professional TKE UI

These are frequently overlooked issues that make TKE UI look unprofessional. **When in doubt, search TKE standards using `scripts/search.py` with the provided keywords.**

### Colors & Variables

| ❌ Common Error | ✅ TKE Correct | 🔍 Search Keywords |
|----------------|---------------|-------------------|
| `background-color: #237c00` (hardcoded) | `var(--success)` or `bg-success` class | `"success color"`, `"color variable"` |
| `color: #000` (hardcoded) | `var(--gray-006)` or `text-gray` | `"text color variable"` |

**Always use TKE CSS variables instead of hardcoded color values.**

### Border Radius

| ❌ Common Error | ✅ TKE Correct | 🔍 Search Keywords |
|----------------|---------------|-------------------|
| `border-radius: 0.25rem` (custom) | `var(--border-radius)` | `"button border-radius"` |
| `border-radius: 4px` (custom) | `var(--border-radius)` | `"border-radius variable"` |
| `border-radius: 50%` (filter button) | `var(--border-radius-full)` | `"filter button border-radius"` |

**Never use custom border-radius values. Always use TKE variables.**

### Icons & Visual Elements

| Rule                             | Do                                          | Don't                                  | 🔍 Search Keywords |
| -------------------------------- | ------------------------------------------- | -------------------------------------- | ----------------- |
| **No emoji icons**         | Use TKE icon system (`tk-icon icon-tk-*`) | Use emojis like 🎨 🚀 ⚙️ as UI icons | `"icon emoji"` |
| **Stable hover states**    | Use color/opacity transitions on hover      | Use scale transforms that shift layout | `"hover feedback"` |
| **Consistent icon sizing** | Use fixed viewBox with fs-* classes         | Mix different icon sizes randomly      | `"icon sizing"` |
| **Download icons** | Use `icon-tk-file-excel` for Excel downloads | Generic download icons | `"download excel"` |

### Interaction & Cursor

| Rule                         | Do                                                         | Don't                                        | 🔍 Search Keywords |
| ---------------------------- | ---------------------------------------------------------- | -------------------------------------------- | ----------------- |
| **Cursor pointer**     | Add `cursor-pointer` to all clickable/hoverable elements | Leave default cursor on interactive elements | `"cursor pointer"` |
| **Hover feedback**     | Provide visual feedback (color, shadow, border)            | No indication element is interactive         | `"hover feedback"` |
| **Smooth transitions** | Use `transition-colors duration-200`                     | Instant state changes or too slow (>500ms)   | `"smooth transitions"` |

### Form Standards

| Rule                      | Do                                                                                   | Don't                           | 🔍 Search Keywords |
| ------------------------- | ------------------------------------------------------------------------------------ | ------------------------------- | ----------------- |
| **Required fields** | Always use `<span class="star_mark">*</span>`                                      | Forget to mark required fields  | `"required field"` |
| **Label linking**   | Use `for` attribute on labels, `id` on inputs                                    | Forget to link labels to inputs | `"form label"` |
| **Form layout**     | Use `col-lg-2` to `col-lg-4` for labels, `col-lg-8` to `col-lg-9` for inputs | Use incorrect column widths (e.g., `col-lg-3`) | `"form layout col-lg"` |
| **Form spacing** | Use `mb-2` between form rows | Missing spacing | `"form spacing mb-2"` |
| **Date picker** | Use `datepicker` with `icon-tk-calendar` | Native `<input type="date">` | `"datepicker"`, `"日期选择器"` |

### Layout & Spacing

| Rule                    | Do                                                              | Don't                                   | 🔍 Search Keywords |
| ----------------------- | --------------------------------------------------------------- | --------------------------------------- | ----------------- |
| **Form spacing**  | Use `mb-2` for spacing between form rows                      | Inconsistent spacing                    | `"form spacing"` |
| **Responsive**    | Always use responsive grid classes (`col-lg-*`, `col-md-*`) | Fixed widths without responsive classes | `"responsive"` |
| **Table wrapper** | Wrap tables in `.table-responsive`                            | Tables without responsive wrapper       | `"table responsive"` |
| **Table header** | Use `table-title` class for table headers | Missing `table-title` class | `"table table-title"` |
| **Table pagination** | Use DataTable `paging: true` or Bootstrap pagination | Missing pagination | `"table pagination"` |
| **Table sorting** | Use DataTable `ordering: true` | Missing column sorting | `"表头 排序"`, `"column sort"` |
| **Table action icons** | Use `<a class="a-icon">` OR `<button class="button-no">` for icon actions. Use `text-nowrap text-center` on td | Use `btn btn-primary` or other bordered button classes for icon actions | `"table actions"`, `"table operation icon"`, `"button-no"`, `"a-icon"` |

### Drag & Drop

| ❌ Common Error | ✅ TKE Correct | 🔍 Search Keywords |
|----------------|---------------|-------------------|
| Native HTML5 drag & drop | jQuery UI `sortable` with `icon-tk-move` | `"drag drop"`, `"拖拽"` |
| Missing initialization | Initialize in `$(function(){})` | `"sortable initialize"` |

### Card Blocking

| Rule | Do | Don't | 🔍 Search Keywords |
|------|----|----|-------------------|
| **Separate functional sections** | Use separate `card mb-3` for each functional section (search form, data table, timeline, etc.) | Put all content (search form, table, timeline) in a single card | `"card blocking"`, `"card grouping"`, `"separate sections"` |
| **Standard card styling** | Use `card border-0 shadow-sm mb-3` for standard cards | Use card without mb-3 spacing | `"card border-0 shadow-sm mb-3"` |
| **Each major feature = one card** | Each major feature (search form, data table, timeline, form edit) should be its own card | Combine multiple features into one card | `"card mb-3"` |

**Always use separate cards for different functional sections. Each major feature should be its own card with mb-3 spacing.**

---

## 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)

---

## Helper Scripts

**Helper Scripts Available**:

- `scripts/search.py` - Search TKE standards using BM25 algorithm

**Usage**: Run scripts from the **project root directory**:

```bash
python3 <skill-path>/designing-tke-frontends/scripts/search.py "button primary" --domain component
```

Replace `<skill-path>` with the actual skill location (`.claude/skills/` for project-level, `~/.claude/skills/` for global).

**Always run scripts with `--help` first** to see usage. DO NOT read the source until you try running the script first and find that a customized solution is absolutely necessary. These scripts can be very large and thus pollute your context window. They exist to be called directly as black-box scripts rather than ingested into your context window.

---

## Related Resources

**Essential Resources** (included in this skill):

- **Base Template**: Use `<skill-path>/designing-tke-frontends/templates/template.html` as starting point for base pages

  - **⚠️ CRITICAL**: Template is in skill package, NOT project root (see file location warning at top)
  - **How to read**: Use `read_file()` tool with full path from skill package directory
  - **Example paths**: `~/.claude/skills/designing-tke-frontends/templates/template.html` (global) or `./.claude/skills/designing-tke-frontends/templates/template.html` (project)
  - Includes complete HTML structure (header, navigation, breadcrumb)
  - Includes required CSS/JS (Bootstrap, TKE main.css, main-nav.js)
  - Optional libraries commented out (uncomment as needed)
- **TKE Standards Data**: Search using `scripts/search.py` to find:

  - Component standards (buttons, cards, modals, alerts, tabs)
  - Form elements and layouts
  - Table patterns and DataTables configurations
  - Layout patterns (search forms, action buttons)
  - Color and typography systems
  - Best practices and common mistakes