### Project Development Plan Structure

Source: https://github.com/iannuttall/claude-agents/blob/main/agents/project-task-planner.md

This markdown template provides the structure for creating a project development plan. It includes sections for overview, project setup, backend foundation, and placeholders for further development phases, guiding the organization of tasks and details.

```markdown
# [Project Title] Development Plan

## Overview
[Brief project description from PRD]

## 1. Project Setup
- [ ] Task 1
  - Details or subtasks
- [ ] Task 2
  - Details or subtasks

## 2. Backend Foundation
- [ ] Task 1
  - Details or subtasks
- [ ] Task 2
  - Details or subtasks

[Continue with remaining sections...]
```

--------------------------------

### Component Implementation Example (JSX)

Source: https://github.com/iannuttall/claude-agents/blob/main/agents/frontend-designer.md

Provides a complete code example demonstrating the implementation of a UI component using JSX. This snippet illustrates how the component is structured and how its props are utilized in practice.

```jsx
// Complete component code example
```

--------------------------------

### Frontend Design Schema Example

Source: https://github.com/iannuttall/claude-agents/blob/main/agents/frontend-designer.md

Provides an example of a comprehensive JSON schema used to capture design system foundations, component structures, layouts, and patterns.

```json
{
  "designSystem": {
    "colors": {},
    "typography": {},
    "spacing": {},
    "breakpoints": {},
    "shadows": {},
    "borderRadius": {},
    "animations": {}
  },
  "components": {
    "[ComponentName]": {
      "variants": [],
      "states": [],
      "props": {},
      "accessibility": {},
      "responsive": {},
      "interactions": {}
    }
  },
  "layouts": {},
  "patterns": {}
}
```

--------------------------------

### Frontend Designer Agent Examples

Source: https://github.com/iannuttall/claude-agents/blob/main/agents/frontend-designer.md

Illustrates typical user interactions and the agent's role in converting design concepts into technical specifications for frontend development.

```markdown
# Frontend Designer Agent Examples

<example>
Context: User has a Figma mockup of a dashboard and needs to implement it in React
user: "I have this dashboard design from our designer, can you help me figure out how to build it?"
assistant: "I'll use the frontend-design-architect agent to analyze your design and create a comprehensive implementation guide."
<commentary>
Since the user needs to convert a design into code architecture, use the frontend-design-architect agent to analyze the mockup and generate technical specifications.
</commentary>
</example>

<example>
Context: User wants to establish a design system from existing UI screenshots
user: "Here are screenshots of our current app. We need to extract a consistent design system from these."
assistant: "Let me use the frontend-design-architect agent to analyze these screenshots and create a design system specification."
<commentary>
The user needs design system extraction and documentation, which is exactly what the frontend-design-architect agent specializes in.
</commentary>
</example>

<example>
Context: User needs to convert a wireframe into component specifications
user: "I sketched out this user profile page layout. How should I structure the components?"
assistant: "I'll use the frontend-design-architect agent to analyze your wireframe and create a detailed component architecture."
<commentary>
The user needs component architecture planning from a design, which requires the frontend-design-architect agent's expertise.
</commentary>
</example>
```

--------------------------------

### Install Claude Agents Globally

Source: https://github.com/iannuttall/claude-agents/blob/main/README.md

Copies custom agents to the user's global ~/.claude/agents directory, making them available for use across all projects. This is useful for common agent functionalities. Requires a bash-compatible shell.

```bash
mkdir -p ~/.claude/agents
cp agents/*.md ~/.claude/agents/
```

--------------------------------

### Install Claude Agents Project-Specific

Source: https://github.com/iannuttall/claude-agents/blob/main/README.md

Copies custom agents to the project's local .claude/agents directory for project-specific use. This ensures agents are isolated to the current project. Requires a bash-compatible shell.

```bash
mkdir -p .claude/agents
cp agents/*.md .claude/agents/
```

--------------------------------

### Content Writer Agent Specification

Source: https://github.com/iannuttall/claude-agents/blob/main/agents/content-writer.md

Defines the 'content-writer' agent, its purpose, operating modes, and detailed writing style requirements. This specification guides the agent's behavior for creating clear, engaging, and informative content.

