frontend-design

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 80a50dfcaf5a · 26 Oct 2026Report an issue or request a re-scan

• Publisherjulianoczkowski GitHub userOwner of the repository this skill is read from
• Source folderjulianoczkowski/designer-skills/frontend-designThe exact folder we audited
• LicenceApache-2.0As the repository states it
• Commit pinned for this verdict80a50dfcaf5aA new audit runs when the source changes
• Repository statusNot archivedLast push 111 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: Build distinctive, production-grade frontend interfaces with high design quality, guided by named aesthetic philosophies. Use when building components, pages, or applications. Generates working code with exceptional…

---
name: frontend-design
description: Build distinctive, production-grade frontend interfaces with high design quality, guided by named aesthetic philosophies. Use when building components, pages, or applications. Generates working code with exceptional attention to aesthetic details and creative choices that avoid generic AI output.
---

This skill guides creation of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic detail.

## Example prompts

- "Build the hero section from the brief"
- "Create a card component in a Scandinavian style"
- "I want this to feel like a Japanese magazine. Build the layout."
- "Build the settings page. Use whatever style fits."

## Before You Write Any Code

1. **Explore the existing codebase first.** Scan specifically for:
   - **Component directories**: `components/`, `ui/`, `shared/` and list every component by name and its props/API
   - **CSS variables / tokens**: files named `tokens.css`, `variables.css`, `theme.css`, or `:root` declarations with custom properties
   - **Tailwind config**: `tailwind.config.js` or `tailwind.config.ts`, check `theme.extend` for custom values
   - **UI framework themes**: Material UI `createTheme`, Chakra `extendTheme`, shadcn `globals.css` and `components.json`
   - **Storybook**: `.storybook/` directory or `*.stories.*` files indicating documented components
   - **Font loading**: Google Fonts links, `@font-face` declarations, font imports
   - **Layout patterns**: how existing pages handle grid, containers, breakpoints, and spacing
   - **Package.json UI dependencies**: tailwindcss, @mui/material, @chakra-ui/react, @radix-ui, lucide-react, framer-motion, etc.
   - If components exist that match or partially match what you need to build, extend or compose them. Do not create duplicates.

2. **Understand the context:**
   - What problem does this interface solve? Who uses it?
   - What is the intended emotional tone?
   - What are the hard constraints (framework, devices, performance, accessibility)?

3. **Commit to an aesthetic direction.** Either the user names one (see philosophies below) or you choose one that fits the context. State your choice and why before writing code.

## Aesthetic Philosophies

When the user names a philosophy or describes a vibe, use these as concrete implementation guides. Each philosophy defines typography, color, layout, spacing, motion, and detail treatment.

### Dieter Rams (Functionalist)
Less but better. Every element earns its place. Nothing decorative without function.
- **Typography**: Clean sans-serif (Helvetica Neue, Suisse Intl, Akkurat). Tight letterspacing on headings. Generous line height on body. One size scale, used strictly.
- **Color**: Restrained. Monochromatic with a single functional accent. White or light grey backgrounds. Color is information, not decoration.
- **Layout**: Strict grid. Clear functional hierarchy. Components aligned to a spatial system. No asymmetry for its own sake.
- **Spacing**: Consistent, mathematical scale (4px/8px base). Generous padding. Breathing room between elements.
- **Motion**: Minimal. Purposeful transitions only (state changes, reveals). No decorative animation.
- **Details**: Subtle borders and dividers over shadows. Precise alignment. Rounded corners used sparingly and consistently.

### Swiss / International Typographic
Objectivity through structure. The grid is sacred. Content is king.
- **Typography**: Strong sans-serifs (Neue Haas Grotesk, Univers, Aktiv Grotesk). Dramatic scale contrast between headings and body. All-caps subheadings with generous letterspacing.
- **Color**: High contrast. Black, white, and one primary color. Bold color blocks as compositional elements.
- **Layout**: Rigid multi-column grid. Asymmetric balance. Text and image in dialogue. Alignment across elements is non-negotiable.
- **Spacing**: Defined by the grid module. Gutters are part of the design, not afterthought.
- **Motion**: Page transitions and scroll-triggered reveals that respect the grid. No playful bounce.
- **Details**: Rules (horizontal lines) as structural elements. No gradients. No shadows. Flatness is the point.

### Japanese Minimalism (Ma)
Negative space is content. Restraint communicates sophistication. Quiet over loud.
- **Typography**: Thin-weight sans-serifs or elegant serifs (Noto Sans, Cormorant). Generous line height (1.8-2.0). Small body size with large whitespace margins.
- **Color**: Muted naturals (warm greys, stone, sage, washi). Subtle tonal shifts over hard contrasts. Near-monochrome.
- **Layout**: Asymmetric but balanced. Off-center content. Large empty areas are intentional. Content floats in space.
- **Spacing**: Extreme whitespace. Padding and margins 2-3x what feels "normal." Elements breathe.
- **Motion**: Slow, gentle fades (400-600ms). No bounce, no overshoot. Opacity transitions over position shifts.
- **Details**: Hairline borders. Subtle texture (paper grain, linen). No sharp shadows. Soft, diffused effects.

### Brutalist / Raw
Structure is visible. No polish. Anti-aesthetic is the aesthetic.
- **Typography**: System fonts, monospace (JetBrains Mono, IBM Plex Mono, Courier), or aggressive display faces. Mixed sizes. Text as texture.
- **Color**: Black and white primary. If color, it is raw and clashing (construction yellow, hazard orange, terminal green). No gradients.
- **Layout**: Visible borders. Box model exposed. Stacked blocks. Deliberate roughness. Content first, beauty never.
- **Spacing**: Tight or intentionally uneven. Padding that feels compressed.
- **Motion**: None, or jarring (instant state changes, hard cuts). No easing.
- **Details**: Visible outlines. Default browser form elements can be intentional. Text-only interfaces. No icons unless functional.

### Scandinavian
Warmth plus restraint. Functional beauty. Accessible by default.
- **Typography**: Rounded, friendly sans-serifs (Nunito, Poppins, Circular, Cera Pro). Medium weig

Excerpt, first 6,000 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

git clone https://github.com/julianoczkowski/designer-skills
git -C designer-skills checkout 80a50dfcaf5a

Works in

1. 2026-10-26
   ✓SAFE B 89 / 100

   first audit · source 80a50dfcaf5a

Questions about frontend-design

• github.com/julianoczkowski/designer-skills/tree/main/frontend-de — the audited source at commit 80a50dfcaf5a and every finding aboveObserved · 26 Oct 2026

Spotted something wrong? Report a correction · Methodology