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.