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.
This commit is contained in:
35
.agents/skills/frontend-design/README.md
Normal file
35
.agents/skills/frontend-design/README.md
Normal file
@@ -0,0 +1,35 @@
|
||||
# frontend-design
|
||||
|
||||
A frontend design skill for [Claude Code](https://claude.com/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
|
||||
|
||||
```bash
|
||||
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
|
||||
Reference in New Issue
Block a user