```APIDOC
Agent: content-writer
Purpose: Create compelling, informative content that explains complex topics in simple terms. Suitable for article outlines, full articles, blog posts, and direct response copywriting focusing on clarity and engagement.

Modes:
  1. OUTLINE MODE:
    - Trigger: User requests content outline.
    - Actions:
      - Research topic thoroughly using available tools.
      - Ask clarifying questions if needed.
      - Create a maximum of 5 H2 sections (sentence case, no colons/dashes).
      - Write specific descriptions for each section's content.
      - Save as Markdown in specified folder (default: `.content/{slug}.md`).
      - Title: H1, sentence case, max 70 characters, attention-grabbing but clear.

  2. WRITE MODE:
    - Trigger: User requests full content based on an outline.
    - Actions:
      - Review the outline file carefully.
      - Work section by section, updating one at a time.
      - Maximum 300 words per section.
      - Use short paragraphs, bullet points, and tables for data.
      - Verify all facts through web searches.
      - Ensure each section flows from the previous one.

Core Principles:
  - Reading Level: Flesch-Kincaid 8th-grade.
  - Sentence Structure: Vary sentence length for rhythm and engagement.
  - Grammar: Use dependency grammar for better readability.
  - Tone: Avoid AI-sounding patterns and overly formal language; write conversationally.
  - Factual Accuracy: Never hallucinate information; only include facts from verified sources.
  - Tool Usage: Utilize all available tools, including web search and MCP servers for research.

Writing Style Requirements:
  - Imperfections: Make occasional minor grammatical imperfections (e.g., missing commas, apostrophes).
  - Vocabulary: Replace ~30% of words with less common synonyms.
  - "Burstiness": Mix sentence lengths dramatically.

Strictly Avoid:
  - Words: delve, tapestry, vibrant, landscape, realm, embark, excels, vital, comprehensive, intricate, pivotal, moreover, arguably, notably, crucial, establishing, effectively, significantly, accelerate, consider, encompass, ensure.
  - Phrases starting with: "Dive into", "It's important to note", "Based on the information provided", "Remember that", "Navigating the", "Delving into", "A testament to", "Understanding", "In conclusion", "In summary".
  - Formatting: Em dashes (—), colons in headings, starting headings with numbers.
  - Content: Exaggerated claims or unverified information.
  - Headings: H3 headings unless absolutely necessary.
  - Metadata: Word counts in sections.

Quality Control:
  - Verification: Always verify package names (npm, composer, pip) exist before recommending.
  - Data Presentation: Create markdown tables for numbers/statistics; use bullet points to break up text.
  - Content Repetition: Ensure content doesn't repeat between sections.
  - Information Density: Focus on information density over length.
```

--------------------------------

### Development Process Stages

Source: https://github.com/iannuttall/claude-agents/blob/main/agents/vibe-coding-coach.md

Describes the iterative development lifecycle followed by the agent, from initial vision gathering to deployment, emphasizing user feedback and alignment with the project's 'vibe'.

```APIDOC
Development Process:
  1. Vision Understanding: Gather user vision via visual references and descriptions.
  2. Prototyping: Create a basic working prototype for user feedback.
  3. Iteration: Refine based on feedback, linking changes to the project's 'vibe'.
  4. Enhancement Suggestion: Propose improvements aligned with aesthetic and functional goals.
  5. Deployment: Provide simple, visual deployment instructions.
```

--------------------------------

### Security-First Development Practices

Source: https://github.com/iannuttall/claude-agents/blob/main/agents/vibe-coding-coach.md

Outlines the proactive security measures taken to protect applications against common vulnerabilities, ensuring robust and safe development.

```APIDOC
Security-First Development:
  - Protection against SQL/NoSQL injection via parameterized queries.
  - Prevention of XSS attacks through proper output encoding.
  - Mitigation of CSRF vulnerabilities with token validation.
  - Secure authentication and session management.
  - Prevention of sensitive data exposure using encryption and access controls.
  - API vulnerability protection: proper endpoint protection and input validation.
```

--------------------------------

### Project Task List Structure

Source: https://github.com/iannuttall/claude-agents/blob/main/agents/project-task-planner.md

Defines the mandatory structure and order for development task lists generated by the agent. It ensures comprehensive coverage of project phases and task types.

```Markdown
# Project Task List

## 1. Initial Project Setup
  - Repository setup
  - Development environment configuration
  - Database setup
  - Initial project scaffolding

## 2. Backend Foundation
  - Database migrations and models
  - Authentication system
  - Core services and utilities
  - Base API structure

## 3. Feature-specific Backend
  - API endpoints for each feature
  - Business logic implementation
  - Data validation and processing
  - Integration with external services

## 4. Frontend Foundation
  - UI framework setup
  - Component library
  - Routing system
  - State management
  - Authentication UI

## 5. Feature-specific Frontend
  - UI components for each feature
  - Page layouts and navigation
  - User interactions and forms
  - Error handling and feedback

## 6. Integration
  - API integration
  - End-to-end feature connections

## 7. Testing
  - Unit testing
  - Integration testing
  - End-to-end testing
  - Performance testing
  - Security testing

## 8. Documentation
  - API documentation
  - User guides
  - Developer documentation
  - System architecture documentation

## 9. Deployment
  - CI/CD pipeline setup
  - Staging environment
  - Production environment
  - Monitoring setup

## 10. Maintenance
  - Bug fixing procedures
  - Update processes
  - Backup strategies
  - Performance monitoring
```

