educlopez/cli/assets/mirrors/cursor/adapt
cli/assets/mirrors/cursor/adapt/SKILL.md
--- name: adapt description: "Responsive layout pass covering breakpoints, touch targets, safe areas, and fluid type. Use when the UI has layout or touch issues on mobile/tablet, when adding a new screen that hasn't been tested across viewports, or when the user says "make it responsive" / "fix mobile layout". Invoke when the user asks for adapt on their UI, or mentions 'adapt' alongside design / UI / frontend work." --- <!-- AUTO-GENERATED. Do not edit here. Source: skills/ui-craft/ + commands
$ install --global
skillsauthnpx skillsauth add educlopez/ui-craft cli/assets/mirrors/cursor/adaptInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 27, 2026, 3:09 AM2.2s1 file scanned
SKILL.md
- name:
- adapt
- description:
- Responsive layout pass covering breakpoints, touch targets, safe areas, and fluid type. Use when the UI has layout or touch issues on mobile/tablet, when adding a new screen that hasn't been tested across viewports, or when the user says "make it responsive" / "fix mobile layout". Invoke when the user asks for adapt on their UI, or mentions 'adapt' alongside design / UI / frontend work.
<!-- AUTO-GENERATED. Do not edit here. Source: skills/ui-craft/ + commands/*.md. Regenerate with `node scripts/sync-harnesses.mjs`. -->
Context: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
Adapt the UI at the target the user described across devices. Load the ui-craft skill and read references/responsive.md.
Work mobile-first. Don't shrink desktop; grow from mobile.
Checklist:
- Breakpoints — use project's existing system (Tailwind:
sm md lg xl; CSS: container queries preferred over media queries for components). No magic widths. - Touch — tap targets ≥ 44×44px (
min-h-11 min-w-11). Touch zones don't overlap.touch-action: manipulationon interactive elements. - Safe areas —
padding-top: env(safe-area-inset-top)etc. on fixed headers/footers/FAB. Check iOS notch and Android gesture bar. - No horizontal scroll at 320px. Test with devtools device mode.
- Fluid type —
clamp(1rem, 0.9rem + 0.5vw, 1.125rem)for body where scale matters; fixed px for small UI text (labels, captions). - Container queries — prefer
@containerover viewport media queries for component-level responsiveness. Components that live in sidebars and main content behave differently at the same viewport width. - Hover-less devices — every hover affordance has a non-hover equivalent.
@media (hover: hover)to scope desktop-only effects. - Density shifts with viewport — honor
VISUAL_DENSITYdifferently per breakpoint:VISUAL_DENSITY ≤ 3→ fewer columns and wider spacing even at desktop widths.VISUAL_DENSITY 8+→ honor dashboard density, but still respect touch/hover distinctions (touch targets stay ≥ 44px on mobile, hover affordances gated behind@media (hover: hover)).- Mobile always trends toward 1 column and wider spacing regardless of the knob value.
- Images —
aspect-ratioset;srcset+sizesfor different viewports;loading="lazy"below the fold;fetchpriority="high"on hero. - Nav pattern — desktop horizontal → mobile collapses (sheet, drawer, or bottom tabs). Never a hamburger on desktop unless the nav has > 7 top-level items.
Output: edit code directly. Print the Review Format table of changes. Flag any responsive bugs you can't fix without more info (missing design for a breakpoint, unclear nav pattern).
Related Skills
educlopez/cli/assets/gemini/skills/redesign
tools
VerifiedTrustedCommunity
--- name: redesign description: "Redesign an existing site or app without losing what already works — audits the current surface first, classifies what to preserve (brand, IA, SEO, content), picks a refresh/reskin/rebuild scope, then modernizes deliberately. Use when the user says "redesign", "modernize this site", "refresh the UI", "make this look current", or points at an existing page/URL they want improved rather than rebuilt from scratch. Invoke when the user asks for redesign on their UI,
215SKILL.mdUpdated Jul 6, 2026
educlopez/cli/assets/gemini/skills/quieter
tools
VerifiedTrustedCommunity
--- name: quieter description: "Tone down visual noise — lowers variance and motion, simplifies layout and color weight, keeps hierarchy clear. Use when the UI feels loud, busy, or over-designed, or when the user says "quieter", "more restrained", "simpler", or "tone it down". Invoke when the user asks for quieter on their UI, or mentions 'quieter' alongside design / UI / frontend work." --- <!-- HARNESS MIRROR — do not edit here. Canonical source: commands/quieter.md. After editing source, cop
215SKILL.mdUpdated Jul 6, 2026
educlopez/cli/assets/gemini/skills/bolder
tools
Community
--- name: bolder description: "Amplify personality — raises layout variance and motion, strengthens typography and one signature detail, without slop. Use when the UI works but feels safe, flat, or "template-y", or when the user says "bolder", "more personality", "more creative", or "make it pop" (still professional). Invoke when the user asks for bolder on their UI, or mentions 'bolder' alongside design / UI / frontend work." --- <!-- HARNESS MIRROR — do not edit here. Canonical source: comman
215SKILL.mdUpdated Jul 6, 2026
educlopez/cli/assets/cursor/skills/redesign
tools
VerifiedTrustedCommunity
--- name: redesign description: "Redesign an existing site or app without losing what already works — audits the current surface first, classifies what to preserve (brand, IA, SEO, content), picks a refresh/reskin/rebuild scope, then modernizes deliberately. Use when the user says "redesign", "modernize this site", "refresh the UI", "make this look current", or points at an existing page/URL they want improved rather than rebuilt from scratch. Invoke when the user asks for redesign on their UI,
215SKILL.mdUpdated Jul 6, 2026