カスタムテンプレート

my-template/
├── .replit                              # App configuration (run commands, ports, modules)
├── replit.md                            # Agent memory: project overview and preferences
├── custom_instruction/
│   └── instructions.md                  # Company instructions injected into Agent's prompt
├── .agents/
│   └── skills/
│       └── my-skill/
│           └── SKILL.md                 # Custom skills Agent can invoke on demand
└── ...                                  # The rest of your repo structure

# Company Engineering Standards

## Architecture
All web applications use React with TypeScript. Use functional components
with hooks exclusively. State management uses Zustand for local state
and React Query for server state.

## Component Library
Use our internal design system package `@acme/ui`. Never use raw HTML
elements for buttons, inputs, forms, or modals — always use the
corresponding component from `@acme/ui`.

Import components like this:
```tsx
import { Button, TextField, Modal } from '@acme/ui';
```

## API Integration
All API calls go through the `@acme/api-client` package. Never use
raw fetch or axios directly. Authentication is handled automatically
by the client.

## Testing
Every component must have a corresponding test file. Use Vitest
for unit tests and Playwright for integration tests.

.agents/skills/
├── use-design-system/
│   └── SKILL.md
├── api-integration/
│   └── SKILL.md
└── run-tests/
    └── SKILL.md

---
name: use-design-system
description: Use when building UI components. Provides component patterns, theming rules, and accessibility requirements for the Acme design system.
---

# Acme Design System

## Available components

- `Button` — Primary, secondary, and ghost variants
- `TextField` — Text input with validation support
- `Modal` — Dialog overlay with focus trapping
...

.agents/skills/use-design-system/
├── SKILL.md
├── references/
│   └── component-api.md
└── assets/
    └── theme-tokens.json

# Overview
Task management application built with React, TypeScript, and the Acme
design system. Uses Express.js backend with PostgreSQL.

# User Preferences
- Use TypeScript for all files
- Prefer functional components with hooks
- Follow Acme coding standards

# System Architecture
- Frontend: React + TypeScript + @acme/ui
- Backend: Express.js + TypeScript
- Database: PostgreSQL with Drizzle ORM
- Auth: Acme SSO via @acme/auth

# External Dependencies
- @acme/ui: Internal design system
- @acme/api-client: API integration layer
- @acme/auth: Authentication SDK

# 良い例 — いつ使用するかを説明している
description: フォームのビルドやユーザー入力の処理時に使用します。Acmeデザインシステムのバリデーションパターン、エラー表示規約、アクセシブルなフォームレイアウトを提供します。

# 効果が低い例 — 曖昧すぎる
description: フォームのユーティリティとヘルパー。