{"_id":"@cubealabs/cube-ui","name":"@cubealabs/cube-ui","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@cubealabs/cube-ui","version":"1.0.0","description":"⚡ Generate UI components with automatic framework detection for Next.js, React, Vue, Angular, Svelte & more","keywords":["ui-components","react-components","vue-components","next.js","angular","svelte","tailwindcss","design-system","claude-skill","claude-code","code-generator"],"author":{"name":"Cube A Labs"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Muddi00seven/skills.git","directory":"packages/cube-ui"},"homepage":"https://github.com/Muddi00seven/skills/tree/main/packages/cube-ui#readme","bugs":{"url":"https://github.com/Muddi00seven/skills/issues"},"main":"skill.md","_id":"@cubealabs/cube-ui@1.0.0","gitHead":"76ab4d9df42e19e931f622d4cdb4df7f713f80df","_nodeVersion":"23.10.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-g9JzbcBkFGkWmQs9CDGT/X0nt8FFkN61i7OnM8yooYCcOzbAZqom4n818XJYSdjbqtpIkPQF66DRx/RwNwgpug==","shasum":"13c131a11d036b06f827d75773247980f4117273","tarball":"https://registry.npmjs.org/@cubealabs/cube-ui/-/cube-ui-1.0.0.tgz","fileCount":3,"unpackedSize":22800,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHD0NyVnOenryZzDIuFtXOyqRDcQJk+sAJFbXhjd7cpxAiEAhrOcYt4jSPYhVi9X18sesKDUowjurJKjHQSyB4GfqxA="}]},"_npmUser":{"name":"sigma_wolf","email":"just00seven@gmail.com"},"directories":{},"maintainers":[{"name":"sigma_wolf","email":"just00seven@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cube-ui_1.0.0_1769613220966_0.8557344582938571"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-28T15:13:40.884Z","1.0.0":"2026-01-28T15:13:41.102Z","modified":"2026-01-28T15:13:41.336Z"},"maintainers":[{"name":"sigma_wolf","email":"just00seven@gmail.com"}],"description":"⚡ Generate UI components with automatic framework detection for Next.js, React, Vue, Angular, Svelte & more","homepage":"https://github.com/Muddi00seven/skills/tree/main/packages/cube-ui#readme","keywords":["ui-components","react-components","vue-components","next.js","angular","svelte","tailwindcss","design-system","claude-skill","claude-code","code-generator"],"repository":{"type":"git","url":"git+https://github.com/Muddi00seven/skills.git","directory":"packages/cube-ui"},"author":{"name":"Cube A Labs"},"bugs":{"url":"https://github.com/Muddi00seven/skills/issues"},"license":"MIT","readme":"# @cubealabs/cube-ui\n\n⚡ **Generate UI components with automatic framework detection**\n\nStop writing boilerplate. Generate production-ready components for Next.js, React, Vue, Angular, Svelte, and more with proper TypeScript, styling, and accessibility.\n\n## Features\n\n- ✅ **Auto Framework Detection**: Detects Next.js, React, Vue, Angular, Svelte\n- ✅ **TypeScript First**: Proper types and interfaces\n- ✅ **Responsive**: Mobile-first with Tailwind breakpoints\n- ✅ **Dark Mode**: Built-in dark mode support\n- ✅ **Animations**: Card lifts, expanding underlines, fades\n- ✅ **Loading States**: Skeletons, shimmers, spinners\n- ✅ **Accessible**: ARIA labels, keyboard navigation\n- ✅ **Design System**: Cube A Labs minimalist design\n\n## Installation\n\n```bash\nnpm install @cubealabs/cube-ui\n```\n\n## Usage with Claude Code\n\nThis is a Claude Code skill. Install it and use with:\n\n```bash\n/cube-ui\n```\n\nFollow the interactive prompts to generate components.\n\n## What You Can Generate\n\n### Components\n- Cards (product, user, content)\n- Buttons (primary, secondary, ghost)\n- Forms (inputs, validation, submit)\n- Modals & Dialogs\n- Navigation (header, sidebar, tabs)\n- Data Display (tables, lists, grids)\n\n### Pages\n- Landing pages\n- Dashboard layouts\n- Listing pages with filters\n- Detail pages\n- Admin panels\n\n### Presets\n- Marketplace Card\n- Admin Data Table\n- Form Layout\n\n## Supported Frameworks\n\n- Next.js (App & Pages Router)\n- React (Vite, CRA)\n- Angular (Standalone Components)\n- Vue 3 (Composition API)\n- Svelte / SvelteKit\n- Astro\n- Plain HTML/CSS/JS\n\n## Supported Styling\n\n- Tailwind CSS (preferred)\n- CSS Modules\n- SCSS/Sass\n- Styled Components\n- Emotion\n- Plain CSS\n\n## Example Output\n\n**Next.js Component:**\n```tsx\nimport Image from 'next/image';\nimport type { ProductCardProps } from './ProductCard.types';\n\nexport const ProductCard = ({ product }: ProductCardProps) => {\n  return (\n    <article className=\"card-lift bg-white rounded-lg overflow-hidden\">\n      <Image src={product.image} alt={product.name} fill />\n      <h3 className=\"text-xl font-bold\">{product.name}</h3>\n    </article>\n  );\n};\n```\n\nComplete with TypeScript types, tests, and framework-specific patterns.\n\n## Design System\n\nUses Cube A Labs minimalist design:\n- Primary: `#111111`\n- Secondary: `#444444`\n- Subtle: `#FAFAFA`\n- Borders: `#DADADA`\n\nWith smooth animations and clean typography.\n\n## License\n\nMIT © Cube A Labs\n\n## More Skills\n\nCheck out other [Cube A Labs skills](https://github.com/Muddi00seven/skills):\n- [@cubealabs/favicon](../favicon) - Favicon generator\n- [@cubealabs/sitemap](../sitemap) - SEO sitemap generator\n","readmeFilename":"README.md","_rev":"1-62791dc0685110a0c4e7deddfcdeece3"}