laguagulaguagu/claude-code-nextjs-skills/skills/ai-app/SKILL.md

ai-app

Skill72 starsChanged 18 days agoMITView on GitHub

Builds full-stack Next.js AI applications with the AI SDK and the shadcn/ui AI Elements patterns. Use when creating a chatbot, agent dashboard or custom AI application.

2 other projects use a version of this.

Adopted by

Most recently taken up by

v-open-platform/ai-app-skillstheir own version, first seen Mar 18, 2026
mm-mazhar/agent-skills-configtheir own version, first seen Feb 10, 2026

Other versions2 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 2
v-open-platform/ai-app-skills★ 8same name
mm-mazhar/agent-skills-config★ 0same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository30 other files it gives its agents.
- AGENTS.mdAGENTS.md
- skills/ai-sdk-6/references/agents.mdAGENTS.md
- skills/ai-sdk-7/references/agents.mdAGENTS.md
- skills/openai-agents-sdk/references/agents.mdAGENTS.md
- skills/react-best-practices/AGENTS.mdAGENTS.md
- skills/vercel-react-view-transitions/AGENTS.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- agent-harness-reviewSkill
- ai-elementsSkill
- ai-sdk-6Skill
- ai-sdk-7Skill
- ai-sdkSkill
- cache-componentsSkill
- chrome-devtoolsSkill
- frontend-designSkill
- goSkill
- handoffSkill
- hetzner-cloudSkill
- iconsSkill
- next-best-practicesSkill
- nextjs-chatbotSkill
- nextjs-seoSkill
- nextjs-shadcnSkill
- openai-agents-sdkSkill
- postgres-semantic-searchSkill
- react-best-practicesSkill
- shadcnSkill
- supabase-postgres-best-practicesSkill
- vercel-react-view-transitionsSkill
- web-design-guidelinesSkill

The file

We split this skill into the rules it gives an agent

2 rules. About 0 are common, 1 is distinctive, and 1 is very specific to this project.

≈0
Common · estimate
Many files like this have a rule of this kind.
≈1
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Very specific:
Use nextjs-shadcn for framework setup and frontend-design for visual direction.
line 25
Distinctive:
Keep provider credentials and authorization on the server.
line 32

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

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.

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. Build new chat UI from the AI Elements patterns in shadcn/ui (https://ui.shadcn.com/docs/ai-elements); they need no v7 patch. The older elements.ai-sdk.dev library (ai-elements) will be deprecated at the end of November 2026, targets v6, and its context.tsx fails a v7 typecheck until patched. Read version-matched ai/docs/ and provider docs before using web examples.
Use nextjs-shadcn for framework setup and frontend-design for visual direction. Compose chat UI from the shadcn/ui patterns (Message, Bubble, Message Scroller, Trace; the shadcn skill). For a chatbot, shadcn-ui/chatbot-template is a starting point after upgrading its Next.js (16.3.6) to 16.4.1+. Use ai-elements only for components already copied from elements.ai-sdk.dev. Inspect installed source instead of assuming registry props.
Keep provider credentials and authorization on the server. Resolve model IDs from configuration or the selected provider's catalog.
Implement the smallest complete user flow. Add persistence, approvals, attachments, search, suggestions or dashboards when the app needs them.
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.

These references describe requirements, not copyable production templates.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free