Skip to content

Releases: bitjaru/styleseed

v2.1.1 — Font Size Anti-Pattern Warning

10 Apr 02:09
@bitjaru bitjaru
v2.1.1
2840a81

Choose a tag to compare

View all tags
v2.1.1 — Font Size Anti-Pattern Warning Latest
Latest

Critical: Tailwind v4 Font Size Anti-Patterns

Documented from a real production incident. If you tokenize font sizes as CSS variables, Tailwind v4 will break your UI.

What Went Wrong

  • text-[var(--text-sm)] → Tailwind interprets as color, not font-size → color: 13px (invalid)
  • --text-* CSS variables → conflict with Tailwind v4's internal --text-* namespace
  • Changing --font-size in theme.css → breaks all rem-based spacing (icons, nav, buttons)

What We Added

  • CLAUDE.md: Font Size Anti-Pattern section with 3 ✗ and 1 ✓ pattern
  • DESIGN-LANGUAGE.md: CRITICAL warning after typography rules
  • Prohibited Practices: explicit rules against font-size tokenization
  • /ss-lint: New check that detects text-[var(-- pattern automatically

The Rule

✓ ALWAYS: text-[36px], text-[18px], text-[13px]  (explicit px)
✗ NEVER:  text-[var(--text-sm)]                    (CSS variable)
✗ NEVER:  --text-sm: 13px in theme.css             (Tailwind conflict)
Assets 2
Loading

v2.1.0 — /ss-* Skills + Auto-Install + Usability

09 Apr 05:37
@bitjaru bitjaru
v2.1.0
fcf0477

Choose a tag to compare

View all tags
v2.1.0 — /ss-* Skills + Auto-Install + Usability

What's New

Breaking: Skill commands renamed /ui-* /ux-* → /ss-*

Short, branded, no conflicts. All 13 skills:
/ss-setup /ss-page /ss-component /ss-pattern /ss-review /ss-tokens /ss-a11y /ss-lint /ss-update /ss-flow /ss-audit /ss-copy /ss-feedback

Auto-Install

CLAUDE.md now includes auto-install instructions. When AI detects missing skills, it clones the repo and copies them automatically. No manual cp needed.

Example Prompts

README now has copy-paste prompts for common use cases (new project, add page, improve existing, update engine).

Coming Soon

  • npx styleseed init — one-command setup (npm CLI)
  • More skins from awesome-design-md
  • Desktop layout rules
Loading

v2.0.0 — Engine + Skins Architecture

08 Apr 09:23
@bitjaru bitjaru
v2.0.0
179931d

Choose a tag to compare

View all tags
v2.0.0 — Engine + Skins Architecture

What's New

Breaking: engine/ + skins/ architecture

  • engine/ — Brand-agnostic design engine (69 rules, 48 components, 11 skills)
  • skins/ — Swappable visual identity (5 built-in + 58 via awesome-design-md)

Built-in Skins

  • Toss (original) — purple, fintech
  • Stripe — indigo, professional (from awesome-design-md)
  • Linear — dark-first, violet (from awesome-design-md)
  • Vercel — monochrome, geometric (from awesome-design-md)
  • Notion — warm, blue accent (from awesome-design-md)

New Features

  • /ui-setup interactive wizard with awesome-design-md integration
  • 4 UX skills: /ux-flow, /ux-audit, /ux-copy, /ux-feedback
  • Framer Motion primitives (motion.tsx)
  • Part 3: Page Composition & Visual Rhythm rules (rules 61-69)
  • .cursorrules for Cursor users
  • GitHub Wiki with 9 pages of documentation

Improvements

  • All engine files are brand-agnostic (no hardcoded brand colors)
  • Table of Contents in DESIGN-LANGUAGE.md
  • Dark mode support for all skins
Loading