Skip to main content Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pรฉgalo en Codex, Claude u otro asistente, y deja que revise la pรกgina de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisiรณn. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/davila7/claude-code-templates --skill cc-skill-project-guidelines-exampleEl comando permanece en una sola lรญnea. Desplรกzate horizontalmente para revisarlo antes de copiarlo.
ยฟPrefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Mรกs de este repositorio Build AI agents that interact with computers like humans do - viewing screens, moving cursors, clicking buttons, and typing text. Covers Anthropic's Computer Use, OpenAI's Operator/CUA, and open-source alternatives. Critical focus on sandboxing, security, and handling the unique challenges of vision-based control. Use when: computer use, desktop automation agent, screen control AI, vision-based agent, GUI automation.
Expert in building products that wrap AI APIs (OpenAI, Anthropic, etc.) into focused tools people will pay for. Not just 'ChatGPT but different' - products that solve specific problems with AI. Covers prompt engineering for products, cost management, rate limiting, and building defensible AI businesses. Use when: AI wrapper, GPT product, AI tool, wrap AI, AI SaaS.
github-workflow-automation Automate GitHub workflows with AI assistance. Includes PR reviews, issue triage, CI/CD integration, and Git operations. Use when automating GitHub workflows, setting up PR review automation, creating GitHub Actions, or triaging issues.
name cc-skill-project-guidelines-example description Project Guidelines Skill (Example) author affaan-m version 1.0
Project Guidelines Skill (Example)
This is an example of a project-specific skill. Use this as a template for your own projects.
Based on a real production application: Zenith - AI-powered customer discovery platform.
When to Use
Reference this skill when working on the specific project it's designed for. Project skills contain:
Architecture overview
File structure
Code patterns
Testing requirements
Deployment workflow
Architecture Overview
Tech Stack:
Frontend : Next.js 15 (App Router), TypeScript, ReactBackend : FastAPI (Python), Pydantic modelsDatabase : Supabase (PostgreSQL)AI : Claude API with tool calling and structured outputDeployment : Google Cloud RunTesting : Playwright (E2E), pytest (backend), React Testing Library
Services:
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ Frontend โ
โ Next.js 15 + TypeScript + TailwindCSS โ
โ Deployed: Vercel / Cloud Run โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ
โผ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ Backend โ
โ FastAPI + Python 3.11 + Pydantic โ
โ Deployed: Cloud Run โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ
โโโโโโโโโโโโโโโโโผโโโโโโโโโโโโโโโโ
โผ โผ โผ
โโโโโโโโโโโโ โโโโโโโโโโโโ โโโโโโโโโโโโ
โ Supabase โ โ Claude โ โ Redis โ
โ Database โ โ API โ โ Cache โ
โโโโโโโโโโโโ โโโโโโโโโโโโ โโโโโโโโโโโโ
File Structure project/
โโโ frontend/
โ โโโ src/
โ โโโ app/ # Next.js app router pages
โ โ โโโ api/ # API routes
โ โ โโโ (auth)/ # Auth-protected routes
โ โ โโโ workspace/ # Main app workspace
โ โโโ components/ # React components
โ โ โโโ ui/ # Base UI components
โ โ โโโ forms/ # Form components
โ โ โโโ layouts/ # Layout components
โ โโโ hooks/ # Custom React hooks
โ โโโ lib/ # Utilities
โ โโโ types/ # TypeScript definitions
โ โโโ config/ # Configuration
โ
โโโ backend/
โ โโโ routers/ # FastAPI route handlers
โ โโโ models.py # Pydantic models
โ โโโ main.py # FastAPI app entry
โ โโโ auth_system.py # Authentication
โ โโโ database.py # Database operations
โ โโโ services/ # Business logic
โ โโโ tests/ # pytest tests
โ
โโโ deploy/ # Deployment configs
โโโ docs/ # Documentation
โโโ scripts/ # Utility scripts
Code Patterns
API Response Format (FastAPI) from pydantic import BaseModel
from typing import Generic , TypeVar, Optional
T = TypeVar('T' )
class ApiResponse (BaseModel, Generic [T]):
success: bool
data: Optional [T] = None
error: Optional [str ] = None
@classmethod
def ok (cls, data: T ) -> "ApiResponse[T]" :
return cls(success=True , data=data)
@classmethod
def fail (cls, error: str ) -> "ApiResponse[T]" :
return cls(success=False , error=error)
Frontend API Calls (TypeScript) interface ApiResponse <T> {
success : boolean
data ?: T
error ?: string
}
async function fetchApi<T>(
endpoint : string ,
options ?: RequestInit
): Promise <ApiResponse <T>> {
try {
const response = await fetch (`/api${endpoint} ` , {
...options,
headers : {
'Content-Type' : 'application/json' ,
...options?.headers ,
},
})
if (!response.ok ) {
return { success : false , error : `HTTP ${response.status} ` }
}
return await response.json ()
} catch (error) {
return { success : false , error : String (error) }
}
}
Claude AI Integration (Structured Output) from anthropic import Anthropic
from pydantic import BaseModel
class AnalysisResult (BaseModel ):
summary: str
key_points: list [str ]
confidence: float
async def analyze_with_claude (content: str ) -> AnalysisResult:
client = Anthropic()
response = client.messages.create(
model="claude-sonnet-4-5-20250514" ,
max_tokens=1024 ,
messages=[{"role" : "user" , "content" : content}],
tools=[{
"name" : "provide_analysis" ,
"description" : "Provide structured analysis" ,
"input_schema" : AnalysisResult.model_json_schema()
}],
tool_choice={"type" : "tool" , "name" : "provide_analysis" }
)
tool_use = next (
block for block in response.content
if block.type == "tool_use"
)
return AnalysisResult(**tool_use.input )
Custom Hooks (React) import { useState, useCallback } from 'react'
interface UseApiState <T> {
data : T | null
loading : boolean
error : string | null
}
export function useApi<T>(
fetchFn : () => Promise <ApiResponse <T>>
) {
const [state, setState] = useState<UseApiState <T>>({
data : null ,
loading : false ,
error : null ,
})
const execute = useCallback (async () => {
setState (prev =>loading : true , error : null }))
const result = await fetchFn ()
if (result.success ) {
setState ({ data : result.data !, loading : false , error : null })
} else {
setState ({ data : null , loading : false , error : result.error ! })
}
}, [fetchFn])
return { ...state, execute }
}
Testing Requirements
Backend (pytest)
poetry run pytest tests/
poetry run pytest tests/ --cov=. --cov-report=html
poetry run pytest tests/test_auth.py -v
import pytest
from httpx import AsyncClient
from main import app
@pytest.fixture
async def client ():
async with AsyncClient(app=app, base_url="http://test" ) as ac:
yield ac
@pytest.mark.asyncio
async def test_health_check (client: AsyncClient ):
response = await client.get("/health" )
assert response.status_code == 200
assert response.json()["status" ] == "healthy"
Frontend (React Testing Library)
npm run test
npm run test -- --coverage
npm run test :e2e
import { render, screen, fireEvent } from '@testing-library/react'
import { WorkspacePanel } from './WorkspacePanel'
describe ('WorkspacePanel' , () => {
it ('renders workspace correctly' , () => {
render (<WorkspacePanel /> expect (screen.getByRole ('main' )).toBeInTheDocument ()
})
it ('handles session creation' , async () => {
render (<WorkspacePanel /> click (screen.getByText ('New Session' ))
expect (await screen.findByText ('Session created' )).toBeInTheDocument ()
})
})
Deployment Workflow
Pre-Deployment Checklist
Deployment Commands
cd frontend && npm run build
gcloud run deploy frontend --source .
cd backend
gcloud run deploy backend --source .
Environment Variables
NEXT_PUBLIC_API_URL=https://api.example.com
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
DATABASE_URL=postgresql://...
ANTHROPIC_API_KEY=sk-ant-...
SUPABASE_URL=https://xxx.supabase.co
SUPABASE_KEY=eyJ...
Critical Rules
No emojis in code, comments, or documentationImmutability - never mutate objects or arraysTDD - write tests before implementation80% coverage minimumMany small files - 200-400 lines typical, 800 maxNo console.log in production codeProper error handling with try/catchInput validation with Pydantic/Zod
Related Skills
coding-standards.md - General coding best practicesbackend-patterns.md - API and database patternsfrontend-patterns.md - React and Next.js patternstdd-workflow/ - Test-driven development methodology Ocupaciones relacionadas SOC
Basado en la clasificaciรณn ocupacional SOC
