top-design

Malicious tool definition detected

Tool: SKILL.md [1/6] Description: --- name: top-design description: 'Award-winning web design framework inspired by elite agencies (Locomotive, Studio Freight, AREA 17).

Tool: SKILL.md [2/6] Description: with weight animation on hover | Studio Freight interactive type | | Product landing | Tight display tracking with generous body spacing | Apple product pages | | Editorial layout | Serif/sans pairing with extreme scale contrast | AREA 17 case studies | | Cultural institution | Statement typography that becomes the visual identity | Hello Monday museum sites | | Tech startup | Premium geometric sans at architectural scale | Stripe typography system | **Copy patt

Tool: SKILL.md [3/6] Description: prevent users from accessing content. Always respect `prefers-reduced-motion` and ensure all content is accessible without animation.

Tool: SKILL.md [4/6] Description: making performance a first-class design decision: choosing GPU-accelerated properties, subsetting fonts, optimizing images, and testing on real devices. **Key insights:** - **Fonts must be subset and preloaded** -- only include the glyphs you need, use `font-display: swap` or `optional`, and preload critical font files - **Images must be optimized** -- use WebP/AVIF with fallbacks, implement responsive `srcset`, and lazy-load below-the-fold images - **Animations

Tool: SKILL.md [5/6] Description: devices** -- simulators lie about performance and feel 5.

Tool: SKILL.md [6/6] Description: [Grid Systems in Graphic Design](https://www.amazon.com/Grid-Systems-Graphic-Design-Communication/dp/3721201450?tag=wondelai00-20) by Josef Muller-Brockmann -- the definitive work on grid-based composition, proportional systems, and the mathematical foundations of visual layout - [The Elements of Typographic Style](https://www.amazon.com/Elements-Typographic-Style-Version-4-0/dp/0881792128?tag=wondelai00-20) by Robert Bringhurst -- the typographer's bible coveri

Malicious tool definition detected

Tool: references/animation-patterns.md [1/2] Description: # Animation Patterns Reference ## Table of Contents 1.

Tool: references/animation-patterns.md [2/2] Description: 3D tilt card */ .tilt-card { transform-style: preserve-3d; transition: transform 0.5s var(--ease-out-expo); } .tilt-card:hover { transform: perspective(1000px) rotateX(5deg) rotateY(-5deg); } .tilt-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(255,255,255,0.1) 0%, transparent 50% ); opacity: 0; transition: opacity 0.3s; } .tilt-card:hover::before { opacity: 1; } ``` --- ## 5.

Malicious tool definition detected

Tool: references/case-studies.md [1/2] Description: # Case Studies: Agency Technique Analysis ## Table of Contents 1.

Tool: references/case-studies.md [2/2] Description: :root { --tonik-bg: #0a0a0a; --tonik-surface: #141414; --tonik-border: rgba(255,255,255,0.1); --tonik-accent: linear-gradient(135deg, #6366f1, #8b5cf6); } .tonik-card { background: var(--tonik-surface); border: 1px solid var(--tonik-border); border-radius: 1rem; padding: 2rem; transition: all 0.3s ease; } .tonik-card:hover { border-color: rgba(99, 102, 241, 0.5); transform: translateY(-4px); } .tonik-gradient-text { background: var(--tonik-acce

Malicious tool definition detected

Tool: references/layout-systems.md [1/2] Description: # Layout Systems Reference ## Table of Contents 1.

Tool: references/layout-systems.md [2/2]

Malicious tool definition detected

Tool: references/technical-stack.md [1/2] Description: # Technical Stack Reference ## Table of Contents 1.

Tool: references/technical-stack.md [2/2]

Malicious tool definition detected

Tool: references/typography.md [1/2] Description: # Typography Reference ## Table of Contents 1.

Tool: references/typography.md [2/2]