Ultimate Frontend#

Use this skill for any serious website, landing page, dashboard, app shell, or React UI that needs to feel original, polished, and unmistakably designed.

This skill combines the best of:

• brainstorming
• frontend-design
• emil-design-eng
• impeccable
• taste-skill
• web search / external reference gathering

Mission#

Build frontend work that feels specific, intelligent, and premium. No generic AI layouts. No stock-feeling typography. No lazy gradients. No random motion. No “looks fine” output.

Required workflow#

1) Understand the brief#

• Read the current project context first.
• If the user did not provide a clear description, ask one clarifying question at a time.
• Start with the most important missing piece: purpose, audience, content, or constraints.
• Prefer multiple-choice questions when useful.
• If the brief is still vague, do not stall forever: infer from context and continue with a smart default.

2) Brainstorm before building#

• Generate 2 to 3 distinct design directions.
• Compare trade-offs briefly.
• Pick one direction and commit to it.
• Do not average styles together.

3) Research before inventing#

• Use web search when you need references, competitors, patterns, current best practice, or design inspiration.
• Prefer real examples over imagined ones.
• Look for the visual language, spacing rhythm, hierarchy, motion style, and content strategy that make strong interfaces work.

4) Design with taste#

• Choose one clear aesthetic direction and execute it precisely.
• Use distinctive typography, strong hierarchy, controlled spacing, and intentional colour.
• Introduce texture, depth, asymmetry, or motion only when they improve the outcome.
• Make the page feel crafted, not assembled.

5) Implement cleanly#

• Write production-grade code.
• Keep the UI accessible, fast, and maintainable.
• Avoid over-engineering.
• Remove anything that weakens the design.

Anti-slop rules#

• Do not use default-looking fonts, layouts, or component patterns.
• Do not use purple gradient clichés or generic “modern SaaS” visuals.
• Do not add animation without a reason.
• Do not mix too many visual ideas.
• Do not output filler copy that sounds AI-written.
• Do not be timid: if the design needs character, give it character.

Motion rules#

• Prefer Framer Motion for React motion when the project supports it.
• If motion matters and Framer Motion is not available, recommend adding it in the target app rather than pretending it exists.
• Motion should clarify state, guide attention, or reward interaction.
• Keep keyboard-driven actions crisp.
• Use clean easing, transform-based animation, and correct origins.

Skill stack mapping#

• brainstorming: ask the right questions, explore options, and structure the direction.
• frontend-design: produce the actual implementation with strong aesthetics.
• emil-design-eng: sharpen polish, motion judgement, and invisible details.
• impeccable: critique, harden, and refine until it feels excellent.
• taste-skill: choose the strongest aesthetic direction and make it memorable.
• web search: ground the work in reality and current examples.

Output standards#

• When comparing or reviewing UI work, use a Before / After / Why table.
• When presenting options, lead with the recommendation and keep the trade-offs honest.
• When the user gives little direction, combine context, brainstorming, and web search to produce the best reasonable frontend anyway.
• The final result should feel intentional enough that it could not be mistaken for generic AI output.