A comprehensive skill set for full-stack development tasks, including code formatting, syntax checking, UI design, code review, and test generation.

This skill transforms AI assistants into experienced full-stack developers who follow best practices for code quality, security, and performance. It covers the entire development lifecycle from writing clean code to comprehensive testing.

• Purpose: Format code following best practices
• Tools: black (Python), prettier (JS/TS)
• Trigger: When user asks to format code or clean up code structure

• Purpose: Check code for syntax errors and style violations
• Tools: pylint, flake8 (Python), eslint (JS/TS)
• Trigger: When user asks to check code quality or run linter

• Purpose: Generate polished, responsive UI components
• Standards: Mobile-first, minimalist design, refined interactions
• Trigger: When user asks to create UI components or design interfaces

• Purpose: Review code for bugs, security issues, and performance
• Focus: Code standards, security vulnerabilities, performance optimization
• Trigger: When user asks for code review or before merging

• Purpose: Generate comprehensive test cases
• Coverage: Unit tests, integration tests, edge cases
• Trigger: When user asks to generate tests or test coverage

cd ~/.trae/skills/
git clone https://github.com/YOUR_USERNAME/fullstack-developer-skill.git fullstack-developer

cd your-project/.trae/skills/
git clone https://github.com/YOUR_USERNAME/fullstack-developer-skill.git fullstack-developer

Once installed, the skill will be automatically available in Trae IDE.

# Format all Python files
Format code with black规范

# Check code quality
Run语法检查

# Generate UI component
Create精致化前端UI

# Review code
Review代码安全和性能

# Generate tests
Generate单元测试

Python (black):

# Format single file
black myfile.py

# Format directory
black src/

# Check without modifying
black --check src/

JavaScript/TypeScript (prettier):

# Format single file
prettier --write myfile.js

# Format directory
prettier --write "src/**/*.{js,jsx,ts,tsx}"

# Check without modifying
prettier --check "src/**/*.{js,jsx,ts,tsx}"

Python (pylint, flake8):

# Run pylint
pylint myfile.py

# Run flake8
flake8 src/

# With specific config
flake8 --config=.flake8 src/

JavaScript/TypeScript (eslint):

# Run eslint
eslint src/

# Fix auto-fixable issues
eslint --fix src/

# With specific config
eslint -c .eslintrc.json src/

Design Principles:

• Mobile-first responsive design
• Minimalist and clean aesthetics
• Accessible color contrast
• Smooth micro-interactions
• Performance-optimized components

Technology Stack:

• React / Vue / Svelte
• Tailwind CSS / Styled Components
• Framer Motion for animations
• Responsive breakpoints

Review Checklist:

• Code follows project style guide
• No security vulnerabilities (SQL injection, XSS, etc.)
• Proper error handling
• Performance considerations
• Test coverage
• Documentation updated
• No hardcoded secrets
• Proper logging

Security Focus:

• OWASP Top 10 vulnerabilities
• Input validation
• Authentication/Authorization
• Data encryption
• Dependency vulnerabilities

Test Types:

• Unit tests (functions, classes)
• Integration tests (APIs, databases)
• End-to-end tests (user flows)
• Edge case tests
• Performance tests

Coverage Goals:

• Critical paths: 100%
• Business logic: 80%+
• Utilities: 70%+
• Overall: 75%+

1. Always run code formatting before committing

   # Python
   black .
   
   # JavaScript
   prettier --write .

2. Use syntax check before code review

   # Python
   flake8 .
   
   # JavaScript
   eslint .

3. Generate tests for new functions

   • Write tests for all public methods
   • Include edge cases
   • Test error conditions

4. Review UI designs for mobile compatibility

   • Test on multiple screen sizes
   • Verify touch interactions
   • Check accessibility

5. Check security vulnerabilities in new code

   • Validate all inputs
   • Use parameterized queries
   • Implement proper authentication
   • Avoid exposing sensitive data

fullstack-developer/
├── README.md              # This file
├── SKILL.md               # Skill definition
├── code-formatter.md      # Code formatting guidelines
├── linter-rules.md        # Linting standards
├── ui-design.md           # UI design principles
├── code-review.md         # Review checklist
└── test-guide.md          # Testing guidelines

• superpowers - For TDD, systematic debugging, code review workflows
• product-manager - For PRD writing, requirement analysis
• obsidian-markdown - For documentation with wikilinks

1. Use UI Designer to create component mockup
2. Generate component code with proper styling
3. Run linter to ensure code quality
4. Generate comprehensive tests
5. Run code review
6. Fix any issues found

1. Format all code files
2. Run linter for syntax and style
3. Run code review for security and performance
4. Generate missing tests
5. Verify test coverage

1. Identify the bug location
2. Write failing test case
3. Fix the bug
4. Run linter and formatter
5. Verify test passes
6. Run code review

Contributions are welcome! Please feel free to submit a Pull Request.

This project is licensed under the MIT License - see the LICENSE file for details.

Made with ❤️ for developers who care about code quality