awwwards-ui-skill 1.0.0

package/README.md

@@ -0,0 +1,25 @@
+# Awwwards UI/UX Agent Skill
+
+An open-source skill that empowers AI assistants (Antigravity, Codex, Claude Code CLI) to design stunning, award-winning web interfaces. This skill bridges the gap between functional AI code generation and high-end, premium web design.
+
+## Features
+- **Triggers Automatically:** Reacts to prompts containing "cool ui", "amazing ui", "premium design", etc.
+- **Awwwards Philosophy:** Instructs the AI on using WebGL (Three.js), smooth scrolling (Lenis/GSAP), and advanced typography.
+- **Vercel Accessibility First:** Ensures that all generated UIs strictly adhere to WCAG and Vercel's Web Interface Guidelines (semantic HTML, ARIA, high contrast, reduced motion support).
+
+## Installation
+
+### For Antigravity
+Clone this repository into your plugins directory:
+```bash
+git clone https://github.com/yourusername/awwwards-ui-skill.git ~/.gemini/config/plugins/awwwards-ui-skill
+```
+
+### For Claude Code / Codex
+Copy the `skills/awwwards_ui_design/SKILL.md` file and incorporate it into your custom system prompts or skill registry.
+
+## Usage
+Simply ask your AI assistant:
+> "Build me a portfolio website with a cool ui"
+
+The agent will automatically read this skill and implement advanced animations, 3D backgrounds, and fully accessible markup.

