Thanks for your interest! Here's how to get started.
git clone https://github.com/yeasin2002/ResponsiveKit.git
cd ResponsiveKit
pnpm install
pnpm devLoad extension:
- Chrome:
chrome://extensions→ Load unpacked →.output/chrome-mv3-dev - Firefox:
about:debugging→ Load Temporary Add-on →.output/firefox-mv3-dev
- TypeScript for all files
- Functional React components
- UnoCSS utility classes
cn()for conditional classNames
interface Props {
title: string;
}
export function MyComponent({ title }: Props) {
return <div className="p-4 rounded-lg">{title}</div>;
}Use Shadow DOM for style isolation:
const ui = await createShadowRootUi(ctx, {
name: "my-ui",
onMount: (container) => {
const root = ReactDOM.createRoot(container);
root.render(<Component />);
return root;
},
onRemove: (root) => root?.unmount(),
});pnpm compile # Type check
pnpm check:fix # Lint + formatTest in both Chrome and Firefox.
Format: type: description
Types: feat, fix, docs, refactor, chore
feat: add keyboard shortcut
fix: breakpoint detection on resize
- Create branch:
git checkout -b feat/my-feature - Make changes and test
- Commit with clear message
- Push and open PR
- Describe changes and link related issues
Open an issue with the question label.