skill
modern-frontend-skill
A skill for coding agents that transforms vague UI requests into polished, production-quality frontends.
Set up
Skills are installed by placing their folder where your agent loads skills.
The download comes from github.com/deveshpunjabi/modern-frontend-skill itself, not from our server, so what you get is exactly what its author published.
Install instructions come from the README
README
synced Oct 17, 2026Modern Frontend Design
A skill for coding agents that transforms vague UI requests into polished, production-quality
frontends. v3.0 is the first edition built specifically for 2026's design landscape: OKLCH
color tokens, native CSS scroll-driven animations, Liquid Glass surfaces, View Transitions,
CSS Anchor Positioning, @starting-style enters, and niche-aware AI Minimalism vs
Neo-Brutalism design direction.
What's New in v3.0 (2026)
| Feature | v2.0 | v3.0 (2026) |
|---|---|---|
| Color format | HSL tokens | OKLCH — Baseline 2026, perceptual uniformity |
| Scroll animations | Framer / Intersection Observer | Native CSS animation-timeline: view() |
| Enter animations | Framer initial/animate | @starting-style — flash-free, no JS |
| Page transitions | Manual | @view-transition { navigation: auto } |
| Tooltips | Floating UI / Popper.js | CSS Anchor Positioning |
| Staggered animations | JS delays | sibling-index() CSS function |
| Grid layouts | Manual JS masonry | Native CSS Grid Lanes / masonry |
| AI aesthetic | Generic glow | AI Minimalism — restrained, Perplexity/OpenAI style |
| Color vocabulary | 2 niches | 5 aesthetics: AI Minimalism, Technical Mono, Neo-Brutalism, Organic, Cinematic |
| Evals | 7 cases / 108 assertions | 7 cases / 129 assertions |
| CI | ✅ | ✅ 13/13 tests |
The 2026 Paradigm Shift
After years of everyone copying the same "dark purple glow" SaaS aesthetic, 2026 splits into distinct visual languages:
| Aesthetic | Products | Visual Signature |
|---|---|---|
| AI Minimalism | Perplexity, Claude, OpenAI | Aggressive whitespace, single font, barely-there UI |
| Technical Mono | Terminal-style dev tools | Monospace, dark green, code blocks, zero decoration |
| Cinematic | SaaS marketing, AI startups | Video heroes, liquid glass, oversized type, marquees |
| Neo-Brutalism | Agencies, art projects, edgy brands | Zero radius, stark borders, offset shadows, bold type |
| Organic | Wellness, agencies, portfolios | Earthy OKLCH, soft curves, blob backgrounds, grain |
The skill detects which aesthetic fits the product niche and applies it correctly.
How It Works
Ask your agent: "Build a cinematic landing page for my AI startup Nimbus."
The skill runs a 12-step Atom of Thought Design Process:
- OKLCH Token System — complete :root variables before any component
- Product Understanding — type, audience, value prop, conversion goal
- 2026 Visual Research — 5 hero patterns, aesthetic selection, trend application
- Visual System — OKLCH palette, variable font pairing, spacing scale, radius
- Layout Architecture — section structure mapped before coding
- Component System — liquid-glass surfaces, anchor-based tooltips
- 2026 Motion System — native CSS scroll-driven,
@starting-style, View Transitions - Technology Stack — Next.js 15, Tailwind v4, TypeScript baseline
- Backend + Performance — RSC, Core Web Vitals, sustainable design
- Responsive + Accessible — WCAG 2.1 AA baked in, not afterthought
- Quality Validation — OKLCH token audit, 2026 CSS feature checklist
- Hero Prompt Engineering — MotionSites-style precise spec output
- Final Testing — build, lint, runtime, component scan, hex audit
What's Inside
modern-frontend-skill/
├── skills/modern-frontend-design/
│ ├── SKILL.md # 598-line 12-step process — CI validated ✓
│ ├── references/
│ │ ├── design-systems.md # 615-line: OKLCH palettes, liquid glass,
│ │ │ # 2026 CSS features, neo-brutalism recipes,
│ │ │ # gradient/glow, marquee, grain, a11y
│ │ └── hero-prompts.md # 431-line: 6 MotionSites-quality templates
│ └── evals/
│ └── evals.json # 7 cases · 129 assertions
├── scripts/
│ ├── validate_skill.py # CI validator — enforces ≤600 line limit
│ └── run_evals.py # Eval summary printer
├── tests/
│ ├── test_validate_skill.py # 6 tests
│ └── test_evals.py # 7 tests — 13 total
├── examples/
│ └── README.md # 6 calibrated prompt examples
├── docs/
│ └── SKILL-GUIDE.md # Customization guide
├── .github/workflows/ci.yml # CI: validate + evals + pytest
└── README.md
2026 Niche Design Table
| Niche | Aesthetic | Primary Color | Hero Pattern |
|---|---|---|---|
| AI / ML tools | AI Minimalism | OKLCH neutral or indigo | B (minimal) or A (cinematic) |
| Developer tools | Technical Mono | OKLCH green | Code block terminal |
| Fintech | Professional light | OKLCH deep blue | Two-column + dashboard card |
| Cybersecurity | Dark terminal | OKLCH green or red | Status-driven |
| Creative agencies | Neo-Brutalism | Warm OKLCH copper | D (editorial type) |
| SaaS dashboards | Cinematic | OKLCH indigo | Bento grid |
| E-commerce (lifestyle) | Dopamine | Vivid OKLCH chroma | Product grid |
| Health / Wellness | Organic | OKLCH sage/earthy | Blob bg + phone mockup |
| Portfolios | Neo-Brutal or Organic | Niche-dependent | Asymmetric |
| Startups | Cinematic | OKLCH indigo/purple | Video + marquee |
| B2B / Consulting | Premium dark | OKLCH muted | Authority-driven |
Anti-Patterns — 2026 Edition
| Anti-Pattern | Why It Fails in 2026 | Fix |
|---|---|---|
| HSL/hex colors | Perceptual non-uniformity, no relative color syntax | OKLCH everywhere |
| JS scroll listeners for animation | Blocks main thread, needs library | animation-timeline: view() |
| Flash of final state on modals | Jarring, amateur feel | @starting-style |
| Floating UI / Popper.js for tooltips | Unnecessary dependency | CSS Anchor Positioning |
| "Purple glow on dark" for every AI app | Overdone, AI Minimalism has won | Choose your aesthetic intentionally |
| JS stagger with timeouts | Fragile, unnecessary | sibling-index() or CSS delay calc |
| Lorem ipsum copy | Can't judge real design | Write realistic product copy always |
| Accessibility as afterthought | Legal risk, bad UX, fails WCAG | OKLCH contrast tokens baked in |
| Ignoring RSC in Next.js 15 | Heavy client bundle, slow LCP | Static content → RSC default |
Test Cases
| # | Scenario | Stack | Key 2026 Focus |
|---|---|---|---|
| 1 | AI SaaS landing (Lumina AI) | Next.js + Framer | OKLCH, video hero, scroll-driven, @starting-style |
| 2 | Fintech dashboard (Clearpath) | Next.js | OKLCH light, Container scroll-state, RSC |
| 3 | Designer portfolio (Aria Chen) | HTML/CSS/JS | OKLCH, animation-timeline, no frameworks |
| 4 | Dev tool hero (Axiom) | React | OKLCH green, sibling-index(), terminal |
| 5 | SaaS pricing (Forma AI) | React + Framer | OKLCH, layoutId toggle, @starting-style FAQ |
| 6 | Agency hero (Forma Studio) | React + GSAP | Neo-brutalism, zero radius, GSAP character |
| 7 | PM dashboard token audit | Next.js | Full OKLCH audit — zero hex proof |
7 evals · 129 assertions · CI: 13/13 tests ✅
Installation
# Claude Code
npx skills add deveshpunjabi/modern-frontend-skill
# Cursor
cp -r skills/modern-frontend-design .cursor/skills/
# Windsurf / Cline
cp -r skills/modern-frontend-design .<agent>/skills/
# Any agent
cp skills/modern-frontend-design/SKILL.md <agent-skills-dir>/
Verify It Works
In a new session, ask:
"Build a cinematic hero for my AI startup 'Nimbus'. Dark OKLCH indigo, video background, native CSS scroll-driven animations, liquid glass, and @starting-style on the CTA modal."
The agent should: define OKLCH :root tokens → add .liquid-glass utility → build video hero
→ use animation-timeline: view() for reveals → add @starting-style → include
@view-transition → add grain texture → specify per-element animation timing.
Scripts
# Validate SKILL.md (required to pass CI)
python scripts/validate_skill.py skills/modern-frontend-design/SKILL.md
# → ✓ valid
# View eval summary
python scripts/run_evals.py skills/modern-frontend-design/evals/evals.json
# → 7 evals, 129 assertions
# Run all 13 tests
python -m pytest tests/ -v
# → 13 passed
Philosophy
- OKLCH-first — perceptually uniform, relative color syntax, Baseline 2026
- CSS-native motion — scroll-driven animations over JS libraries where possible
@starting-style— every modal/drawer/toast has a flash-free enter- View Transitions — page navigation feels like a native app
- Aesthetic intentionality — AI Minimalism, Technical Mono, Neo-Brutalism, Organic, Cinematic
- Liquid Glass — the 2026 standard for floating surfaces
- WCAG baked in — not a checkbox, a design foundation
- RSC-aware — static by default, client only for interactivity
Contributing
See CONTRIBUTING.md. Run python -m pytest tests/ -v before PRs.
License
MIT — see LICENSE