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.
Design Direction
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 that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail
Frontend Aesthetics Guidelines
More from atxinsky/skills
bilibili-downloader
批量下载B站视频并提取音频MP3。支持单个视频、多P合集、UP主全部投稿、收藏夹。自动提取音频,可选保留视频。触发词:'下载B站'、'B站视频'、'bilibili下载'、'提取音频'。
20research
深度研究分析skill,用于股票、加密货币和商品期货的专业交易研究。当用户输入"研究一下"、"帮我研究"、"分析一下"时触发。根据标的类型自动应用不同的研究框架,输出可直接用于交易决策的研究报告。完成后自动保存到Notion。
14pain-point-marketing-loop
Use when implementing low-cost user acquisition through social media pain point analysis, content creation, and traffic conversion loops
5writing-skills
Use when creating new skills, editing existing skills, or verifying skills work before deployment
4subagent-driven-development
Use when executing implementation plans with independent tasks in the current session
4ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
2