Frontend Design

The Skill Store opens with Frontend Design selected. Click Install, choose your running agent, and wait for MyClaw to confirm that the skill is ready. There is no terminal command to copy.

Open Agent Chat and ask for the interface you want. Include the product, audience, framework, and constraints. For example:

Use the frontend-design skill to build a responsive pricing page for a developer tool. Make it editorial and confident, use React and Tailwind, follow WCAG AA, and avoid generic SaaS gradients.

Your MyClaw agent will apply the skill’s design direction while producing implementation-ready frontend code.

• Building a new UI component or page where visual quality and distinctiveness matter, not just functional correctness.
• Prototyping a product or landing page and you want something that looks genuinely designed rather than auto-generated.
• Exploring creative directions for a brand, app, or campaign before committing to a design system.
• Replacing a bland or generic existing interface with something that has a clear aesthetic point of view.

• If you need strict brand/design-system compliance — this skill prioritizes creative distinctiveness and may diverge from existing style guides.
• If you only need a backend API or data layer — this skill is focused exclusively on frontend presentation code.

Before writing a single line of code, the skill commits to a clear conceptual tone — brutally minimal, maximalist, organic, luxury, industrial, editorial, and many more. The result is an interface with a coherent point of view, not a generic composite.

Generic font stacks (Inter, Roboto, Arial) are explicitly avoided in favor of characterful display and body font pairings. Color palettes use CSS variables with dominant hues and sharp accents rather than timid, evenly distributed schemes.

Animations are used strategically — orchestrated page-load reveals with staggered delays, scroll-triggered effects, and hover states that surprise. CSS-only solutions are preferred for HTML; the Motion library is used for React when available.

Backgrounds go beyond solid colors: gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays, and decorative borders are used contextually to create depth and atmosphere.

Layouts favor asymmetry, overlap, diagonal flow, and grid-breaking elements. Generous negative space or controlled density is chosen deliberately — never by default.

Generated code is functional and production-grade, supporting HTML/CSS/JS, React, Vue, and other frameworks. Complexity matches the aesthetic vision — maximalist designs include elaborate animations; minimalist ones deliver precision and restraint.

A founder wants a landing page that stands out from competitors. The skill picks a bold aesthetic direction — say, editorial/magazine with strong typographic hierarchy — and generates a fully working page with scroll animations and a distinctive color system.

A designer or developer needs a personal site that reflects their personality. The skill avoids template-like structures and produces something memorable, perhaps with an asymmetric layout, a custom cursor, and a carefully chosen font pairing.

A team needs a data-dense interface component — a table, chart card, or filter panel — that still feels designed. The skill applies a utilitarian or refined minimalist aesthetic with meticulous spacing and subtle motion to make the component feel polished.

A campaign page needs to be immersive and visually striking. The skill can produce a maximalist, animation-rich page with layered visual effects, dramatic typography, and orchestrated entrance animations that create genuine delight.