awwwards-ui-skill

KO | EN

gitlite — search

#anthropic #hacktoberfest #computer-vision #mcp #electron #java #golang #command-line #web #awesome-list

awwwards-ui-skill

(★ 9)

Skill that forces award-tier design quality on AI-generated UIs. Teaches Claude Code / Codex / Antigravity to build with real design intent — motion, typography, color, WCAG AA — instead of generic slop.

파일 탐색기

ZIP 다운로드

- cli.js
- - agency.png
  - portfolio.png
  - product.png
- verify-skill.mjs
- - SKILL.md
CONTRIBUTING.md
HANDOVER.md
LICENSE
package.json
plugin.json
README.md

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

# 프로젝트 배지

npm 바로가기
License: MIT 바로가기
Open Source 바로가기
Claude Skills 바로가기
Antigravity 바로가기

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

An open-source skill that raises the design quality of AI-generated web interfaces. When AI agents build UIs without guidance, they default to generic layouts, flat aesthetics, and missed accessibility standards. This skill fixes that — injecting design intent around motion, typography, color, and interaction directly into the agent's context.

Compatible with **Antigravity**, **Claude Code**, and **Codex**.

---

## Examples

A developer portfolio — full-bleed hero, WebGL particle field, bento-box grid:

![Portfolio demo](https://raw.githubusercontent.com/Nyx-abu/awwwards-ui-skill/master/docs/screenshots/portfolio.png)

An agency site — asymmetric typography, glassmorphism overlays, mix-blend-mode cursor:

![Agency demo](https://raw.githubusercontent.com/Nyx-abu/awwwards-ui-skill/master/docs/screenshots/agency.png)

A product landing page — dark mode, 3D CSS object, scroll-triggered reveals:

![Product landing demo](https://raw.githubusercontent.com/Nyx-abu/awwwards-ui-skill/master/docs/screenshots/product.png)

---

## Installation

You can automatically install this skill to your Antigravity, Claude Code, and Codex config directories by running:

```bash
npx awwwards-ui-skill
```

If it prompts you to install the package, type `y`:

```text
PS C:\Users\xyz> npx awwwards-ui-skill
Need to install the following packages:
awwwards-ui-skill@1.1.0
Ok to proceed? (y) y

> npx
> awwwards-ui-skill

🚀 Installing Awwwards UI/UX Agent Skill...
✅ Successfully installed skill to C:\Users\xyz\.gemini\config\plugins\awwwards_ui_design\SKILL.md
✅ Successfully installed skill to C:\Users\xyz\.claude\skills\SKILL.md
✅ Successfully installed skill to C:\Users\xyz\.codex\skills\SKILL.md
🎉 You're all set! Tell your AI agent to build a 'cool ui' and watch the magic happen.
```

### Manual Installation (Antigravity)

Clone into your plugins directory:

```bash
git clone https://github.com/Nyx-abu/awwwards-ui-skill.git ~/.gemini/config/plugins/awwwards-ui-skill
```

### For Claude Code / Codex

Copy `skills/awwwards_ui_design/SKILL.md` directly into your custom system prompts or skill registry.

---

## Usage

Just ask your AI assistant:

> "Build me a portfolio with a cool UI"

The skill auto-triggers on keywords like `cool ui`, `premium design`, and `awwwards style`. The agent will apply structured design decisions — layout, motion, typography, color — and run an internal audit on accessibility and performance before returning any code.

---

## Measurable outcome

The skill now requires a **UI-Max Scorecard** before an agent returns UI code. The target is **88/100 minimum**, scored across:

- `MOTION-01` easing, offset/delay, and fade paired with spatial movement
- `MOTION-02` primary, secondary, and ambient motion layers
- `LAYOUT-01` first-viewport composition and Awwwards-style hierarchy
- `DEPTH-01` dimensionality through parallax, masking, morphing, or zoom continuity
- `INTERACTION-01` microinteractions beyond color/opacity changes
- `A11Y-01` semantic HTML, contrast, focus states, `aria-hidden`, and reduced motion
- `PERF-01` requestAnimationFrame-safe pointer/scroll work and WebGL cleanup expectations
- `RESP-01` responsive resilience at 375px, 768px, and 1440px
- `BRAND-01` domain fit instead of generic visual spectacle

Run the deterministic verifier:

```bash
npm test
```

The test checks that the skill, README, handover, and sample website all include the scorecard contract and implementation evidence.

The sample site is at `../awwwards-ui-skill-test/index.html`. It demonstrates the upgraded skill surface with a visible scorecard, custom cursor, magnetic controls, masked media reveal, parallax layer, zoom stage, bento grid, `IntersectionObserver`, `prefers-reduced-motion`, and `requestAnimationFrame`.

---

## What It Covers

- **Layouts:** Full-bleed heroes, bento-box grids, asymmetric sections, horizontal scroll sequences
- **Motion:** GSAP ScrollTrigger reveals, Lenis smooth scrolling, parallax, text scramble transitions
- **Cursors:** RAF-driven custom cursors, magnetic snapping, `mix-blend-mode: difference` on hover
- **3D:** Three.js particle fields and shader-based distortion tied to mouse input
- **Color:** Four curated palettes derived from top developer portfolio sites, with contrast rules baked in
- **Typography:** Display-scale contrast, tight heading tracking, variable font axis animation
- **Accessibility:** WCAG AA contrast enforcement, semantic HTML, ARIA roles, `prefers-reduced-motion` support
- **Self-Audit:** The agent checks its own output for layout, performance, and accessibility issues before returning code
- **Measurement:** The UI-Max Scorecard turns design quality into auditable pass/fail evidence instead of subjective taste language

---

## Contributing

See [CONTRIBUTING.md](./CONTRIBUTING.md) for full guidelines. The short version:

1. Fork the repo
2. Create a branch: `git checkout -b feat/your-idea`
3. Make focused changes to `SKILL.md` or add new patterns
4. Open a PR with a description and an example of the generated output

We are currently looking for **testers** to spot repeated AI pattern bugs before the v1 stable release. Details in [CONTRIBUTING.md](./CONTRIBUTING.md).

---

## License

[MIT](./LICENSE) — free to use, fork, and build on.

awwwards-ui-skill

파일 탐색기

# CDN으로 사용하기

# 프로젝트 배지

Was this content helpful?

Recent Feedback

Download README