Skip to content

superstoffer/web-development-skills

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Web Development Skills for AI/LLM

A curated collection of AI/LLM skills (primarily for Claude Code) focused on modern web development. These skills help AI coding assistants understand and work with your specific tech stack more effectively.

🎯 Purpose

This repository contains specialized skill definitions that enhance AI coding assistants' ability to:

  • Generate code following your project's conventions
  • Understand your tech stack architecture
  • Make informed decisions about implementation patterns
  • Provide context-aware suggestions

🛠️ Tech Stack Coverage

This collection focuses on the following modern web development stack:

Frontend

  • Nuxt 4 - Vue.js meta-framework
  • Nuxt UI - UI component library
  • Tailwind CSS - Utility-first CSS framework

Backend

  • NestJS - Progressive Node.js framework
  • Prisma - Next-generation ORM
  • PostgreSQL - Advanced open-source database

📁 Repository Structure

web-development-skills/
├── frontend/
│   ├── nuxt/              # Nuxt 4 specific skills
│   ├── nuxt-ui/           # Nuxt UI component skills
│   ├── tailwind/          # Tailwind CSS skills
│   └── general/           # General frontend skills
├── backend/
│   ├── nestjs/            # NestJS framework skills
│   ├── prisma/            # Prisma ORM skills
│   ├── postgresql/        # PostgreSQL database skills
│   └── general/           # General backend skills
├── fullstack/             # Full-stack integration skills
├── testing/               # Testing skills (unit, e2e, integration)
├── deployment/            # Deployment and DevOps skills
├── examples/              # Example projects and use cases
└── templates/             # Skill templates for creating new skills

🚀 Usage

For Claude Code / AI Assistants

  1. Reference specific skills in your prompts:

    "Using the Nuxt 4 composables skill, create a user authentication flow"
    
  2. Include relevant skill files in your project context

  3. Use skills as a knowledge base for consistent code generation

For Developers

  1. Browse the skills directory for your tech stack
  2. Copy relevant skills to your project
  3. Customize skills to match your specific needs
  4. Share improvements back to the community

📚 Skill Categories

Frontend Skills

  • Component architecture patterns
  • State management with composables
  • Routing and navigation
  • UI component usage with Nuxt UI
  • Tailwind CSS best practices
  • Performance optimization

Backend Skills

  • RESTful API design with NestJS
  • GraphQL implementation
  • Database schema design with Prisma
  • Authentication and authorization
  • Error handling and logging
  • Microservices patterns

Full-Stack Skills

  • API integration patterns
  • Type sharing between frontend and backend
  • Authentication flows
  • Real-time communication
  • File uploads and handling

Testing Skills

  • Unit testing with Vitest
  • E2E testing with Playwright
  • API testing
  • Component testing

Deployment Skills

  • Docker containerization
  • CI/CD pipelines
  • Environment configuration
  • Monitoring and logging

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. See CONTRIBUTING.md for guidelines.

How to Contribute a New Skill

  1. Choose the appropriate directory for your skill
  2. Use the template in templates/skill-template.md
  3. Provide clear examples and use cases
  4. Test with Claude Code or your preferred AI assistant
  5. Submit a pull request

📖 Skill Format

Each skill should include:

  • Purpose: What the skill helps accomplish
  • Context: When to use this skill
  • Examples: Code snippets and patterns
  • Best Practices: Recommendations and conventions
  • Common Pitfalls: What to avoid
  • References: Links to documentation

🏷️ Skill Naming Convention

  • Use descriptive, lowercase names with hyphens
  • Include the technology name as a prefix
  • Example: nuxt-composables-patterns.md, nestjs-controller-design.md

📝 License

MIT License - feel free to use these skills in your projects!

🌟 Acknowledgments

This repository is maintained for the web development community using modern JavaScript/TypeScript stacks. Special thanks to all contributors who help improve these skills.

🔗 Related Resources


Note: This repository is actively maintained and updated with new skills. Star ⭐ the repo to stay updated!

About

Collection of skills for the web development tech stack that I use – Nuxt 4, Nuxt UI, Tailwind CSS, NestJS, Prisma, PostgreSQL

Resources

License

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors