new-tool-scaffolder — new-tool-scaffolder install new-tool-scaffolder, supertool, community, new-tool-scaffolder install, ide skills, new-tool-scaffolder documentation, new-tool-scaffolder and Next.js 16, new-tool-scaffolder with Vitest and Playwright, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for Next.js 16 Developer Agents needing efficient tool structure generation with Panda CSS and Vitest + Playwright. new-tool-scaffolder is a toolkit for scaffolding new browser-based tools within the SuperTool project, utilizing Next.js 16 and React 19

Features

Generates tool structures under `app/tools/<category>/<tool-slug>/`
Utilizes Panda CSS for styling
Leverages Vitest + Playwright for testing
Supports deployment to Vercel
Creates `page.tsx` main tool components with 'use client' directive
Follows Next.js 16 and React 19 standards

# Core Topics

new-tool-scaffolder install new-tool-scaffolder documentation new-tool-scaffolder and Next.js 16 new-tool-scaffolder with Vitest and Playwright
ferryhinardi ferryhinardi
[0]
[0]
Updated: 3/8/2026

Agent Capability Analysis

The new-tool-scaffolder skill by ferryhinardi is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance. Optimized for new-tool-scaffolder install, new-tool-scaffolder documentation, new-tool-scaffolder and Next.js 16.

Ideal Agent Persona

Perfect for Next.js 16 Developer Agents needing efficient tool structure generation with Panda CSS and Vitest + Playwright.

Core Value

Empowers agents to generate comprehensive tool structures for browser-based tools within the SuperTool toolkit, utilizing Panda CSS for styling and Vitest + Playwright for testing, and deploying to Vercel.

↓ Capabilities Granted for new-tool-scaffolder

Scaffolding new tools under specific categories like data, media, or development
Generating main tool components with 'use client' in page.tsx files
Creating tool structures that follow the SuperTool toolkit's conventions

! Prerequisites & Limits

  • Requires Next.js 16 and React 19
  • Limited to tools using Panda CSS for styling and Vitest + Playwright for testing
  • Deploys to Vercel
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

new-tool-scaffolder

Install new-tool-scaffolder, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

new-tool-scaffolder

Project Context

SuperTool is a Next.js 16 (React 19) developer toolkit with 36+ browser-based tools. Uses Panda CSS for styling, Vitest + Playwright for testing, and deploys to Vercel.

Tool Structure

Each tool lives under app/tools/<category>/<tool-slug>/ where category is one of: data, media, development, productivity, security, finance, design.

Required files per tool:

  1. page.tsx — Main tool component (use 'use client'). Copy patterns from TOOL_PAGE_TEMPLATE.tsx:

    • Panda CSS via css() from @/styled-system/css (NOT Tailwind)
    • Framer Motion animations with useReducedMotion support
    • trackToolEvent() from @/lib/services/analytics for analytics
    • 44px minimum touch targets
    • Mobile-first responsive layout with maxW: '7xl'
    • Loading states, error handling with toast from sonner
    • UI components from @/components/ui/ (Button, Card, Input, etc.)

  2. layout.tsx — SEO metadata using generateToolMetadata() from @/lib/data/metadata and structured data schemas from @/lib/data/structured-data (generateBreadcrumbSchema, generateFAQSchema, generateHowToSchema).

  3. __tests__/page.test.tsx — Vitest + Testing Library test file:

    tsx
    1import { render, screen } from '@testing-library/react'
2import { describe, it, expect } from 'vitest'

  4. tests/logic.test.ts — Unit tests for pure logic/utility functions.

  5. docs/<NUMBER>_<TOOL_NAME>.md — Documentation with: Overview, Purpose, Key Features, Technical Details sections. Number sequentially after the last existing doc.

Tool Registration Add the tool entry to lib/data/tools.ts in the tools array with: • title, description, icon (from lucide-react), href (/tools/<category>/<slug>) • gradient (Tailwind gradient string like 'from-purple-500 to-pink-500') • features (array of 4 short feature strings) • category (matching the directory category) • new: true flag for newly added tools

Code Style • Biome enforces: 2-space indent, single quotes, no semicolons, 100-char lines • Imports use @/ prefix. Order: React/Next → 3rd party → UI → Features → Utils • Strict TypeScript: never use any • One component per file

Validation Steps (run after scaffolding)

  1. pnpm exec tsc --noEmit — Type check
  2. pnpm lint:check — Lint check
  3. pnpm test -- --run <path-to-tests> — Run new tests
  4. pnpm build — Ensure production build succeeds

Reference Files • Template: TOOL_PAGE_TEMPLATE.tsx • Canonical example: app/tools/data/json-beautify/page.tsx • Layout example: app/tools/data/json-beautify/layout.tsx • Tools registry: lib/data/tools.ts • Agent reference: AGENTS.md

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is new-tool-scaffolder?

Perfect for Next.js 16 Developer Agents needing efficient tool structure generation with Panda CSS and Vitest + Playwright. new-tool-scaffolder is a toolkit for scaffolding new browser-based tools within the SuperTool project, utilizing Next.js 16 and React 19

How do I install new-tool-scaffolder?

Run the command: npx killer-skills add ferryhinardi/supertool/new-tool-scaffolder. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for new-tool-scaffolder?

Key use cases include: Scaffolding new tools under specific categories like data, media, or development, Generating main tool components with 'use client' in page.tsx files, Creating tool structures that follow the SuperTool toolkit's conventions.

Which IDEs are compatible with new-tool-scaffolder?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for new-tool-scaffolder?

Requires Next.js 16 and React 19. Limited to tools using Panda CSS for styling and Vitest + Playwright for testing. Deploys to Vercel.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add ferryhinardi/supertool/new-tool-scaffolder. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use new-tool-scaffolder immediately in the current project.

Related Skills

Looking for an alternative to new-tool-scaffolder or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

★ 138.4k
⑂ 0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI