사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/madebymustafa/design-taste --skill neo-brutalism시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
neo-brutalism
One identity: a skills poster for a product that is unapologetically online — loud, honest, square.
1. PALETTE (Fixed)
- Paper:
#FFF8E7(warm bright). Alternate field:#FFEFC2slightly deeper. - Ink:
#0A0A0A— used for ALL borders (2.5px), text, and shadows. - Accents — exactly two: one dominant hot accent
#FF3878(fields, big elements, the hero moment) + one supporting cool accent#7CC6FE(secondary fields, marks, the sticker on the hot field). Two is the ceiling; one is fine. - NO gradients, NO soft/blurred shadows (
box-shadowmust be hard:6px 6px 0 #0A0A0Astyle), NO glass, NO dark-mode hero sections.
2. TYPOGRAPHY (Fixed)
- Display: a geometric grotesk at 700 (
Space Grotesk700,Archivo800),clamp(2.6rem, 7vw, 5.5rem), leading 0.98, tracking −0.02em. Sentence case is fine; never italic, never lowercase-everything-as-a-trend. - Body: same family 400/500, 16–17px, 1.5.
- Labels: mono caps (
IBM Plex Mono,Space Mono), 11px,letter-spacing: 0.06em— stamps, statuses, "NEW", version notes. - One emphasis trick set: highlight words by placing them on a translucent hot/sky swatch, or underlining with a 6px ink rule. Pick one, use ≤ 3 times.
3. COMPOSITION (Fixed)
- Everything is bordered. Every card, button, panel, sticker, input: 2.5px solid ink border, square or pill (no 6–20px soft radius unless the component is a pill). Include the hard offset shadow on 60–70% of elevated elements; flat components (bordered, no shadow) keep the page from tipping into chaos.
- Hero: giant display + oversized pill CTA + a hot field panel with a sky sticker on it; the panel and sticker can rotate 1–2°. Rotation budget: 3 elements per page max.
- Color distribution: hot fields ≤ 2 per viewport, sky fields ≤ 2, everything else paper. Never two hot fields side by side.
- Sections: alternate paper and ink fields (ink sections: paper text). Full-bleed allowed. Pricing: three cards — paper / hot / paper; the hot card gets the biggest shadow.
- Buttons: min 56px height, 2.5px border,
6px 6px 0 #0A0A0Ashadow, pressed state =translate(6px, 6px)with shadow removed.
4. CONTENT TREATMENT
- No emoji. Decorative marks: ✳, ★, →, ◦, •• and simple drawn SVGs (thick strokes, flat fills, only the two accents + ink).
- Copy is part of the identity: direct, a little cocky, zero corporate filler ("You probably have better things to do than learn SQL" > "Streamline your analytics workflow").
- One exclamation mark per page, max. Compliments to the reader allowed ("You're doing great.").
- Price details formatted like packaging labels: mono, bordered, stamped "MOST POPULAR".
5. MOTION (Snappy, Visible, Short)
- Entrances: 150–250ms snap with 2px overshoot on the shadow (
cubic-bezier(0.34, 1.56, 0.64, 1)), or straight 120ms pops. No long cinematic reveals. - Hover: border color flips to an accent, or shadow grows 2px. Press: shadow collapses (see §3).
- Loops: absolutely none — no marquees, no bouncing arrows, no infinite wiggle. The page is confident, not nervous.
6. CHECKLIST (Fail the Page If…)
- [ ] Any element without a 2.5px ink border (backgrounds and images excepted).
- [ ] Any soft shadow or gradient.
- [ ] More than two accent colors.
- [ ] More than ~3 rotated elements.
- [ ] Any emoji.
- [ ] A "corporate voice" sentence anywhere in the copy.
- [ ] Two hot accent fields side by side.
- [ ] An element that looks like it came from a Tailwind template.
