Frontend web starter

mkdir -p .claude/hooks
[ -e AGENTS.md ] && echo "skip AGENTS.md (exists)" || cat > AGENTS.md <<'AGENTRIGS_EOF'
# Project
<one paragraph: what the app does, who uses it, the framework + styling stack>

## Commands
- Install: `pnpm install` · Dev: `pnpm dev` · Typecheck: `pnpm typecheck` · Lint: `pnpm lint` · Test: `pnpm test`

## Conventions
- TypeScript strict; no `any` without a comment explaining why.
- Components: one per file, colocate styles and tests; prefer server components / static rendering when the framework allows.
- Accessibility is part of done: labels, focus states, keyboard paths, color contrast.
- Use the design tokens in the theme; no hard-coded colors or magic spacing.
- Fetch library docs with Context7 instead of guessing APIs.

## Checks before done
`pnpm typecheck && pnpm lint && pnpm test` and, for UI changes, describe what you verified in the browser.

## Workflow
1. Restate the task in one line and list the files you expect to touch.
2. Make the smallest change that works; keep diffs reviewable.
3. Run the checks below before saying you're done, and show the output.
4. If something is ambiguous, ask one precise question instead of guessing.

## Safety
- Never read or print secrets (.env, keys, ~/.ssh). Ask for values instead.
- No destructive commands (rm -rf, force-push, reset --hard) without explicit approval; the guard hook blocks them anyway.
- Don't add dependencies, services or paid APIs without asking.
AGENTRIGS_EOF
[ -e CLAUDE.md ] && echo "skip CLAUDE.md (exists)" || cat > CLAUDE.md <<'AGENTRIGS_EOF'
@AGENTS.md

# Claude Code notes
- Use plan mode for multi-file changes. Prefer the installed skills over ad-hoc procedures.
AGENTRIGS_EOF
[ -e .claude/settings.json ] && echo "skip .claude/settings.json (exists)" || cat > .claude/settings.json <<'AGENTRIGS_EOF'
{
  "permissions": {
    "deny": [
      "Bash(rm -rf:*)",
      "Bash(rm -fr:*)",
      "Bash(sudo:*)",
      "Bash(git push --force:*)",
      "Bash(git push -f:*)",
      "Bash(git reset --hard:*)",
      "Bash(git clean -fd:*)",
      "Read(./.env)",
      "Read(./.env.*)",
      "Read(./**/.env)",
      "Read(./secrets/**)",
      "Read(~/.ssh/**)",
      "Read(~/.aws/**)",
      "Read(./**/*.pem)"
    ],
    "ask": [
      "Bash(git push:*)",
      "Bash(npm publish:*)",
      "Bash(docker:*)",
      "Bash(curl:*)"
    ],
    "defaultMode": "default"
  },
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Bash|Read|Edit|Write",
        "hooks": [
          {
            "type": "command",
            "command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/guard.sh"
          }
        ]
      }
    ]
  }
}
AGENTRIGS_EOF
[ -e .claude/hooks/guard.sh ] && echo "skip .claude/hooks/guard.sh (exists)" || cat > .claude/hooks/guard.sh <<'AGENTRIGS_EOF'
#!/usr/bin/env bash
# .claude/hooks/guard.sh: PreToolUse guard. Exit code 2 blocks the tool call and shows the reason to the model.
# Requires jq. Make executable: chmod +x .claude/hooks/guard.sh
input=$(cat)
tool=$(printf '%s' "$input" | jq -r '.tool_name // empty')
cmd=$(printf '%s' "$input" | jq -r '.tool_input.command // empty')
path=$(printf '%s' "$input" | jq -r '.tool_input.file_path // .tool_input.path // empty')
if [ "$tool" = "Bash" ]; then
  if printf '%s' "$cmd" | grep -Eq '(^|[;&| ])(sudo|mkfs|dd if=)|rm -[a-zA-Z]*r[a-zA-Z]*f|rm -[a-zA-Z]*f[a-zA-Z]*r|git push .*(--force|-f( |$))|git reset --hard|git clean -[a-z]*f|curl[^|]*\|[[:space:]]*(ba)?sh|chmod 777'; then
    echo "Blocked by guard.sh: destructive command ($cmd). Ask the user to run it manually." >&2; exit 2
  fi
fi
if printf '%s %s' "$path" "$cmd" | grep -Eq '(^|/|[[:space:]])\.env($|\.|[[:space:]])|id_rsa|\.pem($|[[:space:]])|\.ssh/|\.aws/credentials'; then
  echo "Blocked by guard.sh: secrets file ($path$cmd)." >&2; exit 2
fi
exit 0
AGENTRIGS_EOF
[ -e .mcp.json ] && echo "skip .mcp.json (exists)" || cat > .mcp.json <<'AGENTRIGS_EOF'
{
  "mcpServers": {
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com/mcp"
    }
  }
}
AGENTRIGS_EOF
[ -e AGENTRIGS-STARTER.md ] && echo "skip AGENTRIGS-STARTER.md (exists)" || cat > AGENTRIGS-STARTER.md <<'AGENTRIGS_EOF'
# AgentRigs starter: Frontend web

Generated by https://agentrigs.dev/starters/frontend-web from real, well-guarded public rigs:
- https://github.com/hoangsonww/Claude-Code-Agent-Monitor
- https://github.com/dcb/homeassistant-claude-kit
- https://github.com/fotografvecerek-ai/claude-code-audit-gate

