Initial release: AetherForge – Elite Distinctive Frontend Design Skill for Gemini CLI

Author: sudoax0n

README.md

@@ -0,0 +1,42 @@
+# AetherForge – Elite Distinctive Frontend Design Skill for Gemini CLI
+
+
+
+The official Anthropic frontend-design skill, ported + refined for Gemini CLI.
+
+
+
+\*\*What it does\*\*  
+
+Whenever you ask Gemini to build any UI (landing page, dashboard, component, app, etc.), AetherForge automatically kicks in and forces it to create \*\*bold, memorable, production-grade interfaces\*\* instead of the usual boring AI slop.
+
+
+
+No more Inter font + purple gradient hell. You get real aesthetic direction, striking typography, motion, and personality.
+
+
+
+\*\*One-command install\*\*
+
+```bash
+
+gemini extensions install https://github.com/sudoax0n/aetherforge
+
+
+Example prompts that now look 🔥
+
+"Build a dashboard for a music streaming app"
+"Create a landing page for my AI productivity tool"
+"Design a sleek settings panel with dark mode"
+
+Made by @sudoax0n
+Star ⭐ if you hate generic UIs.
+text3. **Test it locally**
+   ```bash
+   gemini extensions link .
+
+Then just ask Gemini CLI something like:
+
+"Build a beautiful landing page for a Notion-style productivity tool"
+
+It should now auto-use AetherForge.

gemini-extension.json

@@ -0,0 +1,11 @@
+{
+  "name": "aetherforge",
+  "displayName": "AetherForge",
+  "version": "1.0.0",
+  "description": "Elite distinctive frontend design skill. Creates production-grade UIs that completely avoid generic AI aesthetics — bold typography, striking color palettes, high-impact motion, and unforgettable visual direction.",
+  "author": "sudoax0n",
+  "homepage": "https://github.com/sudoax0n/aetherforge",
+  "license": "MIT",
+  "tags": ["frontend", "ui", "design", "tailwind", "react", "aesthetic"],
+  "skills": ["skills/aetherforge"]
+}

skills/aetherforge/SKILL.md

@@ -0,0 +1,84 @@
+\---
+
+name: aetherforge
+
+description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill whenever the user asks to build web components, pages, artifacts, posters, dashboards, landing pages, or any UI. Generates creative, polished, memorable code that completely avoids generic AI aesthetics.
+
+\---
+
+
+
+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.
+
+\* \*\*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.
+
+
+
+Then implement working code (HTML/CSS/JS, React, Tailwind, 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
+
+
+
+\## Frontend Aesthetics Guidelines (AetherForge Rules)
+
+
+
+Focus on:
+
+\* \*\*Typography\*\*: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt for distinctive, characterful choices. Pair a bold display font with a refined body font.
+
+\* \*\*Color \& Theme\*\*: Commit to a cohesive aesthetic. Use CSS variables. Dominant colors with sharp accents outperform timid palettes.
+
+\* \*\*Motion\*\*: Use animations and micro-interactions. CSS-only for HTML; Framer Motion or Tailwind Animate when in React. One well-orchestrated page-load with staggered reveals creates more delight than scattered effects.
+
+\* \*\*Spatial Composition\*\*: Unexpected layouts, asymmetry, overlap, diagonal flow, grid-breaking elements, generous negative space or controlled density.
+
+\* \*\*Backgrounds \& Visual Details\*\*: Create atmosphere — gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, grain overlays.
+
+
+
+NEVER use generic AI-generated aesthetics (overused fonts like Inter/Roboto, purple gradients on white, predictable layouts, cookie-cutter components).
+
+
+
+Interpret creatively and make unexpected choices that feel genuinely designed for the context. No two designs should ever look the same.
+
+
+
+\*\*IMPORTANT\*\*: Match implementation complexity to the aesthetic vision. Elegance comes from executing the vision perfectly.
+
+
+
+Gemini is capable of extraordinary creative work. Don’t hold back — show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
+