Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions .agent/skills/backend-development/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
---
name: backend-development
description: Comprehensive backend development skill for building scalable backend systems using Python (FastAPI), Postgres, Redis, and more. Includes API design, database optimization, security implementation, and performance tuning.
---

# Backend Development

This skill provides expert guidance for building robust, scalable, and secure backend systems, primarily focusing on the Python/FastAPI ecosystem used in this project.

## Core Capabilities

### 1. API Design & Implementation
- **RESTful Design**: Resource-oriented URLs, proper HTTP methods, and status codes.
- **FastAPI Best Practices**: Validation with Pydantic, dependency injection, and async handlers.
- **Documentation**: Automatic OpenAPI generation, clear descriptions, and examples.

### 2. Database Management
- **Schema Design**: Normalized relationships, indexing strategies, and migration management (Alembic).
- **ORM Usage**: SQLAlchemy async session management, repository pattern.
- **Optimization**: N+1 problem avoidance, query analysis, connection pooling.

### 3. Security
- **Authentication**: JWT/OAuth2 implementation, password hashing (bcrypt/argon2).
- **Authorization**: Role-Based Access Control (RBAC), scopes.
- **Data Protection**: Input sanitization, SQL injection prevention (via ORM), secure headers.

### 4. Performance Tuning
- **Caching**: Redis implementation for specific endpoints or data.
- **Async I/O**: Non-blocking database and API calls.
- **Background Tasks**: Offloading heavy processing (Celery/Cloud Tasks).

## Design Patterns

- **Repository Pattern**: Decouple business logic from data access.
- **Dependency Injection**: Manage dependencies (DB sessions, config) cleanly.
- **Service Layer**: Encapsulate complex business rules.

## When to Use

- Designing new API endpoints or microservices.
- Optimizing slow database queries.
- Implementing complex business logic.
- Reviewing backend code for security and performance.
- Setting up authentication and authorization flows.
126 changes: 126 additions & 0 deletions .agent/skills/cache-components/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
---
name: cache-components
description: Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). PROACTIVE ACTIVATION when cacheComponents config is detected.
---

Expert guidance for Next.js Cache Components and Partial Prerendering (PPR).

**PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their `next.config.ts` or `next.config.js`.

**DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in `next.config`. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions.

**USE CASES**:
- Implementing `'use cache'` directive
- Configuring cache lifetimes with `cacheLife()`
- Tagging cached data with `cacheTag()`
- Invalidating caches with `updateTag()` / `revalidateTag()`
- Optimizing static vs dynamic content boundaries
- Debugging cache issues
- Reviewing Cache Component implementations

## Project Detection

When starting work in a Next.js project, check if Cache Components are enabled:

```bash
# Check next.config.ts or next.config.js for cacheComponents
grep -r "cacheComponents" next.config.* 2>/dev/null
```

If `cacheComponents: true` is found, apply this skill's patterns proactively when:
- Writing React Server Components
- Implementing data fetching
- Creating Server Actions with mutations
- Optimizing page performance
- Reviewing existing component code

## Core Concept: The Caching Decision Tree

When writing a **React Server Component**, ask:

1. **Does it depend on request context?** (cookies, headers, searchParams)
2. **Can this be cached?** (Is the output the same for all users?)
- **YES** -> `'use cache'` + `cacheTag()` + `cacheLife()`
- **NO** -> Wrap in `<Suspense>` (dynamic streaming)

## Philosophy: Code Over Configuration

Cache Components represents a shift from segment-based configuration to compositional code:

- **Before (Deprecated)**: `export const revalidate = 3600`
- **After**: `cacheLife('hours')` inside `'use cache'`

- **Before (Deprecated)**: `export const dynamic = 'force-static'`
- **After**: Use `'use cache'` and Suspense boundaries

## Quick Start

### 1. Enable Configuration
```typescript
// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
experimental: {
ppr: true,
dynamicIO: true, // often correlated features
},
// Ensure basic cache components flag if required by your version
};

export default nextConfig;
```

### 2. Basic Usage

```typescript
import { cacheLife } from 'next/cache';

async function CachedPosts() {
'use cache'
cacheLife('hours'); // Cache for hours

const posts = await db.posts.findMany();
return <PostList posts={posts} />;
}
```

## Core APIs

### `'use cache'`
Marks a function, component, or file as cacheable. The return value is cached and shared across requests.

### `cacheLife(profile)`
Control cache duration using semantic profiles:
- `'seconds'`: Short-lived
- `'minutes'`: Medium-lived
- `'hours'`: Long-lived
- `'days'`: Very long-lived
- `'weeks'`: Static-like content
- `'max'`: Permanent cache

### `cacheTag(...tags)`
Tag cached data for on-demand invalidation.

```typescript
import { cacheTag } from 'next/cache';

async function getUserProfile(id: string) {
'use cache'
cacheTag('user-profile', `user-${id}`);
// ... fetch logic
}
```

### `revalidateTag(tag)` / `expireTag(tag)`
Invalidate cached data in background or immediately.

```typescript
'use server'
import { expireTag } from 'next/cache';

export async function updateUser(id: string, data: any) {
await db.user.update({ where: { id }, data });
expireTag(`user-${id}`); // Invalidate specific cache
}
```
109 changes: 109 additions & 0 deletions .agent/skills/component-refactoring/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
---
name: component-refactoring
description: Refactor high-complexity React components. Use when complexity metrics are high or to split monolithic UI.
---

# Component Refactoring Skill

Refactor high-complexity React components with proven patterns and workflows.

**Complexity Threshold**: Components with **cyclomatic complexity > 50** or **line count > 300** should be candidates for refactoring.

**Use When**:
- `pnpm analyze-component` shows high complexity.
- Users ask for "code splitting", "hook extraction", or "cleanup".
- A component file exceeds 300 lines of code.

## Core Refactoring Patterns

### 1. Extract Custom Hooks
**Goal**: Separate UI from State/Logic.

**Before**:
```tsx
function UserList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(false);

useEffect(() => {
setLoading(true);
fetch('/api/users').then(data => {
setUsers(data);
setLoading(false);
});
}, []);

if (loading) return <Spinner />;
return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}
```

**After**:
```tsx
// hooks/useUsers.ts
function useUsers() {
return useQuery({ queryKey: ['users'], queryFn: fetchUsers });
}

// UserList.tsx
function UserList() {
const { data: users, isLoading } = useUsers();
if (isLoading) return <Spinner />;
return <UserListView users={users} />;
}
```

### 2. Extract Sub-Components
**Goal**: Break down monolithic JSX.

**Before**:
```tsx
function Dashboard() {
return (
<div>
<header>...</header>
<aside>...</aside>
<main>
<section className="stats">...</section>
<section className="feed">...</section>
</main>
</div>
);
}
```

**After**:
```tsx
function Dashboard() {
return (
<Layout>
<DashboardHeader />
<DashboardSidebar />
<DashboardContent>
<StatsWidget />
<ActivityFeed />
</DashboardContent>
</Layout>
);
}
```

### 3. Simplify Conditional Logic
**Goal**: Reduce nesting and `if/else` checks implementation details.

- Use **Lookup Tables** (Maps/Objects) instead of Switch/If-Else chains.
- Use **Guard Clauses** (Early Returns) to avoid deep nesting.

### 4. Extract Modal Management
**Goal**: Centralize modal state and logic.

- Move modal definitions to a generic `<ModalManager />` or context if reused globally.
- Keep the `isOpen` state locally if specific to a single component, but extract the Modal content to a separate file.

## Workflow

