Frontend Creative UI
Awwwards-grade creative web UIs: landing pages, portfolios, brand sites. NOT for SaaS dashboards.
Trigger
Keywords: landing page, portfolio, brand site, Awwwards, bold typography, GSAP, Framer Motion, R3F, experimental page, motion-rich.
Skip if: internal tools, dashboards, admin panels, backend, "clean / minimal / standard".
Principles
- No Dashboard layout. Asymmetric, full-bleed, narrative-driven composition.
- Type is the hero. Large type as visual subject.
- Motion in layers. Heavy on focal region; GSAP for scenes, Framer Motion for micro. Never both on one element.
- Performance is creative constraint. Lazy-load 3D, GPU transforms, Lighthouse 90+.
- Iterate 3 rounds. Macro → local → regression. No drift to generic.
- Awwwards self-review before ship (see
templates/review-checklist.md).
- Plan before code.
workflows/01-macro-design.md Step 0 — visual concept, wireframe, components, motion, tech, content, performance, a11y. Once code exists the design decisions are already made implicitly.
- Numbers get derived, never typed. Any figure obtainable from the repo or an API is read at build time and the build fails on drift. Hand-typed counts go stale silently; this repo's own site claimed 9 workflows (10) and 14 CLI agents (40) on its front page for months.
- Reduced motion and keyboard are code paths. Verified by emulating the query and tabbing the page — not by a CSS block.
- Content never depends on an animation running. A bare
gsap.from() on scroll-triggered content leaves the section blank if the trigger never fires.
Stack (fixed)
| Layer |
Tool |
| Framework |
Next.js (App Router) |
| Language |
TypeScript |
| Styling |
Tailwind CSS |
| Micro motion |
Framer Motion |
| Scene motion |
GSAP + ScrollTrigger |
| 3D / particles |
React Three Fiber + drei |
| Deploy |
Vercel |
Anti-patterns
- Generic SaaS hero with centered headline + 3 cards.
- Lorem ipsum, placeholder copy, fake testimonials.
- Auto-playing hero video with sound.
- "Cool" 3D that's a generic particle sphere.
- Animations on every scroll (parallax fatigue).
- AI rewriting the whole page each round → drift.
Banned clichés (hard reject — full table in spec §5)
Blue-purple gradient SaaS template · full-screen glassmorphism · rows of
identical rounded cards · bento grid · robot avatars · shield and padlock icons ·
floating AI chat bubble · decorative grid that nothing aligns to · excess neon or
universal glow · digital globe with arcs · blockchain hexagons and generic Web3
iconography · grey body text under 4.5:1 · any motion that costs readability or
performance.
Glow is allowed only when semantic — a state indicator whose job is to emit.
One accent used with meaning beats four used for decoration.
Hand-off
Design approved → hand off to $ai-engineering-harness for implementation:
Design approved. Brief at docs/design/<id>/brief.md. Macro layout at <repo>. Hand off to $ai-engineering-harness for Phase 3 (Implement) through Phase 8 (Review). Use frontend-stack agent preset.
Lifecycle
| Phase |
Workflow |
Output |
| New project |
00-bootstrap.md |
Scaffold + creative stack + theme |
| Brief |
00-design-brief-collection.md |
Filled templates/design-brief.md |
| Round 1 |
01-macro-design.md |
Macro layout + theme |
| Round 2+ |
02-local-refinement.md |
Local iteration (Anti-drift check) |
| Review |
03-visual-regression-check.md |
Awwwards checklist |
| Ship |
04-ship.md |
Review-checklist gate |
| Resume |
05-takeover.md |
Inventory + baseline |
| Post-mortem |
06-post-mortem.md |
After-ship lessons |
| Restart |
07-redo.md |
Diagnose + archive + restart |
Read on demand
references/creative-ui-design-spec.md — 17-section rulebook (read first)references/theme-{a,b,c,d,e}-*.md — 5 theme variants (theme-variants.md indexes them)../../examples/landing-page/ — theme E shipped end-to-end: derived facts, measured contrast, the working blueprint buildreferences/prompt-library.md — per-phase promptstemplates/design-brief.md — per-project brieftemplates/review-checklist.md — pre-ship gateagents/creative-frontend.md — agent persona$dashboard — sibling skill for visualizing project state. This skill does NOT do dashboards.$build-agent-app — sibling skill for designing agent apps.
1---2name: frontend-creative3description: Awwwards-grade creative web UI (non-Dashboard). Triggers: landing page, portfolio, brand site, Awwwards, GSAP, Framer Motion, R3F. Stack: Next.js + TS + Tailwind + Framer Motion + GSAP + R3F. Hands off impl to $ai-engineering-harness. Install: bash install.sh --skill frontend-creative4---56# Frontend Creative UI78Awwwards-grade creative web UIs: landing pages, portfolios, brand sites. **NOT** for SaaS dashboards.910## Trigger1112Keywords: landing page, portfolio, brand site, Awwwards, bold typography, GSAP, Framer Motion, R3F, experimental page, motion-rich.1314Skip if: internal tools, dashboards, admin panels, backend, "clean / minimal / standard".1516## Principles17181. **No Dashboard layout.** Asymmetric, full-bleed, narrative-driven composition.192. **Type is the hero.** Large type as visual subject.203. **Motion in layers.** Heavy on focal region; GSAP for scenes, Framer Motion for micro. Never both on one element.214. **Performance is creative constraint.** Lazy-load 3D, GPU transforms, Lighthouse 90+.225. **Iterate 3 rounds.** Macro → local → regression. No drift to generic.236. **Awwwards self-review** before ship (see `templates/review-checklist.md`).247. **Plan before code.** `workflows/01-macro-design.md` Step 0 — visual concept, wireframe, components, motion, tech, content, performance, a11y. Once code exists the design decisions are already made implicitly.258. **Numbers get derived, never typed.** Any figure obtainable from the repo or an API is read at build time and the build fails on drift. Hand-typed counts go stale silently; this repo's own site claimed 9 workflows (10) and 14 CLI agents (40) on its front page for months.269. **Reduced motion and keyboard are code paths.** Verified by emulating the query and tabbing the page — not by a CSS block.2710. **Content never depends on an animation running.** A bare `gsap.from()` on scroll-triggered content leaves the section blank if the trigger never fires.2829## Stack (fixed)3031| Layer | Tool |32|-------|------|33| Framework | Next.js (App Router) |34| Language | TypeScript |35| Styling | Tailwind CSS |36| Micro motion | Framer Motion |37| Scene motion | GSAP + ScrollTrigger |38| 3D / particles | React Three Fiber + drei |39| Deploy | Vercel |4041## Anti-patterns4243- Generic SaaS hero with centered headline + 3 cards.44- Lorem ipsum, placeholder copy, fake testimonials.45- Auto-playing hero video with sound.46- "Cool" 3D that's a generic particle sphere.47- Animations on every scroll (parallax fatigue).48- AI rewriting the whole page each round → drift.4950### Banned clichés (hard reject — full table in spec §5)5152Blue-purple gradient SaaS template · full-screen glassmorphism · rows of53identical rounded cards · bento grid · robot avatars · shield and padlock icons ·54floating AI chat bubble · decorative grid that nothing aligns to · excess neon or55universal glow · digital globe with arcs · blockchain hexagons and generic Web356iconography · grey body text under 4.5:1 · any motion that costs readability or57performance.5859Glow is allowed only when **semantic** — a state indicator whose job is to emit.60One accent used with meaning beats four used for decoration.6162## Hand-off6364Design approved → hand off to `$ai-engineering-harness` for implementation:6566> Design approved. Brief at `docs/design/<id>/brief.md`. Macro layout at `<repo>`. Hand off to `$ai-engineering-harness` for Phase 3 (Implement) through Phase 8 (Review). Use `frontend-stack` agent preset.6768## Lifecycle6970| Phase | Workflow | Output |71|-------|----------|--------|72| New project | `00-bootstrap.md` | Scaffold + creative stack + theme |73| Brief | `00-design-brief-collection.md` | Filled `templates/design-brief.md` |74| Round 1 | `01-macro-design.md` | Macro layout + theme |75| Round 2+ | `02-local-refinement.md` | Local iteration (Anti-drift check) |76| Review | `03-visual-regression-check.md` | Awwwards checklist |77| Ship | `04-ship.md` | Review-checklist gate |78| Resume | `05-takeover.md` | Inventory + baseline |79| Post-mortem | `06-post-mortem.md` | After-ship lessons |80| Restart | `07-redo.md` | Diagnose + archive + restart |8182## Read on demand8384- `references/creative-ui-design-spec.md` — 17-section rulebook (read first)85- `references/theme-{a,b,c,d,e}-*.md` — 5 theme variants (`theme-variants.md` indexes them)86- `../../examples/landing-page/` — theme E shipped end-to-end: derived facts, measured contrast, the working blueprint build87- `references/prompt-library.md` — per-phase prompts88- `templates/design-brief.md` — per-project brief89- `templates/review-checklist.md` — pre-ship gate90- `agents/creative-frontend.md` — agent persona91- `$dashboard` — sibling skill for visualizing project state. This skill does NOT do dashboards.92- `$build-agent-app` — sibling skill for designing agent apps.
lora-sys