Skip to content
Back to skills

075 Agents 382612d6

ASecurity

- **Next.js 16+** (App Router, SSR mode — NOT static export) - **Shadcn/ui** (components in `src/components/ui/`) + **Tailwind CSS** - **TanStack Query v5** for server state, **Zustand** for client UI state - **@rjsf** (React JSON Schema Form) for agent config forms - **Lucide React** for icons - **ky** as HTTP client (available but `fetch` is also used directly) - API communication: REST + SSE streaming for chat

  • 9 stars
  • 0 votes
  • 0 copies
  • 0 views
  • Added October 11, 2026
developmenttypescriptreactnextjsawsapifrontend

Works with

  • cli
  • api

Security analysis

A100/100

Scanned October 11, 2026

npx -y skills add tools-only/X-Skills --skill 075-agents_382612d6 --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of 075 Agents 382612d6?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for 075 Agents 382612d6
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/tools-only-075-agents-382612d6/badge)](https://www.skillsdirectory.com/skills/tools-only-075-agents-382612d6)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

SKILL.md
# Frontend Guide

## Tech Stack

- **Next.js 16+** (App Router, SSR mode — NOT static export)
- **Shadcn/ui** (components in `src/components/ui/`) + **Tailwind CSS**
- **TanStack Query v5** for server state, **Zustand** for client UI state
- **@rjsf** (React JSON Schema Form) for agent config forms
- **Lucide React** for icons
- **ky** as HTTP client (available but `fetch` is also used directly)
- API communication: REST + SSE streaming for chat

## Directory Structure

```
src/
├── app/                # Pages (App Router)
│   ├── agents/         # Agent list
│   ├── agent/[id]/     # Agent detail, chat, tasks
│   ├── posts/          # Post list
│   ├── post/           # Post detail
│   ├── timeline/       # Activity timeline
│   ├── layout.tsx      # Root layout + providers
│   └── providers.tsx   # TanStack Query + Zustand providers
├── components/
│   ├── ui/             # Shadcn primitives (Button, Input, etc.)
│   └── features/       # Business components (ChatWindow, AgentCard, etc.)
├── lib/
│   ├── api.ts          # All API client functions (agentApi, chatApi, activityApi, postApi, autonomousApi)
│   ├── config.ts       # Environment config (NEXT_PUBLIC_API_BASE_URL, NEXT_PUBLIC_AWS_S3_CDN_URL)
│   └── utils.ts        # Helpers (cn, etc.)
├── hooks/              # Custom hooks
└── types/              # TypeScript types (agent, chat, content)
```

## API & Dev Setup

- Dev server: `npm run dev` on `:3000`, proxies `/api/*` → `http://127.0.0.1:8000` (configured in `next.config.ts` rewrites)
- Override proxy: set `NEXT_PUBLIC_API_BASE_URL` in `.env.local`
- All API functions are centralized in `src/lib/api.ts` — add new endpoints there
- SSE streaming: chat uses `POST /agents/{aid}/chats/{chat_id}/messages` with `stream: true`, parsed as SSE events

## Rules

- **Shadcn first**: use existing components from `src/components/ui/`. If missing, install via `npx shadcn@latest add <component>`
- **Tailwind only**: no custom CSS files or CSS modules
- **Lint after changes**: run `npm run lint` and fix all errors before committing
- **Typecheck after changes**: run `npm run typecheck` and fix all errors

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.