frontend-design
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.
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
CRITICAL: Choose a clear conceptual direction and execute it with precision. 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:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail
More from kenlck/skills
grill-me
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".
21bug-fix
Structured bug fixing with reproduction, root cause analysis, fix design, regression risk analysis, and quality review. Only invoke this skill when the user explicitly asks to use it by name (e.g. "use bug-fix", "run bug-fix") or clearly requests a structured/systematic bug fixing process. Do not invoke for general bug reports, error messages, or broken behavior — handle those directly without this skill.
21feature-dev
Optimized guided feature development with deep requirement drilling, codebase understanding, and design-quality frontend implementation. Use this skill whenever the user wants to build or implement a feature — whether they say "let's build X", "add feature Y", "implement Z", "I want to create", "can we add", or any variation. This is the go-to skill for any non-trivial software feature work. Prefer this over a plain coding response whenever the feature has more than one moving part.
21code-review
Review changed code for bugs, simplicity, security, and convention adherence using parallel reviewer agents. Use when the user asks to review code, review a PR, check quality, or wants a second pair of eyes before merging.
21simplify
Simplifies and refines code for clarity, consistency, and maintainability while preserving all functionality. Focuses on recently modified code unless instructed otherwise.
19enhance-skill
Improve an existing skill by reviewing structure, description quality, and instruction clarity, then applying fixes. Use when user wants to improve, upgrade, enhance, or refine an existing skill.
18