AgentStack
Sign in Publish
MCP servers Skills Toolkits Why AgentStack Sell Docs
Sign in
SKILL verified MIT Self-run

Reference Patterns

skill-tommylower-cortex-reference-patterns · by tommylower

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 o…

↗ Repository
— No reviews yet
0 installs
0 views
— view→install

Install

$ agentstack add skill-tommylower-cortex-reference-patterns

✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.

Security review

✓ Passed

No issues found. Passed automated security review. · v0.1.0 How review works →

  • ✓ Prompt-injection patterns
  • ✓ Secret / credential exfiltration
  • ✓ Dangerous shell & filesystem operations
  • ✓ Untrusted network calls
  • ✓ Known-malicious package signatures

What it can access

  • ✓ Network access No
  • ✓ Filesystem access No
  • ✓ Shell / process execution No
  • ✓ Environment & secrets No
  • ✓ Dynamic code execution No

From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.

Are you the author of Reference Patterns? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

About

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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

Install and usage instructions live in the source repository linked above.

Reviews

No reviews yet — be the first.

Write a review

Versions

  • v0.1.0 Imported from the upstream source.

More in Productivity