The latest articles on DEV Community by Claudio Ceballos Paz (@claudio_ceballospaz_97d5). https://dev.to/claudio_ceballospaz_97d5 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%2F3727151%2Fe8227108-eb2e-4bb4-b32c-dbe7f51e974e.jpg https://dev.to/claudio_ceballospaz_97d5 en Claudio Ceballos Paz Thu, 22 Jan 2026 22:22:31 +0000 https://dev.to/claudio_ceballospaz_97d5/introducing-an-ai-skill-for-vite-react-best-practices-9l3 https://dev.to/claudio_ceballospaz_97d5/introducing-an-ai-skill-for-vite-react-best-practices-9l3 <p>Modern tools like Vite + React make starting a frontend project incredibly fast. What’s harder is maintaining a consistent, scalable structure as the codebase grows — especially when AI coding assistants become part of the workflow.</p> <p>Inspired by Vercel’s React Best Practices, I built an AI-ready skill that encodes a production-oriented set of conventions for Vite + React projects, designed to be shared, installed, and applied consistently.</p> <p>👉 <a href="https://github.com/claudiocebpaz/vite-react-best-practices" rel="noopener noreferrer">https://github.com/claudiocebpaz/vite-react-best-practices</a></p> <h2> Why an AI Skill? </h2> <p>Best practices break down when they live only in documentation or tribal knowledge.</p> <p>This project treats best practices as a skill:<br> • Explicit, machine-readable conventions<br> • Predictable project structure<br> • Easy to apply during code generation and refactors<br> • Consistent for humans and AI agents</p> <p>As AI tools take a more active role in writing and modifying code, having a shared baseline becomes essential.</p> <h2> What problem does this solve? </h2> <p>Many Vite + React projects run into the same issues:<br> • Inconsistent structure across teams<br> • Implicit rules that are hard to enforce<br> • Early decisions that don’t scale<br> • AI-generated code that doesn’t match project conventions</p> <p>This skill provides a single source of truth for how a project should be structured and extended.</p> <h2> What’s included </h2> <p>The repository defines a high-leverage baseline, including:<br> • 📁 A Vercel-inspired folder structure<br> • 🧩 Clear separation of concerns (UI, hooks, domain logic)<br> • 🧠 High-impact conventions applied early<br> • ⚙️ Patterns designed for long-term scalability<br> • ✨ Minimal rules with real payoff</p> <p>The focus is on preventing structural problems before they appear.</p> <h2> Installing the skill </h2> <p>The skill can be installed directly into your AI coding environment using the skills CLI:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>npx skills add claudiocebpaz/vite-react-best-practices </code></pre> </div> <p>This installs the skill for all supported AI agents detected on your system, such as:<br> • Gemini CLI<br> • Claude Code<br> • OpenCode<br> • Other compatible AI coding assistants</p> <p>Once installed, AI agents can follow the same conventions when generating or refactoring code in Vite + React projects.</p> <h2> How to use it </h2> <p>You can adopt the skill in multiple ways:<br> 1. As a baseline for new projects<br> 2. As a reference during code reviews<br> 3. As a constraint for AI-assisted coding workflows</p> <p>The goal is not automation — it’s alignment.</p> <h2> Feedback &amp; contributions </h2> <p>Best practices evolve with ecosystems and tooling.<br> Feedback, ideas, and contributions are welcome.</p> <p>⭐ If this skill is useful, a star helps others discover it.<br> Thanks for reading 🚀</p>