Frontend design

Skill hilmifawwazsaad/NextJS-js-Boilerplate/.agents/frontend-design

Baseline design philosophy for distinctive, production-grade UI. Use when visual quality and aesthetic direction matter — components, pages, layouts, styling. Extends frontend skill — all frontend rules still apply.From its SKILL.md

Install

npx -y skills add hilmifawwazsaad/NextJS-js-Boilerplate --skill frontend-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

3.6 KB, 781 tokens by cl100k_base, as published. Nobody here has run it

Read .agents/software-principles/SKILL.md and .agents/frontend/SKILL.md first.

Design Thinking

Before writing code, commit to a clear aesthetic direction:

Purpose — What problem does this UI solve? Who uses it?
Tone — Pick one and commit: minimal · editorial · playful · brutalist · luxury · retro-futuristic · organic · industrial · soft · geometric. Intentionality over intensity.
Differentiation — What is the one thing a user will remember about this UI?

No two designs should look the same. Avoid converging on safe, predictable choices.

Typography

Choose characterful, distinctive fonts — never Inter, Roboto, Arial, or system fonts as a default. Pair a display font with a refined body font. Font choice drives the entire aesthetic — treat it as the first design decision.

Color & Composition

Apply 60-30-10: dominant (60%) · secondary (30%) · accent (10%)
Map every color to a semantic role (background, surface, foreground, muted, primary, accent, destructive, success) — never use raw hex ad hoc
Contrast minimum WCAG AA: normal text ≥ 4.5:1, UI components ≥ 3:1
Commit to light or dark — don't default to neutral gray
Asymmetry, overlap, diagonal flow, grid-breaking elements over predictable grid layouts
Generous negative space OR controlled density — pick one and execute it fully

Spatial Design (8-Point Grid)

All spacing, sizing, and layout values must be multiples of 4px. Prefer 8px increments; use 4px only when 8px is too large. Never use odd numbers.

Applies to: padding, margin, gap, width, height, border-radius, icon size
Min touch target: 44×44px
Border radius: pick one scale per project (4 · 8 · 12 · 16 · 24 · 9999px) and use it consistently

UI/UX Principles

Hierarchy — one primary CTA per view; use size + contrast + weight to signal importance
Proximity — related elements closer together than unrelated ones
Consistency — same component, same appearance everywhere; one icon style (outlined vs filled), never mixed
Four states — every interactive element must handle: ideal · loading (skeleton > spinner) · empty (with actionable next step) · error (specific + recoverable)
Accessibility — keyboard-navigable with visible focus ring; aria-label on icon-only buttons; wrap animations in prefers-reduced-motion
Responsive — mobile-first; fluid type/spacing with clamp()

Motion

Focus on high-impact moments: page load with staggered reveals, surprising hover states, scroll-triggered transitions. One orchestrated entrance creates more delight than scattered micro-interactions everywhere. Use whatever motion tool fits the project — CSS animations, Framer Motion, GSAP, Three.js, etc. Match tool complexity to the aesthetic vision.

Visual Details

Add depth — gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders. Match the effect to the tone. Do not add texture that contradicts the chosen aesthetic direction.

Never Do

Generic AI aesthetics: Inter/Roboto/Arial, purple-on-white gradients, cookie-cutter card layouts
Aesthetic choices that contradict the committed tone
Converge on the same aesthetic across different designs
outline: none without a visible focus replacement
Color as the sole indicator of meaning or state

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 1 of the 12 instructions most design frontend skills give in 781 tokens

Counted across 1,169 of the 1,878 authors here whose files we hold, read 2026-08-07

Use CSS variables for color consistencyin 72 of 1169, across 23 files
Commit to one bold aesthetic direction before codinghere, and in 72 of 1169, across 27 files
Match implementation complexity to the aesthetic visionin 70 of 1169, across 20 files
Add atmospheric background effects and texturesin 57 of 1169, across 9 files
Use unexpected spatial compositions and layoutsin 56 of 1169, across 8 files
Implement real working codein 55 of 1169, across 7 files
Vary themes and aesthetics across different designsin 48 of 1169, across 7 files
Launch chromium in headless modein 47 of 1169, across 4 files
Close the browser when donein 47 of 1169, across 4 files
Run provided scripts with help flag firstin 47 of 1169, across 4 files
Wait for network idle statein 47 of 1169, across 4 files
Use descriptive selectors for elementsin 47 of 1169, across 4 files

Said here and by no other author read

ensure keyboard navigation with visible focus rings
design mobile-first with fluid type and spacing
use staggered reveals for page load motion

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.