Team Composition

Team Composition

What Is This?

The "Team Composition" skill (team-ui) on the Happycapy Skills platform is a structured orchestration tool designed to manage and coordinate a multidisciplinary UI team through the entire user experience (UX) pipeline. This skill facilitates collaboration among specialists, ensuring each phase of UI development adheres to best practices and project requirements. It integrates tightly with UX design, UX review, and established studio UX templates, providing a clear workflow from initial specification through design, implementation, review, and final polish.

When invoked, the skill activates a well-defined sequence of roles and decision points. These include designated responsibilities for UX designers, UI programmers, art directors, engine UI specialists, and accessibility specialists. The skill enforces phase transitions using explicit user approval, supporting interactive and transparent decision-making.

Why Use It?

Modern UI development requires more than just coding screens and widgets. Delivering a polished, accessible, and engine-compliant user interface demands collaboration across multiple domains:

• Consistency: Each role ensures their domain's standards and requirements are met, resulting in a balanced, high-quality product.
• Traceability: The skill logs decisions and their rationales, making it easier to review and audit the development process.
• User Control: By presenting proposals at each phase and requiring user approval, it keeps project owners in the decision loop.
• Integration: The skill leverages existing templates and documentation, such as UX specs and design libraries, ensuring outputs are standardized and reusable.

This approach reduces miscommunication, accelerates consensus-building, and leads to better project outcomes.

How to Use It

When you invoke the team-ui skill with a UI feature description, the following pipeline is orchestrated:

1. UX Design Phase

   • The ux-designer drafts user flows, wireframes, and initial specifications using templates like ux-spec.md.
   • Accessibility and input handling are considered at this stage.
   • Example action:
     bash

     Task: Write ux-spec.md for "Settings Menu Overhaul"

   • The system presents the draft to the user, who must approve or request revisions.

2. Visual Design & Art Direction

   • The art-director reviews and refines the visual style, ensuring consistency with the project's art bible and layout standards.
   • Uses templates such as hud-design.md if the feature is HUD-related.
   • Example action:
     bash

     Task: Edit hud-design.md for "Mini-map Overlay"

3. Implementation

   • The ui-programmer selects the appropriate UI framework, codes screens, implements widgets, and ensures data binding.
   • All development follows the patterns laid out in the interaction-pattern-library.md.

4. Engine Compliance Review

   • The engine UI specialist audits the implementation, referencing technical standards in .claude/docs/technical-preferences.md.
   • Ensures patterns are optimized for the engine in use.

5. Accessibility Audit

   • The accessibility-specialist performs a compliance check in the final phase, verifying that the UI meets accessibility guidelines.

At each phase transition, the system uses AskUserQuestion to present the user with concise proposals generated by each subagent. The user selects an option, and the system logs the decision with a concise label. The workflow only proceeds when the user approves the current phase.

Example Decision Point

proposal_options = [
    "Accept UX Spec as drafted",
    "Request changes to navigation flow",
    "Add accessibility notes"
]
AskUserQuestion("Select how to proceed with the UX spec:", proposal_options)
## User selects: "Add accessibility notes"

When to Use It

Use the team-ui skill whenever you need to coordinate the design and implementation of a UI feature that requires input from multiple disciplines. It is especially valuable for:

• Large or complex UI changes that impact multiple systems or styles
• Projects with strict accessibility or engine compliance requirements
• Teams distributed across different roles or locations
• Workflows that demand high traceability and user oversight

For smaller UI tweaks or isolated bug fixes, the full pipeline may not be necessary. However, for any significant UI feature or overhaul, this skill ensures a robust and auditable process.

Important Notes

• Templates and Documentation: The skill depends on the presence of standard templates like ux-spec.md, hud-design.md, and interaction-pattern-library.md. Ensure these are available and up to date.
• User Approval Required: The pipeline will not advance phases without explicit user approval. This guarantees project owner involvement but may slow progress if approval is delayed.
• Engine Specialist Role: The engine UI specialist reads from .claude/docs/technical-preferences.md to validate implementation patterns. Keep this file current for optimal results.
• Accessibility: Accessibility is not an afterthought - the pipeline ends with a specialist audit, making it suitable for projects with strict compliance needs.
• Allowed Tools: The skill enables a variety of tools including Read, Glob, Grep, Write, Edit, Bash, Task, AskUserQuestion, and TodoWrite, maximizing automation within the controlled workflow.

By structuring UI team collaboration through explicit roles, decision points, and template-based documentation, the team-ui skill ensures your project’s UI development is thorough, compliant, and user-driven.