responsive-breakpoint-strategy
Skill4 starsChanged 2 months agoMITView on GitHub
Define the breakpoint system and grid strategy for cross-device layouts. Use when setting up responsive design, breakpoints, mobile-first layout, fluid grid, or container queries.
In this repository46 other files it gives its agents.
- accessibility-reviewSkill
- accessibility-runtime-auditSkill
- adaptive-component-behaviorSkill
- ai-feature-ux-patternsSkill
- behavioral-pricing-psychologySkill
- business-model-readingSkill
- business-model-thinkingSkill
- cognitive-load-heatmap-predictionSkill
- component-style-guideSkill
- cross-functional-reviewSkill
- dark-mode-theming-systemSkill
- dashboard-layout-patternsSkill
- dashboard-scaffolding-contractSkill
- design-drift-detectorSkill
- design-system-builderSkill
- design-to-code-handoffSkill
- design-tokensSkill
- error-boundary-resilience-designSkill
- flow-based-functional-testingSkill
- growth-impact-reviewSkill
- i18n-localization-strategySkill
- information-architectureSkill
- interactive-element-auditSkill
- kinematic-motion-choreographySkill
- micro-interaction-motion-designSkill
- module-registry-syncSkill
- mvp-scopingSkill
- perceived-performance-loadingSkill
- prd-traceability-matrixSkill
- product-discoverySkill
- product-strategySkill
- project-health-diagnosticsSkill
- qa-feedback-loop-orchestratorSkill
- responsive-qa-auditSkill
- route-integrity-checkerSkill
- security-privacy-reviewSkill
- stakeholder-requirement-mappingSkill
- touch-gesture-interactionSkill
- typography-systemSkill
- usability-heuristics-checkSkill
- user-flow-mappingSkill
- user-research-synthesisSkill
- ux-chaos-monkeySkill
- visual-hierarchy-reviewSkill
- visual-responsive-regression-testingSkill
- visual-style-extractorSkill
The file
We split this skill into the rules it gives an agent
3 rules. About 0 are common, 2 are distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈2
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 19
Document which breakpoints are "content breakpoints" (layout changes) vs "fine-tune breakpoints" (minor adjustments).
- Very specific: line 28
Add breakpoints to design-tokens output (bp-* token set).
- Distinctive: line 34
Every breakpoint has a name, value, and documented purpose
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
A breakpoint is a contract, not a guess. Define it once, reference it everywhere — never hard-code a pixel value that already has a token.
1. Choose the layout approach
Mobile-first (default, recommended) or desktop-first (only for admin-heavy tools where mobile is explicitly secondary). Document the choice and its rationale.
2. Define the breakpoint scale
Standard 5-point system:
bp-xs: < 480px (small phones)bp-sm: 480px (phones, landscape)bp-md: 768px (tablets, portrait)bp-lg: 1024px (tablets landscape, small laptops)bp-xl: 1280px (desktops)bp-2xl: 1536px (large desktops, widescreen) Document which breakpoints are "content breakpoints" (layout changes) vs "fine-tune breakpoints" (minor adjustments).
3. Define the grid system
Columns per breakpoint (e.g., 4-col mobile, 8-col tablet, 12-col desktop), gutter size (token reference), max-content-width. Use CSS Grid or framework equivalent.
4. Evaluate container queries
For components that need to adapt based on their container width (not the viewport), flag them for container query usage. These are components that appear in multiple layout contexts (e.g., a card that appears in a sidebar AND in a main grid).
5. Output the breakpoint token file
Add breakpoints to design-tokens output (bp-* token set). Provide CSS custom properties + framework config (Tailwind, CSS-in-JS, or native CSS as appropriate to the project).
6. Document the decision
Which breakpoints trigger layout changes vs style adjustments. This feeds into adaptive-component-behavior.
Completion Criteria
- Every breakpoint has a name, value, and documented purpose
- Grid system defined for all breakpoints
- Breakpoints added to design-tokens
- Container query candidates identified
- mobile-first vs desktop-first decision documented
Output
Breakpoint token set (JSON) + grid spec + CSS custom properties block + framework config.
Anti-patterns
- Defining breakpoints by device name ("iPhone breakpoint") instead of content needs
- Hardcoding pixel values in components that should reference
bp-*tokens - Adding a breakpoint for every pixel difference — 5–6 breakpoints is almost always enough
- Forgetting to handle the space between breakpoints (the "in-between" states)
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.