compact-landing

Installation
SKILL.md

Compact Landing

Build a small, finished product world—not a generic marketing template. Preserve compactness and clarity; reinvent the visible design language for each product.

Workflow

  1. Inspect the product, supplied content, current stack, and existing design language. Reuse installed tools and components.
  2. Ask for button size first—compact, medium, or large—unless the user already answered or asked you to choose.
  3. Ask at most two adaptive questions only when their answers would materially change the result. Good subjects: brand mood, content depth, corner character, or motion level.
  4. Create a design fingerprint before coding. If this skill includes scripts and Node is available, run node scripts/pick-direction.mjs. Otherwise choose from references/style-dna.md without taking the first option in every list.
  5. Adapt the fingerprint to product meaning. Treat picker output as a creative constraint, not a command to make incoherent choices.
  6. Identify one product-native signature artifact: a real demo, visualized output, interactive sample, comparison, miniature workflow, data specimen, or useful control. This should create identity more than decoration does.
  7. Implement the smallest complete page. Prefer HTML/CSS and existing dependencies. Add JavaScript only for behavior the page actually needs.
  8. Verify mobile layout, keyboard focus, reduced motion, stable dynamic states, and the real primary action.

If the user wants immediate execution, choose the button size and fingerprint yourself. Do not stop for a questionnaire.

Design Fingerprint

Installs
138
GitHub Stars
17
First Seen
Jun 12, 2026
compact-landing — danilaa1/compact-landing-skill