fullstack
Comprehensive kit for Next.js/T3 stack fullstack development with 26 agents, 29 skills, 74 commands, payment integration, Shopify support, and whole-repo deep security scanning
npx kiro-kit add fullstack
Comprehensive kit for Next.js/T3 stack fullstack development with 26 agents, 29 skills, 74 commands, payment integration, Shopify support, and whole-repo deep security scanning
At a glance
| Artifact | Count |
|---|---|
| Commands | 74 |
| Agents | 26 |
| Skills | 29 |
| Workflows | 4 |
| Hook scripts | 9 |
| Native Kiro hooks | 8 |
| Files written in total | 560 |
Category: fullstack · Version: 1.0.0
Tags: nextjs, t3-stack, typescript, react, fullstack, prisma, tailwind, trpc, shopify, payments
Commands
| Command | Description |
|---|---|
ask | ⚡ Answer technical and architectural questions. |
bootstrap | Bootstrap the project from scratch with dependencies, database, and configuration |
bootstrap/auto | ⚡⚡⚡⚡ Bootstrap a new project automatically |
bootstrap/auto/fast | ⚡⚡⚡ Quickly bootstrap a new project automatically |
brainstorm | ⚡⚡ Brainstorm a feature |
clean | Clean build artifacts, caches, and temporary files |
code | ⚡ Start coding & testing an existing plan |
content/cro | Analyze the current content and optimize for conversion |
content/enhance | Analyze the current copy issues and enhance it |
content/fast | Write creative & smart copy [FAST] |
content/good | Write good creative & smart copy [GOOD] |
cook | ⚡⚡⚡ Implement a feature [step by step] |
cook/auto | ⚡⚡ Implement a feature automatically ("trust me bro") |
cook/auto/fast | ⚡ No research. Only scout, plan & implement ["trust me bro"] |
debug | ⚡⚡ Debugging technical issues and providing solutions. |
design/3d | Create immersive interactive 3D designs with Three.js |
design/describe | Describe a design based on screenshot/video |
design/fast | Create a quick design |
design/figma | Extract design tokens and component specs from Figma |
design/good | Create an immersive design |
design/screenshot | Create a design based on screenshot |
design/system | Generate or update the design system documentation |
design/video | Create a design based on video |
design/wireframe | Create a wireframe layout for a page or feature |
docs/architecture | Generate or update system architecture documentation |
docs/init | ⚡⚡⚡⚡ Analyze the codebase and create initial documentation |
docs/summarize | Analyze the codebase and generate documentation summary |
docs/update | Update documentation to reflect recent code changes |
fix | ⚡⚡ Analyze and fix small issues [AUTO DETECT COMPLEXITY] |
fix/build | Diagnose and fix build errors |
fix/ci | ⚡ Analyze Github Actions logs and fix issues |
fix/fast | ⚡ Analyze and fix small issues [FAST] |
fix/hard | ⚡⚡⚡ Use subagents to plan and fix hard issues |
fix/lint | Auto-fix linting errors across the project |
fix/logs | ⚡ Analyze logs and fix issues |
fix/test | ⚡⚡ Run test suite and fix issues |
fix/tests | Diagnose and fix failing tests |
fix/types | ⚡ Fix type errors |
fix/ui | ⚡⚡ Analyze and fix UI issues |
fullstack/api-route | Generate a new API route handler with validation and error handling |
fullstack/component | Generate a React component with TypeScript types and test file |
fullstack/deploy | Deploy the application to production or preview environment |
fullstack/migration | Create and run a database migration |
git/branch | Create a new branch following naming conventions |
git/cm | Stage all files and create a commit. |
git/commit | Create a conventional commit with staged changes |
git/cp | Stage, commit and push all code in the current branch |
git/pr | Create a pull request with conventional format |
integrate/polar | ⚡⚡ Implement payment integration with Polar.sh |
integrate/sepay | ⚡⚡ Implement payment integration with SePay.vn |
journal | ⚡ Write some journal entries. |
lint | Run linting and formatting checks across the project |
plan | ⚡⚡⚡ Intelligent plan creation with prompt enhancement |
plan/ci | Analyze Github Actions logs and provide a plan to fix the issues |
plan/cro | Create a CRO plan for the given content |
plan/fast | ⚡⚡ No research. Only analyze and create an implementation plan |
plan/feature | Create an implementation plan for a new feature |
plan/hard | ⚡⚡⚡ Research, analyze, and create an implementation plan |
plan/refactor | Plan a refactoring effort with risk assessment |
plan/two | ⚡⚡⚡⚡ Research & create an implementation plan with 2 approaches |
release | Prepare and execute a release with version bump and changelog |
review/code | Review recent code changes for quality and correctness |
review/codebase | ⚡⚡⚡ Scan & analyze the codebase. |
review/security | Run a security review on the codebase |
scout | Scout the codebase for files relevant to a task |
scout/ext | Scout codebase using external agentic tools for faster search |
security/deep-scan | Whole-repository deep security scan (multi-agent pipeline, findings workspace) |
skill/add | Add new reference files or scripts to a skill |
skill/create | Create a new skill from scratch |
skill/fix-logs | Fix the agent skill based on logs.txt file. |
skill/optimize | Optimize an existing agent skill for better performance |
test | Run the test suite with coverage reporting |
use-mcp | Utilize tools of Model Context Protocol (MCP) servers |
watzup | ⚡ Review recent changes and wrap up the work |
Agents
| Agent | Description |
|---|---|
api-developer | Use when implementing API endpoints, route handlers, tRPC procedures, Server Actions, middleware, or integrating with external services in a Next.js backend. |
brainstormer | Use when you need to brainstorm software solutions, evaluate architectural approaches, or debate technical decisions before implementation begins. |
code-reviewer | Use when you need code review, quality analysis, security audit, or feedback on implementations before merging or deploying. |
copywriter | Use when you need high-converting copy for marketing materials, social media posts, landing pages, email campaigns, or any content that must capture attention and drive action. |
database-admin | Use when you need database diagnostics, query optimization, index strategy, backup planning, replication setup, or performance troubleshooting. |
database-architect | Use when designing database schemas, planning migrations, modeling data relationships, choosing between SQL and NoSQL, or architecting data layers for scalability and performance. |
debugger | Use when you need to investigate issues, diagnose errors, analyze logs, trace execution flows, identify performance bottlenecks, or troubleshoot failing tests and deployments. |
docs-manager | Use when you need to create, update, or organize technical documentation, API docs, architecture docs, or ensure documentation stays in sync with code changes. |
fullstack-developer | Use when implementing features that span both frontend and backend -- pages with API routes, Server Actions, database queries, and React components working together in a Next.js/T3 stack. |
git-manager | Use when you need to manage git operations including branching, committing, creating pull requests, resolving merge conflicts, or managing release workflows. |
journal-writer | Use when a significant technical difficulty, failure, or setback occurs that should be documented for team learning -- repeated test failures, critical bugs, failed refactoring, or blocking issues. |
mcp-manager | Use when you need to discover, configure, or manage Model Context Protocol (MCP) servers, execute MCP tools, or integrate external services via MCP. |
performance-optimizer | Use when analyzing and improving application performance -- Core Web Vitals, bundle size, API response times, database query optimization, or server-side rendering performance. |
planner | Use when you need to research, analyze, and create comprehensive implementation plans for features, system architectures, or complex technical solutions before starting implementation. |
project-manager | Use when you need project oversight, progress tracking, milestone management, or coordination between multiple implementation efforts. |
researcher | Use when you need to conduct comprehensive research on technologies, find documentation, explore best practices, or gather information about packages and libraries. |
scout | Use when you need to quickly locate relevant files across the codebase for a specific task, understand project structure, or find where specific functionality lives. |
scout-external | Use when you need to quickly locate relevant files using external agentic tools (Gemini, OpenCode) for faster parallel search across large codebases. |
security-finder | Use during a deep security scan to hunt vulnerabilities inside one assigned partition of the attack surface. Traces data flow from user inputs to sensitive sinks and writes candidate findings incrementally to a partition file. |
security-judge | Use during a deep security scan, after validation, as the single SERIAL dedup pass over surviving findings. Classifies each as new / better-example-of-known / duplicate, fixes final severity, assigns slugs. |
security-recon | Use at the start of a deep security scan to map the attack surface of a repository and partition it into non-overlapping segments for parallel vulnerability finders. Produces scan-manifest.json. |
security-reporter | Use at the end of a deep security scan to write the findings workspace — report.md, per-finding reports, hardening recommendations, and the three JSON automation files (scan-manifest, findings, coverage). |
security-triage | Use in a deep security scan's optional Semgrep hybrid mode to classify a batch of SAST results as true positive, false positive, or hard-excluded, reading the flagged code with real context. |
security-validator | Use during a deep security scan to adversarially validate ONE candidate finding. Attempts to refute it, assigns confidence 1-10; findings below 8 are dropped. The false-positive filter of the pipeline. |
tester | Use when you need to validate code quality through testing -- running unit/integration/e2e tests, analyzing coverage, validating error handling, or verifying build processes. |
ui-ux-designer | Use when you need UI/UX design work including interface designs, wireframes, design systems, responsive layouts, animations, or design documentation. |
Skills
| Skill | Description |
|---|---|
aesthetic | Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills. |
ai-multimodal | Process and generate multimedia content using Google Gemini API. Use when working with images, audio, video, or documents that need AI analysis or generation. |
backend-development | Build robust backend systems with Node.js, Python, or Go. Use when implementing APIs, services, middleware, or server-side logic following production-grade patterns. |
better-auth | Implement authentication and authorization with modern patterns including OAuth 2.1, JWT, sessions, RBAC, and multi-factor authentication. Use when building auth systems. |
chrome-devtools | Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging. |
code-review | Code review practices for receiving feedback, requesting reviews, and verification gates. Use when completing tasks or receiving review feedback. |
databases | Work with PostgreSQL, MongoDB, and Redis for schema design, query optimization, migrations, and data modeling. Use when designing or optimizing data layers. |
debugging | Systematic debugging framework for root cause investigation. Use when encountering bugs, test failures, unexpected behavior, or performance issues. |
deep-security-scan | Methodology, severity taxonomy, templates, and CI contract for a whole-repository deep security scan. Activate when running /security:deep-scan or when orchestrating the recon → find → validate → judge → report pipeline. |
devops | Deploy and manage infrastructure with Docker, CI/CD pipelines, and cloud services. Use when containerizing, deploying, or managing production infrastructure. |
docs-seeker | Search and discover technical documentation using llms.txt sources and context7.com. Use when you need library or framework documentation. |
frontend-design | Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications that need polished visual design. |
frontend-development | Build React/Next.js components, pages, and features with TypeScript. Use when implementing frontend UI, hooks, state management, or client-side logic. |
mcp-builder | Build MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when creating MCP integrations. |
mcp-management | Manage Model Context Protocol (MCP) servers - discover, analyze, and execute tools/prompts/resources from configured MCP servers. Use when working with MCP integrations, need to discover available MCP capabilities, filter MCP tools for specific tasks, execute MCP tools programmatically, access MCP prompts/resources, or implement MCP client functionality. Supports intelligent tool selection, multi-server management, and context-efficient capability discovery. |
media-processing | Process multimedia files with FFmpeg (video/audio encoding, conversion, streaming, filtering, hardware acceleration) and ImageMagick (image manipulation, format conversion, batch processing, effects, composition). Use when converting media formats, encoding videos with specific codecs (H.264, H.265, VP9), resizing/cropping images, extracting audio from video, applying filters and effects, optimizing file sizes, creating streaming manifests (HLS/DASH), generating thumbnails, batch processing images, creating composite images, or implementing media processing pipelines. Supports 100+ formats, hardware acceleration (NVENC, QSV), and complex filtergraphs. |
mobile-development | Build modern mobile applications with React Native, Flutter, Swift/SwiftUI, and Kotlin/Jetpack Compose. Covers mobile-first design principles, performance optimization (battery, memory, network), offline-first architecture, platform-specific guidelines (iOS HIG, Material Design), testing strategies, security best practices, accessibility, app store deployment, and mobile development mindset. Use when building mobile apps, implementing mobile UX patterns, optimizing for mobile constraints, or making native vs cross-platform decisions. |
payment-integration | Implement payment processing with Stripe, Polar, or SePay. Use when building checkout flows, subscriptions, usage-based billing, or handling payment webhooks. |
planning | Plan technical solutions that are scalable, secure, and maintainable. Use when you need to create implementation plans, evaluate architectures, or break down complex features. |
problem-solving | Apply systematic problem-solving techniques for complexity spirals, innovation blocks, recurring patterns, and assumption constraints. |
repomix | Package code repositories into single AI-friendly files for analysis. Use when you need to understand unfamiliar codebases or prepare context for AI tools. |
research | Research technologies, evaluate libraries, and gather technical information from documentation and authoritative sources. |
sequential-thinking | Apply structured, reflective problem-solving for complex tasks requiring multi-step analysis, revision, and hypothesis verification. |
shopify | Build Shopify applications, extensions, and themes using GraphQL/REST APIs, Shopify CLI, Polaris UI, and Liquid templating. Use when integrating with Shopify or building e-commerce features. |
skill-creator | Guide for creating effective agent skills. Use when users want to create or update skills that extend agent capabilities. |
template-skill | Template for creating new skills. Copy this directory and customize for your specific skill. |
threejs | Build immersive 3D web experiences with Three.js - WebGL/WebGPU library for scenes, cameras, geometries, materials, lights, animations, loaders, post-processing, shaders (including node-based TSL), compute, physics, VR/XR, and advanced rendering. Use when creating 3D visualizations, games, interactive graphics, data viz, product configurators, architectural walkthroughs, or WebGL/WebGPU applications. Covers OrbitControls, GLTF/FBX loading, PBR materials, shadow mapping, post-processing effects (bloom, SSAO, SSR), custom shaders, instancing, LOD, animation systems, and WebXR. |
ui-styling | Style interfaces with Tailwind CSS, shadcn/ui components, and design tokens. Use when implementing visual designs, theming, or building accessible UI components. |
web-frameworks | Build full-stack web applications with Next.js App Router, Server Components, and React patterns. Use when working with routing, rendering, or data fetching. |
Workflows
Hooks
Registered in settings.json:
| Event | Hook |
|---|---|
PreToolUse | scout-block |
PostToolUse | modularization-hook |
agentStop | discord-notify |
agentStop | telegram-notify |
Hook scripts shipped with this preset:
| Script |
|---|
api-client-gen |
deployment-readiness |
discord-notify |
git-status-tracker |
modularization-hook |
pre-commit-lint |
scout-block |
telegram-notify |
type-sync-check |
Native Kiro Agent Hooks (ship disabled; enable them in Kiro's Agent Hooks panel):
| Native hook |
|---|
deep-scan-stale |
deployment-readiness |
docs-drift-guard |
env-schema-sync |
run-tests-on-save |
secret-scan-on-save |
spec-task-sync |
type-sync |
MCP servers
| Server |
|---|
fetch |
filesystem |
git |
playwright |
postgres |
Kiro Powers
Recommended Kiro Powers for this preset. init
auto-wires the credential-free MCP-backed ones and scaffolds the credentialed
ones disabled.
| Tier | Power | Description | Auth | MCP-backed |
|---|---|---|---|---|
essential | Supabase | Backend-as-a-service: Postgres, auth, storage, and realtime | apiKey | yes |
recommended | Clerk | Drop-in authentication and user management | apiKey | no |
recommended | Context7 | Up-to-date library and framework documentation lookup | none | yes |
recommended | Figma | Design source of truth; import frames and tokens | oauth | yes |
recommended | Netlify | Edge hosting, previews, and serverless functions | apiKey | no |
recommended | Stripe | Payments, subscriptions, and billing | apiKey | yes |
optional | Firebase | App platform: Firestore, auth, hosting, and messaging | apiKey | no |
optional | LaunchDarkly | Feature flag management and progressive delivery | apiKey | no |
optional | Resend | Transactional email API for developers | apiKey | no |
optional | Sentry | Error tracking and performance monitoring | apiKey | yes |
Example specs
Fully-written requirements.md / design.md / tasks.md trios you can read
as worked examples.
| Spec |
|---|
| Stripe Checkout |
frontend
Comprehensive kit for React/Next.js + TypeScript frontend development with 20 agents, 21 skills, 71 commands, and frontend-specific tooling
kiro-kit-dev
Preset for developing the Kiro-Kit CLI itself with 19 agents, 22 skills, 66 commands — TypeScript ESM monorepo, tsup build, vitest (unit/property/structural), preset authoring, and CLI architecture.