JKKN-Institutions avatar

nextjs-module-builder

Complete workflow for building new modules in Next.js 15 (App Router) with Supabase backend. Use whe

提供方 JKKN-Institutions|开源

MyJKKN Development Workflow Standardization

Complete solution for standardizing Next.js 15 + Supabase development across your team using Claude Skills

📦 What You're Getting

This package contains everything needed to standardize development workflows across your team:

  1. One Ready-to-Use Skill - Install and use immediately
  2. Complete Implementation Roadmap - Plan for 8 total skills
  3. Team Training Materials - Quick start guides and templates
  4. Measurement Framework - Track impact and ROI

🎯 Quick Start (5 Minutes)

For Team Leads

  1. Read EXECUTIVE_SUMMARY.md (5 minutes)
  2. Review DEVELOPMENT_SKILLS_ROADMAP.md (10 minutes)
  3. Follow QUICK_START_GUIDE.md for setup (15 minutes)
  4. Schedule team training (30 minutes)

For Developers

  1. Install nextjs-module-builder.skill in Claude
  2. Read QUICK_START_GUIDE.md developer section
  3. Try building a simple module with the skill
  4. Provide feedback

📄 Files Included

1. nextjs-module-builder.skill

Status: ✅ Ready to Use
Size: Complete with 2 reference files

Your first standardization skill covering the full module creation workflow:

  • 5-layer architecture (Types → Services → Hooks → Components → Pages)
  • Database patterns with RLS policies
  • Component patterns with Shadcn/UI
  • Complete code examples for all layers

How to use:

1. Open Claude
2. Go to Skills tab
3. Import nextjs-module-builder.skill
4. Ask Claude: "Create a new courses module with CRUD operations"
5. Claude will guide you through the entire process

2. EXECUTIVE_SUMMARY.md

For: Team Leads, Management
Read time: 5 minutes

High-level overview covering:

  • What's delivered
  • Why it matters
  • Expected benefits
  • Implementation timeline
  • ROI projections
  • Next actions

3. DEVELOPMENT_SKILLS_ROADMAP.md

For: Everyone
Read time: 15 minutes

Complete plan for 8 development skills:

  • Phase 1: Database, TypeScript, Services (Weeks 1-2)
  • Phase 2: Hooks, UI Components (Weeks 3-4)
  • Phase 3: Testing, Deployment (Weeks 5-6)

Includes:

  • Detailed skill descriptions
  • Creation priorities
  • Time estimates
  • Usage workflows
  • Success metrics

4. QUICK_START_GUIDE.md

For: All Team Members
Read time: 10 minutes

Practical implementation guide:

  • 15-minute team setup
  • How to use skills effectively
  • Team collaboration patterns
  • Troubleshooting common issues
  • Success story templates

5. SKILL_CREATION_TEMPLATE.md

For: Developers Creating New Skills
Read time: 15 minutes

Step-by-step template for creating the remaining 7 skills:

  • Requirements gathering
  • Skill structure planning
  • Content creation
  • Testing checklist
  • Distribution process

🚀 Implementation Path

Week 1: Foundation

Monday-Tuesday:
├── Install Module Builder skill (all devs)
├── 30-min team training session
└── Assign skill creation owners

Wednesday-Thursday:
├── Build pilot module using skill
├── Track time and quality metrics
└── Gather initial feedback

Friday:
├── Review pilot results
├── Plan Phase 1 skill creation
└── Celebrate early wins

Weeks 2-3: Core Backend Skills

Create Priority Skills:
├── Supabase Database Manager
├── TypeScript Code Standards
└── API Integration & Service Layer

Test with:
├── Real feature development
├── Multiple team members
└── Different use cases

Result:
└── 4 skills covering full backend workflow

Weeks 4-5: Frontend Skills

Create UI Skills:
├── React Hooks & State Management
└── Shadcn/UI Component Library

Test with:
├── UI feature development
├── Form-heavy features
└── Data visualization work

Result:
└── 6 skills covering backend + frontend

Week 6: Quality & Operations

Create Final Skills:
├── Testing & Quality Assurance
└── Deployment & DevOps

Test with:
├── Full feature lifecycle
├── Production deployments
└── CI/CD integration

Result:
└── Complete 8-skill development workflow

📊 Expected Impact

Development Speed