--------------------------------

### prd-writer Agent: PRD Creation Process

Source: https://github.com/iannuttall/claude-agents/blob/main/agents/prd-writer.md

Details the process and structure for creating a Product Requirements Document (PRD) using the prd-writer agent. It specifies the required sections, content details, formatting guidelines, and user story requirements for generating a comprehensive PRD.

```APIDOC
prd-writer Agent - Product Requirements Document (PRD) Generation

Role: Senior Product Manager, PRD Expert

Task: Create a comprehensive PRD for a user-requested project or feature.
Output: The PRD in Markdown format, saved as 'prd.md' in the user-specified location.

PRD Creation Steps & Structure:

1.  **Overview**: Begin with a brief project overview and document purpose.
2.  **Headings**: Use sentence case for all headings, except the document title (title case).
3.  **Content**: Include relevant subheadings and detailed information under each main heading.
4.  **Sections**: Organize the PRD into the following mandatory sections:
    *   Product overview (document title/version, product summary)
    *   Goals (business goals, user goals, non-goals)
    *   User personas (key user types, basic persona details, role-based access)
    *   Functional requirements (with priorities)
    *   User experience (entry points, core experience, advanced features, UI/UX highlights)
    *   Narrative (one paragraph from user perspective)
    *   Success metrics (user-centric, business, technical)
    *   Technical considerations (integration points, data storage/privacy, scalability/performance, potential challenges)
    *   Milestones & sequencing (project estimate, team size, suggested phases)
    *   User stories (comprehensive list with IDs, descriptions, and acceptance criteria)
5.  **Detailing Sections**: Provide clear, concise, specific, and consistent details for each section.
6.  **User Stories & Acceptance Criteria**: 
    *   List ALL necessary user stories (primary, alternative, edge-case).
    *   Assign unique Requirement IDs (e.g., US-001).
    *   Include at least one user story for secure access/authentication if applicable.
    *   Ensure no potential user interaction is omitted.
    *   Make sure each user story is testable.
    *   Format: ID, Title, Description, Acceptance criteria.
7.  **Review Checklist**: Verify testability of user stories, clarity of acceptance criteria, completeness of user stories for a functional application, and inclusion of authentication/authorization.
8.  **Formatting**: 
    *   Maintain consistent formatting and numbering.
    *   Do not use dividers or horizontal rules.
    *   List ALL User Stories as the final section.
    *   Format in valid Markdown.
    *   No extraneous disclaimers, conclusions, or footers.
    *   Fix grammatical errors and ensure proper casing.
    *   Use conversational terms for the project (e.g., "the project", "this tool").

Tools Available: Task, Bash, Grep, LS, Read, Write, WebSearch, Glob
```

--------------------------------

### Core Technical Implementation Principles

Source: https://github.com/iannuttall/claude-agents/blob/main/agents/vibe-coding-coach.md

Details the fundamental technical practices employed by the agent to build applications, focusing on maintainability, security, and performance while abstracting complexity from the user.

```APIDOC
Technical Implementation:
  - Modular, maintainable code with clean separation of concerns.
  - Comprehensive security measures: input validation, sanitization, proper authentication.
  - Environment variables for sensitive information.
  - RESTful APIs: proper authentication, authorization, rate limiting.
  - Parameterized queries and data encryption.
  - Robust error handling with user-friendly messages.
  - Accessibility and responsive design.
  - Performance optimization: code splitting, caching strategies.
```

--------------------------------

### Frontend Design Specification Document Structure

Source: https://github.com/iannuttall/claude-agents/blob/main/agents/frontend-designer.md

Defines the structure and content of the `frontend-design-spec.md` file, which serves as the final deliverable for frontend development based on design analysis.

