agentsclimarketplace

Reference patterns

Skill tommylower/cortex/design/foundations/reference-patterns

Public skill library, workflows, tools, and references for AI-assisted development.

Install
npx -y skills add tommylower/cortex --skill reference-patterns

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Curated design patterns from high-quality reference sites (Linear, Vercel, Lovable, and others): hero layouts, feature sections, navigation styles, motion timing, card treatments, typography hierarchy, and color usage. Use when the user wants inspiration for a section, asks 'how does Linear/Vercel do X', is building a marketing page and needs proven layouts, or wants to match the visual quality of best-in-class SaaS sites. Triggers: linear style, vercel style, reference site, inspiration, how does X do this, like linear, like vercel, marketing page patterns, hero layout.

SKILL.md

3.2 KB, as published. Nobody here has run it

Reference Site Patterns

Design patterns from high-quality reference sites. Use these as guidance for layout, interaction, and visual quality.

Linear (linear.app)

What makes it good

  • Monochromatic dark theme with precise accent colors
  • Extremely tight spacing consistency
  • Subtle gradient glows behind key elements
  • Animations are fast (150-300ms), never decorative
  • Typography is clean with clear hierarchy — minimal font sizes
  • Cards have subtle borders, not heavy shadows

Patterns to reference

  • Hero: large headline + short subhead + single CTA + subtle background glow
  • Feature sections: alternating left/right layouts with small preview images
  • Navigation: minimal, fixed, blurs on scroll
  • Motion: fade-up on scroll (200ms), staggered children (50ms delay between items)

Vercel (vercel.com)

What makes it good

  • Black/white with surgical precision
  • Code-like aesthetic — monospace accents, terminal references
  • Extremely fast page loads (practices what it preaches)
  • Interactive demos embedded in marketing pages
  • Grid-based layouts with mathematical spacing

Patterns to reference

  • Hero: bold statement + interactive demo or code snippet
  • Trust bar: logos in grayscale, subtle separator
  • Feature grid: icon + title + short description, 3-column
  • Pricing: clean cards, feature comparison table, FAQ below
  • Motion: smooth page transitions, parallax on scroll (subtle)

Lovable (lovable.dev)

What makes it good

  • Warm gradient backgrounds (pink/purple) create emotional tone
  • Embedded product experience in the hero (visitors interact immediately)
  • Community/social proof feels real, not staged
  • Blog feels like a publication, not a corporate afterthought
  • Pricing is transparent and respects user agency ("start free, upgrade as needed")

Patterns to reference

  • Hero: headline + embedded product input/demo
  • Social proof: real usage examples, community section
  • Blog: editorial layout, category nav, visual thumbnails with gradient overlays
  • Pricing: practical headline, tier cards, FAQ accordion, credibility closer
  • Trust center: security commitment, certifications, subprocessor directory, FAQs

General Rules Across All References

  • Animations serve function (directing attention, confirming interaction, revealing content) — never decorative
  • Dark themes use subtle borders and glows instead of heavy shadows
  • Section transitions use spacing and subtle background color shifts, not divider lines
  • CTAs are visually distinct but not aggressive — confident, not desperate
  • Navigation is minimal and fixed with blur/transparency on scroll
  • Footer is information-dense but well-organized

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.