# Responsive Design

> Maintain and implement the responsive design architecture for AiDocs. Use this skill when building or refactoring components to ensure cross-device compatibility, consistent glassmorphism effects, and adherence to the three-tier styling system.

- Skill: `konete326/responsive-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add konete326/responsive-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/konete326/responsive-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Konete326 (https://skillmd.com/u/konete326)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/konete326/responsive-design

---


# Responsive Design Implementation Guide

This skill ensures AiDocs remains a high-performance, visually stunning platform across all screen sizes. It maps the integration of Tailwind CSS v4, custom glassmorphism styles, and adaptive component patterns.

## 1. Styling Architecture (Three-Tier System)

All components must adhere to this hierarchy to maintain the "Liquid Glass" aesthetic while ensuring performance:

1.  **Tailwind CSS v4 (Base Utilities)**: Used for layout, spacing, and responsive breakpoints (`sm:`, `md:`, `lg:`, `xl:`).
2.  **Custom CSS (Glass Effects)**: Global classes defined in `glass.css` (`.liquid-glass`, `.liquid-glass-strong`) for consistent backdrop filters and borders.
3.  **Theme Variables**: Standardized colors and typography tokens defined in `index.css`.

## 2. Core Layout Patterns

### Home Page Transformation
- **Hero Section**: `flex flex-col lg:flex-row`
  - Mobile: Vertical stack, content centered.
  - Desktop: Side-by-side (LeftPanel/RightPanel).
- **Testimonials**: Conditional rendering strategy.
  - Mobile: Flat marquee (2 columns), no 3D tilt (saves mobile GPU).
  - Desktop: 3D tilt marquee (3 columns) with interactive hover reveal for CTA.

### Dashboard Adaptation
- **Project Grid**: 
  - Mobile: `grid-cols-1` (single column list).
  - Desktop: `grid-cols-2` or `grid-cols-3` depending on screen width.
- **Glass Cards**: Fixed height/aspect ratio for consistency.

## 3. Responsive Component Patterns

### Mobile Navigation (AppNavbar)
- **Strategy**: Logo left, hamburger right.
- **Overlay**: Full-screen `liquid-glass-strong` menu with `AnimatePresence`.
- **Interactions**: Closes automatically on route change.

### Wizard & Modals
- **Paddings**: `p-6` (mobile) to `p-10` (desktop).
- **Widths**: `w-full` (mobile) to `max-w-2xl` (desktop).
- **Progress Trackers**: Scale dots or simplify for small screens.

### Workspace (Kanban)
- **Scroll Strategy**: `overflow-x-auto` on the board container.
- **Column Width**: Min-width fixed (e.g., `w-80`) to ensure items don't squash.

## 4. Best Practices for New Features

- **Mobile-First**: Always define the mobile layout first, then add `md:` and `lg:` overrides.
- **GPU Optimization**: Avoid heavy `backdrop-filter` or 3D transforms on mobile screens.
- **Touch Targets**: Ensure interactive elements (buttons, links) have a minimum size of `44x44px` for touch accuracy.
- **Typography Scaling**: Use fluid font sizes or responsive utility classes (`text-sm` -> `md:text-base`).

---
*Reference: [Responsive Map v1.0] verified via implementation review.*