opencode-agent-kit 1.0.0

package/template/.opencode/skills/flutter-use-http-package/SKILL.md

@@ -0,0 +1,174 @@
+---
+name: flutter-use-http-package
+description: Use the `http` package to execute GET, POST, PUT, or DELETE requests. Use when you need to fetch from or send data to a REST API.
+metadata:
+  model: models/gemini-3.1-pro-preview
+  last_modified: Tue, 21 Apr 2026 21:36:42 GMT
+---
+# Implementing Flutter Networking
+
+## Contents
+- [Configuration & Permissions](#configuration--permissions)
+- [Request Execution & Response Handling](#request-execution--response-handling)
+- [Background Parsing](#background-parsing)
+- [Workflow: Executing Network Operations](#workflow-executing-network-operations)
+- [Examples](#examples)
+
+## Configuration & Permissions
+
+Configure the environment and platform-specific permissions required for network access.
+
+1. Add the `http` package dependency via the terminal:
+   ```bash
+   flutter pub add http
+   ```
+2. Import the package in your Dart files:
+   ```dart
+   import 'package:http/http.dart' as http;
+   ```
+3. Configure Android permissions by adding the Internet permission to `android/app/src/main/AndroidManifest.xml`:
+   ```xml
+   <uses-permission android:name="android.permission.INTERNET" />
+   ```
+4. Configure macOS entitlements by adding the network client key to both `macos/Runner/DebugProfile.entitlements` and `macos/Runner/Release.entitlements`:
+   ```xml
+   <key>com.apple.security.network.client</key>
+   <true/>
+   ```
+
+## Request Execution & Response Handling
+
+Execute HTTP operations and map responses to strongly typed Dart objects.
+
+*   **URIs:** Always parse URL strings using `Uri.parse('your_url')`.
+*   **Headers:** Inject authorization and content-type headers via the `headers` parameter map. Use `HttpHeaders.authorizationHeader` for auth tokens.
+*   **Payloads:** For POST and PUT requests, encode the body using `jsonEncode()` from `dart:convert`.
+*   **Status Validation:** Evaluate `response.statusCode`. Treat `200 OK` (GET/PUT/DELETE) and `201 CREATED` (POST) as success. 
+*   **Error Handling:** Throw explicit exceptions for non-success status codes. Never return `null` on failure, as this prevents `FutureBuilder` from triggering its error state and causes infinite loading indicators.
+*   **Deserialization:** Parse the raw string using `jsonDecode(response.body)` and map it to a custom Dart object using a factory constructor (e.g., `fromJson`).
+
+## Background Parsing
+
+Offload expensive JSON parsing to a separate Isolate to prevent UI jank (frame drops).
+
+*   Import `package:flutter/foundation.dart`.
+*   Use the `compute()` function to run the parsing logic in a background isolate.
+*   Ensure the parsing function passed to `compute()` is a top-level function or a static method, as closures or instance methods cannot be passed across isolates.
+
+## Workflow: Executing Network Operations
+
+Use the following checklist to implement and validate network operations.
+
+**Task Progress:**
+- [ ] 1. Define the strongly typed Dart model with a `fromJson` factory constructor.
+- [ ] 2. Implement the network request method returning a `Future<Model>`.
+- [ ] 3. Apply conditional logic based on the operation type:
+  - **If fetching data (GET):** Append query parameters to the URI.
+  - **If mutating data (POST/PUT):** Set `'Content-Type': 'application/json; charset=UTF-8'` and attach the `jsonEncode` body.
+  - **If deleting data (DELETE):** Return an empty model instance on success (`200 OK`).
+- [ ] 4. Validate the `statusCode` and throw an `Exception` on failure.
+- [ ] 5. Integrate the `Future` into the UI using `FutureBuilder`.
+- [ ] 6. Handle `snapshot.hasData`, `snapshot.hasError`, and default to a `CircularProgressIndicator`.
+- [ ] 7. **Feedback Loop:** Run the app -> trigger the network request -> review console for unhandled exceptions -> fix parsing or permission errors.
+
+## Examples
+
+### High-Fidelity Implementation: Fetching and Parsing in the Background
+
+```dart
+import 'dart:async';
+import 'dart:convert';
+import 'dart:io';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:http/http.dart' as http;
+
+// 1. Top-level parsing function for Isolate
+List<Photo> parsePhotos(String responseBody) {
+  final parsed = (jsonDecode(responseBody) as List<Object?>)
+      .cast<Map<String, Object?>>();
+  return parsed.map<Photo>(Photo.fromJson).toList();
+}
+
+// 2. Network execution with background parsing
+Future<List<Photo>> fetchPhotos() async {
+  final response = await http.get(
+    Uri.parse('https://jsonplaceholder.typicode.com/photos'),
+    headers: {
+      HttpHeaders.authorizationHeader: 'Bearer your_token_here',
+      HttpHeaders.acceptHeader: 'application/json',
+    },
+  );
+
+  if (response.statusCode == 200) {
+    // Offload heavy parsing to a background isolate
+    return compute(parsePhotos, response.body);
+  } else {
+    throw Exception('Failed to load photos. Status: ${response.statusCode}');
+  }
+}
+
+// 3. Strongly typed model
+class Photo {
+  final int id;
+  final String title;
+  final String thumbnailUrl;
+
+  const Photo({
+    required this.id,
+    required this.title,
+    required this.thumbnailUrl,
+  });
+
+  factory Photo.fromJson(Map<String, dynamic> json) {
+    return Photo(
+      id: json['id'] as int,
+      title: json['title'] as String,
+      thumbnailUrl: json['thumbnailUrl'] as String,
+    );
+  }
+}
+
+// 4. UI Integration
+class PhotoGallery extends StatefulWidget {
+  const PhotoGallery({super.key});
+
+  @override
+  State<PhotoGallery> createState() => _PhotoGalleryState();
+}
+
+class _PhotoGalleryState extends State<PhotoGallery> {
+  late Future<List<Photo>> _futurePhotos;
+
+  @override
+  void initState() {
+    super.initState();
+    // Initialize Future once to prevent re-fetching on rebuilds
+    _futurePhotos = fetchPhotos();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder<List<Photo>>(
+      future: _futurePhotos,
+      builder: (context, snapshot) {
+        if (snapshot.hasData) {
+          final photos = snapshot.data!;
+          return ListView.builder(
+            itemCount: photos.length,
+            itemBuilder: (context, index) => ListTile(
+              leading: Image.network(photos[index].thumbnailUrl),
+              title: Text(photos[index].title),
+            ),
+          );
+        } else if (snapshot.hasError) {
+          return Center(child: Text('Error: ${snapshot.error}'));
+        }
+        
+        // Default loading state
+        return const Center(child: CircularProgressIndicator());
+      },
+    );
+  }
+}
+```

package/template/.opencode/skills/frontend-design/SKILL.md

@@ -0,0 +1,89 @@
+---
+name: frontend-design
+description: Create distinctive, production-grade frontend interfaces with high design quality. Automatically applies Impeccable design intelligence — typography, color, layout, motion, critique, and polish. Use this skill when the user asks to build, redesign, critique, audit, or polish web components, pages, or applications.
+---
+
+This skill embeds **Impeccable** (impeccable.style) design intelligence. When doing frontend design work, automatically load the `impeccable` skill via the skill tool to access deep reference files for typography, color, motion, spatial design, interaction, responsive, UX writing, and all 23 design command references.
+
+## Core Design Principles (Apply Automatically)
+
+### Color
+- Use OKLCH. Reduce chroma as lightness approaches 0 or 100.
+- Never use `#000` or `#fff`. Tint every neutral toward the brand hue (chroma 0.005–0.01).
+- Pick a **color strategy**: Restrained (tinted neutrals + ≤10% accent), Committed (one color carries 30–60%), Full palette (3–4 named roles), or Drenched (the surface IS the color).
+- Name your instinctive first three palette choices; reject all three before committing.
+
+### Typography
+- Cap body line length at 65–75ch.
+- ≥1.25 ratio between hierarchy steps. Avoid flat scales.
+- Avoid overused fonts: Inter, Roboto, Arial, Fraunces, Geist, Plus Jakarta Sans, Space Grotesk, Recoleta, Instrument Sans.
+- Prefer distinctive display fonts + refined body pairings.
+
+### Layout
+- Vary spacing for rhythm. Same padding everywhere is monotony.
+- Cards are the lazy answer. Use only when they're truly the best affordance. Nested cards are always wrong.
+- Don't wrap everything in a container. Most things don't need one.
+
+### Motion
+- Don't animate CSS layout properties.
+- Ease out with exponential curves (ease-out-quart / quint / expo). No bounce, no elastic.
+- 150ms for hover/focus, 300ms for toggles/reveals, 500ms for page transitions.
+
+### Absolute Bans (AI Slop Prevention)
+- **Side-stripe borders**: `border-left`/`right` >1px as colored accent — never intentional.
+- **Gradient text**: `background-clip: text` with gradient — decorative, never meaningful.
+- **Glassmorphism as default** — rare and purposeful, or nothing.
+- **Hero-metric template**: big number, small label, supporting stats, gradient accent. SaaS cliché.
+- **Identical card grids**: same-sized cards with icon + heading + text, endlessly.
+- **Modal as first thought** — exhaust inline/progressive alternatives first.
+- **Italic serif display heroes**: oversized italic serif as primary h1 (late-2025 AI fingerprint).
+- **Hero eyebrow chips**: uppercase letter-spaced label sitting directly above h1.
+
+### Copy
+- Every word earns its place. No restated headings, no intros that repeat the title.
+- **No em dashes**. Use commas, colons, semicolons, periods, or parentheses.
+
+### Register Awareness
+Every design task is either **brand** (marketing, landing, portfolio: design IS the product) or **product** (app UI, dashboard, tools: design SERVES the product). Identify before designing. Brand work needs bolder choices; product work needs clarity and efficiency.
+
+## Design Thinking
+
+Before coding, understand:
+- **Purpose**: What problem does this interface solve? Who uses it?
+- **Tone**: Pick a BOLD aesthetic direction (brutally minimal, maximalist chaos, retro-futuristic, editorial/magazine, etc.)
+- **Constraints**: Technical requirements (framework, performance, accessibility)
+- **Differentiation**: What makes this UNFORGETTABLE?
+
+Then implement working code that is:
+- Production-grade and functional
+- Visually striking and memorable
+- Cohesive with a clear aesthetic point-of-view
+- Meticulously refined in every detail
+
+## Aesthetics Guidelines
+
+- **Typography**: Choose distinctive, unexpected fonts. Avoid AI-overused fonts.
+- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables in OKLCH.
+- **Motion**: Purposeful animations, staggered reveals, scroll-triggering, surprising hover states.
+- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Grid-breaking. Generous whitespace.
+- **Backgrounds**: Gradient meshes, noise textures, geometric patterns, layered transparencies.
+
+Never converge on common choices across generations. Vary between light and dark themes, different fonts, different aesthetics.
+
+## Loading Impeccable Reference Files
+
+When the task involves any of these, load the corresponding reference via the `skill` tool:
+
+| Task | Reference File |
+|------|---------------|
+| Typography fixes | `impeccable` skill (loads typography.md) |
+| Color decisions | `impeccable` skill (loads color-and-contrast.md) |
+| Motion/animation | `impeccable` skill (loads motion-design.md) |
+| Layout/spacing | `impeccable` skill (loads spatial-design.md) |
+| UX copy | `impeccable` skill (loads ux-writing.md) |
+| Responsive | `impeccable` skill (loads responsive-design.md) |
+| Interaction design | `impeccable` skill (loads interaction-design.md) |
+| Full critique | `impeccable` skill (loads critique.md, personas.md, heuristics-scoring.md) |
+| Production polish | `impeccable` skill (loads polish.md) |
+| Brand work | `impeccable` skill (loads brand.md) |
+| Product UI | `impeccable` skill (loads product.md) |