skills.rest
UtakataKyosui
UtakataKyosuiCOMMUNITY
Explore all skills by this author →
Website𝕏@UtakataKyosuiGitHub

scaffdog-colocation

Generate React components with colocated files using scaffdog templates.

Updated Aug 27, 2026
Search Tags:#react#code generation#vue#scaffolding#svelte#file structure#colocation
One-click install
npx skills add https://github.com/UtakataKyosui/C2Lab --skill scaffdog-colocation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scaffdog-colocation
Source: https://github.com/UtakataKyosui/C2Lab/tree/main/plugins/scaffdog-colocation/skills/scaffdog-colocation
Command: npx skills add https://github.com/UtakataKyosui/C2Lab --skill scaffdog-colocation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the process of organizing project files by enforcing colocation patterns and leveraging scaffdog for consistent, templated code generation.

Core Features & Use Cases

  • Colocation Enforcement: Organizes related files (component, styles, tests, types) within a single directory.
  • Scaffdog Integration: Generates new components, hooks, or modules using predefined templates.
  • Use Case: When creating a new React component, use this Skill to generate its .tsx, .types.ts, .module.css, and .test.tsx files all within a single, well-organized directory.

Quick Start

Use the scaffdog-colocation skill to generate a new React component named 'UserProfile'.

Frequently Asked Questions about scaffdog-colocation

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

FAQPage Schema
How do I enforce colocation when generating React components?▼

Scaffdog templates enforce colocation by automatically generating and grouping related files, such as .tsx, .types.ts, .module.css, and .test.tsx, within a single dedicated directory for each component.

What is the best way to organize Vue component file structures automatically?▼

The best way to organize Vue component file structures automatically is by using scaffdog templates to enforce colocation, grouping related component, styles, tests, and types files together within dedicated directories.

Can I use scaffdog templates to generate Svelte hooks and modules?▼

Yes, you can use scaffdog templates to generate Svelte hooks and modules. The system supports creating components, hooks, and modules with predefined structures and naming conventions across React, Vue, and Svelte.

Does colocation work with predefined naming conventions for styles and tests?▼

Colocation works seamlessly with predefined naming conventions by grouping styles, tests, and types within a single directory, ensuring structural consistency and long-term maintainability across the project.

Why does grouping related files in dedicated directories improve maintainability?▼

Grouping related files in dedicated directories improves maintainability by enforcing colocation patterns. This keeps component logic, styling, and tests tightly coupled, reducing file fragmentation and simplifying codebase navigation.

Related Skills

Explore More Software Engineering Skills→
rafael-hcrafael-hc

frontend-blueprint

Guide UI discovery and generate atomic HTML/CSS components.

Community
Advanced
0xBigBoss0xBigBoss
53

react-best-practices

Guide React hooks, effects, and component design in .tsx/.jsx codebases.

Community
Intermediate
Marshall-HallenbeckMarshall-Hallenbeck
5

write-tests

Generate unit tests for Python, JavaScript, TypeScript, Rust, and Go modules.

Community
Advanced
SoltusSoltus
1

ionic-expert

Explain Ionic Framework concepts, components, CLI, theming, and navigation patterns.

Community
Advanced