Complete refactor

.claude/settings.json

@@ -0,0 +1,11 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(cmd /c \"dir \"\"d:\\\\Usuario\\\\Desktop\\\\trdtyyyy\\\\Portfolio\\\\app\\\\projects\"\" /s\")",
+      "Bash(cmd /c \"del /f \"\"d:\\\\Usuario\\\\Desktop\\\\trdtyyyy\\\\Portfolio\\\\components\\\\project-detail-modal.tsx\"\"\")",
+      "Bash(powershell -Command:*)",
+      "WebFetch(domain:www.repetto-a.com)",
+      "WebFetch(domain:localhost)"
+    ]
+  }
+}

.claude/settings.local.json

@@ -0,0 +1,34 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(dir:*)",
+      "Bash(npx next build:*)",
+      "Bash(npx tsc:*)",
+      "Bash(npm ls:*)",
+      "Bash(npm install:*)",
+      "Bash(pnpm add:*)",
+      "Bash(npx playwright install:*)",
+      "Bash(curl:*)",
+      "Bash(pnpm dev)",
+      "Bash(timeout 20 bash -c 'while ! curl -s -o /dev/null -w \"\"%{http_code}\"\" http://localhost:3000 2>/dev/null | grep -q \"\"200\"\"; do sleep 2; echo \"\"Waiting...\"\"; done; echo \"\"Server ready!\"\"')",
+      "Bash(npx playwright test:*)",
+      "Bash(timeout 25 bash:*)",
+      "Bash(netstat:*)",
+      "Bash(findstr:*)",
+      "Bash(taskkill:*)",
+      "Bash(timeout 30 bash:*)",
+      "Bash(node -e:*)",
+      "Bash(node:*)",
+      "Bash(npx:*)",
+      "Bash(npm run build:*)",
+      "Bash(grep:*)",
+      "WebFetch(domain:nude-project.com)",
+      "Bash(git commit:*)",
+      "Bash(echo:*)",
+      "Bash(git add:*)",
+      "Bash(GIT_TRACE=1 git commit:*)",
+      "Bash(cmd /c \"del /f \"\"d:\\\\Usuario\\\\Desktop\\\\trdtyyyy\\\\Portfolio\\\\app\\\\projects\\\\[id]\\\\page.tsx\"\" && del /f \"\"d:\\\\Usuario\\\\Desktop\\\\trdtyyyy\\\\Portfolio\\\\app\\\\projects\\\\[id]\\\\not-found.tsx\"\"\")",
+      "Bash(cmd /c \"del /f \"\"d:\\\\Usuario\\\\Desktop\\\\trdtyyyy\\\\Portfolio\\\\app\\\\projects\\\\[id]\\\\page.tsx\"\"\")"
+    ]
+  }
+}

.claude/skills/agent-skills-main/agent-skills-main/.github/workflows/react-best-practices-ci.yml

@@ -0,0 +1,33 @@
+name: React Best Practices CI
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'skills/react-best-practices/**'
+      - 'packages/react-best-practices-build/**'
+  pull_request:
+    branches: [main]
+    paths:
+      - 'skills/react-best-practices/**'
+      - 'packages/react-best-practices-build/**'
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: packages/react-best-practices-build
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 10.24.0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+          cache-dependency-path: packages/react-best-practices-build/pnpm-lock.yaml
+      - run: pnpm install
+      - run: pnpm validate
+      - run: pnpm build

.claude/skills/agent-skills-main/agent-skills-main/.gitignore

@@ -0,0 +1 @@
+.DS_Store

.claude/skills/agent-skills-main/agent-skills-main/AGENTS.md

