Implement Feature Skill

This skill guides the implementation of new features for the YT Lite v3 project.

Context

• •Project Structure:
  • •Middleware (Backend): webbox/src/middleware/
    • •App Entry: webbox/src/middleware/main.py
    • •Templates: webbox/src/middleware/templates/
    • •Static (CSS/JS): webbox/src/middleware/static/
• •Tech Stack:
  • •Backend: FastAPI
  • •Frontend: HTML5, Vanilla JS, Vanilla CSS (Mobile-first)
  • •Templating: Jinja2

Implementation Workflow

1. Planning

• •Analyze Requirements: Understand the goal (reference docs/PLAN.md if applicable).
• •Design UI/UX:
  • •Mobile First: Design for small screens (iPhone 6 Plus target).
  • •Aesthetics: Use vibrant colors, glassmorphism, and smooth animations.
  • •Dynamic: Use hover effects and micro-animations.
  • •No Placeholders: Use real data or generated realistic assets.

2. Backend Implementation

• •Define Routes: Add necessary endpoints in webbox/src/middleware/main.py or sub-routers.
• •Logic: Implement integration with Invidious or YouTube Data API.
• •Error Handling: Ensure 403/404 errors are handled gracefully (fallback strategies).

3. Frontend Implementation

• •Templates: Create or modify HTML templates in webbox/src/middleware/templates/.
  • •Use semantic HTML5.
  • •Ensure unique IDs for interactive elements.
• •Styles: Add styles to webbox/src/middleware/static/css/.
  • •Use CSS Variables for consistent theming.
  • •Avoid frameworks like Tailwind unless requested; use Vanilla CSS.
• •Interactivity: Add logic to webbox/src/middleware/static/js/.
  • •Keep it lightweight (Vanilla JS).
  • •Handle loading states and errors visually.

4. Verification

• •Test: Verify the feature works as expected.
• •Review: Check against the "Design Aesthetics" requirements.