Skills
n8n, Next.js Full Stack, shadcn/ui, and UI/UX Pro Max skills.
Skills are like plug-ins for Claude. They give Claude specialized knowledge for specific tasks like building n8n workflows, creating Next.js apps, or designing UIs.
Skills are cloned from GitHub repos into Claude Code's skills directory. Copy the prompt below and paste it into Claude Code — Claude handles the rest.
Workflow Automation & AI Agents
Build complex n8n pipelines with Claude
This skill teaches Claude to create valid n8n workflows with proper node connections, error handling, and best practices.
How to Install
Paste this into Claude Code:
Clone https://github.com/Hawiyat-Org/hawiyat-n8n-skill.git into my skills directory, then install the skill globally using the plugin system.
Steps:
1. Git clone the repo into ~/.claude/skills/hawiyat-n8n-skill/
2. Run claude plugin init hawiyat-n8n --with skills --author "Hawiyat" --description "n8n workflow automation skill" to scaffold a proper plugin at ~/.claude/skills/hawiyat-n8n/ (this creates the .claude-plugin/plugin.json that auto-discovers on restart)
3. Delete the example skill at ~/.claude/skills/hawiyat-n8n/skills/example/
4. The .skill file in the repo is a ZIP. Extract hawiyat-n8n-evo.skill into ~/.claude/skills/hawiyat-n8n/skills/hawiyat-n8n-evo/ so SKILL.md lands at skills/hawiyat-n8n-evo/SKILL.md
5. Confirm it loaded by checking the skills list after restart.Claude uses claude plugin init (which works from within Claude Code) to scaffold the proper .claude-plugin/plugin.json structure that auto-discovers on restart. Restart after.
Full-Stack React Framework
App Router, server components, API routes, Prisma
Claude becomes a Next.js expert generating App Router components, server actions, API routes, and database schemas with Prisma.
How to Install
Paste this into Claude Code:
Install the Next.js developer skill globally using the plugin system.
Steps:
1. Git clone https://github.com/Jeffallan/claude-skills.git into ~/.claude/skills/claude-skills/
2. Run claude plugin init nextjs-developer --with skills --author "Jeffallan" --description "Full-stack Next.js development skill with App Router, API routes, and Prisma" to scaffold a proper plugin at ~/.claude/skills/nextjs-developer/
3. Delete the example skill at ~/.claude/skills/nextjs-developer/skills/example/
4. Copy SKILL.md from ~/.claude/skills/claude-skills/ into ~/.claude/skills/nextjs-developer/skills/nextjs/
5. Optionally delete the cloned ~/.claude/skills/claude-skills/ folder
6. Confirm everything is in place so I just restart.Claude uses claude plugin init to scaffold the proper plugin structure, then moves the skill file in. Restart after.
Component Library & Theming
Radix UI primitives, Tailwind CSS, dark mode
Claude masters shadcn/ui component installation, theming with CSS variables, form building with React Hook Form + Zod, data tables with TanStack Table, and responsive composable UI patterns.
How to Install
Paste this into Claude Code:
Install the shadcn/ui skill globally using the plugin system.
Steps:
1. Git clone https://github.com/capraidev/shadcn-claude-skill.git into ~/.claude/skills/shadcn-repo/
2. Run claude plugin init shadcn --with skills --author "capraidev" --description "shadcn/ui component library and theming skill" to scaffold a proper plugin at ~/.claude/skills/shadcn/
3. Delete the example skill at ~/.claude/skills/shadcn/skills/example/
4. Copy SKILL.md from ~/.claude/skills/shadcn-repo/ into ~/.claude/skills/shadcn/skills/shadcn-ui/
5. Optionally delete the cloned ~/.claude/skills/shadcn-repo/ folder
6. Confirm everything is in place so I just restart.Claude uses claude plugin init to scaffold the proper plugin structure, then moves the skill file in. Restart after.
Advanced Design Systems
Tailwind CSS, shadcn/ui, Framer Motion
Claude generates production-grade UI components with responsive layouts, micro-interactions, and accessible design patterns.
How to Install
Paste this into Claude Code:
Install the UI/UX Pro Max skill bundle globally using the plugin system.
Steps:
1. Git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git into ~/.claude/skills/uiux-pro-max-repo/
2. Run claude plugin init uiux-pro-max --with skills --author "Next Level Builder" --description "UI/UX design system with banner, brand, slides, and styling skills" to scaffold a proper plugin at ~/.claude/skills/uiux-pro-max/
3. Delete the example skill at ~/.claude/skills/uiux-pro-max/skills/example/
4. Copy all 5 skill directories (banner-design, brand, design-systems, slides, ui-styling) from ~/.claude/skills/uiux-pro-max-repo/.claude/skills/ into ~/.claude/skills/uiux-pro-max/skills/
5. Optionally delete the cloned ~/.claude/skills/uiux-pro-max-repo/ folder
6. Confirm everything is in place so I just restart.Claude uses claude plugin init to scaffold the proper plugin structure, then copies all 5 sub-skills in. Restart after.
Once installed, skills work automatically. You don't need to activate them manually. Claude will recognize when a skill is relevant and apply it.
Tips
- Skills are installed globally, so they work in any project
- Restart Claude Code after adding a new skill for it to load
- To update a skill, ask Claude:
Update my n8n skill by running git pull in the skill folder - To remove a skill, ask Claude:
Remove the shadcn skill by deleting its folder from the skills directory