feat: add html-to-flutter skill and research report

- Add .kilo/skills/html-to-flutter/SKILL.md
  - HTML parsing patterns with html package
  - CSS to Flutter style mapping
  - Widget tree generation from HTML templates
  - flutter_html integration (608k downloads, 2.1k likes)
  - Design-time code generation patterns
  - Responsive layout conversion (flexbox/grid → Row/Column)
  - Form, Card, Navigation conversion examples

- Update flutter-developer agent
  - Reference html-to-flutter skill
  - Add HTML template conversion workflow
  - Integration with flutter_html package

- Add research report .kilo/reports/flutter-cycle-analysis.md
  - Gap analysis: HTML→Flutter conversion (critical)
  - Testing gap analysis
  - Network/API gap analysis
  - Storage gap analysis
  - Implementation priority and recommendations
  - Complete workflow for HTML Template + ТЗ → Flutter App

Research sources:
- flutter_html 3.0.0 (2.1k likes, 608k downloads)
- go_router 17.2.0 (5.6k likes, 2.31M downloads)
- flutter_riverpod 3.3.1 (2.8k likes, 1.61M downloads)
- freezed 3.2.5 (4.4k likes, 1.83M downloads)

Closes: HTML template input workflow for Flutter development
This commit is contained in:
¨NW¨
2026-04-05 17:26:02 +01:00
parent af5f401a53
commit b899119d21
4 changed files with 1004 additions and 1 deletions

View File

@@ -656,6 +656,56 @@ This agent uses the following skills for comprehensive Flutter development:
| `flutter-state` | Riverpod, Bloc, Provider patterns |
| `flutter-navigation` | go_router, auto_route |
| `flutter-animation` | Implicit, explicit animations |
| `html-to-flutter` | Convert HTML templates to Flutter widgets |
### HTML Template Conversion
When HTML templates are provided as input:
1. **Analyze HTML structure** - Identify components, layouts, styles using `html` package
2. **Parse CSS styles** - Map to Flutter TextStyle, Decoration, EdgeInsets
3. **Generate widget tree** - Convert HTML elements to Flutter widgets
4. **Apply business logic** - Add state management, event handlers
5. **Implement responsive design** - Convert to LayoutBuilder/MediaQuery patterns
**Example HTML → Flutter conversion:**
```html
<!-- Input HTML -->
<div class="card">
<h3 class="title">Title</h3>
<p class="description">Description</p>
</div>
```
```dart
// Output Flutter
class CardWidget extends StatelessWidget {
const CardWidget({super.key});
@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Title', style: Theme.of(context).textTheme.titleLarge),
const SizedBox(height: 8),
Text('Description', style: Theme.of(context).textTheme.bodyMedium),
],
),
),
);
}
}
```
**Recommended packages:**
- `flutter_html: ^3.0.0` - Runtime HTML rendering
- `html: ^0.15.6` - HTML parsing
- `cached_network_image: ^3.3.0` - Image caching from HTML
### Data
| Skill | Purpose |