Expert guide for DNNE-UI-Frontend Vue.js development. Provides architecture guidance, coding patterns, and best practices for the visual neural network editor.
This skill has safety concerns that you should review before use. Some patterns were detected that may pose a risk.Safety score: 60/100.
KillerSkills scans all public content for safety. Use caution before installing or executing flagged content.
Expert assistant for DNNE-UI-Frontend development, a Vue.js frontend for DNNE (Drag and Drop Neural Network Environment) - a visual programming environment for building neural networks and robotics control systems.
This is the frontend interface for DNNE, providing a visual graph editor where users drag and drop nodes to create ML/robotics workflows. The project is based on a ComfyUI fork with custom DNNE features.
**Technology Stack:**
**Repository:** asantanna/DNNE-UI-Frontend
When working on this codebase, follow these principles:
1. **Vue 3 Composition API Only**
- Use Composition API pattern, NOT Options API
- Leverage `<script setup>` syntax for cleaner components
- Use composables for shared logic
2. **TypeScript First**
- All components must use TypeScript
- Define proper types and interfaces
- Avoid `any` types - use proper type inference
3. **Styling with Tailwind CSS**
- Use Tailwind utility classes instead of custom CSS
- Follow PrimeVue component styling patterns
- Maintain consistent spacing and color schemes
4. **Component Architecture**
- Keep components focused and single-purpose
- Use PrimeVue components for UI elements
- Maintain clean public APIs for extensibility
- Follow Vue 3 best practices for reactivity
5. **Internationalization**
- Use vue-i18n for all user-facing text
- Add new translation keys as needed
- Support multiple languages consistently
The frontend provides:
```bash
npm run dev # Start development server
npm run build # Build for production
npm run typecheck # TypeScript type checking
npm run lint # ESLint code linting
npm run format # Prettier code formatting
```
When assisting with DNNE-UI-Frontend development:
1. **Before Making Changes**
- Read relevant component files to understand current implementation
- Check for existing patterns and conventions in the codebase
- Verify TypeScript types are properly defined
2. **Code Generation**
- Use Vue 3 Composition API with `<script setup>` syntax
- Include proper TypeScript typing for props, emits, and reactive state
- Use Tailwind CSS classes for styling
- Leverage PrimeVue components when appropriate
- Add vue-i18n translation keys for any user-facing text
3. **Component Structure Pattern**
```vue
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import type { ComponentProps } from './types'
// Props and emits with TypeScript
const props = defineProps<ComponentProps>()
const emit = defineEmits<{
update: [value: string]
}>()
// Reactive state
const state = ref<StateType>()
// Computed properties
const derivedValue = computed(() => /* ... */)
// Lifecycle hooks
onMounted(() => {
// Initialization logic
})
</script>
<template>
<div class="flex flex-col gap-4 p-4">
<!-- Tailwind-styled template -->
</div>
</template>
```
4. **Backend Integration**
- Understand that this frontend connects to DNNE-UI backend
- API calls should handle loading and error states
- Use proper TypeScript types for API responses
5. **Testing Considerations**
- Ensure TypeScript compilation succeeds (`npm run typecheck`)
- Verify linting passes (`npm run lint`)
- Test component reactivity and state management
- Check cross-browser compatibility for visual editor features
6. **Documentation**
- Add JSDoc comments for complex functions
- Document component props and emits
- Update comments when modifying existing code
- Reference the main CLAUDE.md in DNNE-UI backend for system architecture
**Adding a new component:**
1. Create component file with TypeScript and Composition API
2. Define proper TypeScript interfaces for props/emits
3. Use Tailwind CSS for styling
4. Add i18n keys if needed
5. Export component and use in parent components
**Modifying the node editor:**
1. Review existing node implementation patterns
2. Understand the DNNE combo widget system
3. Test drag-and-drop functionality thoroughly
4. Ensure type safety for node connections
**Integrating new features:**
1. Check for existing similar patterns in codebase
2. Follow the established architecture
3. Maintain extensibility through clean APIs
4. Document new features and their usage
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/dnne-frontend-developer/raw