codehava-agent-kit 1.0.1 → 3.0.0

package/templates/.agent/skills/expo-tailwind-setup/SKILL.md

@@ -0,0 +1,482 @@
+---
+name: expo-tailwind-setup
+description: Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
+risk: unknown
+source: community
+version: 1.0.0
+license: MIT
+---
+
+# Tailwind CSS Setup for Expo with react-native-css
+
+This guide covers setting up Tailwind CSS v4 in Expo using react-native-css and NativeWind v5 for universal styling across iOS, Android, and Web.
+
+## Overview
+
+This setup uses:
+
+- **Tailwind CSS v4** - Modern CSS-first configuration
+- **react-native-css** - CSS runtime for React Native
+- **NativeWind v5** - Metro transformer for Tailwind in React Native
+- **@tailwindcss/postcss** - PostCSS plugin for Tailwind v4
+
+## Installation
+
+```bash
+# Install dependencies
+npx expo install tailwindcss@^4 nativewind@5.0.0-preview.2 react-native-css@0.0.0-nightly.5ce6396 @tailwindcss/postcss tailwind-merge clsx
+```
+
+Add resolutions for lightningcss compatibility:
+
+```json
+// package.json
+{
+  "resolutions": {
+    "lightningcss": "1.30.1"
+  }
+}
+```
+
+- autoprefixer is not needed in Expo because of lightningcss
+- postcss is included in expo by default
+
+## Configuration Files
+
+### Metro Config
+
+Create or update `metro.config.js`:
+
+```js
+// metro.config.js
+const { getDefaultConfig } = require("expo/metro-config");
+const { withNativewind } = require("nativewind/metro");
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativewind(config, {
+  // inline variables break PlatformColor in CSS variables
+  inlineVariables: false,
+  // We add className support manually
+  globalClassNamePolyfill: false,
+});
+```
+
+### PostCSS Config
+
+Create `postcss.config.mjs`:
+
+```js
+// postcss.config.mjs
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+```
+
+### Global CSS
+
+Create `src/global.css`:
+
+```css
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css";
+
+/* Platform-specific font families */
+@media android {
+  :root {
+    --font-mono: monospace;
+    --font-rounded: normal;
+    --font-serif: serif;
+    --font-sans: normal;
+  }
+}
+
+@media ios {
+  :root {
+    --font-mono: ui-monospace;
+    --font-serif: ui-serif;
+    --font-sans: system-ui;
+    --font-rounded: ui-rounded;
+  }
+}
+```
+
+## IMPORTANT: No Babel Config Needed
+
+With Tailwind v4 and NativeWind v5, you do NOT need a babel.config.js for Tailwind. Remove any NativeWind babel presets if present:
+
+```js
+// DELETE babel.config.js if it only contains NativeWind config
+// The following is NO LONGER needed:
+// module.exports = function (api) {
+//   api.cache(true);
+//   return {
+//     presets: [
+//       ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+//       "nativewind/babel",
+//     ],
+//   };
+// };
+```
+
+## CSS Component Wrappers
+
+Since react-native-css requires explicit CSS element wrapping, create reusable components:
+
+### Main Components (`src/tw/index.tsx`)
+
+```tsx
+import {
+  useCssElement,
+  useNativeVariable as useFunctionalVariable,
+} from "react-native-css";
+
+import { Link as RouterLink } from "expo-router";
+import Animated from "react-native-reanimated";
+import React from "react";
+import {
+  View as RNView,
+  Text as RNText,
+  Pressable as RNPressable,
+  ScrollView as RNScrollView,
+  TouchableHighlight as RNTouchableHighlight,
+  TextInput as RNTextInput,
+  StyleSheet,
+} from "react-native";
+
+// CSS-enabled Link
+export const Link = (
+  props: React.ComponentProps<typeof RouterLink> & { className?: string }
+) => {
+  return useCssElement(RouterLink, props, { className: "style" });
+};
+
+Link.Trigger = RouterLink.Trigger;
+Link.Menu = RouterLink.Menu;
+Link.MenuAction = RouterLink.MenuAction;
+Link.Preview = RouterLink.Preview;
+
+// CSS Variable hook
+export const useCSSVariable =
+  process.env.EXPO_OS !== "web"
+    ? useFunctionalVariable
+    : (variable: string) => `var(${variable})`;
+
+// View
+export type ViewProps = React.ComponentProps<typeof RNView> & {
+  className?: string;
+};
+
+export const View = (props: ViewProps) => {
+  return useCssElement(RNView, props, { className: "style" });
+};
+View.displayName = "CSS(View)";
+
+// Text
+export const Text = (
+  props: React.ComponentProps<typeof RNText> & { className?: string }
+) => {
+  return useCssElement(RNText, props, { className: "style" });
+};
+Text.displayName = "CSS(Text)";
+
+// ScrollView
+export const ScrollView = (
+  props: React.ComponentProps<typeof RNScrollView> & {
+    className?: string;
+    contentContainerClassName?: string;
+  }
+) => {
+  return useCssElement(RNScrollView, props, {
+    className: "style",
+    contentContainerClassName: "contentContainerStyle",
+  });
+};
+ScrollView.displayName = "CSS(ScrollView)";
+
+// Pressable
+export const Pressable = (
+  props: React.ComponentProps<typeof RNPressable> & { className?: string }
+) => {
+  return useCssElement(RNPressable, props, { className: "style" });
+};
+Pressable.displayName = "CSS(Pressable)";
+
+// TextInput
+export const TextInput = (
+  props: React.ComponentProps<typeof RNTextInput> & { className?: string }
+) => {
+  return useCssElement(RNTextInput, props, { className: "style" });
+};
+TextInput.displayName = "CSS(TextInput)";
+
+// AnimatedScrollView
+export const AnimatedScrollView = (
+  props: React.ComponentProps<typeof Animated.ScrollView> & {
+    className?: string;
+    contentClassName?: string;
+    contentContainerClassName?: string;
+  }
+) => {
+  return useCssElement(Animated.ScrollView, props, {
+    className: "style",
+    contentClassName: "contentContainerStyle",
+    contentContainerClassName: "contentContainerStyle",
+  });
+};
+
+// TouchableHighlight with underlayColor extraction
+function XXTouchableHighlight(
+  props: React.ComponentProps<typeof RNTouchableHighlight>
+) {
+  const { underlayColor, ...style } = StyleSheet.flatten(props.style) || {};
+  return (
+    <RNTouchableHighlight
+      underlayColor={underlayColor}
+      {...props}
+      style={style}
+    />
+  );
+}
+
+export const TouchableHighlight = (
+  props: React.ComponentProps<typeof RNTouchableHighlight>
+) => {
+  return useCssElement(XXTouchableHighlight, props, { className: "style" });
+};
+TouchableHighlight.displayName = "CSS(TouchableHighlight)";
+```
+
+### Image Component (`src/tw/image.tsx`)
+
+```tsx
+import { useCssElement } from "react-native-css";
+import React from "react";
+import { StyleSheet } from "react-native";
+import Animated from "react-native-reanimated";
+import { Image as RNImage } from "expo-image";
+
+const AnimatedExpoImage = Animated.createAnimatedComponent(RNImage);
+
+export type ImageProps = React.ComponentProps<typeof Image>;
+
+function CSSImage(props: React.ComponentProps<typeof AnimatedExpoImage>) {
+  // @ts-expect-error: Remap objectFit style to contentFit property
+  const { objectFit, objectPosition, ...style } =
+    StyleSheet.flatten(props.style) || {};
+
+  return (
+    <AnimatedExpoImage
+      contentFit={objectFit}
+      contentPosition={objectPosition}
+      {...props}
+      source={
+        typeof props.source === "string" ? { uri: props.source } : props.source
+      }
+      // @ts-expect-error: Style is remapped above
+      style={style}
+    />
+  );
+}
+
+export const Image = (
+  props: React.ComponentProps<typeof CSSImage> & { className?: string }
+) => {
+  return useCssElement(CSSImage, props, { className: "style" });
+};
+
+Image.displayName = "CSS(Image)";
+```
+
+### Animated Components (`src/tw/animated.tsx`)
+
+```tsx
+import * as TW from "./index";
+import RNAnimated from "react-native-reanimated";
+
+export const Animated = {
+  ...RNAnimated,
+  View: RNAnimated.createAnimatedComponent(TW.View),
+};
+```
+
+## Usage
+
+Import CSS-wrapped components from your tw directory:
+
+```tsx
+import { View, Text, ScrollView, Image } from "@/tw";
+
+export default function MyScreen() {
+  return (
+    <ScrollView className="flex-1 bg-white">
+      <View className="p-4 gap-4">
+        <Text className="text-xl font-bold text-gray-900">Hello Tailwind!</Text>
+        <Image
+          className="w-full h-48 rounded-lg object-cover"
+          source={{ uri: "https://example.com/image.jpg" }}
+        />
+      </View>
+    </ScrollView>
+  );
+}
+```
+
+## Custom Theme Variables
+
+Add custom theme variables in your global.css using `@theme`:
+
+```css
+@layer theme {
+  @theme {
+    /* Custom fonts */
+    --font-rounded: "SF Pro Rounded", sans-serif;
+
+    /* Custom line heights */
+    --text-xs--line-height: calc(1em / 0.75);
+    --text-sm--line-height: calc(1.25em / 0.875);
+    --text-base--line-height: calc(1.5em / 1);
+
+    /* Custom leading scales */
+    --leading-tight: 1.25em;
+    --leading-snug: 1.375em;
+    --leading-normal: 1.5em;
+  }
+}
+```
+
+## Platform-Specific Styles
+
+Use platform media queries for platform-specific styling:
+
+```css
+@media ios {
+  :root {
+    --font-sans: system-ui;
+    --font-rounded: ui-rounded;
+  }
+}
+
+@media android {
+  :root {
+    --font-sans: normal;
+    --font-rounded: normal;
+  }
+}
+```
+
+## Apple System Colors with CSS Variables
+
+Create a CSS file for Apple semantic colors:
+
+```css
+/* src/css/sf.css */
+@layer base {
+  html {
+    color-scheme: light;
+  }
+}
+
+:root {
+  /* Accent colors with light/dark mode */
+  --sf-blue: light-dark(rgb(0 122 255), rgb(10 132 255));
+  --sf-green: light-dark(rgb(52 199 89), rgb(48 209 89));
+  --sf-red: light-dark(rgb(255 59 48), rgb(255 69 58));
+
+  /* Gray scales */
+  --sf-gray: light-dark(rgb(142 142 147), rgb(142 142 147));
+  --sf-gray-2: light-dark(rgb(174 174 178), rgb(99 99 102));
+
+  /* Text colors */
+  --sf-text: light-dark(rgb(0 0 0), rgb(255 255 255));
+  --sf-text-2: light-dark(rgb(60 60 67 / 0.6), rgb(235 235 245 / 0.6));
+
+  /* Background colors */
+  --sf-bg: light-dark(rgb(255 255 255), rgb(0 0 0));
+  --sf-bg-2: light-dark(rgb(242 242 247), rgb(28 28 30));
+}
+
+/* iOS native colors via platformColor */
+@media ios {
+  :root {
+    --sf-blue: platformColor(systemBlue);
+    --sf-green: platformColor(systemGreen);
+    --sf-red: platformColor(systemRed);
+    --sf-gray: platformColor(systemGray);
+    --sf-text: platformColor(label);
+    --sf-text-2: platformColor(secondaryLabel);
+    --sf-bg: platformColor(systemBackground);
+    --sf-bg-2: platformColor(secondarySystemBackground);
+  }
+}
+
+/* Register as Tailwind theme colors */
+@layer theme {
+  @theme {
+    --color-sf-blue: var(--sf-blue);
+    --color-sf-green: var(--sf-green);
+    --color-sf-red: var(--sf-red);
+    --color-sf-gray: var(--sf-gray);
+    --color-sf-text: var(--sf-text);
+    --color-sf-text-2: var(--sf-text-2);
+    --color-sf-bg: var(--sf-bg);
+    --color-sf-bg-2: var(--sf-bg-2);
+  }
+}
+```
+
+Then use in components:
+
+```tsx
+<Text className="text-sf-text">Primary text</Text>
+<Text className="text-sf-text-2">Secondary text</Text>
+<View className="bg-sf-bg">...</View>
+```
+
+## Using CSS Variables in JavaScript
+
+Use the `useCSSVariable` hook:
+
+```tsx
+import { useCSSVariable } from "@/tw";
+
+function MyComponent() {
+  const blue = useCSSVariable("--sf-blue");
+
+  return <View style={{ borderColor: blue }} />;
+}
+```
+
+## Key Differences from NativeWind v4 / Tailwind v3
+
+1. **No babel.config.js** - Configuration is now CSS-first
+2. **PostCSS plugin** - Uses `@tailwindcss/postcss` instead of `tailwindcss`
+3. **CSS imports** - Use `@import "tailwindcss/..."` instead of `@tailwind` directives
+4. **Theme config** - Use `@theme` in CSS instead of `tailwind.config.js`
+5. **Component wrappers** - Must wrap components with `useCssElement` for className support
+6. **Metro config** - Use `withNativewind` with different options (`inlineVariables: false`)
+
+## Troubleshooting
+
+### Styles not applying
+
+1. Ensure you have the CSS file imported in your app entry
+2. Check that components are wrapped with `useCssElement`
+3. Verify Metro config has `withNativewind` applied
+
+### Platform colors not working
+
+1. Use `platformColor()` in `@media ios` blocks
+2. Fall back to `light-dark()` for web/Android
+
+### TypeScript errors
+
+Add className to component props:
+
+```tsx
+type Props = React.ComponentProps<typeof RNView> & { className?: string };
+```

