Premium SaaS Web Skill: Landing Pages With Sculpted Glow

What is the premium-saas-web skill?

It is an agent skill that builds SaaS, AI-product, agency and portfolio landing pages aimed at the look of a top-selling template rather than generic output. Its SKILL.md was distilled by measuring the CSS of six reference sites at pixel level, not guessed.

The skill loads automatically for a landing page, homepage, pricing page, waitlist or portfolio request for a SaaS, AI, tech or agency brand, and can also redesign an existing page to look higher-end.

Four layers of finish

• Light: glows sculpted from blurred shapes, a top-left sheen on cards, hairline borders at 6 to 20 percent opacity.
• Restraint: one accent color used on roughly 5 percent of the page, hierarchy from opacity steps of one color, two fonts at most.
• Typography with tension: big display type at negative letter-spacing, with half a headline often dimmed so the eye reads the strong half first.
• Motion with weight: smooth scroll, word-by-word reveals, scroll-fill text, rolling counters and marquees that respect reduced motion.

Five design directions

• Ember Dark: navy-black base, sculpted orange or blue glow, rainbow-border CTA, the default for AI and dev tools.
• Tactile Light: zinc surfaces, glossy press-able buttons, one hot accent, for agencies and B2B SaaS.
• Editorial Mono: near-black on off-white, 140px tracked-in grotesk type, hairline grid, no shadows.
• Noir Spotlight: pure black with one neon accent and a giant name crossing a photo, for portfolios.
• Warm Playful: warm paper tones with handwritten notes, for desktop or indie utility apps.

A ten-section page rhythm

A typical build alternates density and tone across a hero with the product shown, a logo marquee, a bento feature grid, a scroll-fill statement, rolling-counter stats, a how-it-works block, testimonials only if supplied, three-tier pricing, an FAQ and a final CTA.

Who the premium-saas-web skill is for

Best for

• SaaS, AI-product, agency or portfolio landing pages that need to read as a paid template rather than a free theme.
• Short one-line prompts with no style brief, since the skill picks a direction and builds the rhythm itself.
• Redesigning an existing tech or SaaS page that currently looks generic.

Not for

• Building a quiet, warm monochrome page with a long list of banned flourishes, where Minimalist Skill keeps flat bento cards and restrained motion instead.
• Sourcing native Apple interface tokens and SwiftUI color mappings for an app's own UI, where Apple HIG MCP serves Human Interface Guidelines data instead of marketing-page CSS recipes.
• Snapshotting an already-running web app into one static HTML output for reuse, where Stitch Extract Static HTML Skill inlines the CSS and embeds images from that capture.
• Cloning and deploying one fixed Next.js designer-portfolio template with its own animation stack, where Awwwards Landing Page Skill wires up Locomotive Scroll, GSAP and Framer Motion for that specific template.

How to install Premium SaaS Web Skill: Landing Pages With Sculpted Glow

npx skills add MiddleSugar7000/premium-saas-web-skill

1. Install the skill

   Run the command above from the project root, which works the same for every supported agent since the skill is one SKILL.md-standard package.

2. Or copy it by hand

   Copy the skills/premium-saas-web path into the agent's own skills location, for example .claude/skills/premium-saas-web/ for a per-project install.

3. Claude Code plugin route

   Alternatively run /plugin marketplace add MiddleSugar7000/premium-saas-web-skill followed by /plugin install premium-saas-web@middlesugar7000.

4. Ask for a page

   Describe the product directly, such as a landing page request, or name a direction if you already have one in mind, such as Tactile Light with a blue accent.

Check that it loaded

Ask for a landing page for a sample SaaS product with no style brief, and confirm the reply names one design direction, builds the ten-section rhythm, and opens the page in a browser for a self-review pass before handoff.

Read the official instructions on GitHub

Key features

• Four measured design directionsEmber Dark, Tactile Light, Editorial Mono and Noir Spotlight, each read from a real top-selling template's own CSS values rather than a generic guess.
• 18 copy-ready recipesSculpted glow, animated gradient borders, tactile glass buttons, bento grids with mini product UIs and scroll-fill text, among others, ready to paste and adapt.
• GSAP and Lenis motion systemA shared setup for smooth scroll, scroll-triggered reveals, rolling counters and stacking cards, tied to a timing and easing table.
• Page-rhythm planningPlans a page as alternating density and tone across ten sections instead of a flat list, from hero through final CTA.
• Self-review checklistA pre-handoff checklist covering accent discipline, letter-spacing, contrast, hover states and horizontal overflow at mobile width.
• Real brand logo ruleWhenever an existing company or product is named, the skill looks for its actual logo rather than a colored initial square standing in for it.
• Reduced-motion handlingAll GSAP timelines route through gsap.matchMedia() so motion can disable cleanly under prefers-reduced-motion.
• No invented social proofThe self-review list explicitly checks for made-up ratings, user counts or testimonials, flagging any assumed product detail for the user to confirm.

Frequently asked questions