Getting Started
From zero to a fully-loaded AI agent toolkit in under 60 seconds — with real examples for frontend, backend, product ownership, and more.
Installation
Run the following command inside your project root. The kit copies agents/, skills/, workflows/, configs/, prompts/, and rules/ directly into your working directory.
npx create-raffles-itNo global install needed. Every time you run it, the latest kit is fetched from npm.
What gets installed:
your-project/
├── agents/ ← 19 specialist agent definitions
│ ├── orchestrator/
│ │ ├── agent.yaml ← model, tools, skills list
│ │ └── prompt.md ← system prompt
│ ├── frontend-specialist/
│ ├── backend-specialist/
│ └── ...16 more
├── skills/ ← 19 modular skill packs
│ ├── react-best-practices/
│ │ └── SKILL.md
│ ├── api-patterns/
│ └── ...17 more
├── workflows/ ← 11 slash command definitions
│ ├── create.md
│ ├── debug.md
│ └── ...9 more
├── configs/ ← model & runtime config
├── prompts/ ← shared prompt templates
└── rules/ ← editor rules (Gemini, etc.)Activate in your editor
Leave the agents/ folder in your project root. Claude Code detects it automatically when you open the project.
# After running npx create-raffles-it, just open the project:
claude .Agents are scoped to this project only.
Copy agents to your global Claude Code config directory to use them across all projects.
# macOS / Linux
cp -r agents/ ~/.claude/agents/
# Windows (PowerShell)
Copy-Item -Recurse agents\ $env:USERPROFILE\.claude\agents\Place the agents/ and skills/ folders in your project root. Both editors read markdown-based agent definitions automatically from the workspace.
How auto-routing works
You never need to pick an agent manually. When you type a request, the AI reads your message, matches keywords and intent against the agent registry (agents/.agents), and silently loads the right agent and its skill packs.
The orchestrator agent handles multi-step tasks that span multiple domains by coordinating sub-agents in parallel.
Real-world examples
You type in Claude Code / Cursor chat
Agent routed
frontend-specialistSkills loaded
react-best-practicestailwind-patternsfrontend-designclean-codeYou type in Claude Code / Cursor chat
Agent routed
backend-specialistSkills loaded
api-patternsnodejs-best-practicesclean-codelint-and-validateYou type in Claude Code / Cursor chat
Agent routed
database-architectSkills loaded
database-designclean-codeYou type in Claude Code / Cursor chat
Agent routed
product-ownerSkills loaded
plan-writingbrainstormingYou type in Claude Code / Cursor chat
Agent routed
debuggerSkills loaded
systematic-debuggingYou type in Claude Code / Cursor chat
Agent routed
security-auditorSkills loaded
clean-codelint-and-validateThe skill tree
Skills are modular knowledge packs. Each agent lists which skills it uses in its agent.yaml. When an agent is activated, it reads those SKILL.md files and loads their rules, patterns, and scripts into context.
name: backend-specialist
model: claude-sonnet-4-6
tools:
- Read
- Grep
- Bash
- Edit
- Write
skills:
- clean-code ← always-on coding standards
- nodejs-best-practices
- api-patterns ← REST/GraphQL/tRPC patterns
- database-design
- lint-and-validate# API Patterns Skill
## REST Design Rules
- Use noun-based resource URLs (/users, not /getUsers)
- Version APIs with /v1/ prefix
- Return 201 for POST creation, 204 for DELETE
- Always paginate list endpoints with cursor or offset
## Error Response Format
{
"error": "RESOURCE_NOT_FOUND",
"message": "User with id 123 does not exist",
"statusCode": 404
}
## Input Validation
- Validate at controller layer with zod or joi
- Strip unknown fields before DB writes
- Return field-level errors for 422 responsesSkill loading flow:
skills/react-best-practices/SKILL.md to add your team's own conventions. Every agent that loads that skill will follow them automatically.Slash command workflows
Workflows are multi-step orchestrated procedures. Invoke them by typing the slash command in Claude Code or your AI editor chat.
/createScaffold a new feature end-to-end. Kicks off planning → design → implementation → tests.
/debugStructured root-cause analysis. Isolates the bug, forms hypotheses, verifies fix.
/planBreaks down a large task into a prioritized sprint plan with story points.
/deployPre-flight checks → build → deploy → smoke test. Works with Docker, Vercel, CapRover.
/testGenerates unit, integration, and E2E tests for a given module or PR diff.
/reviewCode review against OWASP, performance, readability, and team conventions.
/enhanceImproves existing code: performance, readability, type safety, error handling.
/brainstormSocratic discovery session to explore architecture options or product ideas.
/orchestrateCoordinates multiple specialist agents in parallel for complex cross-domain tasks.
/statusGives a project health report: test coverage, lint status, open TODOs, security flags.
/ui-ux-pro-maxDesign mode with 50 UI styles, 21 color palettes, and 50 fonts for rapid prototyping.
Direct invocation
Auto-routing handles most cases, but you can also call any agent or skill by name when you want precise control.
Call an agent directly
Request a specific skill
Run a workflow explicitly
Override the model
Quick reference
Which agent handles which task:
| I need to… | Agent |
|---|---|
| Build UI components | frontend-specialist |
| Build a REST / GraphQL API | backend-specialist |
| Design a database schema | database-architect |
| Plan a sprint or backlog | product-owner |
| Write product requirements | product-manager |
| Debug a production issue | debugger |
| Write automated tests | test-engineer |
| Set up CI/CD or Docker | devops-engineer |
| Security audit / OWASP | security-auditor |
| Refactor legacy code | code-archaeologist |
| Analyse the codebase | explorer-agent |
| Improve page performance | performance-optimizer |
| Multi-domain complex task | orchestrator |