# dsmsmj/vercel-labs-agent-skills architecture

> Architecture diagram of the GitHub repository dsmsmj/vercel-labs-agent-skills, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/dsmsmj/vercel-labs-agent-skills
- Repository: https://github.com/dsmsmj/vercel-labs-agent-skills

## Overview

This repository packages agent skills rather than a conventional application. The main workflow is an agent recognizing a user’s React/Next.js performance task and applying the skill’s prioritized rules; separate skills support UI audits and Vercel deployment. The React skill’s rules span async work, bundles, server/client data fetching, re-renders, rendering, JavaScript, and advanced patterns. The README documents the deployment workflow, but implementation details beyond the listed script are not inferred here.

Main entry points: [`skills/claude.ai/vercel-deploy-claimable/SKILL.md`](https://github.com/dsmsmj/vercel-labs-agent-skills/blob/main/skills/claude.ai/vercel-deploy-claimable/SKILL.md) (Deploy Skill), [`skills/react-best-practices/SKILL.md`](https://github.com/dsmsmj/vercel-labs-agent-skills/blob/main/skills/react-best-practices/SKILL.md) (Performance Skill), [`skills/react-best-practices/rules`](https://github.com/dsmsmj/vercel-labs-agent-skills/tree/main/skills/react-best-practices/rules) (Optimization Rules), [`skills/web-design-guidelines/SKILL.md`](https://github.com/dsmsmj/vercel-labs-agent-skills/blob/main/skills/web-design-guidelines/SKILL.md) (Design Guidelines)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_performance["React Performance"]
  node_react_skill["Performance Skill<br/>[SKILL.md]"]
  node_performance_rules["Optimization Rules"]
end

subgraph group_design["UI Review"]
  node_web_skill["Design Guidelines<br/>[SKILL.md]"]
end

subgraph group_deployment["Vercel Deployment"]
  node_deploy_skill["Deploy Skill<br/>[SKILL.md]"]
  node_deploy_script["Deploy Script<br/>[deploy.sh]"]
end

node_user(("User"))
node_agent(("Coding Agent"))
node_vercel["Vercel Service"]

node_user -->|"requests guidance"| node_agent
node_agent -->|"selects for optimization"| node_react_skill
node_react_skill -->|"applies guidelines"| node_performance_rules
node_agent -->|"selects for UI audit"| node_web_skill
node_user -->|"requests deployment"| node_agent
node_agent -->|"selects for deployment"| node_deploy_skill
node_deploy_skill -.->|"runs deployment"| node_deploy_script
node_deploy_skill -->|"uploads project"| node_vercel
node_vercel -->|"returns deployment links"| node_agent

click node_react_skill "https://github.com/dsmsmj/vercel-labs-agent-skills/blob/main/skills/react-best-practices/SKILL.md"
click node_performance_rules "https://github.com/dsmsmj/vercel-labs-agent-skills/tree/main/skills/react-best-practices/rules"
click node_web_skill "https://github.com/dsmsmj/vercel-labs-agent-skills/blob/main/skills/web-design-guidelines/SKILL.md"
click node_deploy_skill "https://github.com/dsmsmj/vercel-labs-agent-skills/blob/main/skills/claude.ai/vercel-deploy-claimable/SKILL.md"
click node_deploy_script "https://github.com/dsmsmj/vercel-labs-agent-skills/blob/main/skills/claude.ai/vercel-deploy-claimable/scripts/deploy.sh"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_react_skill,node_performance_rules,node_user toneBlue
class node_web_skill toneAmber
class node_deploy_skill,node_deploy_script toneMint
class node_agent,node_vercel toneIndigo
```

## Components

### React Performance

- [Performance Skill](https://github.com/dsmsmj/vercel-labs-agent-skills/blob/main/skills/react-best-practices/SKILL.md): `skills/react-best-practices/SKILL.md`
- [Optimization Rules](https://github.com/dsmsmj/vercel-labs-agent-skills/tree/main/skills/react-best-practices/rules): `skills/react-best-practices/rules`

### UI Review

- [Design Guidelines](https://github.com/dsmsmj/vercel-labs-agent-skills/blob/main/skills/web-design-guidelines/SKILL.md): `skills/web-design-guidelines/SKILL.md`

### Vercel Deployment

- [Deploy Skill](https://github.com/dsmsmj/vercel-labs-agent-skills/blob/main/skills/claude.ai/vercel-deploy-claimable/SKILL.md): `skills/claude.ai/vercel-deploy-claimable/SKILL.md`
- [Deploy Script](https://github.com/dsmsmj/vercel-labs-agent-skills/blob/main/skills/claude.ai/vercel-deploy-claimable/scripts/deploy.sh): `skills/claude.ai/vercel-deploy-claimable/scripts/deploy.sh`

### Other components

- **User**
- **Coding Agent**
- **Vercel Service**

## Connections

- User → Coding Agent: requests guidance (evidence: `README.md`)
- Coding Agent → Performance Skill: selects for optimization (evidence: `README.md`)
- Performance Skill → Optimization Rules: applies guidelines (evidence: `README.md`)
- Coding Agent → Design Guidelines: selects for UI audit (evidence: `README.md`)
- User → Coding Agent: requests deployment (evidence: `README.md`)
- Coding Agent → Deploy Skill: selects for deployment (evidence: `README.md`)
- Deploy Skill → Deploy Script: runs deployment
- Deploy Skill → Vercel Service: uploads project (evidence: `README.md`)
- Vercel Service → Coding Agent: returns deployment links (evidence: `README.md`)