From 43796c994e5be16c8d26efba053ddf58bf5ce82a Mon Sep 17 00:00:00 2001 From: k-j-kim Date: Thu, 2 Apr 2026 17:00:56 -0700 Subject: [PATCH] fix: require mobile-responsive UI in building-ui-bundle-frontend skill --- skills/building-ui-bundle-frontend/SKILL.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/skills/building-ui-bundle-frontend/SKILL.md b/skills/building-ui-bundle-frontend/SKILL.md index 826f971..372da9c 100644 --- a/skills/building-ui-bundle-frontend/SKILL.md +++ b/skills/building-ui-bundle-frontend/SKILL.md @@ -94,6 +94,8 @@ Choose a clear conceptual direction and execute it with precision. Bold maximali - **Spatial Composition:** Unexpected layouts — asymmetry, overlap, diagonal flow, grid-breaking elements. Generous negative space OR controlled density. - **Backgrounds & Depth:** Create atmosphere rather than defaulting to solid colors. Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, grain overlays. +- **Mobile Responsiveness:** All generated UI MUST be mobile-responsive. Use Tailwind responsive prefixes (`sm:`, `md:`, `lg:`) to adapt layouts across breakpoints. Stack columns on small screens, use flexible grids, and ensure touch targets are at least 44px. Test that navigation, typography, and spacing work on mobile viewports. + Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate animations and effects. Minimalist designs need restraint, precision, and careful spacing/typography. No two designs should look the same — vary themes, fonts, and aesthetics across generations. ---