flex-grid-flow
CommunityBuild fluid, responsive interfaces effortlessly.
Design & Creative#responsive design#design system#css#tailwind#scss#fluid typography#layout patterns
Authoroerlellijk
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides a comprehensive framework-agnostic approach to designing and implementing fluid, responsive user interfaces, moving beyond basic CSS to a more robust and mathematical system.
Core Features & Use Cases
- Fluid Typography & Spacing: Generates mathematically sound fluid scales for text and spacing using CSS
clamp(). - Layout Philosophy: Offers guidance on when to use Grid vs. Flexbox, and presents various layout patterns.
- Adaptive Colors: Introduces transparency-based color tokens that adapt to any background.
- Hard Rules: Enforces non-negotiable best practices like logical properties and 1:1 icon containers.
- Use Case: A developer can use this Skill to quickly establish a consistent and scalable design system for a new web application, ensuring fluid typography and spacing that adapts gracefully across all devices.
Quick Start
Use the flex-grid-flow skill to generate fluid type scale calculations for a base font size of 16px with a major third ratio.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferencesassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: flex-grid-flow Download link: https://github.com/oerlellijk/design-system-skill/archive/main.zip#flex-grid-flow Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.