honey-design

Featured

Same pixels, fewer tokens — for user-facing deliverables where visual polish is the spec. Use when building or editing a landing page, marketing site, hero, pricing/feature section, dashboard, or any HTML/CSS UI component. Keeps the full rendered design (layout depth, hierarchy, motion, responsive richness, a11y) and cuts tokens by expressing that design densely — CSS custom properties, shared classes, shorthand, fluid units — instead of by cutting the design. The honey core trims code and prose; this trims how the design is *written*, never how it looks. Reach for it whenever output is user-facing markup, even if the user never says "minimal".

Web & Frontend 295 stars 17 forks Updated 4 days ago MIT

Install

View on GitHub

Quality Score: 91/100

Stars 20%
82
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# Honey Design (same pixels, fewer tokens) For user-facing deliverables — landing pages, marketing sites, UI components — **polish is the spec.** A bare, valid-but-ugly page is a fail, not a saving. So the token lever here is **not** "emit less design." It's "express the same design densely." Compress the *code*, never the rendered result. If a cut would change a single pixel of the finished page, it's the wrong cut. **Apply reflexively, as a writing style** — don't deliberate which rule fires or spend reasoning tokens on the skill itself. Build the polished thing; write its markup and CSS the dense way by habit. ## Hold the line on polish (the judged axis) Never trade these for tokens — they *are* the deliverable: - **Visual depth** — considered layout, spacing rhythm, real visual hierarchy, on-brand color and type. Not unstyled scaffolding. - **Every requested section, fully fleshed** — nav, hero, features, pricing, footer, etc. A stubbed-out section is incomplete, not minimal. - **Interaction & motion** — hover/focus states, transitions, the small touches that read as "finished." - **Responsive richness** — genuinely good on mobile and desktop, not a desktop page that merely doesn't break. - **Accessibility** — labelled controls, `alt` on every image, semantic landmarks, visible focus, sufficient contrast, keyboard paths. - **Anything the user explicitly asked for.** ## The token lever — dense expression, identical render Produce the *same* finished page ...

Details

Author
Green-PT
Repository
Green-PT/honey-for-devs
Created
2 months ago
Last Updated
4 days ago
Language
JavaScript
License
MIT

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

Code & Development Featured

honey

Write less code and say less about it. Applies YAGNI and stdlib/native-first so the agent writes the minimum code that needs to exist, and responds tersely — stripping filler, hedging, and pleasantries while keeping code, identifiers, and technical terms exact. Use whenever writing, modifying, refactoring, reviewing, or explaining code, or any response where output volume drives token cost — even if the user never says "minimal" or "concise". Especially in agentic coding, where the volume of generated code and prose runs up the bill.

295 Updated 4 days ago
Green-PT
Web & Frontend Listed

ultrapolish-web

Universal polish for web apps and sites built with React, TypeScript, and CSS. Takes a competent interface to a beloved one within its own visual style; never introduces a palette, typeface, or motion personality. Use whenever the user is building, reviewing, auditing, or refining a web UI and wants it to feel considered, cohesive, premium, and detailed. Covers easing and springs, gestures and scroll, colour (OKLCH, APCA, dark mode), typography, 4px layout, surfaces, buttons, forms, tables and dense data, overlays, haptics, icons, copy, states, onboarding and pricing, mobile web, performance, accessibility, marketing pages. Triggers on polish, feels generic, audit UI, easing, spring, Motion, hover, focus ring, shadow, radius, modal, sheet, popover, toast, form, input, button, icon, contrast, empty state, layout shift, iOS Safari, safe-area, reduced motion, a11y, landing page, design tokens, table, data grid, search, bulk actions, command palette, favicon, app icon, file upload, drag and drop, video player.

0 Updated yesterday
heyimjames
AI & Automation Listed

fabius-decor

fabius's ship-grade design layer — gives the agent a token vocabulary, the universal laws that separate amateur UI from shipped UI, and a quality checklist. Use when building or reviewing any UI — a landing page (visual execution; the message and copy are fabius-mercatus), a component, a screen, an email, a slide, a brand surface, a chart, a diagram, a data visualization — when the user references a brand look, or asks to make something "look good", "more polished", "production quality", "chart this", "graph this", or "visualize this data". Also covers generating images (for image models) and explanatory diagrams that teach a system: "generate an image", "diagram this", "explain this codebase visually". Also owns responsive/mobile-first layout and a finished design's accessibility — focus states, contrast, ARIA-only — plus icon choice, motion libraries, design assets (illustrations · 3D · textures · fonts · color · HuggingFace) and right-to-left / bidirectional layout (RTL, Hebrew/Arabic).

2 Updated yesterday
shear559