Files
Benito Rodríguez a07096d7c7
Some checks failed
CI / lint (push) Failing after 1m5s
CI / test-backend (push) Has been skipped
CI / test-frontend (push) Has been skipped
CI / test-e2e (push) Has been skipped
feat: add UI components for alert dialog, badge, checkbox, dialog, label, select, sheet, table, textarea
- Implemented AlertDialog component with overlay, content, header, footer, title, description, action, and cancel functionalities.
- Created Badge component with variant support for different styles.
- Developed Checkbox component with custom styling and indicator.
- Added Dialog component with trigger, close, overlay, content, header, footer, title, and description.
- Introduced Label component for form elements.
- Built Select component with trigger, content, group, item, label, separator, and scroll buttons.
- Created Sheet component with trigger, close, overlay, content, header, footer, title, and description.
- Implemented Table component with header, body, footer, row, head, cell, and caption.
- Added Textarea component with custom styling.
- Established API service for game management with CRUD operations and metadata search functionalities.
- Updated dependencies in package lock files.
2026-03-18 19:21:36 +01:00
..

frontend-design

A frontend design skill for Claude Code that builds hot, sleek, sexy, usable, fun, and addictive interfaces.

Dark-first themes, terminal-inspired typography, neon accents, tactile micro-interactions, and visual discovery patterns — distilled from real projects into a reusable skill.

Install

npx skills add mager/frontend-design

What it does

  • Generate new UI — Describe what you want and get components/pages in this style
  • Restyle existing code — Point it at your frontend and it'll apply the aesthetic
  • Design guidance — Ask for feedback and get opinionated direction

The aesthetic

  • Dark mode by default (rich blacks, not gray)
  • JetBrains Mono + Space Grotesk typography
  • Neon accent colors — cyan, purple, lime, gold, coral
  • Tactile hover interactions (lifts, glows, border transitions)
  • Visual discovery layouts (masonry walls, bento grids, dense scrollable content)
  • CSS custom properties for contextual theming
  • Mobile-first, always

Tech stack

Adapts to whatever framework you're using. When starting fresh, prefers Astro, SvelteKit, or Next.js with custom CSS. Never suggests Bootstrap.

License

MIT