oh-my-customcode 0.1.0

package/templates/guides/typescript/type-system.md

@@ -0,0 +1,219 @@
+# TypeScript Type System
+
+> Reference for TypeScript type fundamentals
+
+## Basic Types
+
+```typescript
+// Primitives
+const name: string = 'TypeScript';
+const version: number = 5.0;
+const isActive: boolean = true;
+
+// Arrays
+const numbers: number[] = [1, 2, 3];
+const items: Array<string> = ['a', 'b', 'c'];
+
+// Tuples
+const pair: [string, number] = ['key', 42];
+
+// Enums
+enum Status {
+  Pending = 'pending',
+  Active = 'active',
+  Completed = 'completed',
+}
+
+// Any and Unknown
+const flexible: any = 'anything';
+const safe: unknown = 'must narrow';
+
+// Void and Never
+function log(message: string): void {
+  console.log(message);
+}
+
+function fail(message: string): never {
+  throw new Error(message);
+}
+```
+
+## Interfaces
+
+```typescript
+interface User {
+  readonly id: string;
+  name: string;
+  email: string;
+  age?: number; // optional
+}
+
+// Extending interfaces
+interface Admin extends User {
+  permissions: string[];
+}
+
+// Implementing interfaces
+class UserImpl implements User {
+  readonly id: string;
+  name: string;
+  email: string;
+
+  constructor(id: string, name: string, email: string) {
+    this.id = id;
+    this.name = name;
+    this.email = email;
+  }
+}
+```
+
+## Type Aliases
+
+```typescript
+// Union types
+type Status = 'pending' | 'active' | 'completed';
+
+// Intersection types
+type Employee = User & { department: string };
+
+// Function types
+type Handler = (event: Event) => void;
+
+// Object types
+type Point = {
+  x: number;
+  y: number;
+};
+```
+
+## Generics
+
+```typescript
+// Generic function
+function identity<T>(arg: T): T {
+  return arg;
+}
+
+// Generic interface
+interface Container<T> {
+  value: T;
+  getValue(): T;
+}
+
+// Generic class
+class Box<T> {
+  private content: T;
+
+  constructor(content: T) {
+    this.content = content;
+  }
+
+  getContent(): T {
+    return this.content;
+  }
+}
+
+// Generic constraints
+function getLength<T extends { length: number }>(item: T): number {
+  return item.length;
+}
+
+// Default type parameters
+function createArray<T = string>(length: number, value: T): T[] {
+  return Array(length).fill(value);
+}
+```
+
+## Type Guards
+
+```typescript
+// typeof guard
+function processValue(value: string | number) {
+  if (typeof value === 'string') {
+    console.log(value.toUpperCase());
+  } else {
+    console.log(value.toFixed(2));
+  }
+}
+
+// instanceof guard
+function handleError(error: unknown) {
+  if (error instanceof Error) {
+    console.log(error.message);
+  }
+}
+
+// Custom type guard
+function isUser(obj: unknown): obj is User {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    'id' in obj &&
+    'name' in obj
+  );
+}
+
+// in operator
+function processShape(shape: Circle | Square) {
+  if ('radius' in shape) {
+    console.log('Circle with radius:', shape.radius);
+  } else {
+    console.log('Square with side:', shape.side);
+  }
+}
+```
+
+## Literal Types
+
+```typescript
+// String literals
+type Direction = 'north' | 'south' | 'east' | 'west';
+
+// Numeric literals
+type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;
+
+// Boolean literal
+type Success = true;
+
+// Template literal types
+type EventName = `on${Capitalize<string>}`;
+type OnClick = `on${'Click' | 'Hover'}`;
+```
+
+## Type Assertions
+
+```typescript
+// as syntax (preferred)
+const input = document.getElementById('input') as HTMLInputElement;
+
+// Angle bracket syntax
+const input2 = <HTMLInputElement>document.getElementById('input');
+
+// Non-null assertion
+const element = document.getElementById('root')!;
+
+// const assertion
+const config = {
+  endpoint: '/api',
+  timeout: 5000,
+} as const;
+```
+
+## Nullability
+
+```typescript
+// Optional property
+interface User {
+  name: string;
+  email?: string;
+}
+
+// Optional chaining
+const email = user?.email?.toLowerCase();
+
+// Nullish coalescing
+const displayName = user.nickname ?? user.name;
+
+// Non-null assertion
+const element = document.getElementById('root')!;
+```

