frontend

Comprehensive kit for React/Next.js + TypeScript frontend development with 20 agents, 21 skills, 71 commands, and frontend-specific tooling

npx kiro-kit add frontend

Comprehensive kit for React/Next.js + TypeScript frontend development with 20 agents, 21 skills, 71 commands, and frontend-specific tooling

At a glance

Artifact	Count
Commands	71
Agents	20
Skills	21
Workflows	4
Hook scripts	9
Native Kiro hooks	7
Files written in total	462

Category: frontend · Version: 1.0.0

Tags: react, nextjs, typescript, tailwind, frontend, web, ui

Commands

Command	Description
`ask`	⚡ Answer technical and architectural questions.
`bootstrap`	Bootstrap the project from scratch with dependencies 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`	Analyze and document the project design system
`design/video`	Create a design based on video
`design/wireframe`	Create wireframe specifications for a feature or page
`docs/architecture`	Generate or update 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
`frontend/component`	Generate a new React component with TypeScript, tests, and stories
`frontend/hook`	Generate a custom React hook with TypeScript and tests
`frontend/layout`	Generate a Next.js layout component for a route segment
`frontend/page`	Generate a Next.js page with layout, loading, and error handling
`git/branch`	Create and switch to a new feature branch
`git/cm`	Stage all files and create a commit.
`git/commit`	Stage and commit changes with conventional commit message
`git/cp`	Stage, commit and push all code in the current branch
`git/pr`	Create a pull request with conventional format
`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`	Perform a security review of the codebase
`scout`	Scout the codebase for files relevant to a task
`scout/ext`	Scout codebase using external agentic tools for faster search
`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 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
`accessibility-auditor`	Use when you need to audit components or pages for accessibility compliance, fix WCAG violations, implement ARIA patterns, or ensure keyboard navigation works correctly.
`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 React/TypeScript implementations before merging or deploying.
`component-architect`	Use when you need to design component APIs, plan component hierarchies, establish patterns for reusable UI libraries, or architect complex interactive features.
`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, schema design, index strategy, backup planning, replication setup, or performance troubleshooting.
`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, synchronize docs with code changes, write product requirements, or maintain documentation standards.
`frontend-developer`	Use when you need to implement React/Next.js components, pages, hooks, or features following frontend best practices with TypeScript, Tailwind CSS, and modern patterns.
`git-manager`	Use when you need to stage, commit, push code changes, create pull requests, or manage git operations with conventional commit messages.
`journal-writer`	Use when significant technical difficulties occur -- repeated test failures, critical bugs, failed refactoring, security vulnerabilities, or architectural decisions that prove problematic in practice.
`mcp-manager`	Use when you need to manage MCP (Model Context Protocol) server integrations, discover available tools and resources, execute MCP capabilities, or troubleshoot MCP connectivity issues.
`performance-optimizer`	Use when you need to analyze and improve frontend performance -- Core Web Vitals, bundle size, rendering performance, network optimization, or lighthouse scores.
`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 against implementation plans, status reporting, milestone management, or coordination across multiple workstreams.
`researcher`	Use when you need to research technologies, find documentation, explore best practices, evaluate libraries, or gather technical information from multiple sources before making decisions.
`scout`	Use when you need to quickly locate relevant files across a large codebase for a specific task, before starting implementation or debugging that spans multiple directories.
`scout-external`	Use when you need to locate files across a large codebase using external agentic tools (Gemini, OpenCode) for faster parallel searching with large context windows.
`tester`	Use when you need to validate code through testing -- running test suites, analyzing coverage, checking for regressions, validating error handling, or verifying build processes after implementation changes.
`ui-ux-designer`	Use when you need UI/UX design work including interface designs, wireframes, design systems, responsive layouts, accessibility audits, or design documentation and review.

Skills