package/templates/.agent/skills/expo-ui-swift-ui/SKILL.md

@@ -0,0 +1,46 @@
+---
+name: expo-ui-swift-ui
+description: expo-ui-swift-ui
+risk: unknown
+source: community
+---
+
+---
+name: expo-ui-swift-ui
+description: `@expo/ui/swift-ui` package lets you use SwiftUI Views and modifiers in your app.
+---
+
+> The instructions in this skill apply to SDK 55 only. For other SDK versions, refer to the Expo UI SwiftUI docs for that version for the most accurate information.
+
+## Installation
+
+```bash
+npx expo install @expo/ui
+```
+
+A native rebuild is required after installation (`npx expo run:ios`).
+
+## Instructions
+
+- Expo UI's API mirrors SwiftUI's API. Use SwiftUI knowledge to decide which components or modifiers to use.
+- Components are imported from `@expo/ui/swift-ui`, modifiers from `@expo/ui/swift-ui/modifiers`.
+- When about to use a component, fetch its docs to confirm the API - https://docs.expo.dev/versions/v55.0.0/sdk/ui/swift-ui/{component-name}/index.md
+- When unsure about a modifier's API, refer to the docs - https://docs.expo.dev/versions/v55.0.0/sdk/ui/swift-ui/modifiers/index.md
+- Every SwiftUI tree must be wrapped in `Host`.
+- `RNHostView` is specifically for embedding RN components inside a SwiftUI tree. Example:
+
+```jsx
+import { Host, VStack, RNHostView } from "@expo-ui/swift-ui";
+import { Pressable } from "react-native";
+
+<Host matchContents>
+  <VStack>
+    <RNHostView matchContents>
+      // Here, `Pressable` is an RN component so it is wrapped in `RNHostView`.
+      <Pressable />
+    </RNHostView>
+  </VStack>
+</Host>;
+```
+
+- If a required modifier or View is missing in Expo UI, it can be extended via a local Expo module. See: https://docs.expo.dev/guides/expo-ui-swift-ui/extending/index.md. Confirm with the user before extending.

