Stop Using Claude Code Naked: 32 Tested Skills and 8 MCP Servers That Turn It Into a Full-Stack Dev Partner
Stop Using Claude Code Naked! 32 Tested Skills + 8 MCP Servers to Max Out Your Development Efficiency!
Let me first show you the result after I installed everything (see image below). All skills have been tested and work.
Author's note on March 31st: Sorry folks, the npm install commands in the document might be missing the registry prefix. It's recommended to first find and then specify the full path to install. For example: first npx skills find technical-writer, then npx skills add shubhamsaboo/awesome-llm-apps@technical-writer -y -g. Thanks for the feedback!
Do you also have these problems?
- Using Claude Code to write code, but it never seems to fully understand the requirements, and the generated content needs constant revision.
- Wanting it to create a Dashboard / Landing Page, but the result is too ugly to use directly.
- Wanting it to read/write local files, operate a browser, or interface with design tools, but having no idea how to configure it.
- Once the session is cleared, all previous debugging experience, project details, and context are forgotten, requiring you to re-establish the context every time.
In this article, I'm sharing 32 carefully selected skills + 8 MCP servers that I've personally tested and found stable and reliable after stepping on countless pitfalls. One-click install, automatic triggering, turning your Claude Code from a 'code completion assistant' into a 'full-process development partner'.
All installation commands can be copied and pasted directly. No pitfalls. Even beginners can follow along step by step.
1. First, Understand the Core: What's the Difference Between Skills and MCP?
Many beginners confuse these two extension capabilities. Let's clarify them in one sentence:
- Skills: Encapsulated prompts / standardized workflows that make Claude a 'professional' in a specific domain. Essentially, they make the AI 'better at knowing how to do things'.
- MCP Servers: Real tool capabilities that allow Claude to access local files, browsers, external APIs, and third-party tools. Essentially, they make the AI 'actually able to do things'.
The best part: Most capabilities trigger automatically. You don't need to call them manually. When you say 'help me write a README' or 'review this code', Claude Code automatically activates the corresponding skill.
Core Difference Comparison Table
| Dimension | Skills | MCP Servers |
|---|---|---|
| Core Essence | Encapsulated prompts / standardized workflows | Locally running tools / API services |
| Installation Method | One-click install via npx skills add |
Modify mcp.json configuration file |
| Runtime Location | Inside the Claude LLM | Local independent process |
| Access to External Resources | Not supported | Supports local system, browser, third-party services |
| Additional Dependencies | Only requires Node environment, no API Key needed | Some services connecting to external services require API Key |
| One-sentence summary: Skills make Claude smarter, MCP makes Claude more capable. Using them together maximizes Claude Code's potential. |
2. Part One: Complete Skills Guide (32 Selected)
Skills are the most lightweight way to extend Claude Code. They can be installed with one click via the Skills CLI, similar to the npm package manager used in frontend development. Ready to use out of the box.
2.1 Prerequisites: Complete Skill Installation and Management Commands
2.1.1 Core Installation Commands
# 1. Search community skills (keyword matching)
npx skills find <keyword>
# 2. Install a skill (-y to skip confirmation, -g for global install, MUST ADD!)
npx skills add <owner/repo@skill> -y -g
# 3. View all installed skills
npx skills list -g
# 4. Check for skill updates
npx skills check
# 5. Update all installed skills
npx skills update
Key reminder: You must add the -g global install parameter when installing skills, otherwise Claude Code won't recognize them. You must restart Claude Code after installation for changes to take effect.
2.1.2 Skill Marketplace and Search Methods
All community open-source skills can be viewed on the official marketplace, which has a complete installation ranking to help you quickly filter popular, high-quality skills:
- Official Skill Marketplace: https://skills.sh/
- Data Note: The selected skills in this article are all from this ranking, covering the full development spectrum. Their cumulative installations are all over 10,000, ensuring stability.
2.1.3 How to View Installed Skills
- Command line view:
# Mac/Linux path
ls ~/.claude/skills/
ls ~/.agents/skills/
# Windows path
dir C:\Users\YourUsername\.claude\skills\
- Directly view within Claude Code: Type
/to bring up the complete skill list. Click to manually trigger.
2.2 32 Selected Skills Categorized List
All skills are categorized by development scenario, with unified labels for pain points, installation commands, core capabilities, trigger scenarios, and real-world testing feedback. Beginners can choose as needed.
🔧 Must-Install Entry Class (1)
find-skills Skill Discovery Tool
Pain Point: Not knowing which skills are available, having no clue how to find skills for a specific function.
Installation Command:
npx skills add find-skills -y -g
Core Capability: Built-in search engine for the skill marketplace, supporting keyword matching, hot recommendations, and skill detail queries.
Trigger Scenario: Automatically activates when you say 'Are there any skills for handling PDFs?' or 'Recommend some frontend development skills.'
Real-world Testing: The first skill every beginner must install. It's like installing an 'App Store' for Claude. You won't need to browse the web to find skills anymore.
🎨 Full-Stack Frontend Development Class (9)
frontend-design Frontend UI Design Tool
Pain Point: Self-written Dashboards / Landing Pages are too ugly to use. Spending a day on it is worse than what AI can generate in 5 minutes.
Installation Command:
npx skills add frontend-design -y -g
Core Capability: Webpage, Dashboard, and product landing page design; React/Vue component generation; adaptation of modern design styles like dark mode and glassmorphism.
Trigger Scenario: Automatically activates when you say 'Help me create a backend interface' or 'Design a product landing page.'
Real-world Testing: The most frequently used skill for frontend development. The generated interfaces are production-ready and don't need major modifications. Over 52.7K installations, with max community approval.
web-artifacts-builder Complex Frontend Application Builder
Pain Point: Can generate simple interfaces, but struggles with complex SPAs involving routing, state management, and component libraries.
Installation Command:
npx skills add web-artifacts-builder -y -g
Core Capability: Supports developing single-page applications with routing; perfectly adapts to mainstream component libraries like Tailwind and shadcn/ui; generates complex state management logic.
Trigger Scenario: Automatically activates when you say 'Help me build a management system with login' or 'Write a complete project using React+Tailwind.'
Real-world Testing: An advanced supplement to frontend-design. Essential for complex frontend projects. The generated code has a clear structure and can run directly.
canvas-design Visual Drawing Tool
Pain Point: Drawing architecture diagrams, flowcharts, or technical illustrations for documentation or sharing takes too much time.
Installation Command:
npx skills add canvas-design -y -g
Core Capability: Generates architecture diagrams, flowcharts, and technical schematics; designs posters and article cover images; supports export to PNG/PDF formats.
Trigger Scenario: Automatically activates when you say 'Help me draw a microservice architecture diagram' or 'Create a cover image for a tech sharing session.'
Real-world Testing: No need to open Figma/ProcessOn anymore. A single sentence generates standardized technical diagrams, massively improving efficiency.
theme-factory Theme Beautification Tool
Pain Point: Generated documents, PPTs, and interfaces lack a consistent style, resulting in a messy visual effect.
Installation Command:
npx skills add theme-factory -y -g
Core Capability: 10+ preset themes (tech blue, business gray, dark mode, etc.); one-click unification of visual styles across documents, PPTs, and HTML; supports custom theme configuration.
Trigger Scenario: Automatically activates when you say 'Add a business style to this document' or 'Unify the visual theme of this PPT.'
Real-world Testing: A must-have for detail-oriented users. The quality of generated content jumps up a notch. No more manual format adjustments.
vercel-react-best-practices React Best Practices
Pain Point: Writing React code that is non-standard, performs poorly, and doesn't follow industry best practices.
Installation Command:
npx skills add vercel-labs/agent-skills@vercel-react-best-practices -y -g
Core Capability: React code standard checks; performance optimization suggestions; component design pattern guidance; Hooks best practices.
Trigger Scenario: Automatically activates when you write React code, prioritizing triggering during code review and refactoring.
Real-world Testing: Official Vercel product, maximum authority. Over 109.8K installations. Essential for beginners writing React, helping you develop standardized coding habits.
web-design-guidelines Web Design Guidelines
Pain Point: Created webpages have messy layouts, ugly colors, and poor responsive adaptation.
Installation Command:
npx skills add vercel-labs/agent-skills@web-design-guidelines -y -g
Core Capability: Design system guideline guidance; responsive layout adaptation; visual consistency checks; interaction experience optimization suggestions.
Trigger Scenario: Automatically activates when you are doing web design or UI optimization.
Real-world Testing: Official Vercel product, over 83.1K installations. Even if you're a design novice, the interfaces it generates won't be ugly.
vercel-composition-patterns Component Composition Patterns
Pain Point: Complex components are poorly decomposed, have low reusability, and messy state management.
Installation Command:
npx skills add vercel-labs/agent-skills@vercel-composition-patterns -y -g
Core Capability: Component reuse strategy design; practical guidance on composition over inheritance; state management solutions for complex components.
Trigger Scenario: Automatically activates when you are doing component encapsulation or complex frontend project refactoring.
Real-world Testing: Essential for intermediate and advanced frontend developers. Helps you write more elegant and reusable component code.
shadcn shadcn/ui Component Library Exclusive Skill
Pain Point: When using shadcn/ui, you don't know how to combine components or customize styles, leading to constant documentation lookups.
Installation Command:
npx skills add shadcn/ui@shadcn -y -g
Core Capability: shadcn/ui component usage guidance; style theme customization; component composition best practices; one-click generation of complete business components.
Trigger Scenario: Automatically activates when your project has a shadcn/ui dependency or when shadcn-related requirements are mentioned.
Real-world Testing: A must-have for heavy shadcn users. No more flipping through official documentation. A single sentence generates standardized component code.
vercel-react-native-skills React Native Development Guide
Pain Point: React Native cross-platform adaptation has many pitfalls, and native module integration is complex.
Installation Command:
npx skills add vercel-labs/agent-skills@vercel-react-native-skills -y -g
Core Capability: RN development best practices; cross-platform adaptation guidance; native module integration solutions; performance optimization suggestions.
Trigger Scenario: Automatically activates when you are doing React Native related development.
Real-world Testing: Official Vercel product, essential for RN development. Helps you avoid 90% of cross-platform adaptation pitfalls.
📄 Documentation and Office Processing Class (6)
technical-writer Technical Documentation Expert
Pain Point: Don't want to write documentation after finishing code. READMEs and API docs are messy and non-standard.
Installation Command:
npx skills add technical-writer -y -g
Core Capability: Standardized README generation; API interface documentation writing; technical tutorials and user guide creation; Chinese/English document translation.
Trigger Scenario: Automatically activates when you say 'Help me write a project README' or 'Generate documentation for this interface.'
Real-world Testing: Essential for developers. Generates well-structured, logically clear documentation that's ready to use.
doc-coauthoring Long Document Collaboration Assistant
Pain Point: When writing technical proposals, design specifications, or RFC documents, the logic is not rigorous and the content is incomplete.
Installation Command:
npx skills add doc-coauthoring -y -g
Core Capability: Technical proposal (RFC) writing; system design document creation; team specification document polishing; supports multiple rounds of iterative optimization.
Trigger Scenario: Automatically activates when you say 'Help me write a technical plan' or 'Draft an architecture design document.'
Real-world Testing: Essential for writing formal technical documents. Better understands the norms and logic of technical documentation than general AI writing tools.
docx Word Document Processing Tool
Pain Point: Frequently need to process Word documents. Format conversion and batch modifications are too time-consuming.
Installation Command:
npx skills add docx -y -g
Core Capability: Create/read/edit Word documents; Markdown to Word format conversion; batch find and replace content; automatic generation of table of contents, headers, and footers.
Trigger Scenario: Automatically activates when you say 'Convert this Markdown to Word' or 'Help me modify this Word document.'
Real-world Testing: Essential for office scenarios. No need to open Word software. Complete batch modifications with a single sentence.
pptx PPT Presentation Generation Tool
Pain Point: Making PPTs is too time-consuming. Converting documents to PPTs requires repeated copy-pasting and format adjustments.
Installation Command:
npx skills add pptx -y -g
Core Capability: One-click generation of PPTs from technical documents/Markdown; editing existing presentations; merging/splitting slides; extracting PPT content.
Trigger Scenario: Automatically activates when you say 'Help me create a PPT for a tech sharing session' or 'Convert this document into a presentation.'
Real-world Testing: Essential for tech sharing and reporting. Can do in 10 minutes what used to take an afternoon.
pdf Universal PDF Tool
Pain Point: Merging/splitting PDFs, format conversion, and OCR recognition often require paid memberships and are cumbersome.
Installation Command:
npx skills add pdf -y -g
Core Capability: PDF merge/split; OCR recognition of scanned document content; adding watermarks/page numbers; PDF form filling; format conversion.
Trigger Scenario: Automatically activates when you say 'Merge these PDFs' or 'Recognize the text in this scanned document.'
Real-world Testing: A completely free PDF tool that covers common daily office needs. No need to look for paid tools anymore.
xlsx Excel/CSV Processing Tool
Pain Point: Excel data cleaning, formula calculations, and chart generation are too tedious. Repetitive operations waste time.
Installation Command:
npx skills add xlsx -y -g
Core Capability: Excel/CSV data cleaning; formula calculation and data statistics; visual chart generation; format conversion and batch processing.
Trigger Scenario: Automatically activates when you say 'Help me process this Excel data' or 'Generate a statistical chart for this table.'
Real-world Testing: Essential for data processing. Much faster than manually writing Excel formulas. Complex data processing tasks are handled with a single sentence.
🏗️ Architecture Design and Code Quality Class (5)
planning-with-files Task Planning Tool
Pain Point: When working on complex projects, task decomposition is unclear, and progress is completely lost after a session interruption.
Installation Command:
npx skills add planning-with-files -y -g
Core Capability: Automatically decomposes complex development tasks; generates progress tracking files like task_plan.md and progress.md; supports resuming execution after session interruption.
Trigger Scenario: Automatically activates when you say 'Help me break down the development tasks for this project' or 'Create a project development plan.'
Real-world Testing: Essential for complex projects. Even if you /clear the session, you can continue based on the generated progress files without losing any progress.
project-planner Project Planning Expert
Pain Point: Jumping straight into writing code without fully thinking through requirements leads to constant rework later.
Installation Command:
npx skills add shubhamsaboo/awesome-llm-apps@project-planner -y -g
Core Capability: Generates standardized requirements documents; outputs system architecture design plans; creates phased implementation plans; assesses technical risks.
Trigger Scenario: Automatically activates when you say 'Help me create an overall plan for this project' or 'Outline the implementation plan for this requirement.'
Real-world Testing: Helps you develop the good habit of 'thinking clearly before acting,' significantly reducing later rework. Essential for beginners working on projects.
architecture-patterns Architecture Pattern Recommendation
Pain Point: When doing system design, you don't know which architecture pattern to choose and end up falling into architecture design pitfalls.
Installation Command:
npx skills add wshobson/agents@architecture-patterns -y -g
Core Capability: Recommends suitable architecture patterns based on business scenarios; explains the pros, cons, and applicable scenarios of various architectures; provides best practices for architecture design.
Trigger Scenario: Automatically activates when you say 'What architecture is suitable for this scenario?' or 'Help me design a microservice architecture.'
Real-world Testing: Essential for backend developers and system architects. Covers mainstream architecture patterns and helps you avoid many common architecture design pitfalls.
architecture-decision-records Architecture Decision Records
Pain Point: Architecture decisions in a project are not recorded. Later, no one knows why a choice was made, making it impossible to trace back when problems arise.
Installation Command:
npx skills add wshobson/agents@architecture-decision-records -y -g
Core Capability: Generates standardized ADR (Architecture Decision Records); records decision context, selection reasons, and alternatives; facilitates team review and maintenance.
Trigger Scenario: Automatically activates when you say 'Help me record this architecture decision' or 'Generate an ADR document.'
Real-world Testing: Essential for team development and long-term maintenance projects. An indispensable part of a standardized R&D process.
requesting-code-review Code Review
Pain Point: Wanting a more professional code review that is closer to a real team scenario.
Installation Command:
npx skills add obra/superpowers@requesting-code-review -y -g
Core Capability: Full-dimension code quality review; identifies potential bugs and security risks; provides actionable optimization suggestions; adheres to industry code review standards.
Trigger Scenario: Automatically activates when you say 'Help me do a professional code review' or 'Review the code for this module.'
Real-world Testing: Completely simulates the perspective of a senior developer's code review. Helps you find many issues you might not see yourself.
🧠 Memory and Context Management Class (3)
memory-intake Memory Intake
Pain Point: Once a session is cleared, all previous debugging experience, project details, and pitfalls are forgotten.
Installation Command:
npx skills add memory-intake -y -g
Core Capability: Stores debugging experience, architecture decisions, pitfalls, and project standards into Claude's memory bank; supports category tag management; accessible across sessions.
Trigger Scenario: Automatically activates when you say 'Save this experience to memory' or 'Remember the standards for this project.'
Real-world Testing: Completely solves the problem of losing session context. The project becomes smoother with use, without needing to re-establish background every time.
memory-audit Memory Health Check
Pain Point: The memory bank contains too much outdated or invalid content, affecting the accuracy of Claude's responses.
Installation Command:
npx skills add memory-audit -y -g
Core Capability: Checks if memory bank content is outdated; identifies invalid or conflicting memories; generates a memory bank quality report; provides cleanup and optimization suggestions.
Trigger Scenario: Automatically activates when you say 'Help me check my memory bank' or 'Clean up invalid memories.'
Real-world Testing: Essential after using the memory bank for a while. Helps keep the memory bank clean and accurate, preventing Claude from using outdated content.
memory-evolution Memory Optimization
Pain Point: The memory bank content is cluttered with redundant information, leading to low retrieval efficiency.
Installation Command:
npx skills add memory-evolution -y -g
Core Capability: Analyzes memory usage patterns; suggests memory consolidation strategies; prunes redundant memories; optimizes the associative structure of memories.
Trigger Scenario: Automatically activates when you say 'Help me optimize my memory bank' or 'Organize my memory content.'
Real-world Testing: Essential for deep users of the memory feature. Allows Claude to more accurately recall your historical experience, making responses more tailored to your needs.
🧪 Testing and Automation Class (2)
webapp-testing E2E Testing
Pain Point: Writing E2E tests is too time-consuming, and manual testing coverage is incomplete.
Installation Command:
npx skills add webapp-testing -y -g
Core Capability: Generates E2E test cases based on Playwright; automates page navigation, form filling, and click operations; screenshot and log recording; test report generation.
Trigger Scenario: Automatically activates when you say 'Help me write E2E tests for this webpage' or 'Create an automated test case.'
Real-world Testing: Essential for frontend testing. Quickly generates runnable test cases, significantly improving testing efficiency.
test-driven-development TDD Test-Driven Development
Pain Point: Want to practice TDD but don't know how to implement it. Tend to write code first and then add tests.
Installation Command:
npx skills add obra/superpowers@test-driven-development -y -g
Core Capability: Guides you through the 'Red-Green-Refactor' cycle; writes test cases first, then implementation code; ensures code test coverage; outputs code that conforms to TDD standards.
Trigger Scenario: Automatically activates when you say 'Develop this feature using TDD' or 'Help me practice test-driven development.'
Real-world Testing: Essential for developing the habit of TDD. Helps standardize your development process, resulting in more robust code with fewer bugs.
⚡ Development Efficiency Class (4)
brainstorming Brainstorming
Pain Point: Encountering a technical problem with no solution in sight, hitting a mental block.
Installation Command:
npx skills add obra/superpowers@brainstorming -y -g
Core Capability: Analyzes technical problems from multiple angles; quickly generates multiple solution sets; expands technical thinking; helps break through mental blocks.
Trigger Scenario: Automatically activates when you say 'Help me brainstorm this problem' or 'Think about the implementation plan for this requirement.'
Real-world Testing: Use it when you're stuck on a problem. It quickly opens up new ideas, often suggesting solutions you hadn't considered at all.
systematic-debugging Systematic Debugging
Pain Point: Encountering a strange bug with no clue where to start investigating, leading to random, unfocused efforts.
Installation Command:
npx skills add obra/superpowers@systematic-debugging -y -g
Core Capability: Structured bug investigation process; step-by-step root cause localization; covers all possible failure points; generates debugging record documents.
Trigger Scenario: Automatically activates when you say 'Help me investigate this bug' or 'I don't know what's wrong with this problem, help me analyze it.'
Real-world Testing: A godsend for debugging. Follow its process, and you'll find the root cause for 90% of problems. No more guessing.
writing-plans Writing Plans
Pain Point: Task decomposition is unclear, development lacks rhythm, and you don't know what to do first.
Installation Command:
npx skills add obra/superpowers@writing-plans -y -g
Core Capability: Decomposes complex development tasks; generates step-by-step implementation plans; clarifies task dependencies; estimates the workload for each step.
Trigger Scenario: Automatically activates when you say 'Help me break down the development steps for this feature' or 'Write a detailed development plan.'
Real-world Testing: Helps turn vague requirements into clear execution steps. Development pace becomes more controllable, and you won't find you've missed something halfway through.
executing-plans Executing Plans
Pain Point: Plans are well-written, but execution tends to go off track, and progress falls behind.
Installation Command:
npx skills add obra/superpowers@executing-plans -y -g
Core Capability: Executes development tasks step by step according to the plan; tracks development progress in real-time; handles exceptions during execution; generates execution records.
Trigger Scenario: Automatically activates when you say 'Execute development according to this plan' or 'Help me track the development progress of this project.'
Real-world Testing: Used in conjunction with writing-plans, it covers the entire process from planning to execution. Complex project development will never go off track again.
🔒 Security Audit Class (1)
audit-website Website Security Audit
Pain Point: Not knowing if there are security vulnerabilities before launching a website, only discovering problems after an attack.
Installation Command:
npx skills add squirrelscan/skills@audit-website -y -g
Core Capability: Scans for common website security vulnerabilities; checks security configurations; generates a complete security audit report; provides vulnerability remediation suggestions.
Trigger Scenario: Automatically activates when you say 'Help me audit the security of this website' or 'Scan this website for vulnerabilities.'
Real-world Testing: Run it before every website launch. It finds many common security risks, allowing you to fix them in advance and avoid online issues. Over 15.3K installations, highly regarded by the community.
🛠️ Custom Skill Development Class (1)
skill-creator Create Custom Skills
Pain Point: General-purpose skills can't meet personalized needs. You want to encapsulate your own exclusive workflow skills.
Installation Command:
npx skills add skill-creator -y -g
Core Capability: Guides you through creating custom skills; encapsulates repetitive workflows; generates standardized skill packages; supports publishing to the community.
Trigger Scenario: Automatically activates when you say 'Help me create a custom skill' or 'Encapsulate an exclusive workflow.'
Real-world Testing: Essential for advanced users. Encapsulates your daily repetitive workflows into skills, solving the problem once and for all, massively improving efficiency.
2.3 Ready to Use: One-Click Installation Scripts by Scenario
For your convenience, I've compiled 3 one-click installation scripts for different scenarios. Copy and run them directly in your terminal.
Version 1: Beginner Starter Pack (10 Must-Install Lightweight Skills, Zero Redundancy)
#!/bin/bash
set -e
# Must-install entry
npx skills add find-skills -y -g
# Frontend development essentials
npx skills add frontend-design -y -g
# Document processing essentials
npx skills add technical-writer -y -g
npx skills add docx -y -g
npx skills add pptx -y -g
npx skills add pdf -y -g
# Code quality essentials
npx skills add obra/superpowers@requesting-code-review -y -g
# Development efficiency essentials
npx skills add obra/superpowers@brainstorming -y -g
npx skills add obra/superpowers@systematic-debugging -y -g
echo "✅ Beginner Starter Pack installed! Restart Claude Code for it to take effect. Type / to view the skill list."
Version 2: Frontend Developer Exclusive Pack
#!/bin/bash
set -e
# Must-install entry
npx skills add find-skills -y -g
# Full frontend development skills
npx skills add frontend-design -y -g
npx skills add web-artifacts-builder -y -g
npx skills add canvas-design -y -g
npx skills add theme-factory -y -g
npx skills add vercel-labs/agent-skills@vercel-react-best-practices -y -g
npx skills add vercel-labs/agent-skills@web-design-guidelines -y -g
npx skills add vercel-labs/agent-skills@vercel-composition-patterns -y -g
npx skills add shadcn/ui@shadcn -y -g
# Testing and efficiency
npx skills add webapp-testing -y -g
npx skills add obra/superpowers@requesting-code-review -y -g
npx skills add obra/superpowers@systematic-debugging -y -g
# Document processing
npx skills add technical-writer -y -g
echo "✅ Frontend Developer Exclusive Pack installed! Restart Claude Code for it to take effect. Type / to view the skill list."
Version 3: Full-Stack Development All-in-One Pack (All 32 Skills in This Article)
#!/bin/bash
set -e
# 🔧 Must-install entry class
npx skills add find-skills -y -g
# 🎨 Full-stack frontend development class
npx skills add frontend-design -y -g
npx skills add web-artifacts-builder -y -g
npx skills add canvas-design -y -g
npx skills add theme-factory -y -g
npx skills add vercel-labs/agent-skills@vercel-react-best-practices -y -g
npx skills add vercel-labs/agent-skills@web-design-guidelines -y -g
npx skills add vercel-labs/agent-skills@vercel-composition-patterns -y -g
npx skills add shadcn/ui@shadcn -y -g
npx skills add vercel-labs/agent-skills@vercel-react-native-skills -y -g
# 📄 Documentation and office processing class
npx skills add technical-writer -y -g
npx skills add doc-coauthoring -y -g
npx skills add docx -y -g
npx skills add pptx -y -g
npx skills add pdf -y -g
npx skills add xlsx -y -g
# 🏗️ Architecture design and code quality class
npx skills add planning-with-files -y -g
npx skills add shubhamsaboo/awesome-llm-apps@project-planner -y -g
npx skills add wshobson/agents@architecture-patterns -y -g
npx skills add wshobson/agents@architecture-decision-records -y -g
npx skills add obra/superpowers@requesting-code-review -y -g
# 🧠 Memory and context management class
npx skills add memory-intake -y -g
npx skills add memory-audit -y -g
npx skills add memory-evolution -y -g
# 🧪 Testing and automation class
npx skills add webapp-testing -y -g
npx skills add obra/superpowers@test-driven-development -y -g
# ⚡ Development efficiency class
npx skills add obra/superpowers@brainstorming -y -g
npx skills add obra/superpowers@systematic-debugging -y -g
npx skills add obra/superpowers@writing-plans -y -g
npx skills add obra/superpowers@executing-plans -y -g
# 🔒 Security audit class
npx skills add squirrelscan/skills@audit-website -y -g
# 🛠️ Custom skill development class
npx skills add skill-creator -y -g
echo "✅ Full-Stack Development All-in-One Pack installed! Restart Claude Code for it to take effect. Type / to view the skill list."
2.4 Skill Quick Reference Table
For your quick reference, I've compiled a table with core information for all 32 skills. Choose as needed:
| Category | Skill Name | Core Use Case | Reference Installations |
|---|---|---|---|
| Must-Install Entry | find-skills | Community skill search and discovery | 159.6K |
| Frontend Development | frontend-design | Webpage, Dashboard, Landing Page design | 52.7K |
| Frontend Development | web-artifacts-builder | Complex SPA, component library-based frontend project building | - |
| Frontend Development | canvas-design | Architecture diagrams, flowcharts, visual drawing | 6.1K |
| Frontend Development | theme-factory | Theme beautification, visual style unification | - |
| Frontend Development | vercel-react-best-practices | React development best practices | 109.8K |
| Frontend Development | web-design-guidelines | Web design guidelines and UI optimization | 83.1K |
| Frontend Development | vercel-composition-patterns | Component composition patterns and reuse strategies | 29.7K |
| Frontend Development | shadcn | shadcn/ui component library exclusive support | - |
| Frontend Development | vercel-react-native-skills | React Native development guide | 21.6K |
| Documentation & Office | technical-writer | Technical documentation, README, API doc generation | - |
| Documentation & Office | doc-coauthoring | Long documents, technical proposals, RFC writing | - |
| Documentation & Office | docx | Word document creation, editing, format conversion | 8.6K |
| Documentation & Office | pptx | PPT presentation generation and editing | 9.2K |
| Documentation & Office | PDF merge, split, OCR, watermark processing | 11.1K | |
| Documentation & Office | xlsx | Excel data processing, formula calculation, chart generation | 8.6K |
| Architecture & Quality | planning-with-files | Complex task decomposition, progress tracking, session recovery | - |
| Architecture & Quality | project-planner | Project requirements analysis, architecture design, development plan | - |
| Architecture & Quality | architecture-patterns | Architecture pattern recommendation, architecture design guidance | - |
| Architecture & Quality | architecture-decision-records | ADR architecture decision record generation | - |
| Architecture & Quality | requesting-code-review | Professional code review, quality optimization | - |
| Memory Management | memory-intake | Experience, pitfalls, project standards memory intake | - |
| Memory Management | memory-audit | Memory bank health check, invalid content cleanup | - |
| Memory Management | memory-evolution | Memory bank optimization, associative structure organization | - |
| Testing & Automation | webapp-testing | E2E automated test case generation | 7.6K |
| Testing & Automation | test-driven-development | TDD test-driven development mode guidance | 6.5K |
| Development Efficiency | brainstorming | Technical problem brainstorming, solution generation | 13.4K |
| Development Efficiency | systematic-debugging | Structured bug investigation, root cause localization | 7.5K |
| Development Efficiency | writing-plans | Development task decomposition, implementation plan generation | 6.4K |
| Development Efficiency | executing-plans | Development plan execution, progress tracking | - |
| Security Audit | audit-website | Website security vulnerability scanning, audit report generation | 15.3K |
| Custom Development | skill-creator | Custom skill creation, workflow encapsulation | 26.1K |
| Data source: Official Skill Marketplace <https://skills.sh/"> , as of March 2026 latest data |
3. Part Two: Complete MCP Server Guide (8 Tested and Working)
MCP (Model Context Protocol) is a more fundamental extension mechanism for Claude Code. It allows Claude to break free from the limitations of the LLM and truly access the local file system, browser, database, and third-party tools, enabling true automation.
3.1 Prerequisites: Complete MCP Configuration Process
3.1.1 Configuration File Path
MCP servers are managed via a JSON configuration file, supporting both global and project-level configurations. Paths for all platforms are as follows:
# Global configuration (applies to all projects, recommended)
# Mac/Linux
~/.claude/mcp.json
~/.claude/mcp.local.json
# Windows
C:\Users\YourUsername\.claude\mcp.json
# Project-level configuration (applies only to the current project)
ProjectRoot/.mcp.json
3.1.2 Standard Configuration Format Example
{
"mcpServers": {
"ServerName": {
"command": "execution command",
"args": ["command arguments"],
"env": {
"EnvironmentVariableName": "EnvironmentVariableValue"
}
}
}
}
3.1.3 Configuration Activation and Verification
- After modifying the configuration file, you must restart Claude Code for it to take effect.
- After activation, a 'Tools' icon will appear below the Claude Code input box. Click it to view the connected MCP servers.
- Before configuring, check that the JSON format is correct to avoid missing commas or brackets that could cause the configuration to fail.
3.2 8 Selected MCP Server List
All MCPs have been tested and work. They cover the full development spectrum and are organized by core use case. Each includes complete configuration methods, core capabilities, and notes.
🧠 Must-Install Core: Cross-Session Memory System
neural-memory Neural Network Memory System
Pain Point: The memory feature in skills is a lightweight version. You need a more powerful, cross-session, long-term, structured memory capability.
Prerequisite Dependency Installation:
# Python installation method (recommended)
pip install neural-memory
# Node installation method
npm install -g neural-memory
Complete Configuration:
{
"mcpServers": {
"neural-memory": {
"command": "neural-memory",
"args": ["--mcp"]
}
}
}
Core Capabilities:
- Long-term memory storage across sessions and projects, completely eliminating context loss.
- Memory model mimicking human brain structure, supporting structured memories like neurons, synapses, and fibers.
- Automatically associates similar memories, intelligently matching current needs.
- Memory consolidation and optimization, similar to the human brain's memory organization during sleep.
- Knowledge graph visualization for clear viewing of memory associations.
- Notes: Runs entirely locally. Data is stored in a local SQLite database. No API Key required. Completely private and secure.
🌐 Browser and Web Capabilities (2)
playwright Browser Automation
Pain Point: Need to do professional E2E testing and page automation, requiring more powerful browser control capabilities.
Prerequisite Dependency: Node environment installed.
Complete Configuration:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp@latest"]
}
}
}
Core Capabilities:
- Full browser support (Chrome, Firefox, Safari).
- Professional E2E test case generation and execution.
- Full automation of page navigation, form submission, and element operations.
- Video recording, network request interception, performance monitoring.
- Supports complex user scenario simulation.
- Notes: Runs entirely locally. No API Key required. The first run will automatically download the browser engine, which may take a moment.
📁 Local System Capabilities (1)
filesystem File System Access
Pain Point: Claude can only read the currently open file. You want to access files across the entire workspace, perform batch modifications, and manage directories.
Prerequisite Dependency: Node environment installed.
Complete Configuration:
{
"mcpServers": {
"filesystem": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/YourUsername/PathToYourDevWorkspace"]
}
}
}
Core Capabilities:
- Read and write all files in the specified directory, supporting batch operations.
- Create, delete, and rename directories and files.
- Search workspace files by name or content.
- View file metadata and modification history.
- Supports authorizing multiple directories simultaneously.
- Notes:
- Strictly prohibit granting access to the system root directory. Only authorize your development workspace directory to avoid accidentally deleting system files.
- Runs entirely locally. No API Key required. All operations are performed locally.
🤔 Reasoning Capability Enhancement (1)
sequential-thinking Chain-of-Thought Reasoning
Pain Point: Claude tends to skip steps, have loose logic, and miss key steps when handling complex problems.
Prerequisite Dependency: Node environment installed.
Complete Configuration:
{
"mcpServers": {
"sequential-thinking": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
}
}
}
Core Capabilities:
- Breaks down complex problems into multi-step structured reasoning, avoiding step-skipping errors.
- Each reasoning step has a clear process of thinking, verification, and adjustment.
- Reasoning chain visualization for clear viewing of the entire thought process.
- Supports multi-scheme comparison and feasibility verification.
- Automatically identifies logical flaws in reasoning and corrects them in time.
- Notes: Runs entirely locally. No API Key required. Exceptionally effective for handling complex algorithms and architecture design problems.
🌐 Web Content Scraping (1)
web_reader Web Scraping
Pain Point: Claude cannot directly access web links, requiring manual content copying, which is too cumbersome.
Prerequisite Dependency: Node environment installed.
Complete Configuration:
{
"mcpServers": {
"web_reader": {
"command": "npx",
"args": ["-y", "web-reader-mcp"]
}
}
}
Core Capabilities:
- Scrapes the complete content of any public webpage, automatically converting it to Markdown format.
- Extracts core information like title, body, links, and images from webpages.
- Supports paginated content scraping and dynamic page content retrieval.
- Automatically filters ads and irrelevant content, retaining only the core body.
- Notes: Runs entirely locally. No API Key required. Can only access publicly accessible webpages, not content requiring login.
🎨 Design Tool Integration (2)
figma-developer-mcp Figma Data Reading
Pain Point: When developing to match a design, you need to constantly switch between Figma and the editor, manually copying dimensions, colors, and styles.
Prerequisite Dependency: Node environment installed. Figma account required.
Complete Configuration:
{
"mcpServers": {
"figma-developer-mcp": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "Your Figma Personal Access Token"
}
}
}
}
Core Capabilities:
- Reads the complete structure of Figma files, obtaining component, layer, and style information.
- Automatically extracts design specifications like colors, fonts, dimensions, and spacing from the design.
- Exports images and icon resources from the design.
- Automatically generates corresponding HTML/CSS code based on the design.
- Compares differences between the design and implementation code, providing optimization suggestions for fidelity.
- Token Acquisition: Figma → Settings → Personal Access Tokens → Generate new token.
- Notes: Requires Figma API Key. Can only access Figma files that your account has permission to view.
supercharged-figma Figma Real-time Editing
Pain Point: Can only read Figma designs. You want Claude to directly modify and edit Figma canvas content.
Prerequisite Dependency: Node environment installed. Figma client.
Complete Configuration:
{
"mcpServers": {
"supercharged-figma": {
"command": "npx",
"args": ["-y", "supercharged-figma-mcp", "--local", "--relay-host", "127.0.0.1", "--relay-port", "8888"]
}
}
}
Core Capabilities:
- Real-time editing of the Figma canvas, creating, deleting, and modifying layer nodes.
- Batch operations on layers, automatically generating components, styles, and auto layouts.
- Automatic generation of prototype connections and interaction effects.
- One-click generation of complete design pages based on requirements.
- Batch standardization of designs, unifying design specifications.
- Usage:
- Install the supercharged-figma plugin in Figma and start it.
- The plugin generates a Channel Code. Enter it in Claude to complete the connection.
- Notes: No API Key required. Connects locally to the Figma client. Supports real-time canvas editing, much more powerful than the read-only Figma MCP.
🖼️ AI Image Analysis (1)
4_5v_mcp AI Image Analysis
Pain Point: Need Claude to analyze image content, identify UI components, and describe image scenes.
Prerequisite Dependency: Node environment installed.
Complete Configuration:
{
"mcpServers": {
"4_5v_mcp": {
"command": "npx",
"args": ["-y", "4_5v_mcp"]
}
}
}
Core Capabilities:
- Analyzes image content, identifying objects, scenes, and text in the image.
- Identifies UI components in design drafts, automatically generating corresponding code.
- Provides detailed descriptions of image scenes, understanding the information within the image.
- Supports analysis of multiple image formats.
- Notes: May require configuring a corresponding AI service API Key, depending on the specific implementation. Some versions run entirely locally.
3.3 API Key Summary Table
| MCP Server Name | API Key Required? | Key Type Needed | How to Obtain |
|---|---|---|---|
| neural-memory | ❌ No | - | - |
| playwright | ❌ No | - | - |
| filesystem | ❌ No | - | - |
| sequential-thinking | ❌ No | - | - |
| web_reader | ❌ No | - | - |
| figma-developer-mcp | ✅ Yes | Figma Personal Access Token | Figma → Settings → Personal Access Tokens |
| supercharged-figma | ❌ No | - | Used with Figma plugin |
| 4_5v_mcp | ⚠️ Possibly | Depends on implementation | - |
| Note: Among the 8 MCP servers recommended in this article, only 1 explicitly requires an API Key, 1 might require one, and the remaining 6 run entirely locally without any external services, ensuring privacy and security. |
3.4 MCP Server Quick Reference Table
| MCP Server Name | Core Function | Runtime | Additional Dependencies |
|---|---|---|---|
| neural-memory | Neural network cross-session memory system | Local | Python/Node |
| playwright | Browser automation testing, automated control | Local | Node |
| filesystem | Local file system access, batch file operations | Local | Node |
| sequential-thinking | Chain-of-thought, complex problem reasoning enhancement | Local | Node |
| web_reader | Web content scraping, Markdown conversion | Local | Node |
| figma-developer-mcp | Figma design reading, style extraction, code generation | Network API | Node, Figma Token |
| supercharged-figma | Figma canvas real-time editing, batch design operations | Local connection | Node, Figma plugin |
| 4_5v_mcp | AI image analysis, UI component recognition | Local / Network | Node |
4. Tested Pitfall Avoidance Guide (Must-Read for Beginners)
This section contains lessons learned from countless pitfalls I've encountered. It will help you avoid 90% of problems. Beginners must read this before proceeding.
4.1 Common Skills Installation and Usage Pitfalls
- Installation Timeout/Failure: Ensure your network environment is stable and can access the npm official registry normally to avoid interruptions due to network fluctuations.
- Installed but Not Showing: You must add the
-gglobal install parameter. Local installation won't be recognized by Claude Code. You must restart Claude Code after installation. - Skill Not Triggering Automatically: Check if the keywords in your query match the skill's trigger scenarios. You can also manually type
/+ skill name to manually invoke it. - Claude Response Slowing Down: Don't install more than 20 redundant skills at once. It increases the LLM's context burden, leading to slower responses and lower accuracy. Install only what you need.
- Skill Update Failure: Close Claude Code before updating. Otherwise, file locking issues can cause the update to fail.
4.2 Common MCP Configuration and Activation Pitfalls
- Configuration Not Taking Effect: First, check if the JSON format is correct (commas, brackets closed). Use a JSON validator tool to check first. You must restart Claude Code after modification.
- File System Access Failure: Do not grant access to the system root directory. Only specify your development workspace directory. Check the read/write permissions of the directory to ensure the current user has access.
- Figma MCP Connection Failure: Confirm that the Token has file read/write permissions and that your network can access Figma normally. Ensure the file is one your account has permission to access.
- Tool Call Error: Check if the MCP service command is correct and if the dependencies are pre-installed. For example, neural-memory must be installed via pip first, otherwise, the command will not be found.
- Windows System Configuration Failure: Windows path separators should be
\, not/, otherwise, path parsing errors will occur.
4.3 Security Red Line Reminder
- Strictly prohibit granting the filesystem MCP access to the system root directory to avoid accidentally deleting system files. Only grant access to your development workspace.
- Prioritize official and popular community open-source projects for third-party skills/MCPs. Do not install niche or unknown tools to prevent malicious code.
- Do not leak API Key configurations to public scenarios. Only fill them in local configuration files and do not commit them to Git repositories.
- Do not grant Claude excessive system permissions to avoid executing dangerous system commands that could lead to data loss.
5. Beginner FAQ
Q1: The npx command says it doesn't exist. What should I do?
A: You need to install the Node.js environment first. Download the LTS version from the Node.js official website and install it. After installation, restart your terminal, and you'll be able to use the npx command.
Q2: After installing a skill, typing / doesn't show it. What should I do?
A: Follow these steps to troubleshoot:
- Confirm that the installation command included the
-gglobal install parameter. - Restart Claude Code. You must completely exit and reopen it.
- Use the
npx skills listcommand to check if the installation was successful. - Confirm that the installation process did not encounter timeouts or errors and that the network environment is normal.
Q3: After configuring MCP, it doesn't show in the tools. What should I do?
A: Follow these steps to troubleshoot:
- Check if the JSON format is correct and has no syntax errors.
- Confirm that the configuration file is in the correct path. The global configuration path is recommended.
- Completely restart Claude Code.
- Check if the command is correct and if the dependencies are pre-installed.
Q4: Will installing too many skills affect Claude's response speed?
A: Yes. Installing too many skills increases the LLM's context burden, leading to slower responses and lower accuracy. It's recommended to install only what you need, not everything at once.
Q5: Can I use this on Windows?
A: Absolutely. All commands and configurations in this article are compatible with Windows systems. Just pay attention to the configuration file paths and path separators, which have been noted in the article.
6. Advanced Play: Custom Skills and MCP
If community skills don't meet your personalized needs, you can develop your own skills and MCP servers:
- Custom Skill Development: Use the
skill-creatorskill recommended in this article. It will guide you step by step in creating your own skill, encapsulating your daily repetitive workflows into a skill, solving the problem once and for all. - Custom MCP Server Development: The MCP protocol is completely open-source. The official team provides SDKs in multiple languages. You can develop your own MCP server based on the SDK to interface with any tool or service you want.
- Community Sharing: Developed skills and MCPs can be published to the community to exchange ideas with other developers and increase your influence.
7. Summary and Recommended Installation Order for Beginners
Skills and MCP are two complementary extension mechanisms. Using them together maximizes Claude Code's potential:
- Skills: Lightweight extensions that make Claude better understand your needs and smarter. Zero learning curve.
- MCP: Deep capability extensions that allow Claude to break free from LLM limitations and truly execute operations. More capable.
Recommended Installation Order for Beginners:
- First, install
find-skills. It's like installing an app store, making it easier to discover more skills later. - Install the 10 must-install skills from the Beginner Starter Pack to get hands-on experience and feel the capability boost.
- Configure the
neural-memoryMCP to solve the core pain point of cross-session memory loss. - Based on your development scenario, install the corresponding skills and MCP servers as needed.
- Gradually explore advanced play, developing your own custom skills and MCPs.
Finally, the above is my complete guide to Claude Code skills and MCP. All content has been tested and works. Installation commands can be copied and pasted directly.
If you encounter any problems during installation or use, feel free to leave a comment, and I will reply to each one.
If this article was helpful to you, don't forget to Like + Bookmark. I will update more advanced Claude Code play and custom skill development tutorials in the future. I'm Scorpion La Lai, follow me so you don't get lost!