# Compact Landing > Apply a compact tactile UI style system for narrow product pages, package demos, developer-tool landing pages, documentation intros, and polished micro-SaaS pages. Use when an interface should feel precise, quiet, dense, and premium: centered compact layouts, tiny monospace metadata, neutral-white surfaces, width-stable animated labels, hairline separators, small tactile controls, subtle depth, restrained CSS motion, and a simple but distinct composition per page. - Skill: `masih-0x3/compact-landing` (Agent Skill, multi-file: 3 files) - Install (CLI): `npx skillmds@latest add masih-0x3/compact-landing` - Raw SKILL.md: https://api.skillmd.com/api/skills/masih-0x3/compact-landing/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: Masih-0x3 (https://skillmd.com/u/masih-0x3) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/masih-0x3/compact-landing --- # Compact Landing Use this skill to build compact, tactile, premium landing pages with precision UI density. It is portable across models and stacks: treat it as a visual-system recipe, not a dependency on one repo. ## Preflight Before implementing, ask the user these questions unless they already answered them or explicitly told you to choose defaults: 1. What product is the page for, and what is the primary CTA? 2. Which compact layout should lead: Instrument, Console, Ledger, Workbench, or Manual? 3. What theme direction fits best: neutral-light, soft-dark, editorial-white, or product-tinted? 4. Should corners feel sharp, balanced, or softly rounded? 5. Should the page use load transitions: none, subtle fade-in/out, or staggered fade/slide? 6. How much content is needed: CTA-only, concise proof, or compact product walkthrough? If the user wants you to proceed without answering, use these defaults: Instrument layout, neutral-light theme, balanced small radii, subtle staggered fade on load, one clear CTA, one proof row group, one install/action block, and one compact detail/code section. ## Style Model Create a page that feels like a small, finished instrument: - Use a compact composition, not a wide marketing layout. - Keep the primary CTA visible early and repeat it only when it reduces friction. - Use restrained neutral-white surfaces with zinc ink and tiny green/amber status accents. - Let spacing do most hierarchy work; avoid hero drama, gradients as decoration, big cards, badges, or feature grids. - Make every interactive element feel tactile through tiny scale-on-press, shadow depth, and stable label widths. - Favor mono metadata, command fields, segmented controls, code cards, rows, and live micro-demos. When exact values matter, read `references/style-dna.md`. Use those values as defaults, then adapt only when the product context requires it. ## Build Rules 1. Page shell: center content with `display: grid; place-items: center; min-height: 100dvh; overflow-x: clip`. 2. Main column: use `max-width: 440px`, `width: 100%`, `padding: 56px 24px`; on mobile use `36px 18px 44px`. 3. Type: use `Geist` for UI, `Geist Mono` for metadata/code; base `14px/1.5`; global tracking `-0.01em`. 4. Palette: use off-black zinc ink, muted zinc secondary text, white surfaces, 7% black hairlines, green success, amber busy. 5. Depth: use layered shadow rings plus subtle inset highlight instead of visible borders on controls/cards. 6. Radius: keep small and precise: `6px` controls, `9px` command fields, `10px` code cards. Avoid pill-heavy UI except true status dots. 7. Layout rhythm: header margin `6px`, tagline margin `36px`, demo rows `52px` tall, section gaps `36-44px`, usage head gap `12px`, footer margin `44px`. 8. Motion: use `cubic-bezier(0.2, 0, 0, 1)`, 120ms press transforms, 220-300ms fades, 600ms page entrance staggered by 90ms. 9. Label stability: lock animated label widths to the widest state so text rolls never shift layout. 10. Microinteractions: active buttons scale to `0.96`; wider command controls scale to `0.98`; icon swaps animate opacity, scale `0.25 -> 1`, blur `4px -> 0`. 11. Rows: use hairline separators and right-aligned controls; do not box every row. 12. Code: small mono card with translucent white surface, `blur(8px)`, `12.5px/1.7`, syntax accent only for keywords/strings. 13. CTA clarity: use one primary action verb, one supporting action at most, and never bury the CTA below a long explanation. 14. Information density: include only what helps a visitor decide or act: product name, plain promise, one proof/preview area, CTA/action block, and concise details. ## Variation Rules Every page should look related to this system but not cloned from prior outputs. Before designing, choose one composition variant and make it visible in the first screen: - **Instrument**: header, tagline, live rows, install command, compact usage code. - **Console**: command field first, then short promise, tabs, logs, and one tiny action row. - **Ledger**: stacked hairline rows with status dots, command field embedded between row groups, code below. - **Workbench**: compact two-zone layout inside the same narrow column: controls above, output/code below. - **Manual**: dense title block, install command, concise steps, one live preview row. Vary at least three details per generation: section order, row count, command placement, tab labels, micro-demo type, accent token, icon set, footer links, or copy rhythm. Keep the same compact constraints: narrow page, quiet type, small controls, hairlines, stable animated labels, restrained motion, and no generic feature grid. ## Cross-Model Use If the host model cannot load bundled references, copy the tokens and measurements from this `SKILL.md` first, then optionally paste `references/style-dna.md` for full precision. If the target stack lacks CSS anchor positioning, use a simple active-tab background fallback. If it lacks Geist, use a clean geometric sans plus a true monospace. If JavaScript is not available, keep labels fixed-width with CSS `min-width` values. ## Avoid - Wide SaaS hero sections, large display headings, centered slogan stacks, three-card feature rows. - Oversized radii, neon glow, colored gradient backgrounds, purple-blue AI styling, emojis. - Thick borders where a shadow ring should define the surface. - Layout shifts during text animation or number changes. - Heavy dependencies for simple motion; use CSS transforms and opacity first. ## Review Checklist - Preflight questions were asked or the user explicitly accepted defaults. - Primary CTA is clear in the first viewport and repeated only if useful. - Column remains compact at desktop and mobile widths. - The first screen clearly uses one chosen variation rather than the default sample structure. - Text hierarchy is quiet: `h1` around 17px, section labels around 13px, row labels around 12px mono. - All numbers use tabular numerals. - Controls have at least tactile feedback and no `transition: all`. - Section spacing uses the tight rhythm from this skill, not generic landing-page spacing. - Animated labels are width-locked before state changes. - Reduced motion preserves usability.