package/templates/.agent/skills/fastapi-pro/SKILL.md

@@ -0,0 +1,190 @@
+---
+name: fastapi-pro
+description: Build high-performance async APIs with FastAPI, SQLAlchemy 2.0, and Pydantic V2. Master microservices, WebSockets, and modern Python async patterns.
+risk: unknown
+source: community
+date_added: '2026-02-27'
+---
+
+## Use this skill when
+
+- Working on fastapi pro tasks or workflows
+- Needing guidance, best practices, or checklists for fastapi pro
+
+## Do not use this skill when
+
+- The task is unrelated to fastapi pro
+- You need a different domain or tool outside this scope
+
+## Instructions
+
+- Clarify goals, constraints, and required inputs.
+- Apply relevant best practices and validate outcomes.
+- Provide actionable steps and verification.
+- If detailed examples are required, open `resources/implementation-playbook.md`.
+
+You are a FastAPI expert specializing in high-performance, async-first API development with modern Python patterns.
+
+## Purpose
+
+Expert FastAPI developer specializing in high-performance, async-first API development. Masters modern Python web development with FastAPI, focusing on production-ready microservices, scalable architectures, and cutting-edge async patterns.
+
+## Capabilities
+
+### Core FastAPI Expertise
+
+- FastAPI 0.100+ features including Annotated types and modern dependency injection
+- Async/await patterns for high-concurrency applications
+- Pydantic V2 for data validation and serialization
+- Automatic OpenAPI/Swagger documentation generation
+- WebSocket support for real-time communication
+- Background tasks with BackgroundTasks and task queues
+- File uploads and streaming responses
+- Custom middleware and request/response interceptors
+
+### Data Management & ORM
+
+- SQLAlchemy 2.0+ with async support (asyncpg, aiomysql)
+- Alembic for database migrations
+- Repository pattern and unit of work implementations
+- Database connection pooling and session management
+- MongoDB integration with Motor and Beanie
+- Redis for caching and session storage
+- Query optimization and N+1 query prevention
+- Transaction management and rollback strategies
+
+### API Design & Architecture
+
+- RESTful API design principles
+- GraphQL integration with Strawberry or Graphene
+- Microservices architecture patterns
+- API versioning strategies
+- Rate limiting and throttling
+- Circuit breaker pattern implementation
+- Event-driven architecture with message queues
+- CQRS and Event Sourcing patterns
+
+### Authentication & Security
+
+- OAuth2 with JWT tokens (python-jose, pyjwt)
+- Social authentication (Google, GitHub, etc.)
+- API key authentication
+- Role-based access control (RBAC)
+- Permission-based authorization
+- CORS configuration and security headers
+- Input sanitization and SQL injection prevention
+- Rate limiting per user/IP
+
+### Testing & Quality Assurance
+
+- pytest with pytest-asyncio for async tests
+- TestClient for integration testing
+- Factory pattern with factory_boy or Faker
+- Mock external services with pytest-mock
+- Coverage analysis with pytest-cov
+- Performance testing with Locust
+- Contract testing for microservices
+- Snapshot testing for API responses
+
+### Performance Optimization
+
+- Async programming best practices
+- Connection pooling (database, HTTP clients)
+- Response caching with Redis or Memcached
+- Query optimization and eager loading
+- Pagination and cursor-based pagination
+- Response compression (gzip, brotli)
+- CDN integration for static assets
+- Load balancing strategies
+
+### Observability & Monitoring
+
+- Structured logging with loguru or structlog
+- OpenTelemetry integration for tracing
+- Prometheus metrics export
+- Health check endpoints
+- APM integration (DataDog, New Relic, Sentry)
+- Request ID tracking and correlation
+- Performance profiling with py-spy
+- Error tracking and alerting
+
+### Deployment & DevOps
+
+- Docker containerization with multi-stage builds
+- Kubernetes deployment with Helm charts
+- CI/CD pipelines (GitHub Actions, GitLab CI)
+- Environment configuration with Pydantic Settings
+- Uvicorn/Gunicorn configuration for production
+- ASGI servers optimization (Hypercorn, Daphne)
+- Blue-green and canary deployments
+- Auto-scaling based on metrics
+
+### Integration Patterns
+
+- Message queues (RabbitMQ, Kafka, Redis Pub/Sub)
+- Task queues with Celery or Dramatiq
+- gRPC service integration
+- External API integration with httpx
+- Webhook implementation and processing
+- Server-Sent Events (SSE)
+- GraphQL subscriptions
+- File storage (S3, MinIO, local)
+
+### Advanced Features
+
+- Dependency injection with advanced patterns
+- Custom response classes
+- Request validation with complex schemas
+- Content negotiation
+- API documentation customization
+- Lifespan events for startup/shutdown
+- Custom exception handlers
+- Request context and state management
+
+## Behavioral Traits
+
+- Writes async-first code by default
+- Emphasizes type safety with Pydantic and type hints
+- Follows API design best practices
+- Implements comprehensive error handling
+- Uses dependency injection for clean architecture
+- Writes testable and maintainable code
+- Documents APIs thoroughly with OpenAPI
+- Considers performance implications
+- Implements proper logging and monitoring
+- Follows 12-factor app principles
+
+## Knowledge Base
+
+- FastAPI official documentation
+- Pydantic V2 migration guide
+- SQLAlchemy 2.0 async patterns
+- Python async/await best practices
+- Microservices design patterns
+- REST API design guidelines
+- OAuth2 and JWT standards
+- OpenAPI 3.1 specification
+- Container orchestration with Kubernetes
+- Modern Python packaging and tooling
+
+## Response Approach
+
+1. **Analyze requirements** for async opportunities
+2. **Design API contracts** with Pydantic models first
+3. **Implement endpoints** with proper error handling
+4. **Add comprehensive validation** using Pydantic
+5. **Write async tests** covering edge cases
+6. **Optimize for performance** with caching and pooling
+7. **Document with OpenAPI** annotations
+8. **Consider deployment** and scaling strategies
+
+## Example Interactions
+
+- "Create a FastAPI microservice with async SQLAlchemy and Redis caching"
+- "Implement JWT authentication with refresh tokens in FastAPI"
+- "Design a scalable WebSocket chat system with FastAPI"
+- "Optimize this FastAPI endpoint that's causing performance issues"
+- "Set up a complete FastAPI project with Docker and Kubernetes"
+- "Implement rate limiting and circuit breaker for external API calls"
+- "Create a GraphQL endpoint alongside REST in FastAPI"
+- "Build a file upload system with progress tracking"