How do I install the Responsive Design skill?

Run npx skillmds@latest add konete326/responsive-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Responsive Design safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Responsive Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Responsive Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Responsive Design?

Konete326 (@konete326) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Responsive Design by konete326 — Agent Skill

Name: Responsive Design
Author: Konete326

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.

Konete326 0cb00ed 2.8 KB Updated Sep 17, 2026

File contents

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:

Tailwind CSS v4 (Base Utilities): Used for layout, spacing, and responsive breakpoints (sm:, md:, lg:, xl:).
Custom CSS (Glass Effects): Global classes defined in glass.css (.liquid-glass, .liquid-glass-strong) for consistent backdrop filters and borders.
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.

---name: responsive-designdescription: 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.---# Responsive Design Implementation GuideThis 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.*

Frequently asked questions