kluser

kluser CLI

Usage no npm install needed!

<script type="module">
  import kluser from 'https://cdn.skypack.dev/kluser';
</script>

README

Kluser

A Frontend Development Accelerator.

design needs to be quick and succinct

-- Frederico G K Oliveira

🧰 Features

  • Convert HTML/CSS to (React, React Native)
  • Organize style
  • Generate Jest
  • Generate Storybook
  • Realtime conversion mode
  • Matrix loading animations :P

πŸ“ˆ Advantage

With short and simple html/css code creates a professional structure.
write this:
<body>
  <div id="Home">
    <div id="Header">
      <h1 id="Title">Home Page</h1>
    </div>
  </div>
</body>
receive this:
source
β”œβ”€β”€ components
β”‚   β”œβ”€β”€ Header
β”‚   β”‚   β”œβ”€β”€ Header.jsx
β”‚   β”‚   β”œβ”€β”€ Header.stories.jsx
β”‚   β”‚   β”œβ”€β”€ Header.styled.js
β”‚   β”‚   β”œβ”€β”€ Header.test.jsx
β”‚   β”‚   └── index.js
β”‚   └── Title
β”‚       β”œβ”€β”€ Title.jsx
β”‚       β”œβ”€β”€ Title.stories.jsx
β”‚       β”œβ”€β”€ Title.styled.js
β”‚       β”œβ”€β”€ Title.test.jsx
β”‚       └── index.js
└── pages
    └── Home
        β”œβ”€β”€ Home.jsx
        β”œβ”€β”€ Home.stories.jsx
        β”œβ”€β”€ Home.styled.js
        β”œβ”€β”€ Home.test.jsx
        └── index.js

πŸ”§ Installation

$ npm install -g kluser

πŸ› οΈ Usage

$ kluser

πŸ‘¨β€πŸ« Documentation

Create new project

Alt Text

With the project created the same command will render the project or activate live preview mode

Alt Text

πŸ†˜ Roadmap

πŸ€™ Today 🀞 Future
Generate React.js βœ”οΈ
Live Preview βœ”οΈ
Config file βœ”οΈ
Generate React Native βœ”οΈ
Props support βœ”οΈ
Support Atomic Design ❌
State support ❌
Generate Flutter ❌
Drag n Drop Tool ❌

πŸ‘‚ Feedback

If you have any feedback, please reach out to us at kluserhuu@gmail.com

πŸ§” Author