ai-elements
Builds AI chat interfaces with AI Elements components copied into the project. Use when adding or composing conversations, messages, prompt inputs, attachments, reasoning, tool output or sources in an AI SDK application.
- Installs
- 178
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/laguagu/claude-code-nextjs-skills --skill ai-elements- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads ai-elements automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
AI Elements
Use AI Elements where its components fit the interaction. The generated source belongs to the project: inspect it for the actual API and customize it deliberately.
Project and documentation
Follow the project's package manager, aliases, shadcn configuration and AI SDK
major. Read ai-sdk to resolve the installed version, then the appropriate
ai-sdk-6 or ai-sdk-7 guidance. AI Elements and AI SDK versions can change
independently.
Read generated components/ai-elements/<component>.tsx first, then the
matching references/ file and its scripts/ examples. Use the
AI Elements site for current documentation. Load only relevant references; verify bundled
examples against installed source.
For installation, use the project's runner with ai-elements@latest add <component>
or shadcn@latest add @ai-elements/<component>. Components land in
components/ai-elements/ under the alias configured in components.json; that
installed source is the offline API reference. Check installed components and
review generated files before replacing local customization. Use shadcn for
registry, preset and primitive-base details.
AI Elements targets the Radix base (upstream uses style new-york with
radix-ui). On Base UI projects expect prop mismatches in prompt-input,
attachments, inline-citation and plan (upstream #446,
open 2026-10-11); adapt the installed copies.
Integration
Integration covers the UI/SDK boundary, v6
pitfalls and the context.tsx patch that AI SDK 7 needs. Keep stable message
IDs and render supported message parts with the generated compound components.
Keep model choice, tools, credentials and authorization on the server.
Compose the states the feature needs: streaming, completion, retry, cancellation, attachments, approval or sources. Avoid adding components merely because the library offers them. Preserve keyboard interaction, accessible labels and useful scroll behavior.
When rendering fails, inspect the owned component, theme imports, semantic tokens
and actual configured aliases. Do not copy a default tsconfig or replace the
project's theme to fix one import.
For unstyled markdown, check the MessageResponse setup.
Verify the rendered flow with real message states and the project's checks; type correctness alone does not establish usable streaming or attachment behavior.
FAQ
What does the ai-elements skill do?
Builds AI chat interfaces with AI Elements components copied into the project. Use when adding or composing conversations, messages, prompt inputs, attachments, reasoning, tool output or sources in an AI SDK application.
How do I install ai-elements?
Run npx skills add https://github.com/laguagu/claude-code-nextjs-skills --skill ai-elements in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ai-elements/ (personal) or .claude/skills/ai-elements/ (project).
Which AI agents can use ai-elements?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is ai-elements safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains ai-elements?
It is published by laguagu in laguagu/claude-code-nextjs-skills. It has 178 recorded installs.
More from laguagu/claude-code-nextjs-skills
nextjs-seo
laguagu/claude-code-nextjs-skills
Next.js App Router SEO implementation and audits. Use for metadata and social images, sitemap/robots, canonicals and localization, structured data, Core Web Vitals evidence, AI crawler policy or search-indexing diagnosis. Not for general Next.js feature work unrelated to SEO.
openai-agents-sdk
laguagu/claude-code-nextjs-skills
OpenAI Agents SDK (Python) development. Use when building AI agents, multi-agent handoffs, function tools, guardrails, sessions, streaming, or tracing with the openai-agents / agents Python package — including Azure OpenAI through its native client or LiteLLM. Triggers on imports from agents, uses of Runner.runsync/Runner.runstreamed, @functiontool, AgentOutputSchema, SQLiteSession, or questions about the openai-agents-python SDK. Python only — not the TypeScript @openai/agents SDK.
nextjs-shadcn
laguagu/claude-code-nextjs-skills
Builds distinctive Next.js interfaces with shadcn/ui, choosing typography, styling and purposeful visual effects for the product. Use when creating or polishing a Next.js + shadcn app, page or component, including themes, presets, backgrounds and design-system lint. Uses frontend-design for substantial visual direction and icons for asset sourcing.
next-best-practices
laguagu/claude-code-nextjs-skills
Next.js App Router best practices covering file conventions, RSC boundaries, async APIs, data patterns, hydration errors, metadata, route handlers, image/font optimization, and bundling. Use when writing or reviewing Next.js code to prevent hydration errors, RSC violations, data waterfalls, and configuration mistakes.
react-best-practices
laguagu/claude-code-nextjs-skills
React and Next.js performance optimization guide from Vercel Engineering (70 rules in 8 categories). Use when writing, reviewing, or refactoring React/Next.js code to eliminate waterfalls, reduce bundle size, prevent re-renders, optimize Server Components, or fix performance bottlenecks. Triggers on data fetching, Promise.all, Suspense, useMemo, dynamic imports, bundle analysis, code-splitting, and rendering performance tasks.
postgres-semantic-search
laguagu/claude-code-nextjs-skills
Open the skill to read its SKILL.md instructions.
Popular ai & agents skills
google-agents-cli-publish
google/agents-cli
This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).
google-agents-cli-eval
google/agents-cli
This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).
skill-creator
anthropics/skills
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
codex-pet
prime-skills/runcomfy-agent-skills
Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.
full-output-enforcement
leonxlnx/taste-skill
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
executing-plans
obra/superpowers
Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available