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:
@@ -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 |
|
||||
|
||||
Reference in New Issue
Block a user