oh-my-customcodex 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