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 yiyousiow000814/xauusd-calendar-agent
commit-push-pr-workflow
Standardized commit + push + PR workflow. Use when the user asks to commit/push/open PR to ensure checks run, messages are consistent, and pushes/force-pushes are handled safely.
47github-pr-edit
Edit GitHub PR title/body (and optionally comments) reliably on Windows. Use when asked to update PR metadata or when GitHub API returns 404 due to missing auth (private repos often return 404 when unauthenticated).
40ui-check-framework
Build or extend an extensible UI self-check framework for Web UIs (React/Vite or plain HTML) using Playwright. Use when asked to add/upgrade ui-check or ui-watch flows, enforce data-qa/data-testid discovery, add theme/contrast checks, animation verification, loading state-machine checks, layout stability/overlap checks, modal scroll rules, or to document QA tagging standards and UI testing commands.
40xauusd-calendar-descriptions
Human-written economic calendar event descriptions for a global calendar with XAUUSD relevance and impact rules. Use when writing or reviewing event descriptions or notes for economic calendar entries, ensuring concise non-robotic language and conditional XAUUSD impact guidance.
34