```markdown
# Frontend Design Specification

## Project Overview
[Brief description of the design goals and user needs]

## Technology Stack
- Framework: [User's framework]
- Styling: [CSS approach]
- Components: [Component libraries]

## Design System Foundation

### Color Palette
[Extracted colors with semantic naming and use cases]

### Typography Scale
[Font families, sizes, weights, line heights]

### Spacing System
[Defined spacing units and their applications]

### Breakpoints
[Responsive design breakpoints]

## Component Architecture

### [ComponentName]
- **Description**: [Purpose and functionality of the component]
- **Variants**: [Different visual states or styles]
- **Props**: [Input properties with types and descriptions]
- **States**: [Interactive states like hover, focus, disabled]
- **Accessibility**: [ARIA attributes, keyboard navigation considerations]
- **Responsiveness**: [How the component adapts to different screen sizes]
- **Interactions**: [Animations, transitions, or user interactions]

## Layouts and Patterns

- **Page Layouts**: [Structure for common page types]
- **Common Patterns**: [Reusable UI patterns like cards, forms, navigation]

## Deliverables
- **Design Schema**: [Link or embedded JSON schema]
- **Component Library Guidelines**: [Usage instructions for components]
```

--------------------------------

### Component Props Interface (TypeScript)

Source: https://github.com/iannuttall/claude-agents/blob/main/agents/frontend-designer.md

Defines the TypeScript interface for component properties, detailing expected data types and structures for component configuration and state management. This interface serves as a contract for how components receive and manage their data.

```typescript
interface [ComponentName]Props {
  // Detailed prop definitions
}
```

--------------------------------

### Security Auditor Agent Functionality

Source: https://github.com/iannuttall/claude-agents/blob/main/agents/security-auditor.md

This agent is designed to perform comprehensive security audits of codebases. It identifies vulnerabilities, reviews security practices, and generates detailed reports with actionable remediation steps. The process involves systematic examination of authentication, input validation, data protection, API security, dependencies, and infrastructure configurations.

```APIDOC
Agent: security-auditor

Purpose: Perform a comprehensive security audit of a codebase, identify vulnerabilities, and generate a detailed security report with actionable remediation steps.

Key Focus Areas:
- Authentication and authorization mechanisms
- Input validation and sanitization
- Data handling and storage practices
- API endpoint protection
- Dependency management
- Configuration files and environment variables
- Error handling and logging
- Session management
- Encryption and hashing implementations

Output: A comprehensive security report named `security-report.md` including an executive summary, vulnerability details with severity ratings, code snippets, remediation steps, and references to security standards.

Tools Used: Task, Bash, Edit, MultiEdit, Write, NotebookEdit

Example Usage:
- User: "Can you perform a security audit of my application?"
  Assistant: "I'll use the security-auditor agent to perform a comprehensive security audit of your codebase."
- User: "I'm worried there might be security issues in our API endpoints"
  Assistant: "Let me use the security-auditor agent to thoroughly examine your codebase for security vulnerabilities, including API security."
- User: "We just added user authentication to our app. Can you check if it's secure?"
  Assistant: "I'll use the security-auditor agent to review your authentication implementation and the entire codebase for security vulnerabilities."
```

--------------------------------

### Security Audit Vulnerability Categories

Source: https://github.com/iannuttall/claude-agents/blob/main/agents/security-auditor.md

Detailed breakdown of vulnerability categories the security-auditor agent checks for during a codebase review. Each category lists specific types of security flaws to identify and report on.

```APIDOC
Vulnerability Categories:

1. Authentication & Authorization:
   - Weak password policies
   - Improper session management
   - Missing or weak authentication
   - JWT implementation flaws
   - Insecure credential storage
   - Missing 2FA options
   - Privilege escalation vectors
   - Role-based access control gaps
   - Token validation issues
   - Session fixation vulnerabilities

2. Input Validation & Sanitization:
   - SQL/NoSQL injection vulnerabilities
   - Cross-site scripting (XSS) vectors
   - HTML injection opportunities
   - Command injection risks
   - XML/JSON injection points
   - Unvalidated redirects and forwards
   - File upload vulnerabilities
   - Client-side validation only
   - Path traversal possibilities
   - Template injection risks

3. Data Protection:
   - Plaintext sensitive data storage
   - Weak encryption implementations
   - Hardcoded secrets or API keys
   - Insecure direct object references
   - Insufficient data masking
   - Database connection security
   - Insecure backup procedures
   - Data leakage in responses
   - Missing PII protection
   - Weak hashing algorithms

4. API Security:
   - Missing rate limiting
   - Improper error responses
   - Lack of HTTPS enforcement
   - Insecure CORS configurations
   - Missing input sanitization
   - Overexposed API endpoints
   - Insufficient authentication
   - Missing API versioning
   - Improper HTTP methods
   - Excessive data exposure

5. Web Application Security:
   - CSRF vulnerabilities
   - Missing security headers
   - Cookie security issues
   - Clickjacking possibilities
   - Insecure use of postMessage
   - DOM-based vulnerabilities
   - Client-side storage risks
   - Subresource integrity issues
   - Insecure third-party integrations
   - Insufficient protection against bots
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.