@@ -0,0 +1,110 @@
+# AGENTS.md
+
+This file provides guidance to AI coding agents (Claude Code, Cursor, Copilot, etc.) when working with code in this repository.
+
+## Repository Overview
+
+A collection of skills for Claude.ai and Claude Code for working with Vercel deployments. Skills are packaged instructions and scripts that extend Claude's capabilities.
+
+## Creating a New Skill
+
+### Directory Structure
+
+```
+skills/
+  {skill-name}/           # kebab-case directory name
+    SKILL.md              # Required: skill definition
+    scripts/              # Required: executable scripts
+      {script-name}.sh    # Bash scripts (preferred)
+  {skill-name}.zip        # Required: packaged for distribution
+```
+
+### Naming Conventions
+
+- **Skill directory**: `kebab-case` (e.g., `vercel-deploy`, `log-monitor`)
+- **SKILL.md**: Always uppercase, always this exact filename
+- **Scripts**: `kebab-case.sh` (e.g., `deploy.sh`, `fetch-logs.sh`)
+- **Zip file**: Must match directory name exactly: `{skill-name}.zip`
+
+### SKILL.md Format
+
+```markdown
+---
+name: {skill-name}
+description: {One sentence describing when to use this skill. Include trigger phrases like "Deploy my app", "Check logs", etc.}
+---
+
+# {Skill Title}
+
+{Brief description of what the skill does.}
+
+## How It Works
+
+{Numbered list explaining the skill's workflow}
+
+## Usage
+
+```bash
+bash /mnt/skills/user/{skill-name}/scripts/{script}.sh [args]
+```
+
+**Arguments:**
+- `arg1` - Description (defaults to X)
+
+**Examples:**
+{Show 2-3 common usage patterns}
+
+## Output
+
+{Show example output users will see}
+
+## Present Results to User
+
+{Template for how Claude should format results when presenting to users}
+
+## Troubleshooting
+
+{Common issues and solutions, especially network/permissions errors}
+```
+
+### Best Practices for Context Efficiency
+
+Skills are loaded on-demand — only the skill name and description are loaded at startup. The full `SKILL.md` loads into context only when the agent decides the skill is relevant. To minimize context usage:
+
+- **Keep SKILL.md under 500 lines** — put detailed reference material in separate files
+- **Write specific descriptions** — helps the agent know exactly when to activate the skill
+- **Use progressive disclosure** — reference supporting files that get read only when needed
+- **Prefer scripts over inline code** — script execution doesn't consume context (only output does)
+- **File references work one level deep** — link directly from SKILL.md to supporting files
+
+### Script Requirements
+
+- Use `#!/bin/bash` shebang
+- Use `set -e` for fail-fast behavior
+- Write status messages to stderr: `echo "Message" >&2`
+- Write machine-readable output (JSON) to stdout
+- Include a cleanup trap for temp files
+- Reference the script path as `/mnt/skills/user/{skill-name}/scripts/{script}.sh`
+
+### Creating the Zip Package
+
+After creating or updating a skill:
+
+```bash
+cd skills
+zip -r {skill-name}.zip {skill-name}/
+```
+
+### End-User Installation
+
+Document these two installation methods for users:
+
+**Claude Code:**
+```bash
+cp -r skills/{skill-name} ~/.claude/skills/
+```
+
+**claude.ai:**
+Add the skill to project knowledge or paste SKILL.md contents into the conversation.
+
+If the skill requires network access, instruct users to add required domains at `claude.ai/settings/capabilities`.

.claude/skills/agent-skills-main/agent-skills-main/CLAUDE.md

@@ -0,0 +1 @@
+AGENTS.md

.claude/skills/agent-skills-main/agent-skills-main/README.md

