# Unicorn Javascript

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-andrey-learning-machines-swe-harness-unicorn-javascript`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [andrey-learning-machines](https://agentstack.voostack.com/s/andrey-learning-machines)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [andrey-learning-machines](https://github.com/andrey-learning-machines)
- **Source:** https://github.com/andrey-learning-machines/swe-harness/tree/main/plugins/swe-harness/skills/unicorn-javascript

## Install

```sh
agentstack add skill-andrey-learning-machines-swe-harness-unicorn-javascript
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# JavaScript/TypeScript Domain Skill

## TypeScript Essentials

Utility types (use these instead of manual definitions):

| Type | Effect |
|------|--------|
| `Pick` | Subset of properties |
| `Omit` | Exclude properties |
| `Partial` | All optional |
| `Required` | All required |
| `Record` | Key-value map |
| `ReturnType` | Extract return type |
| `Awaited>` | Unwrap promise type |
| `Extract` / `Exclude` | Filter union members |

Generics:
```typescript
interface ApiResponse {
  data: T;
  status: number;
}

function fetchData(url: string): Promise> {
  return fetch(url).then(res => res.json());
}
```

**Advanced TypeScript:** See `references/typescript-advanced.md` for conditional types, mapped types, branded types, infer.

## Configuration

### TypeScript (tsconfig.json)

```json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "lib": ["ES2022", "DOM"],
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}
```

### ESLint

```javascript
module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  rules: {
    '@typescript-eslint/no-explicit-any': 'error',
  },
};
```

### Prettier

```javascript
module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 100,
};
```

### Package Scripts

```json
{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "test": "vitest",
    "lint": "eslint . --ext .ts,.tsx --fix",
    "format": "prettier --write \"src/**/*.{ts,tsx}\""
  }
}
```

## Testing

```typescript
import { describe, it, expect, vi } from 'vitest';

describe('UserService', () => {
  it('fetches user data', async () => {
    const user = await service.fetchUser('123');
    expect(user).toBeDefined();
    expect(user.id).toBe('123');
  });

  it('throws on invalid ID', async () => {
    await expect(service.fetchUser('invalid'))
      .rejects.toThrow('User not found');
  });
});

// Mocking
vi.mock('./api', () => ({ fetchUser: vi.fn() }));
vi.mocked(fetchUser).mockResolvedValue({ id: '1', name: 'Alice' });
```

React component testing:
```typescript
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

it('submits form', async () => {
  render();
  await userEvent.type(screen.getByLabelText(/email/i), 'test@test.com');
  await userEvent.click(screen.getByRole('button', { name: /submit/i }));
  await waitFor(() => {
    expect(screen.getByText(/success/i)).toBeInTheDocument();
  });
});
```

**See `references/testing-examples.md`** for mocking patterns, integration tests, test factories.

## React Patterns

Custom hook with cleanup:
```typescript
function useUser(userId: string) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    fetchUser(userId).then(data => {
      if (!cancelled) setUser(data);
      setLoading(false);
    });
    return () => { cancelled = true; };
  }, [userId]);

  return { user, loading };
}
```

Performance:
```typescript
const sorted = useMemo(() => [...items].sort(), [items]);
const handleClick = useCallback(() => doSomething(), []);
const MemoComponent = memo(({ data }: Props) => {data});
```

**See `references/react-patterns.md`** for compound components, context, forms, code splitting.

## Node.js Patterns

Async handler wrapper (Express):
```typescript
function asyncHandler(fn: (req: Request, res: Response) => Promise) {
  return (req: Request, res: Response, next: NextFunction) => {
    Promise.resolve(fn(req, res)).catch(next);
  };
}

app.get('/users/:id', asyncHandler(async (req, res) => {
  const user = await userService.findById(req.params.id);
  if (!user) { res.status(404).json({ error: 'User not found' }); return; }
  res.json(user);
}));
```

**See `references/node-patterns.md`** for middleware, streams, database patterns, error handling.

## Common Patterns

Result type:
```typescript
type Result =
  | { success: true; data: T }
  | { success: false; error: E };
```

Type guard:
```typescript
function isUser(obj: unknown): obj is User {
  return typeof obj === 'object' && obj !== null && 'id' in obj;
}
```

Discriminated union:
```typescript
type Response =
  | { status: 'success'; data: User }
  | { status: 'error'; error: string }
  | { status: 'loading' };

function handle(response: Response) {
  switch (response.status) {
    case 'success': return response.data;  // type-narrowed
    case 'error': throw new Error(response.error);
  }
}
```

## Anti-patterns Quick Reference

| Anti-pattern | Fix |
|-------------|-----|
| `any` type | Proper types or `unknown` with validation |
| Mutating arrays/objects in place | Spread: `[...arr, item]`, `{ ...obj, key: val }` |
| Nested `.then()` chains | `async`/`await` |
| Missing error handling on async | `try`/`catch` or `.catch()` |
| React state mutation `arr.push()` | `setArr(prev => [...prev, item])` |
| Missing `useEffect` deps | Include all referenced values |
| Unstable object refs in render | Hoist constants or `useMemo` |
| Circular imports | Extract shared code to `shared.ts` |
| `console.log` in production | Structured logger |
| Non-exhaustive switch on union | Add `default: assertNever(x)` |

**Naming:** camelCase (variables, functions), PascalCase (classes, types, components), SCREAMING_SNAKE_CASE (constants).

## Reference Documentation

- **`references/typescript-advanced.md`** - Generics, conditional types, mapped types, branded types
- **`references/react-patterns.md`** - Hooks, component patterns, performance, state management, forms
- **`references/node-patterns.md`** - Express, async patterns, streams, database patterns
- **`references/testing-examples.md`** - Jest/Vitest config, mocking, component testing, integration tests

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [andrey-learning-machines](https://github.com/andrey-learning-machines)
- **Source:** [andrey-learning-machines/swe-harness](https://github.com/andrey-learning-machines/swe-harness)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** yes
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-andrey-learning-machines-swe-harness-unicorn-javascript
- Seller: https://agentstack.voostack.com/s/andrey-learning-machines
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.