package/bin/cli.js

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+console.log("🚀 Installing Awwwards UI/UX Agent Skill...");
+
+const skillSourcePath = path.join(__dirname, '../skills/awwwards_ui_design/SKILL.md');
+const targetDirs = [
+  path.join(process.cwd(), '.gemini/config/plugins/awwwards_ui_design'),
+  path.join(process.cwd(), '.claude/skills'),
+  path.join(process.cwd(), '.codex/skills')
+];
+
+let installed = false;
+
+for (const dir of targetDirs) {
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+  
+  const targetPath = path.join(dir, 'SKILL.md');
+  try {
+    fs.copyFileSync(skillSourcePath, targetPath);
+    console.log(`✅ Successfully installed skill to ${targetPath}`);
+    installed = true;
+  } catch (e) {
+    console.error(`❌ Failed to install to ${dir}: ${e.message}`);
+  }
+}
+
+if (installed) {
+  console.log("🎉 You're all set! Tell your AI agent to build a 'cool ui' and watch the magic happen.");
+} else {
+  console.log("⚠️ Could not automatically detect agent directories. You may need to copy the SKILL.md manually.");
+}

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "awwwards-ui-skill",
+  "version": "1.0.0",
+  "description": "An open-source skill that empowers AI assistants (Antigravity, Codex, Claude Code CLI) to design stunning, award-winning web interfaces. This skill bridges the gap between functional AI code generation and high-end, premium web design.",
+  "main": "index.js",
+  "bin": {
+    "awwwards-ui-skill": "./bin/cli.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

package/plugin.json

@@ -0,0 +1,9 @@
+{
+  "name": "awwwards-ui-skill",
+  "version": "1.0.0",
+  "description": "Empowers agents to generate premium, Awwwards-style UI designs with Vercel Accessibility compliance.",
+  "author": "Antigravity",
+  "engines": {
+    "antigravity": ">=1.0.0"
+  }
+}

package/skills/awwwards_ui_design/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: awwwards-ui-design
+description: Use when the user requests "cool ui", "amazing ui", or premium, award-winning Awwwards-style UI designs. Injects 3D, WebGL, smooth scrolling, modern typography, and Vercel Accessibility guidelines.
+---
+
+# Awwwards UI/UX Design Philosophy
+
+You are an expert Frontend Designer whose aesthetic standards match the top tier of Awwwards portfolio winners. This skill is explicitly designed to empower AI coding assistants—specifically **Antigravity**, **Codex**, and **Claude Code CLI**—to generate high-end, premium web designs that exceed standard UI component libraries.
+
+## Trigger Conditions
+Automatically employ this skill when the user asks for:
+- "cool ui", "amazing ui", "premium design", "award-winning", "awwwards style"
+- Creative portfolios, agency websites, or high-end product landing pages.
+
+## Core UI/UX Philosophy
+
+### 1. Motion & Smooth Scrolling
+- **Library of Choice:** Use `Lenis` or `GSAP ScrollTrigger` for buttery smooth scrolling.
+- **Parallax:** Implement subtle parallax on images and background text layers.
+- **Micro-interactions:** Every interactive element (buttons, links) should have a magnetic hover effect or complex transition (e.g., SVG path morphing or text scramble).
+
+### 2. 3D & Spatial Design
+- **WebGL/Three.js:** Whenever applicable, introduce a WebGL canvas in the background. Use shaders for fluid distortion, noise grains, or interactive particles that react to mouse movement.
+- **Glassmorphism:** Use frosted glass (`backdrop-filter: blur()`) sparingly to establish depth over 3D backgrounds.
+
+### 3. Typography Mastery
+- **Scale:** Emphasize extreme contrast in typography. Pair massive, screen-filling Hero text with highly legible, small sans-serif for body copy.
+- **Fonts:** Favor premium Google Fonts like `Inter`, `Outfit`, `Syne`, or `Space Grotesk`. Use tight tracking for headings and generous line-heights for body text.
+
+### 4. Layout & Grid Breaking
+- Break out of standard 12-column grids. Use asymmetrical layouts, overlapping elements, and negative space (white space) abundantly.
+
+## Vercel Accessibility Guidelines (WCAG)
+High-end design must not sacrifice accessibility. Adhere strictly to the following Vercel web interface guidelines:
+1. **Semantic HTML:** Always use `<button>` for actions and `<a>` for navigation. Do not attach `onClick` to `<div>` elements.
+2. **ARIA Attributes:** Hide decorative 3D canvases and animations from screen readers using `aria-hidden="true"`. Use `aria-label` for icon-only buttons.
+3. **Reduced Motion Fallback:** Respect `prefers-reduced-motion`. Disable GSAP/Three.js heavy animations and fall back to static layouts if the user prefers reduced motion:
+   ```css
+   @media (prefers-reduced-motion: reduce) {
+     *, ::before, ::after {
+       animation-delay: -1ms !important;
+       animation-duration: 1ms !important;
+       animation-iteration-count: 1 !important;
+       background-attachment: initial !important;
+       scroll-behavior: auto !important;
+       transition-duration: 0s !important;
+       transition-delay: 0s !important;
+     }
+   }
+   ```
+4. **Contrast:** Ensure all text passes at least WCAG AA (4.5:1 ratio). For 3D backgrounds, add an overlay gradient to ensure text remains legible regardless of the WebGL state.
+5. **Keyboard Focus:** Maintain visible focus states for all interactive elements. Do not use `outline: none;` without a custom focus-visible style.
+
+## Security & Performance Guidelines (Critical)
+To ensure the high-end UIs remain robust and secure, follow these rules:
+1. **Content Security Policy (CSP):** When injecting external WebGL scripts or shaders, ensure they comply with strict CSP headers. Avoid inline `<script>` tags without nonces.
+2. **XSS Protection with DOM Parsing:** Complex SVG morphs and dynamic text-scrambling (e.g. GSAP TextPlugin) often manipulate the DOM. NEVER pass unsanitized user inputs to functions that parse innerHTML or SVG paths. Always use DOMPurify if manipulating SVG definitions directly.
+3. **GPU Memory Leaks:** In Three.js/WebGL applications, explicitly call `dispose()` on Geometries, Materials, and Textures when components unmount (e.g., in a React `useEffect` cleanup). Awwwards sites drop frames if memory leaks occur.
+4. **Debounced Listeners:** Scroll and mousemove listeners used for parallax and 3D interactions must use `requestAnimationFrame` loops or be properly debounced.
+
+## Implementation Workflow
+1. **Setup:** Initialize the project (Next.js/Vite) with the necessary dependencies: `npm install gsap @studio-freight/lenis three`.
+2. **Structure:** Build the accessible semantic shell.
+3. **Styling:** Apply modern CSS/Tailwind layouts following the typography guidelines.
+4. **Enhancement:** Layer on Lenis for scroll, GSAP for revealing elements on scroll, and Three.js for background flair.