@@ -0,0 +1,147 @@
+# Agent Skills
+
+A collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities.
+
+Skills follow the [Agent Skills](https://agentskills.io/) format.
+
+## Available Skills
+
+### react-best-practices
+
+React and Next.js performance optimization guidelines from Vercel Engineering. Contains 40+ rules across 8 categories, prioritized by impact.
+
+**Use when:**
+- Writing new React components or Next.js pages
+- Implementing data fetching (client or server-side)
+- Reviewing code for performance issues
+- Optimizing bundle size or load times
+
+**Categories covered:**
+- Eliminating waterfalls (Critical)
+- Bundle size optimization (Critical)
+- Server-side performance (High)
+- Client-side data fetching (Medium-High)
+- Re-render optimization (Medium)
+- Rendering performance (Medium)
+- JavaScript micro-optimizations (Low-Medium)
+
+### web-design-guidelines
+
+Review UI code for compliance with web interface best practices. Audits your code for 100+ rules covering accessibility, performance, and UX.
+
+**Use when:**
+- "Review my UI"
+- "Check accessibility"
+- "Audit design"
+- "Review UX"
+- "Check my site against best practices"
+
+**Categories covered:**
+- Accessibility (aria-labels, semantic HTML, keyboard handlers)
+- Focus States (visible focus, focus-visible patterns)
+- Forms (autocomplete, validation, error handling)
+- Animation (prefers-reduced-motion, compositor-friendly transforms)
+- Typography (curly quotes, ellipsis, tabular-nums)
+- Images (dimensions, lazy loading, alt text)
+- Performance (virtualization, layout thrashing, preconnect)
+- Navigation & State (URL reflects state, deep-linking)
+- Dark Mode & Theming (color-scheme, theme-color meta)
+- Touch & Interaction (touch-action, tap-highlight)
+- Locale & i18n (Intl.DateTimeFormat, Intl.NumberFormat)
+
+### react-native-guidelines
+
+React Native best practices optimized for AI agents. Contains 16 rules across 7 sections covering performance, architecture, and platform-specific patterns.
+
+**Use when:**
+- Building React Native or Expo apps
+- Optimizing mobile performance
+- Implementing animations or gestures
+- Working with native modules or platform APIs
+
+**Categories covered:**
+- Performance (Critical) - FlashList, memoization, heavy computation
+- Layout (High) - flex patterns, safe areas, keyboard handling
+- Animation (High) - Reanimated, gesture handling
+- Images (Medium) - expo-image, caching, lazy loading
+- State Management (Medium) - Zustand patterns, React Compiler
+- Architecture (Medium) - monorepo structure, imports
+- Platform (Medium) - iOS/Android specific patterns
+
+### composition-patterns
+
+React composition patterns that scale. Helps avoid boolean prop proliferation through compound components, state lifting, and internal composition.
+
+**Use when:**
+- Refactoring components with many boolean props
+- Building reusable component libraries
+- Designing flexible APIs
+- Reviewing component architecture
+
+**Patterns covered:**
+- Extracting compound components
+- Lifting state to reduce props
+- Composing internals for flexibility
+- Avoiding prop drilling
+
+### vercel-deploy-claimable
+
+Deploy applications and websites to Vercel instantly. Designed for use with claude.ai and Claude Desktop to enable deployments directly from conversations. Deployments are "claimable" - users can transfer ownership to their own Vercel account.
+
+**Use when:**
+- "Deploy my app"
+- "Deploy this to production"
+- "Push this live"
+- "Deploy and give me the link"
+
+**Features:**
+- Auto-detects 40+ frameworks from `package.json`
+- Returns preview URL (live site) and claim URL (transfer ownership)
+- Handles static HTML projects automatically
+- Excludes `node_modules` and `.git` from uploads
+
+**How it works:**
+1. Packages your project into a tarball
+2. Detects framework (Next.js, Vite, Astro, etc.)
+3. Uploads to deployment service
+4. Returns preview URL and claim URL
+
+**Output:**
+```
+Deployment successful!
+
+Preview URL: https://skill-deploy-abc123.vercel.app
+Claim URL:   https://vercel.com/claim-deployment?code=...
+```
+
+## Installation
+
+```bash
+npx skills add vercel-labs/agent-skills
+```
+
+## Usage
+
+Skills are automatically available once installed. The agent will use them when relevant tasks are detected.
+
+**Examples:**
+```
+Deploy my app
+```
+```
+Review this React component for performance issues
+```
+```
+Help me optimize this Next.js page
+```
+
+## Skill Structure
+
+Each skill contains:
+- `SKILL.md` - Instructions for the agent
+- `scripts/` - Helper scripts for automation (optional)
+- `references/` - Supporting documentation (optional)
+
+## License
+
+MIT

.claude/skills/agent-skills-main/agent-skills-main/packages/react-best-practices-build/.gitignore

@@ -0,0 +1 @@
+node_modules/

.claude/skills/agent-skills-main/agent-skills-main/packages/react-best-practices-build/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "react-best-practices-build",
+  "version": "1.0.0",
+  "description": "Build tooling for React Best Practices and React Native Guidelines skills",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm build-agents && pnpm extract-tests",
+    "build-agents": "tsx src/build.ts",
+    "build-all": "tsx src/build.ts --all",
+    "build-react": "tsx src/build.ts --skill=react-best-practices",
+    "build-rn": "tsx src/build.ts --skill=react-native-skills",
+    "build-composition": "tsx src/build.ts --skill=composition-patterns",
+    "validate": "tsx src/validate.ts",
+    "extract-tests": "tsx src/extract-tests.ts",
+    "migrate": "tsx src/migrate.ts",
+    "dev": "pnpm build && pnpm validate"
+  },
+  "keywords": [
+    "react",
+    "performance",
+    "guidelines",
+    "llm",
+    "agents"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "tsx": "^4.7.0",
+    "typescript": "^5.3.0"
+  }
+}