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.