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
More from vaayne/cc-plugins
mcp-jetbrains-ide
Control JetBrains IDE (IntelliJ, WebStorm, PyCharm) via MCP. Use when manipulating IDE files, running configurations, searching code, or performing refactoring. Triggers on "open in IDE", "run configuration", "refactor code", "IDE search", "JetBrains".
20python-script
Create robust Python automation with full logging and safety checks. Use when tasks need complex data processing, authenticated API work, conditional file operations, or error handling beyond simple shell commands.
17mcp-exa-search
Search the web and find code examples using Exa AI. Use when performing web searches, finding current information, or looking up code examples and documentation. Triggers on "search the web", "find online", "web search", "search for", "find code examples", "Exa search".
14mcp-context7-docs
Query up-to-date documentation and code examples for any programming library or framework. Use when looking up API docs, finding code examples, or checking library usage. Triggers on "how to use [library]", "docs for [package]", "show me examples of [framework]", "Context7 lookup".
13web-fetch
Fetch and extract clean content from URLs using Jina Reader API. Use when users need to read webpage content, extract article text, or fetch URL content for analysis. Triggers on "fetch this page", "read this URL", "extract content from", "get the content of", "what does this page say".
12specs-dev
Plan-first development workflow with review gates. Use when implementing features, refactoring, or any task requiring structured planning, iterative implementation with reviews, and clean commits. Triggers on requests like "implement feature X", "plan and build", "spec-driven development", or when user wants disciplined, reviewed code changes.
12