vf-module-development

Guide TypeScript and React module creation with layer architecture and barrel exports.

9|1|Updated Nov 21, 2025
One-click install
npx skills add https://github.com/veryfront/veryfront-code --skill vf-module-development
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vf-module-development
Source: https://github.com/veryfront/veryfront-code/tree/main/.claude/skills/vf-module-development
Command: npx skills add https://github.com/veryfront/veryfront-code --skill vf-module-development

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill addresses the complexities of organizing and structuring TypeScript and React modules in large-scale applications, offering guidance on dependency management, module architecture, and code best practices.

Core Features & Use Cases

  • Dependency Management: Defines clear rules for module dependencies to ensure a modular and maintainable codebase.
  • Module Architecture: Provides guidelines for creating modular code with proper boundaries and reusability.
  • Code Best Practices: Enforces standards such as named exports, JSDoc, and hash-based aliases for internal imports.
  • Use Case: Ideal for developers who want to create well-organized, scalable, and maintainable code structures for their projects.

Quick Start

To begin developing a new module, execute the following command in your project directory: deno task create-module <MODULE_NAME>

Frequently Asked Questions about vf-module-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure TypeScript and React modules for large-scale applications?

TypeScript and React modules require layer architecture, barrel exports, and hash-based aliases for internal imports. This approach enforces clear module boundaries and dependency management rules to ensure a modular, maintainable codebase.

What's the best way to manage dependencies in TypeScript and React modules?

Manage dependencies by defining clear rules for module dependencies to ensure modularity. This approach enforces proper boundaries and reusability, preventing tangled imports and maintaining a clean architecture across large-scale codebases.

How do I create a new module in a Veryfront Code application?

Create a new module in a Veryfront Code application by executing the command `deno task create-module <MODULE_NAME>` in your project directory. This initializes the module structure following the recommended layer architecture and dependency management guidelines.

Why use hash imports and barrel exports for React module development?

Hash imports and barrel exports enforce code best practices by providing hash-based aliases for internal imports and standardized named exports. This organization improves reusability and maintains clear module boundaries in TypeScript applications.

Does this module development approach work for maintaining existing codebases?

Yes, the module development approach works for maintaining existing codebases by providing guidelines for dependency management, module architecture, and code best practices. It is suitable for organizing and structuring scalable, maintainable TypeScript and React code.