Before Skills:
Module Creation: 7-8 hours
Bug Fixes: Varied
Code Reviews: 3-4 iterations

With Skills:
Module Creation: 4-5 hours (40% faster)
Bug Fixes: Consistent patterns
Code Reviews: 1-2 iterations (50% fewer)

Code Quality

Before:
- Inconsistent patterns
- Variable error handling
- Mixed naming conventions
- Knowledge silos

After:
- 90%+ pattern consistency
- Standard error handling
- Uniform naming
- Shared knowledge base

Team Efficiency

Before:
- "How should I do this?" questions
- Searching for examples
- Reinventing patterns
- Long code reviews

After:
- Clear patterns to follow
- Built-in examples
- Reusable patterns
- Faster reviews

🎓 Training Plan

Initial Training (30 minutes)

Week 1 - All team members

Agenda:

  1. What are Claude Skills? (5 min)
  2. Installing the Module Builder (5 min)
  3. Live demo: Building a module (15 min)
  4. Q&A and next steps (5 min)

Materials:

  • This README
  • nextjs-module-builder.skill
  • QUICK_START_GUIDE.md

Skill Creator Training (60 minutes)

Week 2 - Skill creators

Agenda:

  1. Skill creation process (15 min)
  2. Using the creation template (15 min)
  3. Testing and validation (15 min)
  4. Distribution and maintenance (15 min)

Materials:

  • SKILL_CREATION_TEMPLATE.md
  • /mnt/skills/public/skill-creator/SKILL.md
  • Existing skill examples

Monthly Review (30 minutes)

Ongoing - All team members

Agenda:

  1. Usage metrics review (10 min)
  2. Skill improvements discussion (10 min)
  3. New skill proposals (10 min)

Track:

  • Time savings per skill
  • Quality improvements
  • Developer satisfaction
  • Skill usage frequency

💡 Best Practices

Using Skills Effectively

DO: ✅ Use skills for every relevant task ✅ Follow skill patterns consistently ✅ Provide feedback on skill quality ✅ Update skills with better patterns ✅ Share wins with the team

DON'T: ❌ Skip skills to "save time" ❌ Deviate without good reason ❌ Keep improvements to yourself ❌ Use outdated patterns ❌ Ignore skill recommendations

Maintaining Skills

Monthly Review:

  1. Gather team feedback
  2. Identify pain points
  3. Update problematic patterns
  4. Add new examples
  5. Re-package and distribute

Version Tracking:

v1.0.0 - Initial release
v1.1.0 - Added X pattern
v1.2.0 - Fixed Y issue
v2.0.0 - Major refactor for Z

Change Communication:

📢 Skill Update: nextjs-module-builder v1.1.0

What's New:
- Added optimized query pattern for large datasets
- Updated RLS policies for better performance
- Added troubleshooting section for common errors

Action Required:
- Re-import skill in Claude
- Review new patterns in next module

Questions? Ask in #dev-skills channel

📈 Measuring Success

Week 1 Baseline

Track for reference:

  • Average module creation time
  • Code review iterations
  • Bugs per feature
  • Pattern consistency score

Month 1 Comparison

Measure improvements:

  • Development speed change
  • Code quality change
  • Consistency improvement
  • Developer satisfaction

Quarter 1 Review

Evaluate program:

  • Total time saved
  • Quality metrics trend
  • Team adoption rate
  • ROI calculation

KPIs to Track

Development Speed:

  • Time per module/feature
  • Time per bug fix
  • Code review duration

Code Quality:

  • TypeScript errors per PR
  • Pattern violations per PR
  • Post-deployment bugs

Team Consistency:

  • Pattern compliance %
  • Naming convention adherence
  • Architecture pattern usage

Developer Experience:

  • Onboarding time for new devs
  • "How to" questions frequency
  • Developer satisfaction score

🤝 Team Collaboration

Sharing Improvements

Process:

  1. Discover better pattern
  2. Test thoroughly
  3. Document clearly
  4. Update skill
  5. Share with team

Template:

🎯 Skill Improvement: [Skill Name]

Pattern: [Name]
Issue: [What problem it solves]
Solution: [New approach]
Impact: [Benefits]

Updated Files:
- [File 1]
- [File 2]

Testing: [How it was validated]

Code Reviews with Skills

Reviewer Checklist:

  • Follows skill patterns?
  • Uses correct structure?
  • Has proper error handling?
  • Includes required logging?
  • Applies permissions correctly?

