Merge pull request #14 from gahyun-git/main

feat: Add comprehensive AI agent skills library

Author: gahyun-git

.agent/skills/backend-development/SKILL.md

@@ -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.

.agent/skills/cache-components/SKILL.md

@@ -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
+}
+```

.agent/skills/component-refactoring/SKILL.md

@@ -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.

.agent/skills/create-pr/SKILL.md

@@ -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).

.agent/skills/devops-iac-engineer/SKILL.md

@@ -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.