Skills

This skill is the agent's guarantee of visual craft. It exists so that any frontend the agent generates looks like a senior human designer/engineer built it on purpose for that specific product — never a recycled template with generic AI tells. The agent must treat this skill as mandatory whenever it is triggered, and it must complete the intent-first analysis below BEFORE writing any code. Skipping the analysis phase is forbidden.

When to use

Activate this skill when the user's prompt contains ANY of the following terms or signals:

• landing page, showcase, portfolio, personal website, marketing site, brand site, product page, pricing page, website, web design, redesign.
• hero section, navbar, footer, CTA, sections, page layout, UI, interface, frontend, component, mockup, wireframe.
• design, aesthetic, beautiful, elegant, premium, polished, clean, modern, minimal, creative, sleek, stunning, impressive.
• animation, micro-interaction, smooth scroll, parallax, scroll animation, hover effect, transition, motion, marquee, fade, reveal.
• doesn't look AI-generated, human made, human crafted, not AI generated, awwwards, showit, wow, eye-catching, attractive.
• SaaS, dashboard, app, product site, like Google, like Vercel, like Linear, like Stripe, like Apple, conversion-focused.
• User pastes existing website code, a URL, a screenshot, or a design reference and asks to match or improve it.
• ANY task that involves building or restyling a user-facing website/interface, even if no style keyword is present.

When in doubt, activate. This skill composes with frontend-core, ui-ux, and frontend-performance — craft governs HOW it looks, the others govern correctness and speed.