generating-typescript-types-from-apis

Agent skills are markdown files that teach AI coding agents how to perform specific tasks. They live in the .agent/skills/ directory of your project and are automatically discovered by compatible agents. Each skill includes:

• Triggers: When the skill should be activated
• Workflows: Step-by-step processes to follow
• Patterns: Code templates and best practices
• Validation: Checklists to verify quality

1. Copy the skills you need from .agent/skills/ to your project:

```bash

# Copy all skills

cp -r .agent/skills/ /path/to/your/project/.agent/skills/

# Or copy individual skills

cp -r .agent/skills/unit-test-generator/ /path/to/your/project/.agent/skills/

```

1. Customize template skills (like brand-identity-template) with your specific requirements.

1. Use the skills by asking your agent to perform related tasks. The agent will automatically reference the appropriate skill.

---

This skills library works with multiple AI coding agents:

| Agent | Instruction File | Status |

| ------------------ | --------------------------------- | ----------------- |

| Windsurf | .agent/skills/ | ✅ Native support |

| Claude Code | CLAUDE.md | ✅ Supported |

| GitHub Copilot | .github/copilot-instructions.md | ✅ Supported |

| Cursor | .cursor/rules/ + AGENTS.md | ✅ Supported |

| Zed | AGENTS.md | ✅ Supported |

| Aider | AGENTS.md (via config) | ✅ Supported |

All agents read from the same .agent/skills/ folder — the compatibility files just point agents to the right location.

---

| Skill | Description |

| ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |

| [accessibility-auditor](.agent/skills/accessibility-auditor/) | Checks components and pages for WCAG 2.1 accessibility violations. Use for a11y, WCAG compliance, screen readers, aria labels, keyboard navigation. |

| [api-typescript-generator](.agent/skills/api-typescript-generator/) | Generates TypeScript interfaces from API responses or OpenAPI schemas. Use for typing API responses, creating interfaces from JSON. |

| [cicd-config-builder](.agent/skills/cicd-config-builder/) | Generates CI/CD pipeline configurations for GitHub Actions, GitLab CI, or CircleCI. Use for workflows, deployment automation. |

| [commit-message-formatter](.agent/skills/commit-message-formatter/) | Formats Git commit messages following Conventional Commits conventions. Use for commit writing or staged changes documentation. |

| [database-schema-manager](.agent/skills/database-schema-manager/) | Analyzes database schemas and suggests improvements for Prisma, TypeORM, or Drizzle. Use for migrations or ORM setup. |

| [design-token-validator](.agent/skills/design-token-validator/) | Ensures CSS and components only use approved design tokens. Use for design system enforcement. |

| [e2e-testing-patterns](.agent/skills/e2e-testing-patterns/) | Master end-to-end testing with Playwright and Cypress. Use for implementing E2E tests or debugging flaky tests. |

| [error-handling-patterns](.agent/skills/error-handling-patterns/) | Master error handling patterns including exceptions, Result types, and graceful degradation. |

| [image-optimizer](.agent/skills/image-optimizer/) | Optimizes images and generates responsive markup. Use for WebP/AVIF, srcset, responsive images. |

| [marketplace-integration-helper](.agent/skills/marketplace-integration-helper/) | Generates boilerplate for e-commerce API integrations. Use for WooCommerce, Shopify, Bol.com, or Etsy APIs. |

| [performance-profiler](.agent/skills/performance-profiler/) | Runs performance audits using Lighthouse and Web Vitals. Use for page speed or Core Web Vitals optimization. |

| [pr-linter-enforcer](.agent/skills/pr-linter-enforcer/) | Runs ESLint, Prettier, and stylelint against changed files. Use for linting or PR review. |

| [react-component-architect](.agent/skills/react-component-architect/) | Scaffolds React/Next.js components with TypeScript, CSS modules, tests, and Storybook stories. |

| [security-threat-detector](.agent/skills/security-threat-detector/) | Scans code for security vulnerabilities. Use for OWASP issues, XSS, SQL injection, or code audits. |

| [unit-test-generator](.agent/skills/unit-test-generator/) | Generates unit tests for changed files. Use for Jest, Vitest, Playwright, or Mocha tests. |

| [vue-component-architect](.agent/skills/vue-component-architect/) | Scaffolds Vue/Nuxt components with Composition API, CSS modules, Vitest tests, and Storybook. |

| [wordpress-fse-generator](.agent/skills/wordpress-fse-generator/) | Generates WordPress Full Site Editing blocks and theme files. Use for Gutenberg or FSE themes. |

---

| Skill | Description |

| ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |

| [ad-copy-generator](.agent/skills/ad-copy-generator/) | Creates platform-specific ad copy for paid campaigns with A/B variants. Use for PPC, Google, Facebook, LinkedIn ads. |

| [blog-outline-generator](.agent/skills/blog-outline-generator/) | Creates structured blog post outlines based on topics and keywords. Use for content planning. |

| [brand-identity-template](.agent/skills/brand-identity-template/) | Template skill for brand guidelines, design tokens, and voice/tone. Customize for your brand. |

| [brand-voice-guide-generator](.agent/skills/brand-voice-guide-generator/) | Creates comprehensive brand voice and tone documentation with messaging pillars. |

| [case-study-creator](.agent/skills/case-study-creator/) | Writes compelling customer success stories with measurable results.