# Full Feature

> This skill should be used when the user wants to "build a complete feature with directus nextjs and trigger.dev", "create an end-to-end feature with background tasks", "implement a full crud feature with async processing", "build a new section of the site that uses background jobs", "add a page backed by directus with a background task", or needs a step-by-step recipe for building features that span Directus, Next.js, AND Trigger.dev.

- Skill: `agents-store/full-feature-4` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add agents-store/full-feature-4`
- Raw SKILL.md: https://api.skillmd.com/api/skills/agents-store/full-feature-4/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: agents-store (https://skillmd.com/u/agents-store)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/agents-store/full-feature-4

---


# Full Feature Recipe

Build end-to-end features across Directus (data), Next.js (interface + logic), and Trigger.dev (background work) using a repeatable 6-step pattern. Follow the template in `template.md` for each new feature.

## Pattern Overview

Every feature in this stack follows the same flow:

1. **Data Model** — Create or extend Directus collections and fields
2. **TypeScript Types** — Define interfaces matching the new/updated collections
3. **Next.js Pages** — Build Server Components that fetch and render the data
4. **Mutations** — Add Server Actions for create/update operations (if needed)
5. **Background Work** — Delegate slow/flaky operations to Trigger.dev tasks (if needed)
6. **Verify** — Test the complete data flow end-to-end: Directus → Next.js → Trigger task → back to Directus → rendered page

## Prerequisites

- `init-project` completed (SDK client, TypeScript schema, env vars, Trigger.dev initialized)
- Directus MCP connection working
- Trigger.dev dev server running (`npx trigger.dev@latest dev`)
- Next.js dev server running (`npm run dev`)

## How to Use

Read `template.md` and fill in the placeholders for each new feature. The template provides the exact file paths, code patterns, and verification steps — including the Trigger.dev task stub if background work is needed.

For Directus data modeling, defer to the `directus-dev` plugin. For Next.js page patterns, defer to the `nextjs-dev` plugin. For Trigger.dev task API depth (retries, queues, waits, realtime), defer to the `trigger-dev` plugin. This recipe coordinates all three.

## Decide: Does this feature need a background task?

Before step 5, ask: does anything in this feature run slowly, call a third party, or need to retry on failure?

| Signal | Delegate to Trigger? |
|--------|----------------------|
| Directly renders from Directus data in <200ms | No — stay in Server Component |
| User mutates data via Server Action, <1s, deterministic | No — inline in Server Action |
| AI/LLM call, image processing, PDF generation, email send | **Yes — Trigger task** |
| External API call that can fail (webhook, payment, third-party) | **Yes — Trigger task** |
| Bulk operation over many records | **Yes — Trigger task** |
| Must run on a schedule (cron) | **Yes — `schedules.task()`** (see `scheduled-tasks` skill) |
| Needs retries or long-running (>30s serverless timeout) | **Yes — Trigger task** |

If any "Yes" applies, add step 5. Otherwise, skip it.

## Quick Reference

| Step | Where | What |
|------|-------|------|
| Data Model | Directus Admin or MCP tools | Create collection, add fields, set permissions |
| TypeScript | `types/directus.ts` | Add interface, update Schema type |
| Pages | `app/{route}/page.tsx` | Server Component with `readItems` |
| Detail | `app/{route}/[slug]/page.tsx` | Dynamic route with `generateStaticParams` + `generateMetadata` |
| Actions | `app/{route}/actions.ts` | Server Actions with `createItem`/`updateItem` |
| Task | `trigger/{feature}.ts` | `task({ id, run })` with Directus SDK + third-party calls |
| Trigger point | Server Action / route handler / Directus Flow webhook | `tasks.trigger<typeof myTask>(...)` with `force-dynamic` |
| Verify | Browser + Directus + Trigger dashboard | Check rendering, mutations, task runs, revalidation |

## The Close-the-Loop Pattern

For features where a Trigger task mutates Directus, always close the loop back to the Next.js ISR cache:

1. Next.js page reads from Directus
2. User action → Server Action → `tasks.trigger(myTask, { itemId })` → immediate return with run handle
3. (Optional) Client Component subscribes via `useRealtimeRun(handle.id)` to show progress
4. Task runs → calls Directus SDK → updates item
5. Task calls `revalidatePath()` or POSTs to `/api/revalidate` → Next.js cache invalidates
6. Next fetch returns updated data

Without step 5, users see stale content until the next ISR interval or manual revalidation. See `background-tasks` skill for the full wiring, and `directus-to-trigger` for the Directus-event-driven variant.