package/templates/guides/web-design/accessibility.md

@@ -0,0 +1,66 @@
+# Accessibility Best Practices
+
+> Reference guide for web-design-guidelines skill
+
+## Core Principles
+
+### WCAG 2.1 Compliance
+```
+Level A: Minimum accessibility
+Level AA: Standard compliance (recommended)
+Level AAA: Enhanced accessibility
+```
+
+### POUR Principles
+```
+Perceivable: Content available to senses
+Operable: Interface navigable
+Understandable: Clear and predictable
+Robust: Works across technologies
+```
+
+## Quick Reference
+
+### Color Contrast
+```
+Normal text: 4.5:1 minimum
+Large text: 3:1 minimum
+UI components: 3:1 minimum
+```
+
+### Keyboard Navigation
+```
+Tab: Move forward
+Shift+Tab: Move backward
+Enter/Space: Activate
+Escape: Close/Cancel
+Arrow keys: Navigate within component
+```
+
+### ARIA Landmarks
+```html
+<header role="banner">
+<nav role="navigation">
+<main role="main">
+<aside role="complementary">
+<footer role="contentinfo">
+```
+
+### Common ARIA Attributes
+```html
+aria-label="Description"
+aria-labelledby="element-id"
+aria-describedby="description-id"
+aria-hidden="true|false"
+aria-expanded="true|false"
+aria-selected="true|false"
+aria-live="polite|assertive"
+```
+
+## Testing Tools
+
+- axe DevTools
+- WAVE
+- Lighthouse
+- VoiceOver (macOS)
+- NVDA (Windows)

package/templates/guides/web-design/index.yaml

@@ -0,0 +1,20 @@
+# Web Design Guide
+
+metadata:
+  name: web-design
+  description: Web design best practices and accessibility reference
+
+source:
+  type: external
+  origin: github
+  url: https://github.com/vercel-labs/agent-skills
+  related_skill: web-design-guidelines
+
+documents:
+  - name: accessibility
+    title: Accessibility Best Practices
+    path: ./accessibility.md
+
+  - name: performance
+    title: Performance Guidelines
+    path: ./performance.md

package/templates/guides/web-design/performance.md

@@ -0,0 +1,102 @@
+# Performance Guidelines
+
+> Reference guide for react-best-practices skill
+
+## Core Web Vitals
+
+### LCP (Largest Contentful Paint)
+```
+Good: < 2.5s
+Needs improvement: 2.5s - 4s
+Poor: > 4s
+```
+
+### FID (First Input Delay)
+```
+Good: < 100ms
+Needs improvement: 100ms - 300ms
+Poor: > 300ms
+```
+
+### CLS (Cumulative Layout Shift)
+```
+Good: < 0.1
+Needs improvement: 0.1 - 0.25
+Poor: > 0.25
+```
+
+## Optimization Strategies
+
+### JavaScript
+```
+- Code splitting
+- Tree shaking
+- Lazy loading
+- Minimize main thread work
+```
+
+### Images
+```
+- Modern formats (WebP, AVIF)
+- Responsive images
+- Lazy loading
+- Proper sizing
+```
+
+### CSS
+```
+- Critical CSS inline
+- Defer non-critical
+- Remove unused
+- Minimize specificity
+```
+
+### Fonts
+```
+- font-display: swap
+- Preload critical fonts
+- Subset fonts
+- System font fallback
+```
+
+## Next.js Specific
+
+### Server Components
+```tsx
+// Default: Server Component (no directive)
+export default function Page() {
+  return <div>Server rendered</div>
+}
+```
+
+### Client Components
+```tsx
+'use client'
+// Only when needed for interactivity
+export default function Button() {
+  return <button onClick={...}>Click</button>
+}
+```
+
+### Data Fetching
+```tsx
+// Server: fetch in component
+async function Page() {
+  const data = await fetch(...)
+  return <div>{data}</div>
+}
+
+// Client: use SWR/React Query
+'use client'
+function Component() {
+  const { data } = useSWR('/api/data', fetcher)
+  return <div>{data}</div>
+}
+```
+
+## Measurement Tools
+
+- Lighthouse
+- WebPageTest
+- Chrome DevTools Performance
+- Next.js Analytics