## Install
1. Unzip into your repo root (`unzip -n` won't overwrite existing files).
2. `chmod +x .claude/hooks/guard.sh` (needs `jq`).
3. Fill in the <placeholders> in AGENTS.md.
4. Install the recommended skills (third-party code, so review first):

```bash
npx degit anthropics/skills/skills/frontend-design .claude/skills/frontend-design
npx degit vercel-labs/agent-skills/skills/web-design-guidelines .claude/skills/web-design-guidelines
npx degit vercel-labs/agent-skills/skills/react-best-practices .claude/skills/vercel-react-best-practices
npx degit anthropics/skills/skills/webapp-testing .claude/skills/webapp-testing
```

Optional MCP servers (each adds context tax every turn):

```bash
claude mcp add playwright -- npx -y @playwright/mcp@latest
```

Codex / Cursor / other harnesses read AGENTS.md directly; Claude Code reads CLAUDE.md, which imports AGENTS.md.
AGENTRIGS_EOF
chmod +x .claude/hooks/guard.sh
npx degit anthropics/skills/skills/frontend-design .claude/skills/frontend-design  # skill: frontend-design
npx degit vercel-labs/agent-skills/skills/web-design-guidelines .claude/skills/web-design-guidelines  # skill: web-design-guidelines
npx degit vercel-labs/agent-skills/skills/react-best-practices .claude/skills/vercel-react-best-practices  # skill: vercel-react-best-practices
npx degit anthropics/skills/skills/webapp-testing .claude/skills/webapp-testing  # skill: webapp-testing

@AGENTS.md

# Claude Code notes
- Use plan mode for multi-file changes. Prefer the installed skills over ad-hoc procedures.

{
  "permissions": {
    "deny": [
      "Bash(rm -rf:*)",
      "Bash(rm -fr:*)",
      "Bash(sudo:*)",
      "Bash(git push --force:*)",
      "Bash(git push -f:*)",
      "Bash(git reset --hard:*)",
      "Bash(git clean -fd:*)",
      "Read(./.env)",
      "Read(./.env.*)",
      "Read(./**/.env)",
      "Read(./secrets/**)",
      "Read(~/.ssh/**)",
      "Read(~/.aws/**)",
      "Read(./**/*.pem)"
    ],
    "ask": [
      "Bash(git push:*)",
      "Bash(npm publish:*)",
      "Bash(docker:*)",
      "Bash(curl:*)"
    ],
    "defaultMode": "default"
  },
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Bash|Read|Edit|Write",
        "hooks": [
          {
            "type": "command",
            "command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/guard.sh"
          }
        ]
      }
    ]
  }
}

#!/usr/bin/env bash
# .claude/hooks/guard.sh: PreToolUse guard. Exit code 2 blocks the tool call and shows the reason to the model.
# Requires jq. Make executable: chmod +x .claude/hooks/guard.sh
input=$(cat)
tool=$(printf '%s' "$input" | jq -r '.tool_name // empty')
cmd=$(printf '%s' "$input" | jq -r '.tool_input.command // empty')
path=$(printf '%s' "$input" | jq -r '.tool_input.file_path // .tool_input.path // empty')
if [ "$tool" = "Bash" ]; then
  if printf '%s' "$cmd" | grep -Eq '(^|[;&| ])(sudo|mkfs|dd if=)|rm -[a-zA-Z]*r[a-zA-Z]*f|rm -[a-zA-Z]*f[a-zA-Z]*r|git push .*(--force|-f( |$))|git reset --hard|git clean -[a-z]*f|curl[^|]*\|[[:space:]]*(ba)?sh|chmod 777'; then
    echo "Blocked by guard.sh: destructive command ($cmd). Ask the user to run it manually." >&2; exit 2
  fi
fi
if printf '%s %s' "$path" "$cmd" | grep -Eq '(^|/|[[:space:]])\.env($|\.|[[:space:]])|id_rsa|\.pem($|[[:space:]])|\.ssh/|\.aws/credentials'; then
  echo "Blocked by guard.sh: secrets file ($path$cmd)." >&2; exit 2
fi
exit 0

{
  "mcpServers": {
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com/mcp"
    }
  }
}

# AgentRigs starter: Frontend web

Generated by https://agentrigs.dev/starters/frontend-web from real, well-guarded public rigs:
- https://github.com/hoangsonww/Claude-Code-Agent-Monitor
- https://github.com/dcb/homeassistant-claude-kit
- https://github.com/fotografvecerek-ai/claude-code-audit-gate

## Install
1. Unzip into your repo root (`unzip -n` won't overwrite existing files).
2. `chmod +x .claude/hooks/guard.sh` (needs `jq`).
3. Fill in the <placeholders> in AGENTS.md.
4. Install the recommended skills (third-party code, so review first):

```bash
npx degit anthropics/skills/skills/frontend-design .claude/skills/frontend-design
npx degit vercel-labs/agent-skills/skills/web-design-guidelines .claude/skills/web-design-guidelines
npx degit vercel-labs/agent-skills/skills/react-best-practices .claude/skills/vercel-react-best-practices
npx degit anthropics/skills/skills/webapp-testing .claude/skills/webapp-testing
```

Optional MCP servers (each adds context tax every turn):

```bash
claude mcp add playwright -- npx -y @playwright/mcp@latest
```

Codex / Cursor / other harnesses read AGENTS.md directly; Claude Code reads CLAUDE.md, which imports AGENTS.md.