1. **Analyze**: Run complexity analysis or review the file manually.
2. **Plan**: Identify seam lines (Logic vs UI, Section vs Section).
3. **Extract**: Create new files for hooks or components.
4. **Integrate**: Replace original code with imports.
5. **Verify**: Ensure functionality remains identical and tests pass.
38 changes: 38 additions & 0 deletions .agent/skills/create-pr/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
---
name: create-pr
description: Automates the creation of detailed, well-formatted Pull Requests using the GitHub CLI. Parses conventional commits to generate titles and descriptions.
---

# Create PR

This skill streamlines the Pull Request process, ensuring consistent and high-quality PR descriptions.

## Prerequisites

- `gh` (GitHub CLI) must be installed and authenticated.
- The current branch must have commits that are not yet on the remote (or a corresponding remote branch).

## Workflow

1. **Analyze Context**: Checks the git log to understand the changes (`feat`, `fix`, `chore`).
2. **Generate Metadata**:
- **Title**: Uses the conventional commit format (e.g., `feat: Implement user login`).
- **Body**: Summarizes the changes, links to issues, and provides verification steps.
3. **Execute**: Runs `gh pr create`.

## Usage

```bash
# Standard usage (interactive)
gh pr create

# Fully automated with flags
gh pr create --title "feat: Add user profile" --body "Implements user profile page..."
```

## Best Practices for PRs

- **Small & Focused**: Keep PRs limited to a single logical change.
- **Linked Issues**: Always link to the task/issue (e.g., `Closes #123`).
- **Self-Review**: Review your own diff before creating the PR.
- **Verification**: Explicitly state how you verified the change (screenshots, test output).
57 changes: 57 additions & 0 deletions .agent/skills/devops-iac-engineer/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
---
name: devops-iac-engineer
description: Expert guidance for designing, implementing, and maintaining cloud infrastructure using Experience in Infrastructure as Code (IaC) principles. Use this skill for architecting cloud solutions, setting up CI/CD pipelines, implementing observability, and following SRE best practices.
---

# DevOps IaC Engineer

This skill provides expertise in designing and managing cloud infrastructure using Infrastructure as Code (IaC) and DevOps/SRE best practices.

## When to Use

- Designing cloud architecture (AWS, GCP, Azure)
- Implementing or refactoring CI/CD pipelines
- Setting up observability (logging, metrics, tracing)
- Creating Kubernetes clusters and container orchestration strategies
- Implementing security controls and compliance checks
- Improving system reliability (SLO/SLA, Disaster Recovery)

## Infrastructure as Code (IaC) Principles

- **Declarative Code**: Use Terraform/OpenTofu to define the desired state.
- **GitOps**: Code repository is the single source of truth. Changes are applied via PRs and automated pipelines.
- **Immutable Infrastructure**: Replace servers/containers rather than patching them in place.

## Core Domains

### 1. Terraform & IaC
- Use modules for reusability.
- Separate state by environment (dev, stage, prod) and region.
- Automate `plan` and `apply` in CI/CD.

### 2. Kubernetes & Containers
- Build small, stateless containers.
- Use Helm or Kustomize for resource management.
- Implement resource limits and requests.
- Use namespaces for isolation.

### 3. CI/CD Pipelines
- **CI**: Lint, test, build, and scan (security) on every commit.
- **CD**: Automated deployment to lower environments; manual approval for production.
- Use tools like GitHub Actions, Cloud Build, or ArgoCD.

### 4. Observability
- **Logs**: Centralized logging (e.g., Cloud Logging, ELK).
- **Metrics**: Prometheus/Grafana or Cloud Monitoring.
- **Tracing**: OpenTelemetry for distributed tracing.

### 5. Security (DevSecOps)
- Scan IaC for misconfigurations (e.g., Checkov, Trivy).
- Manage secrets utilizing Secret Manager or Vault (never in code).
- Least privilege IAM roles.

## SRE Practices

- **SLI/SLO**: Define Service Level Indicators and Objectives for critical user journeys.
- **Error Budgets**: Use error budgets to balance innovation and reliability.
- **Post-Mortems**: Conduct blameless post-mortems for incidents.
Loading