Modular development approach for cosmic fantasy website. Emphasizes clean architecture, functional programming, product manager collaboration, and maintainable code for mystical portfolio site.
A comprehensive development framework for building high-quality, maintainable code with excellent product manager collaboration. Originally created for the Elyndra Voss cosmic fantasy website (Next.js portfolio for the Echo Warden of the Aetherweft), but applicable to any development project.
This skill guides you to write production-grade code that balances technical excellence with business value. It emphasizes modular architecture, functional programming patterns, comprehensive testing, and clear communication with non-technical stakeholders.
When following these guidelines, you should:
**Before writing any code:**
**Example structure:**
```
component/
├── logic/ # Pure business logic
├── ui/ # Presentation components
├── types/ # TypeScript interfaces
└── tests/ # Unit and integration tests
```
**Data transformation:**
**Example pattern:**
```typescript
// Instead of mutation
const processData = (data) => {
return data
.filter(item => item.isValid)
.map(item => transform(item))
.reduce((acc, item) => merge(acc, item), {});
}
```
**Always implement:**
**Example error handling:**
```typescript
try {
const result = await operation();
return { success: true, data: result };
} catch (error) {
logger.error('Operation failed', { error, context });
return { success: false, error: error.message };
}
```
**When discussing technical topics:**
**When suggesting improvements:**
- Performance optimizations
- UX enhancements
- Technical debt reduction
- Security improvements
- Scalability preparations
**For each feature:**
1. **Understand**: Clarify requirements and success metrics
2. **Design**: Propose modular architecture with clear interfaces
3. **Implement**: Build in small, testable increments
4. **Validate**: Test functionality and gather feedback
5. **Refine**: Iterate based on feedback and monitoring
6. **Scale**: Prepare for growth and future requirements
**Communication efficiency:**
**Tool usage:**
**Planning:**
**Implementation:**
**Validation:**
**Always:**
**Before optimizing:**
**Code standards:**
**User:** "Add a mystical gallery section with image filtering"
**AI Agent Response:**
```
I'll implement this feature following our modular guidelines:
1. Design Phase:
- Gallery component (presentation)
- Filter logic (pure functions)
- Image data types (TypeScript interfaces)
- Loading states and error handling
2. Implementation Plan:
components/
gallery/
├── GalleryGrid.tsx # UI presentation
├── useGalleryFilter.ts # Filter logic hook
├── types.ts # Image & filter types
└── __tests__/ # Component tests
3. Business Value:
- Users can explore cosmic artwork by theme
- Faster page loads through lazy loading
- Improved SEO through structured data
4. Estimated Effort:
- Core implementation: 3-4 hours
- Testing & refinement: 1-2 hours
- Documentation: 30 minutes
Would you like me to proceed with this approach?
```
**Code Quality:**
**Collaboration:**
**System Performance:**
1. **Modularity First**: Single-responsibility, composable components
2. **Functional Approach**: Immutable data, pure functions, explicit errors
3. **No Shortcuts**: Comprehensive testing, error handling, documentation
4. **Business Focus**: Frame technical decisions in business value
5. **Continuous Improvement**: Proactively suggest optimizations
6. **Security First**: Validate inputs, protect secrets, least privilege
7. **Token Efficiency**: Concise communication, batched operations
8. **Maintainability**: Clear code, meaningful names, testable design
Remember: You're not just writing code—you're enabling business success through technical excellence.
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/elyndra-voss-website-guidelines/raw