Modern Frontend Skills

modern-frontend-skills

**v2 · multi-direction pack release**

A premium frontend pack for any AI coding agent — Claude Code, Cursor, Codex, Antigravity, Copilot. Builds interfaces at the level of Awwwards Site of the Year winners and the quiet polish of Emil Kowalski's component work (Sonner, Vaul, [animations.dev](https://animations.dev)).

The pack is built around **a single curation question**: how do you fuse the cinematic confidence of Louis Paquet / Locomotive work with the invisible craft of Emil Kowalski, on a per-brief basis? The router reads the brief, picks one of six directions, then layers a universal craft canon on top.

Install

npx skills add https://github.com/alvinindra/modern-frontend-skills

Works for any agent that reads `SKILL.md` frontmatter.

The six directions

Direction	The question it answers
`cinematic-scroll`	"How do I make the product the story of the page?"
`motion-bento`	"How do I show a working product surface in a marketing context?"
`publication`	"How do I make the page read like a designed article?"
`nightside`	"How do I make this brand feel after-hours, considered, not flashy?"
`modernist-grid`	"How do I let typography and grid do all the work?"
`considered-modern`	"How do I read warm and professional, not cold-startup?"

Each direction is self-contained — own frontmatter, own dial calibration, own three signature moves, own material direction (typography / color / layout / surface), own choreography rules, own anti-pattern list, own reference brief.

Structure

modern-frontend-skills/
├── SKILL.md                       Router. Reads brief, picks direction.
│
├── cinematic-scroll/skill.md      Scroll-driven, product-as-protagonist.
├── motion-bento/skill.md          Motion-engine bento, 5 archetyp