package/templates/pipelines/examples/code-review.yaml

@@ -0,0 +1,66 @@
+# Code Review Pipeline
+# Full code review workflow with language detection
+
+name: code-review
+description: Full code review workflow with automatic language detection
+
+inputs:
+  - name: file_path
+    required: true
+    description: Path to the file to review
+
+  - name: focus
+    required: false
+    description: Focus area (style, security, performance, all)
+    default: all
+
+steps:
+  # Step 1: Detect programming language
+  - id: detect_language
+    agent: secretary
+    action: detect_language
+    input:
+      file: "${file_path}"
+    output: language
+    description: Detect the programming language of the file
+
+  # Step 2: Code analysis by language expert
+  - id: analyze
+    agent: "${language}-expert"
+    action: analyze_code
+    input:
+      file: "${file_path}"
+      focus: "${focus}"
+    output: analysis
+    description: Analyze code using language-specific best practices
+
+  # Step 3: Security review
+  - id: security_check
+    agent: qa-lead
+    action: security_review
+    input:
+      file: "${file_path}"
+      findings: "${analysis}"
+    output: security
+    description: Check for security vulnerabilities
+    on_error: continue
+
+  # Step 4: Generate final report
+  - id: report
+    agent: documenter
+    action: generate_report
+    input:
+      file: "${file_path}"
+      language: "${language}"
+      analysis: "${analysis}"
+      security: "${security}"
+    output: report
+    description: Generate comprehensive review report
+
+error_handling:
+  default: stop
+
+metadata:
+  author: baekgom-agents
+  version: 1.0.0
+  tags: [code-review, quality, security]

package/templates/pipelines/index.yaml

@@ -0,0 +1,18 @@
+# Baekgom Agents - Pipeline Registry
+
+description: Registry of available pipelines for sequential workflows
+
+pipelines:
+  - name: code-review
+    path: ./examples/code-review.yaml
+    description: Full code review workflow with language detection
+
+templates:
+  - name: pipeline-template
+    path: ./templates/pipeline-template.yaml
+    description: Base template for creating new pipelines
+
+usage:
+  run: "pipeline:run <name> --input key=value"
+  list: "pipeline:list"
+  create: "Use templates/pipeline-template.yaml as base"

package/templates/pipelines/templates/pipeline-template.yaml

@@ -0,0 +1,50 @@
+# Pipeline Template
+# Copy this file and customize for your workflow
+
+name: my-pipeline
+description: Describe what this pipeline does
+
+# Define inputs that the pipeline accepts
+inputs:
+  - name: input_name
+    required: true
+    description: What this input is for
+    default: null  # Optional default value
+
+# Define the sequential steps
+steps:
+  # Step 1: First operation
+  - id: step_1
+    agent: agent-name        # Which agent executes this step
+    action: action_name      # What action to perform
+    input:                   # Input for this step
+      key: "${input_name}"   # Reference to pipeline input
+    output: step_1_result    # Variable name for this step's output
+
+  # Step 2: Uses output from step 1
+  - id: step_2
+    agent: another-agent
+    action: process
+    input:
+      data: "${step_1_result}"  # Reference to step 1 output
+    output: step_2_result
+    on_error: continue          # Optional: stop | continue | retry
+
+  # Step 3: Final aggregation
+  - id: final
+    agent: aggregator
+    action: summarize
+    input:
+      result_1: "${step_1_result}"
+      result_2: "${step_2_result}"
+    output: final_result
+
+# Optional: Error handling configuration
+error_handling:
+  default: stop
+
+# Optional: Metadata
+metadata:
+  author: your-name
+  version: 1.0.0
+  tags: [template, example]