# Frontend Design

> Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications for this blog project. Generates creative, polished code that avoids generic AI aesthetics and respects the project's content / API contracts.

- **Type:** Skill
- **Install:** `agentstack add skill-lin037-quiet-archive-frontend-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [lin037](https://agentstack.voostack.com/s/lin037)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [lin037](https://github.com/lin037)
- **Source:** https://github.com/lin037/quiet-archive/tree/main/.claude/skills/frontend-design

## Install

```sh
agentstack add skill-lin037-quiet-archive-frontend-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

## Project Contract (Must Read for this repo)

When this skill is used inside the blog project, **treat the following as hard constraints**:

1. **Data layer is stable core** — never modify `src/api/*` or `scripts/*` when generating pages. Pages should only CALL the API functions listed in `docs/api-reference.md`, not reimplement data fetching.
2. **Filesystem is the source of truth** — do not invent new content types, URIs, or frontmatter fields. Types come from `posts//README.md`. Everything discoverable from `src/api/content.ts`.
3. **Static-first** — pages must build as pure static HTML. Do NOT add Node adapter, SSR, or runtime server-only code unless explicitly asked.
4. **Accessibility is non-negotiable** — semantic HTML, proper heading hierarchy, `aria-*` where needed, keyboard navigation for interactive islands, `prefers-reduced-motion` respected.
5. **Island model** — Use `.astro` for static markup, Preact islands (`client:load` / `client:visible`) only when interactivity is required. Do not hydrate what doesn't need to be hydrated.

## Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:
- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. Use these for inspiration but design one that is true to the aesthetic direction.
- **Constraints**: Technical requirements (framework, performance, accessibility).
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?

**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.

Then implement working code that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail

## Frontend Aesthetics Guidelines

Focus on:
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.

**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.

## Styling System Rules (Strict for this repo)

### 1. Design Tokens are Single Source of Truth

Place every design primitive (color, font, spacing, radius, shadow, duration, easing, z-index) in `src/styles/tokens.css` as CSS custom properties. Pages and components MUST NOT hardcode these values.

```css
/* src/styles/tokens.css */
:root {
  /* Colors — define in pairs for light/dark */
  --color-bg: #fcfcfb;
  --color-bg-elevated: #ffffff;
  --color-bg-alt: #f4f4f2;
  --color-text: #0e0e0c;
  --color-text-secondary: #37352f;
  --color-text-tertiary: #8a857b;
  --color-border: #d9d7d2;
  --color-border-light: #ececea;
  --color-accent: #1f8a4c;
  --color-accent-bg: rgba(31, 138, 76, 0.08);

  /* Typography */
  --font-display: 'Cormorant Garamond', 'Noto Serif SC', serif;
  --font-body: 'Newsreader', 'Noto Serif SC', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;

  --tracking-tight: -0.01em;
  --tracking-wide: 0.04em;

  /* Spacing (geometric-ish scale) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --page-width: 56rem;
  --content-width: 42rem;
  --gutter: 1.5rem;
}
```

### 2. Dark Mode is MANDATORY and Variable-Driven

Never write hex colors in pages/components. All colors must reference `var(--color-*)` so switching theme is **one attribute change**:

```css
:root[data-theme='dark'] {
  --color-bg: #0b0b0a;
  --color-bg-elevated: #141412;
  --color-bg-alt: #1b1b18;
  --color-text: #f2f1ec;
  --color-text-secondary: #c7c5bc;
  --color-text-tertiary: #8a857b;
  --color-border: #2b2a26;
  --color-border-light: #1f1e1b;
  --color-accent: #7fcf9f;
  --color-accent-bg: rgba(127, 207, 159, 0.12);
}
```

The existing theme toggle in `Header.astro` flips `document.documentElement.dataset.theme`. Every new component you write must look correct under **both** themes with zero extra code changes.

### 3. Accent Color Philosophy

Accent color exists only for: links, selected state, focus rings, small emphasis dots, small stat highlights. **Never paint large fills with accent color.** Treat accent like punctuation, not paragraph color.

### 4. CSS Organization

- **`src/styles/tokens.css`** — variables only, no selectors other than `:root` / `:root[data-theme='dark']`
- **`src/styles/global.css`** — element defaults (`body`, `a`, `img`), reset-ish
- **`src/styles/prose.css`** — long-form article typography (the `.prose` class)
- **Component styles** — colocated in the `.astro` file via `` blocks; use `is:global` sparingly and only for child-selector patterns
- No Tailwind, no CSS-in-JS — plain CSS with variables, scoped via Astro's default scoping

### 5. Prose / Long-form Typography

Long-form content uses `.prose` class (already set up in `styles/prose.css`). Any article/note/column detail page should wrap rendered markdown in `…`. When extending prose styles, prefer adding to `prose.css` over per-page overrides.

### 6. Responsive

- Content-first breakpoints, not device-first
- Always use `max-width: Npx` media queries with intentional break values
- Typography should scale gracefully (use `clamp()` where appropriate)
- Test at 360 / 768 / 1024 / 1440 widths mentally before shipping

### 7. Animation & Motion

- **Always** wrap non-trivial animation in `@media (prefers-reduced-motion: no-preference)`
- Micro-interactions: 150-250ms with `var(--ease-out)`
- Page transitions (if any): 300-500ms
- Avoid animating `width`, `height`, `top`, `left` — use `transform` + `opacity`
- Stagger reveals via `animation-delay` or CSS custom properties indexed by element

### 8. Images & Assets

- Store local images under `public/assets/`; reference them with absolute runtime paths like `/assets/...`
- Files outside `public/assets/` are not served at `/assets/...` and can become 404 after build or deployment
- For content covers, use `resolveAssetSrc(entry.cover)` before passing values to ``
- Never use external image URLs in production pages unless explicitly required

## Component Checklist Before Shipping

Every component you generate must pass this mental checklist:

- [ ] Uses `var(--*)` tokens, no hardcoded colors/spacing
- [ ] Looks correct in both light and dark theme
- [ ] Semantic HTML (``, ``, ``, ``…)
- [ ] All interactive elements reachable via keyboard, have focus styles
- [ ] Images have `alt`; SVGs have `aria-hidden` or ``
- [ ] No layout shift on load (fixed aspect ratios, font-display: swap set at layout)
- [ ] `prefers-reduced-motion` respected for any animation
- [ ] No client-side JS unless required → then use Preact island with minimal bundle
- [ ] Data comes from `src/api/*`, not from new ad-hoc content parsing

## Reminder

Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision — but always within the project's stable-core / flexible-surface contract.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [lin037](https://github.com/lin037)
- **Source:** [lin037/quiet-archive](https://github.com/lin037/quiet-archive)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-lin037-quiet-archive-frontend-design
- Seller: https://agentstack.voostack.com/s/lin037
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.