{
  "schema": "https://ai-atoms.com/schemas/skill-v1.json",
  "type": "skill",
  "id": "skill/cc-skill-project-guidelines-example",
  "version": "1.0.0",
  "name": "Cc Skill Project Guidelines Example",
  "description": "Project Guidelines Skill (Example)",
  "system_prompt_fragment": "# Project Guidelines Skill (Example)\n\nThis is an example of a project-specific skill. Use this as a template for your own projects.\n\nBased on a real production application: [Zenith](https://zenith.chat) - AI-powered customer discovery platform.\n\n---\n\n## When to Use\n\nReference this skill when working on the specific project it's designed for. Project skills contain:\n- Architecture overview\n- File structure\n- Code patterns\n- Testing requirements\n- Deployment workflow\n\n---\n\n## Architecture Overview\n\n**Tech Stack:**\n- **Frontend**: Next.js 15 (App Router), TypeScript, React\n- **Backend**: FastAPI (Python), Pydantic models\n- **Database**: Supabase (PostgreSQL)\n- **AI**: Claude API with tool calling and structured output\n- **Deployment**: Google Cloud Run\n- **Testing**: Playwright (E2E), pytest (backend), React Testing Library\n\n**Services:**\n```\n┌─────────────────────────────────────────────────────────────┐\n│                         Frontend                            │\n│  Next.js 15 + TypeScript + TailwindCSS                     │\n│  Deployed: Vercel / Cloud Run                              │\n└─────────────────────────────────────────────────────────────┘\n                              │\n                              ▼\n┌─────────────────────────────────────────────────────────────┐\n│                         Backend                             │\n│  FastAPI + Python 3.11 + Pydantic                          │\n│  Deployed: Cloud Run                                       │\n└─────────────────────────────────────────────────────────────┘\n                              │\n              ┌───────────────┼───────────────┐\n              ▼               ▼               ▼\n        ┌──────────┐   ┌──────────┐   ┌──────────┐\n        │ Supabase │   │  Claude  │   │  Redis   │\n        │ Database │   │   API    │   │  Cache   │\n        └──────────┘   └──────────┘   └──────────┘\n```\n\n---\n\n## File Structure\n\n```\nproject/\n├── frontend/\n│   └── src/\n│       ├── app/              # Next.js app router pages\n│       │   ├── api/          # API routes\n│       │   ├── (auth)/       # Auth-protected routes\n│       │   └── workspace/    # Main app workspace\n│       ├── components/       # React components\n│       │   ├── ui/           # Base UI components\n│       │   ├── forms/        # Form components\n│       │   └── layouts/      # Layout components\n│       ├── hooks/            # Custom React hooks\n│       ├── lib/              # Utilities\n│       ├── types/            # TypeScript definitions\n│       └── config/           # Configuration\n│\n├── backend/\n│   ├── routers/              # FastAPI route handlers\n│   ├── models.py             # Pydantic models\n│   ├── main.py               # FastAPI app entry\n│   ├── auth_system.py        # Authentication\n│   ├── database.py           # Database operations\n│   ├── services/             # Business logic\n│   └── tests/                # pytest tests\n│\n├── deploy/                   # Deployment configs\n├── docs/                     # Documentation\n└── scripts/                  # Utility scripts\n```\n\n---\n\n## Code Patterns\n\n### API Response Format (FastAPI)\n\n```python\nfrom pydantic import BaseModel\nfrom typing import Generic, TypeVar, Optional\n\nT = TypeVar('T')\n\nclass ApiResponse(BaseModel, Generic[T]):\n    success: bool\n    data: Optional[T] = None\n    error: Optional[str] = None\n\n    @classmethod\n    def ok(cls, data: T) -> \"ApiResponse[T]\":\n        return cls(success=True, data=data)\n\n    @classmethod\n    def fail(cls, error: str) -> \"ApiResponse[T]\":\n        return cls(success=False, error=error)\n```\n\n### Frontend API Calls (TypeScript)\n\n```typescript\ninterface ApiResponse<T> {\n  success: boolean\n  data?: T\n  error?: string\n}\n\nasync function fetchApi<T>(\n  endpoint: string,\n  options?: RequestInit\n): Promise<ApiResponse<T>> {\n  try {\n    const response = await fetch(`/api${endpoint}`, {\n      ...options,\n      headers: {\n        'Content-Type': 'application/json',\n        ...options?.headers,\n      },\n    })\n\n    if (!response.ok) {\n      return { success: false, error: `HTTP ${response.status}` }\n    }\n\n    return await response.json()\n  } catch (error) {\n    return { success: false, error: String(error) }\n  }\n}\n```\n\n### Claude AI Integration (Structured Output)\n\n```python\nfrom anthropic import Anthropic\nfrom pydantic import BaseModel\n\nclass AnalysisResult(BaseModel):\n    summary: str\n    key_points: list[str]\n    confidence: float\n\nasync def analyze_with_claude(content: str) -> AnalysisResult:\n    client = Anthropic()\n\n    response = client.messages.create(\n        model=\"claude-sonnet-4-5-20250514\",\n        max_tokens=1024,\n        messages=[{\"role\": \"user\", \"content\": content}],\n        tools=[{\n            \"name\": \"provide_analysis\",\n            \"description\": \"Provide structured analysis\",\n            \"input_schema\": AnalysisResult.model_json_schema()\n        }],\n        tool_choice={\"type\": \"tool\", \"name\": \"provide_analysis\"}\n    )\n\n    # Extract tool use result\n    tool_use = next(\n        block for block in response.content\n        if block.type == \"tool_use\"\n    )\n\n    return AnalysisResult(**tool_use.input)\n```\n\n### Custom Hooks (React)\n\n```typescript\nimport { useState, useCallback } from 'react'\n\ninterface UseApiState<T> {\n  data: T | null\n  loading: boolean\n  error: string | null\n}\n\nexport function useApi<T>(\n  fetchFn: () => Promise<ApiResponse<T>>\n) {\n  const [state, setState] = useState<UseApiState<T>>({\n    data: null,\n    loading: false,\n    error: null,\n  })\n\n  const execute = useCallback(async () => {\n    setState(prev => ({ ...prev, loading: true, error: null }))\n\n    const result = await fetchFn()\n\n    if (result.success) {\n      setState({ data: result.data!, loading: false, error: null })\n    } else {\n      setState({ data: null, loading: false, error: result.error! })\n    }\n  }, [fetchFn])\n\n  return { ...state, execute }\n}\n```\n\n---\n\n## Testing Requirements\n\n### Backend (pytest)\n\n```bash\n# Run all tests\npoetry run pytest tests/\n\n# Run with coverage\npoetry run pytest tests/ --cov=. --cov-report=html\n\n# Run specific test file\npoetry run pytest tests/test_auth.py -v\n```\n\n**Test structure:**\n```python\nimport pytest\nfrom httpx import AsyncClient\nfrom main import app\n\n@pytest.fixture\nasync def client():\n    async with AsyncClient(app=app, base_url=\"http://test\") as ac:\n        yield ac\n\n@pytest.mark.asyncio\nasync def test_health_check(client: AsyncClient):\n    response = await client.get(\"/health\")\n    assert response.status_code == 200\n    assert response.json()[\"status\"] == \"healthy\"\n```\n\n### Frontend (React Testing Library)\n\n```bash\n# Run tests\nnpm run test\n\n# Run with coverage\nnpm run test -- --coverage\n\n# Run E2E tests\nnpm run test:e2e\n```\n\n**Test structure:**\n```typescript\nimport { render, screen, fireEvent } from '@testing-library/react'\nimport { WorkspacePanel } from './WorkspacePanel'\n\ndescribe('WorkspacePanel', () => {\n  it('renders workspace correctly', () => {\n    render(<WorkspacePanel />)\n    expect(screen.getByRole('main')).toBeInTheDocument()\n  })\n\n  it('handles session creation', async () => {\n    render(<WorkspacePanel />)\n    fireEvent.click(screen.getByText('New Session'))\n    expect(await screen.findByText('Session created')).toBeInTheDocument()\n  })\n})\n```\n\n---\n\n## Deployment Workflow\n\n### Pre-Deployment Checklist\n\n- [ ] All tests passing locally\n- [ ] `npm run build` succeeds (frontend)\n- [ ] `poetry run pytest` passes (backend)\n- [ ] No hardcoded secrets\n- [ ] Environment variables documented\n- [ ] Database migrations ready\n\n### Deployment Commands\n\n```bash\n# Build and deploy frontend\ncd frontend && npm run build\ngcloud run deploy frontend --source .\n\n# Build and deploy backend\ncd backend\ngcloud run deploy backend --source .\n```\n\n### Environment Variables\n\n```bash\n# Frontend (.env.local)\nNEXT_PUBLIC_API_URL=https://api.example.com\nNEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co\nNEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...\n\n# Backend (.env)\nDATABASE_URL=postgresql://...\nANTHROPIC_API_KEY=sk-ant-...\nSUPABASE_URL=https://xxx.supabase.co\nSUPABASE_KEY=eyJ...\n```\n\n---\n\n## Critical Rules\n\n1. **No emojis** in code, comments, or documentation\n2. **Immutability** - never mutate objects or arrays\n3. **TDD** - write tests before implementation\n4. **80% coverage** minimum\n5. **Many small files** - 200-400 lines typical, 800 max\n6. **No console.log** in production code\n7. **Proper error handling** with try/catch\n8. **Input validation** with Pydantic/Zod\n\n---\n\n## Related Skills\n\n- `coding-standards.md` - General coding best practices\n- `backend-patterns.md` - API and database patterns\n- `frontend-patterns.md` - React and Next.js patterns\n- `tdd-workflow/` - Test-driven development methodology",
  "applicable_domains": [
    "frontend"
  ],
  "category": "frontend",
  "invocation": [
    "/cc-skill-project-guidelines-example"
  ],
  "authored_by": "affaan-m",
  "source_url": "https://claudeskills.in/skill/cc-skill-project-guidelines-example",
  "provenance": {
    "source": "claudeskills.in",
    "source_url": "https://claudeskills.in/skill/cc-skill-project-guidelines-example",
    "author": "affaan-m",
    "license": "unknown",
    "imported_at": "2026-09-03",
    "notes": "Aggregated by claudeskills.in from community GitHub lists."
  },
  "tags": [
    "claudeskills",
    "frontend"
  ],
  "lifecycle": "draft"
}