From sc-skills
Generates distinctive production-grade frontend UIs for components, pages, apps (React, Astro, HTML/CSS/JS). Emphasizes bold aesthetics avoiding generic AI designs.
How this skill is triggered — by the user, by Claude, or both
Slash command
/sc-skills:sc-frontend-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Before coding, understand the context and commit to a BOLD aesthetic direction:
CRITICAL: Choose a clear conceptual direction and execute it vigorously. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
Focus on:
Distinctive Choices Mean:
Quality Test: Before finalizing any choice, ask: "Would a designer with strong opinions make this exact decision for THIS specific context?" If the answer is "this could work for anything," the choice isn't designed enough. Every font, color, and layout should feel chosen FOR this project, not defaulted TO. Generic is interchangeable. Distinctive is irreplaceable.
Build creatively on the user's intent, and make unexpected choices that feel genuinely designed for the context. Every design should feel distinct. Actively explore the full range: light and dark themes, unexpected font pairings, substantially varied aesthetic directions. Let the specific context drive choices, NOT familiar defaults.
IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, elegance, and precision. All designs need careful attention to spacing, typography, and subtle details. Excellence comes from executing the vision well.
Remember: Claude is capable of extraordinary, award-worthy creative work. Don't hold back, show what's truly possible, and commit relentlessly to a distinctive and unforgettable vision.
npx claudepluginhub kylesnowschwartz/simpleclaude --plugin sc-skillsCreates distinctive, production-grade frontend interfaces. Generates polished code and UI design avoiding generic AI aesthetics. Use for web components, pages, dashboards, React components, HTML/CSS.
Generates distinctive production-grade frontend UIs like components, pages, dashboards, apps in HTML/CSS/JS, React, Vue with bold memorable aesthetics avoiding generic AI designs.
Creates distinctive, production-grade frontend interfaces with bold aesthetic direction. Guides design thinking, typography, color, motion, and spatial composition for memorable UIs.