Skill	Description
`aesthetic`	Create aesthetically beautiful interfaces following proven design principles. Use when building UI that needs visual polish, micro-interactions, or design system refinement.
`ai-multimodal`	Process and generate multimedia content using Google Gemini API. Capabilities include analyze audio files (transcription with timestamps, summarization, speech understanding, music/sound analysis up to 9.5 hours), understand images (captioning, object detection, OCR, visual Q&A, segmentation), process videos (scene detection, Q&A, temporal analysis, YouTube URLs, up to 6 hours), extract from documents (PDF tables, forms, charts, diagrams, multi-page), generate images (text-to-image, editing, composition, refinement). Use when working with audio/video files, analyzing images or screenshots, processing PDF documents, extracting structured data from media, creating images from text prompts, or implementing multimodal AI features. Supports multiple models (Gemini 2.5/2.0) with context windows up to 2M tokens.
`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`	Systematic code review practices for receiving feedback, requesting reviews, and verification gates. Use when reviewing code or receiving review feedback.
`Debugging`	Systematic debugging framework ensuring root cause investigation before fixes. Includes four-phase debugging process, backward call stack tracing, multi-layer validation, and verification protocols. Use when encountering bugs, test failures, unexpected behavior, performance issues, or before claiming work complete. Prevents random fixes, masks over symptoms, and false completion claims.
`docs-seeker`	Search technical documentation using executable scripts to detect query type, fetch from llms.txt sources (context7.com), and analyze results. Use when user needs: (1) Topic-specific documentation (features/components/concepts), (2) Library/framework documentation, (3) GitHub repository analysis, (4) Documentation discovery with automated agent distribution strategy
`frontend-design`	Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
`frontend-development`	Build robust frontend systems with React, Next.js, and TypeScript. Use when implementing components, hooks, data fetching, state management, or optimizing frontend performance.
`mcp-builder`	Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
`mcp-management`	Manage MCP servers -- discover, analyze, and execute tools from configured servers. Use when working with MCP integrations or discovering available capabilities.
`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.
`planning`	Use when you need to plan technical solutions that are scalable, secure, and maintainable.
`Problem-Solving Techniques`	Apply systematic problem-solving techniques for complexity spirals (simplification cascades), innovation blocks (collision-zone thinking), recurring patterns (meta-pattern recognition), assumption constraints (inversion exercise), scale uncertainty (scale game), and dispatch when stuck. Techniques derived from Microsoft Amplifier project patterns adapted for immediate application.
`repomix`	Package code repositories into single AI-friendly files for analysis. Use when you need to understand a codebase structure or prepare context for analysis.
`research`	Research and analyze technical solutions, libraries, and best practices. Use when evaluating options, finding documentation, or investigating unfamiliar technologies.
`sequential-thinking`	Apply structured, reflective problem-solving for complex tasks requiring multi-step analysis, revision capability, and hypothesis verification. Use for complex problem decomposition, adaptive planning, analysis needing course correction, problems with unclear scope, multi-step solutions, and hypothesis-driven work.
`skill-creator`	Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
`template-skill`	Replace with description of when this skill should activate and what it provides.
`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`	Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
`web-frameworks`	Build modern full-stack web applications with Next.js (App Router, Server Components, RSC, PPR, SSR, SSG, ISR), Turborepo (monorepo management, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons in outlined/filled styles). Use when creating React applications, implementing server-side rendering, setting up monorepos with multiple packages, optimizing build performance and caching strategies, adding icon libraries, managing shared dependencies, or working with TypeScript full-stack projects.

Workflows

Workflow
`development-rules`
`documentation-management`
`orchestration-protocol`
`primary-workflow`

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
`accessibility-check`
`bundle-size-guard`
`component-test-reminder`
`discord-notify`
`git-status-tracker`
`modularization-hook`
`pre-commit-lint`
`scout-block`
`telegram-notify`

Native Kiro Agent Hooks (ship disabled; enable them in Kiro's Agent Hooks panel):

Native hook
`accessibility-review`
`bundle-size-guard`
`component-scaffold`
`docs-drift-guard`
`run-tests-on-save`
`secret-scan-on-save`
`spec-task-sync`

MCP servers

Server
`fetch`
`filesystem`
`git`
`playwright`

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`	Figma	Design source of truth; import frames and tokens	`oauth`	yes
`recommended`	Context7	Up-to-date library and framework documentation lookup	`none`	yes
`recommended`	Netlify	Edge hosting, previews, and serverless functions	`apiKey`	no
`recommended`	Storybook	Component workshop and visual documentation	`none`	no
`recommended`	Vercel	Frontend cloud with instant previews and edge functions	`apiKey`	no
`optional`	PostHog	Product analytics, feature flags, and session replay	`apiKey`	no
`optional`	ScoutQA	Autonomous end-to-end QA test generation	`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
Analytics Dashboard
Landing Page
Product Listing Page
Web Performance Optimization

On this page