Review Comments:

✅ Good: Follows module builder patterns perfectly
🔄 Suggestion: Use pattern from Section 3.2 of the skill
❌ Issue: Missing error handling per skill guidelines
💡 Tip: Check component-patterns.md reference for this

🆘 Troubleshooting

Skill Not Loading

Symptoms:

  • Claude doesn't use the skill
  • No skill guidance provided

Solutions:

  1. Check skill is installed in Claude
  2. Use trigger words: "module", "CRUD", "feature"
  3. Explicitly say "use the module builder skill"
  4. Verify skill description matches use case

Pattern Doesn't Fit

Symptoms:

  • Skill pattern not applicable
  • Special case not covered

Solutions:

  1. Use skill as foundation
  2. Adapt as needed for your case
  3. Document your adaptation
  4. Propose skill update for future

Script Not Working

Symptoms:

  • Script errors
  • Unexpected behavior

Solutions:

  1. Check Python/Node version
  2. Verify dependencies installed
  3. Review script usage docs
  4. Check file paths are correct

📞 Support

Getting Help

Skill Usage Questions:

  1. Check skill reference files
  2. Review quick start guide
  3. Ask in team channel
  4. Contact skill creator

Skill Creation Questions:

  1. Use creation template
  2. Review existing skills
  3. Read Claude skill creator docs
  4. Pair with experienced creator

Technical Issues:

  1. Check troubleshooting section
  2. Review error messages
  3. Ask in #dev-help channel
  4. Escalate to team lead if needed

Feedback Channels

Skill Improvements:

  • Team channel: #dev-skills
  • Direct to skill creator
  • Monthly review meeting

Bug Reports:

  • Document issue clearly
  • Include reproduction steps
  • Share in team channel
  • Tag skill owner

Feature Requests:

  • Describe use case
  • Explain why needed
  • Propose in monthly review
  • Vote on priorities

🎉 Success Stories

Template for Sharing Wins

🎉 Module Complete Using Skills!

Module: [Name]
Developer: [Name]
Time: [X hours]

Metrics:
├── Previous similar module: [Y hours]
├── Time saved: [Z hours]
├── Code review iterations: [N]
└── Bugs found in QA: [N]

What Went Well:
- [Point 1]
- [Point 2]

Challenges:
- [Point 1] → [How solved]

Tips for Others:
- [Tip 1]
- [Tip 2]

Skill Improvements Suggested:
- [Suggestion 1]

🔄 Continuous Improvement

Monthly Workflow

Week 1:

  • Collect feedback from team
  • Review usage metrics
  • Identify pain points

Week 2:

  • Plan skill updates
  • Prioritize improvements
  • Assign update owners

Week 3:

  • Implement updates
  • Test thoroughly
  • Document changes

Week 4:

  • Package updated skills
  • Distribute to team
  • Communicate changes

Quarterly Review

Quarter End:

  • Comprehensive metrics review
  • Team satisfaction survey
  • ROI calculation
  • Future skill planning

Results:

  • Skills performing well
  • Skills needing work
  • New skills to create
  • Sunset old patterns

📝 Appendix

Skill Naming Conventions

Format: [domain]-[purpose]

Examples:
- nextjs-module-builder
- supabase-database-manager
- typescript-code-standards
- react-hooks-patterns

File Organization

/skills/
├── nextjs-module-builder/
│   ├── SKILL.md
│   ├── scripts/
│   ├── references/
│   └── assets/
├── supabase-database-manager/
│   └── ...
└── dist/
    ├── nextjs-module-builder.skill
    └── supabase-database-manager.skill

Version History

v1.0.0 - October 2025
- Initial release
- Module Builder skill
- Complete roadmap
- Training materials

Ready to Get Started?

  1. Read EXECUTIVE_SUMMARY.md (5 min)
  2. Install nextjs-module-builder.skill
  3. Follow QUICK_START_GUIDE.md
  4. Build your first module with the skill
  5. Share your experience with the team

Questions? Check QUICK_START_GUIDE.md or ask in the team channel!

Let's standardize and accelerate development together! 🚀

Created for MyJKKN development team - October 30, 2025

下载 Skill
nextjs-module-builder - 适用于 Claude Code 与 Cursor 的 AI 智能体 Skill | Agent Skills