---
name: enhance-typescript-ui-components-3ca702956310
description: Add visual features (thumbnails, badges, dynamic styling) to TypeScript components by coordinating TypeScript logic changes with CSS updates
---
# Enhance TypeScript UI Components
A systematic workflow for adding visual enhancements to TypeScript UI components, including thumbnails, color-coded badges, and dynamic styling. This pattern applies to component files that render data items (lists, panels, cards, etc.).
## When to Use This Skill
- Adding visual indicators (badges, labels, icons) to existing components
- Implementing thumbnail images with fallback placeholders
- Applying dynamic, data-driven colors or styles
- Coordinating TypeScript component logic with CSS styling
## Workflow Steps
### 1. Add Constants at File Top
Define color mappings, size constants, and configuration data near the top of the TypeScript file, after imports but before the class definition.
```typescript
// Color mappings for categories/sources
const SOURCE_COLORS: { [key: string]: string } = {
'Category A': '#FF6B6B',
'Category B': '#4ECDC4',
'Category C': '#45B7D1',
'default': '#95A5A6'
};
// Size constants
const THUMBNAIL_SIZE = 48; // pixels
const BADGE_HEIGHT = 20;
```
**Why**: Centralizes configuration for easy maintenance and avoids magic values scattered throughout code.
### 2. Implement Helper Methods
Create private helper methods for dynamic style calculations and data transformations. Place these before the main render method.
```typescript
private getColorForItem(item: DataItem): string {
return SOURCE_COLORS[item.category] || SOURCE_COLORS['default'];
}
private sortItemsByDate(items: DataItem[]): DataItem[] {
return [...items].sort((a, b) =>
new Date(b.date).getTime() - new Date(a.date).getTime()
);
}
private getThumbnailUrl(item: DataItem): string {
return item.imageUrl || `https://via.placeholder.com/${THUMBNAIL_SIZE}`;
}
```
**Why**: Separates logic from presentation, makes code testable, and improves readability.
### 3. Sort Data Before Rendering
If displaying lists, apply sorting transformations before building HTML.
```typescript
public render(): void {
const sortedItems = this.sortItemsByDate(this.items);
const html = sortedItems.map(item => this.renderItem(item)).join('');
this.container.innerHTML = html;
}
```
**Why**: Ensures consistent presentation order and separates data transformation from rendering.
### 4. Build HTML with Template Literals
Use template literals for HTML construction with conditional rendering for optional fields.
```typescript
private renderItem(item: DataItem): string {
const itemColor = this.getColorForItem(item);
const thumbnailUrl = this.getThumbnailUrl(item);
return `
${item.imageUrl ? `
` : `
`}
${item.title}
${item.category ? `
${item.category}
` : ''}
${item.description}
${item.title}
`;
});
```
**After** (enhanced with badges):
```typescript
// 1. Add constants
const SOURCE_COLORS = {
'TechNews': '#3498db',
'default': '#95a5a6'
};
// 2. Helper method
private getSourceColor(source: string): string {
return SOURCE_COLORS[source] || SOURCE_COLORS['default'];
}
// 3. Enhanced template
items.forEach(item => {
const color = this.getSourceColor(item.source);
html += `
${item.source}
${item.title}
`;
});
// 4. CSS (in stylesheet)
// .source-badge {
// padding: 2px 6px;
// border-radius: 3px;
// font-size: 11px;
// color: white;
// }
```
## Common Pitfalls
- **Mixing concerns**: Don't put all layout styles inline; use CSS for structure
- **Forgetting fallbacks**: Always handle missing/null optional fields
- **Hard-coded values**: Extract magic numbers and colors to constants
- **Skipping CSS updates**: Every new HTML structure needs corresponding CSS
- **Not testing edge cases**: Test with missing images, empty strings, special characters
---
Source attribution: AG064
Original project: https://github.com/AG064/OpenSpace/blob/ff671ef61ed6587c49bd54c81cdc751c0b99e363/showcase/skills/enhance-typescript-ui-components/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Mega AI Hub.
## Upstream license notice
MIT License
Copyright (c) 2026 ✨Data Intelligence Lab@HKU✨
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
# Mega AI Hub resource metadata
Creator / publisher: AG064
Original project: https://github.com/AG064/OpenSpace/blob/ff671ef61ed6587c49bd54c81cdc751c0b99e363/showcase/skills/enhance-typescript-ui-components/SKILL.md
Attribution basis: Source repository record
Fields of work: Design, Development & Engineering
Roles: Frontend Developer, Product Designer, UX Designer
Specialties: API, Cross Platform, Frontend
Tools: Tool not specified
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: 142d29ab8a835a18153d7848c69cbd70ed6f345cc9470352e9903bef0b5a14e3