landing-page-agency
Build and refine this agency product landing page using the project's brand system, design references, and approved copy. Use this skill whenever working on layout, sections, components, styling, motion, visual hierarchy, conversion-focused structure, or implementation decisions for this landing page.
Resources
4Install
npx skillscat add erickfilho1/lp Install via the SkillsCat registry.
SKILL.md
Landing Page Workflow
Read references/design-system.md before writing or changing UI code.
Read references/reference-intake.md when the user shares inspiration sites, screenshots, or notes about visual direction.
Read references/copy-intake.md when the user shares messaging, offer details, objections, CTAs, or section copy.
Workflow
- Extract the page goal, audience, offer, and primary CTA before choosing a layout.
- Apply the design system tokens and interaction rules from the design-system reference.
- Use references to capture structure, rhythm, and presentation patterns without cloning another site's design.
- Favor intentional asymmetry, strong typography, and clear whitespace over generic centered layouts.
- Keep the implementation mobile-first and leave room for future Figma assets when the user wants to supply them later.
Output rules
- Use Raleway for headings and Roboto Flex for body copy.
- Use CSS custom properties for the brand tokens instead of hardcoded repeated values.
- Keep animations purposeful, brief, and based on opacity plus translate motion.
- Preserve a clear visual hierarchy with one dominant CTA per section.
- Avoid gradients, oversized radii, decorative icons, and generic SaaS patterns that conflict with the brand.