skillZs
★ LIVE SKILL TAGS ★
>>> LIVE SKILLS INDEX <<<
* OPEN SOURCE *
NO LOGIN, NO TRACKING
※ REAL INSTALL DATA ※
← back to all skills
laguagu/claude-code-nextjs-skills184 installs

ai-app

Builds full-stack Next.js AI applications with the AI SDK and ai-elements. Use when creating a chatbot, agent dashboard or custom AI application.

How do I install this agent skill?

npx skills add https://github.com/laguagu/claude-code-nextjs-skills --skill ai-app
view source ↗

Is this agent skill safe to install?

  • Gen Agent Trust Hubpass

    The skill provides templates and instructions for building AI applications using Next.js and the AI SDK. It follows modern security best practices, such as suggesting the use of .env files for secrets and implementing human-in-the-loop approvals for sensitive tool operations.

  • Socketpass

    No alerts

  • Snykwarn

    Risk: MEDIUM · 1 issue

  • Runlayerpass

    2/5 files flagged

What does this agent skill do?

AI application setup

Build the requested app around its users, data and operations. Keep the existing stack and SDK major unless migration is part of the task; use Bun for new JavaScript projects.

  1. Resolve the installed AI SDK major through ai-sdk; use ai-sdk-6 or ai-sdk-7 for implementation. For a new app, default to AI SDK 7: ai@7, @ai-sdk/react@4 and each provider package at latest (provider majors differ; Node.js 22+). Keep v6 only when a required dependency pins it. AI Elements still targets v6, and its context.tsx fails a v7 typecheck until patched (see ai-elements). Read version-matched ai/docs/ and provider docs before using web examples.
  2. Use nextjs-shadcn for framework setup and frontend-design for visual direction. Use ai-elements when its components fit the required chat UI; inspect installed source instead of assuming registry props.
  3. Keep provider credentials and authorization on the server. Resolve model IDs from configuration or the selected provider's catalog.
  4. Implement the smallest complete user flow. Add persistence, approvals, attachments, search, suggestions or dashboards when the app needs them.
  5. Match the server stream to the client transport. Verify a second turn, relevant tool states, safe failures and mobile behavior, alongside the project's typecheck/build.

Read for the app being built

  • Chatbot: conversation and stream contracts.
  • Agent dashboard: execution, approval and run state.
  • Examples: current official implementations.
  • Project structure: boundaries without a fixed tree.
  • nextjs-chatbot: durable history, feedback, embedding and production checks.

These references describe requirements, not copyable production templates.

Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.

<a href="https://skillzs.dev/skills/laguagu/claude-code-nextjs-skills/ai-app">View ai-app on skillZs</a>