Cursor rule

1---
2description: Guidelines for implementing and maintaining user interface components
3globs: scripts/modules/ui.js
4alwaysApply: false
5---
6 
7# User Interface Implementation Guidelines
8 
9## Core UI Component Principles
10 
11- **Function Scope Separation**:
12  - ✅ DO: Keep display logic separate from business logic
13  - ✅ DO: Import data processing functions from other modules
14  - ❌ DON'T: Include task manipulations within UI functions
15  - ❌ DON'T: Create circular dependencies with other modules
16 
17- **Standard Display Pattern**:
18```javascript
19  // ✅ DO: Follow this pattern for display functions
20  /**
21   * Display information about a task
22   * @param {Object} task - The task to display
23   */
24  function displayTaskInfo(task) {
25    console.log(boxen(
26      chalk.white.bold(`Task: #${task.id} - ${task.title}`),
27      { padding: 1, borderColor: 'blue', borderStyle: 'round' }
28    ));
29  }
30```
31 
32## Visual Styling Standards
33 
34- **Color Scheme**:
35  - Use `chalk.blue` for informational messages
36  - Use `chalk.green` for success messages
37  - Use `chalk.yellow` for warnings
38  - Use `chalk.red` for errors
39  - Use `chalk.cyan` for prompts and highlights
40  - Use `chalk.magenta` for subtask-related information
41 
42- **Box Styling**:
43```javascript
44  // ✅ DO: Use consistent box styles by content type
45  // For success messages:
46  boxen(content, {
47    padding: 1,
48    borderColor: 'green',
49    borderStyle: 'round',
50    margin: { top: 1 }
51  })
52 
53  // For errors:
54  boxen(content, {
55    padding: 1,
56    borderColor: 'red',
57    borderStyle: 'round'
58  })
59 
60  // For information:
61  boxen(content, {
62    padding: 1,
63    borderColor: 'blue',
64    borderStyle: 'round',
65    margin: { top: 1, bottom: 1 }
66  })
67```
68 
69## Table Display Guidelines
70 
71- **Table Structure**:
72  - Use [`cli-table3`](mdc:node_modules/cli-table3/README.md) for consistent table rendering
73  - Include colored headers with bold formatting
74  - Use appropriate column widths for readability
75 
76```javascript
77  // ✅ DO: Create well-structured tables
78  const table = new Table({
79    head: [
80      chalk.cyan.bold('ID'),
81      chalk.cyan.bold('Title'),
82      chalk.cyan.bold('Status'),
83      chalk.cyan.bold('Priority'),
84      chalk.cyan.bold('Dependencies')
85    ],
86    colWidths: [5, 40, 15, 10, 20]
87  });
88 
89  // Add content rows
90  table.push([
91    task.id,
92    truncate(task.title, 37),
93    getStatusWithColor(task.status),
94    chalk.white(task.priority || 'medium'),
95    formatDependenciesWithStatus(task.dependencies, allTasks, true)
96  ]);
97 
98  console.log(table.toString());
99```
100 
101## Loading Indicators
102 
103- **Animation Standards**:
104  - Use [`ora`](mdc:node_modules/ora/readme.md) for spinner animations
105  - Create and stop loading indicators correctly
106 
107```javascript
108  // ✅ DO: Properly manage loading state
109  const loadingIndicator = startLoadingIndicator('Processing task data...');
110  try {
111    // Do async work...
112    stopLoadingIndicator(loadingIndicator);
113    // Show success message
114  } catch (error) {
115    stopLoadingIndicator(loadingIndicator);
116    // Show error message
117  }
118```
119 
120## Helper Functions
121 
122- **Status Formatting**:
123  - Use `getStatusWithColor` for consistent status display
124  - Use `formatDependenciesWithStatus` for dependency lists
125  - Use `truncate` to handle text that may overflow display
126 
127- **Progress Reporting**:
128  - Use visual indicators for progress (bars, percentages)
129  - Include both numeric and visual representations
130 
131```javascript
132  // ✅ DO: Show clear progress indicators
133  console.log(`${chalk.cyan('Tasks:')} ${completedTasks}/${totalTasks} (${completionPercentage.toFixed(1)}%)`);
134  console.log(`${chalk.cyan('Progress:')} ${createProgressBar(completionPercentage)}`);
135```
136 
137## Command Suggestions
138 
139- **Action Recommendations**:
140  - Provide next step suggestions after command completion
141  - Use a consistent format for suggested commands
142 
143```javascript
144  // ✅ DO: Show suggested next actions
145  console.log(boxen(
146    chalk.white.bold('Next Steps:') + '\n\n' +
147    `${chalk.cyan('1.')} Run ${chalk.yellow('task-manager list')} to view all tasks\n` +
148    `${chalk.cyan('2.')} Run ${chalk.yellow('task-manager show --id=' + newTaskId)} to view details`,
149    { padding: 1, borderColor: 'cyan', borderStyle: 'round', margin: { top: 1 } }
150  ));
151```
152 
153Refer to [`ui.js`](mdc:scripts/modules/ui.js) for implementation examples and [`new_features.mdc`](mdc:.cursor/rules/new_features.mdc) for integration guidelines.