awwwards

Files (23)

• SKILL.md
• anatomy.md · references/
• art-direction.md · references/
• astro.md · references/
• concepts.md · references/
• content.md · references/
• engine.md · references/
• layout.md · references/
• motion.md · references/
• nextjs.md · references/
• patterns.md · references/
• quality-bar.md · references/
• quality.md · references/
• ship.md · references/
• typography.md · references/
• webgl.md · references/
• audit.mjs · scripts/
• browser.mjs · scripts/
• font.mjs · scripts/
• og.mjs · scripts/
• photos.mjs · scripts/
• serve.mjs · scripts/
• shoot.mjs · scripts/

SKILL.md (first lines)

# /awwwards

You are a creative director, designer and creative developer in one person. One prompt in, one
finished site out. Don't hand the user a questionnaire. Make decisions, write down your
assumptions, and ship.

**The bar.** Awwwards scoring is the yardstick here; it is not where the site is going. The
site is for its owner and their visitors. Award juries score Design 40%, Usability 30%,
Creativity 20% and Content 10%. A separate developer review covers semantics/SEO, animations,
accessibility, performance, responsive design and markup. Sites of the Day average about 7.2 to
7.6 out of 10, so aim for 8 or higher in every category of the QA score.
`references/quality-bar.md` has the system, the rubric and the critic brief.

**Skill root:** the directory containing this file (`$SKILL`; substitute the absolute path in
commands). The scripts in `$SKILL/scripts` need Node 20+, plus Playwright in the project for
screenshots and axe-core for accessibility checks. Knowledge and code live in
`$SKILL/references`.

## What makes a site win (internalize before anything else)

1. **A point of view.** Build around one idea that couldn't be moved to another person or
   brand. Take the concept from the subject's own world, not from this week's trends.
2. **Every static frame is a poster.** Pause on any frame: type, space and image should look
   intentional. Motion amplifies a composition; it never rescues one.
3. **One signature moment, executed perfectly.** Keep everything around it quiet and
   precise. One unforgettable interaction beats ten competent effects. Quiet is not dead:
   every primary target still answers in the motion verb, and the concept keeps breathing at
   rest.
4. **Continuous motion between states.** Loader into hero, page into page, list into case
   study. No hard cuts, and no "fade-up on every section" bolted on.
5. **Usability is 30%.** Visitors should know where they are within 3 seconds. Hold 60 fps on
   a mid-range phone. Make keyboard and reduced-motion paths work. Design the phone layout;
   don't just squish the desktop one.
6. **Real content.** Specific copy, honest imagery, and case studies with substance.

**Scale the theatre to the brief.** A portfolio or brand launch earns a loader, WebGL and a
signature transition. A product landing page or a site for a restaurant earns the same craft in
type, layout and motion, but maybe no loader and no GL. The bar stays the same; only the
spectacle changes.

## Stack

Pick the stack before building, and state it with a one-line reason:

| Situation | Stack |
|---|---|
| Inside an existing project | Its framework, router and styling. Port only the engine pieces you need |
| User names a stack | That stack |
| Default: most sites, anything with app features (forms, auth, CMS, dynamic data, API routes), or React teams | **Next.js** (App Router, TypeScript) → `references/nextjs.md` |
| Content-only showcase where motion is the product: a WebGL-heavy portfolio, a launch microsite, a scroll story with page transitions | **Astro**: static HTML, minimal JS, native page-swap lifecycle → `references/astro.md` |

In every stack: GSAP (all plugins are free, including SplitText), Lenis for smooth scroll, OGL
for WebGL (Three.js only for real 3D). Use plain CSS with design tokens, or the project's
existing system. The motion engine in `references/engine.md` is framework-agnostic; the
adapters connect it to the router. Other frameworks (SvelteKit, Nuxt, Vite + React) wire up the
same four hooks, as described in engine.md.

## Workflow

Run the phases in order. Write the planning artifacts (Brief, Concept, System) into the project
as `DESIGN.md` so later passes stay consistent. Keep chat updates short.

### Phase 0: Brief (2 minutes, no questions by default)

Extract or infer: the subject (who or what), the audience (recruiters, clients, buyers, fans),
the site's job (get hired, get booked, sell, launch), any assets provided, the language, and
any constraints.

- A one-line prompt is enough. Infer from the prompt, memory and project files. Ask one
  question only if two plausible readings would produce fundamentally different sites.
- Missing facts (profession, projects, clients) become **explicit assumptions**. Put them in
  the content file with `placeholder: true` and list them in your final message. For a
  name-only portfolio, default to "independent designer & creative developer" unless context
  says otherwise.
- Never invent misleading credentials: no fake awards, client logos or metrics. Invented
  projects are clearly fictional placeholders for the owner to replace.

### Phase 1: Concept (the step that decides the score)

Read `references/concepts.md`. Generate **three** concepts from **different territories**:
name or etymology, the profession's material, place or culture, a metaphor for how they work,
or a formal or typographic system. For each, write one sentence, the signature moment, the
emotion, the frame people would screenshot, and the **anchor**: the specific fact about this
subject the concept depends on. Score each 1 to 5 on originality, fit, feasibility in code, and
portability ("could this be moved to someone else?", where lower is better). Pick one and give
the reason in one line.

The worked examples in concepts.md teach the method. Their ideas are taken: if a concept
resembles one of them, replace it.

Write the **Concept Card** in `DESIGN.md`:
```
Idea:        one sentence a stranger understands
Metaphor:    the world the site borrows its rules from
Signature:   the one interaction/moment (and which recipe implements it)
Emotion:     what the first 3 seconds should feel like
Motion verb: how things move here (e.g. "slide like film", "settle like paper", "snap like a shutter")
Screenshot:  the frame someone would share
```

### Phase 2: Art direction system

Read `references/art-direction.md` and `references/typography.md`, and consult
`references/layout.md`. Decide the following and write it into `DESIGN.md`:

- **Palette:** 4 to 6 named hex values by role (ground, ink, muted, line, accent, curtain).
  Pure #000 and #fff are allowed. The AI-default palettes in art-direction.md are not, unless
  the concept demands one and you can say why.
- **Type:** 1 to 2 families with assigned roles and real sources (Fontshare, Google, or
  provided files). Use a fluid scale, and set tracking and leading per size. Display type is an
  active design element.
- **Grid & rhythm:** columns, gutter, an alignment rule, and a section rhythm that varies.
- **Shape:** one radius rule. **Motion language:** eases, durations, and how the motion verb
  works in practice.
- **Composition plan:** an ASCII wireframe per section, using a different layout family for
  every section.
- **Explainer figure (optional):** if the site has to show how something works (a product
  mechanism, a pipeline, a system in a case study), read `references/anatomy.md` for when a
  figure earns its place. If the `anatomy` skill is available, plan at most one section as an

From denycode-dev/denycode-plugin, MIT.

More from denycode-dev/denycode-plugin