npx claudepluginhub wunki/amplify --plugin ask-questions-if-underspecifiedThis skill uses the workspace's default tool permissions.
Implement real working frontend code with exceptional aesthetic intentionality.
Generates distinctive, production-grade frontend code with bold aesthetics for web components, pages, or apps. Avoids generic AI designs.
Generates distinctive, production-grade frontend interfaces with bold aesthetics for web components, pages, or apps. Avoids generic AI designs.
Generates distinctive, production-grade frontend code for web components, pages, and apps with bold aesthetics, unique typography, motion, and layouts avoiding generic AI designs.
Share bugs, ideas, or general feedback.
Implement real working frontend code with exceptional aesthetic intentionality. The goal is distinctive, production-grade output that avoids generic AI aesthetics.
Determine the task type:
Understand context before touching code:
Commit to a clear aesthetic direction. Name it explicitly in a short
comment before the first file's code block (e.g., /* Direction: editorial brutalism */; use {/* */} for JSX, <!-- --> for HTML, or a plain prose
line for other formats). Bold maximalism and refined minimalism both work —
the key is intentionality, not intensity. Do not start coding without a
direction.
Implement working code using the framework or format the user specifies. If no framework is specified, default to self-contained HTML/CSS/JS.
// src/components/Hero.tsx). List all output
files at the top before the first code block so the user knows what to
expect.Review before delivering:
Typography: Pair a distinctive display font with a refined body font. Avoid overused families: Inter, Roboto, Arial, system-ui, Space Grotesk, Outfit, Plus Jakarta Sans. Use Google Fonts or system alternatives that match the aesthetic direction.
Color: Commit to a cohesive palette. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Avoid: purple gradients on white backgrounds, generic blue-on-white SaaS palette.
Motion: Prioritize CSS-only animations for HTML. Focus on high-impact moments — one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use scroll-triggered animations and hover states that surprise.
Spatial Composition: Unexpected layouts, asymmetry, overlap, diagonal flow, grid-breaking elements. Choose generous negative space OR controlled density.
Backgrounds and Depth: Create atmosphere rather than defaulting to solid colors. Options: gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays, decorative borders.
Anti-patterns — never use:
No two designs should look the same. Vary light/dark themes, font pairings, and spatial composition across generations.
Even for visually ambitious designs, maintain:
<nav>, <main>, <section>, <h1>–<h6>
correctly).If the user has explicitly deprioritized accessibility, proceed but note the tradeoffs in a comment.