The latest articles on DEV Community by Alimjan Ablikim (@alimjan_ablikim_cf79f17a6). https://dev.to/alimjan_ablikim_cf79f17a6 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3780657%2F57d86429-3ee5-469b-a891-8c4a1f58c18a.png https://dev.to/alimjan_ablikim_cf79f17a6 en Alimjan Ablikim Thu, 19 Feb 2026 07:50:47 +0000 https://dev.to/alimjan_ablikim_cf79f17a6/shadng-for-angular-shadcnui-inspired-design-system-with-icons-mcp-and-skills-313 https://dev.to/alimjan_ablikim_cf79f17a6/shadng-for-angular-shadcnui-inspired-design-system-with-icons-mcp-and-skills-313 <p>Angular developers deserve the same clean, composable product patterns that made shadcn/ui popular.</p> <p>That’s why I built <strong>ShadNG</strong>: an Angular implementation of shadcn/ui-inspired design patterns, plus an icon package, MCP server, and skills for modern AI coding workflows.</p> <h2> What is ShadNG? </h2> <p>ShadNG is a toolkit made of 4 parts:</p> <ul> <li> <strong>@shadng/sng-ui</strong> → Angular UI components</li> <li> <strong>@shadng/sng-icons</strong> → Angular icon package</li> <li> <strong>@shadng/sng-mcp</strong> → MCP server for better AI-assisted development</li> <li> <strong>sng-skills</strong> → ready skill packs for tools like Codex, Claude, Gemini, and more</li> </ul> <h2> Why this project exists </h2> <p>Most teams want:</p> <ul> <li>component patterns that are easy to edit</li> <li>no hard lock-in</li> <li>docs + examples that feel like real app UI</li> <li>better AI context when building features</li> </ul> <p>ShadNG focuses on exactly that.</p> <h2> Core idea: copy-paste ownership </h2> <p>You can install and use packages normally, and also use the copy-paste model to own component source in your app when needed.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code> npm i @shadng/sng-ui @shadng/sng-icons npx @shadng/sng-ui init npx @shadng/sng-ui add button card table dialog drawer </code></pre> </div> <p>This gives teams full control over implementation details without fighting a closed abstraction.</p> <h2> MCP + Skills </h2> <p>ShadNG also includes:</p> <ul> <li>MCP server (@shadng/sng-mcp) for structured AI context</li> <li>Skill packs (sng-skills) to guide different AI tools with consistent ShadNG conventions</li> </ul> <p>That helps AI assistants understand your project faster and generate changes that match your design system.</p> <h2> Live docs and demo </h2> <ul> <li>Website: <a href="https://shadng.js.org" rel="noopener noreferrer">https://shadng.js.org</a> </li> <li>UI docs: <a href="https://shadng.js.org/docs" rel="noopener noreferrer">https://shadng.js.org/docs</a> </li> <li>Icons explorer: <a href="https://shadng.js.org/icons" rel="noopener noreferrer">https://shadng.js.org/icons</a> </li> <li>Dashboard demo: <a href="https://shadng.js.org/dashboard" rel="noopener noreferrer">https://shadng.js.org/dashboard</a> </li> </ul> <h2> Packages </h2> <ul> <li>UI: <a href="https://www.npmjs.com/package/@shadng/sng-ui" rel="noopener noreferrer">https://www.npmjs.com/package/@shadng/sng-ui</a> </li> <li>Icons: <a href="https://www.npmjs.com/package/@shadng/sng-icons" rel="noopener noreferrer">https://www.npmjs.com/package/@shadng/sng-icons</a> </li> <li>MCP: <a href="https://www.npmjs.com/package/@shadng/sng-mcp" rel="noopener noreferrer">https://www.npmjs.com/package/@shadng/sng-mcp</a> </li> </ul> <h2> GitHub repos </h2> <ul> <li>UI: <a href="https://github.com/alimjanablikim/sng-ui" rel="noopener noreferrer">https://github.com/alimjanablikim/sng-ui</a> </li> <li>Icons: <a href="https://github.com/alimjanablikim/sng-icons" rel="noopener noreferrer">https://github.com/alimjanablikim/sng-icons</a> </li> <li>MCP: <a href="https://github.com/alimjanablikim/sng-mcp" rel="noopener noreferrer">https://github.com/alimjanablikim/sng-mcp</a> </li> <li>Skills: <a href="https://github.com/alimjanablikim/sng-skills" rel="noopener noreferrer">https://github.com/alimjanablikim/sng-skills</a> </li> </ul> <h2> Current direction </h2> <p>I’m continuing to improve:</p> <ul> <li>component depth and quality</li> <li>docs clarity for both humans and AI</li> <li>dashboard-grade examples</li> <li>MCP + skills ecosystem</li> </ul> <p>If you build Angular products, I’d love your feedback after trying ShadNG.</p> angular shadcn mcp ui