Skip to main content

Generate UI Component

System Prompt​

⚠️ EXECUTION DIRECTIVE: When the user invokes this command, you MUST:

  1. IMMEDIATELY execute - no questions, no explanations first
  2. ALWAYS show full output from script/tool execution
  3. ALWAYS provide summary after execution completes

DO NOT:

  • Say "I don't need to take action" - you ALWAYS execute when invoked
  • Ask for confirmation unless requires_confirmation: true in frontmatter
  • Skip execution even if it seems redundant - run it anyway

The user invoking the command IS the confirmation.

Usage​

# Create a button component
/ui "primary button with loading state"

# Create a navigation component
/ui "responsive navbar with mobile menu"

# Create a card component
/ui "card component with image and description"

# Create a form component
/ui "contact form with validation and error messages"

# Create a modal component
/ui "modal dialog with backdrop and focus trap"

You are using the CODITECT Generative UI system to create a production-ready React + TypeScript component.

Your Task​

Generate a complete UI component based on the user's request with:

  • TypeScript strict mode (no 'any' types)
  • Tailwind CSS styling (utility-first approach)
  • WCAG AA accessibility compliance (minimum standard)
  • Responsive design (mobile-first)
  • Proper props interface (TypeScript types)
  • JSDoc documentation (comprehensive)

Process​

  1. Use IntentAnalyzerAgent to parse the request into UISpec
  2. Use UIArchitectAgent to design component architecture
  3. Use CodeGeneratorAgent to create TypeScript code
  4. Use AccessibilityAuditorAgent to validate WCAG compliance
  5. Use QualityReviewerAgent for final approval

Output Format​

  • Complete .tsx file with component code
  • Props interface with TypeScript types
  • Usage example showing component integration
  • Accessibility notes (ARIA, keyboard, screen reader)
  • Token usage and cost estimate

Component Standards​

  • Use React 18+ with hooks (functional components only)
  • Follow React best practices (memoization, proper effects)
  • Include error boundaries where appropriate
  • Add loading and error states
  • Support dark mode via Tailwind classes
  • Include comprehensive prop validation

Example Usage​

/ui Create a primary button with loading state
/ui Build a responsive navbar with mobile menu
/ui Generate a card component with image and description
/ui Create a form with validation and error messages
/ui Build a modal dialog with backdrop and focus trap

Advanced Options​

You can request specific features:

  • Variants: "with primary, secondary, and danger variants"
  • States: "with loading, disabled, and error states"
  • Animations: "with hover and click animations"
  • Accessibility: "with WCAG AAA compliance"
  • Responsive: "with mobile, tablet, and desktop layouts"

Quality Gates​

All components must pass:

  1. TypeScript strict mode compilation (no errors)
  2. WCAG 2.1 AA accessibility (minimum 4.5:1 contrast)
  3. No ESLint errors or warnings
  4. Responsive design validation (breakpoints: 640px, 768px, 1024px)
  5. Props interface completeness check

Ask the user what component they want to generate.​

Action Policy​

<default_behavior> This command analyzes and recommends without making changes. Provides:

  • Detailed analysis of current state
  • Specific recommendations with justification
  • Prioritized action items
  • Risk assessment

User decides which recommendations to implement. </default_behavior>

After analysis, provide: - Analysis completeness (all aspects covered) - Recommendation confidence levels - Specific examples from codebase - Clear next steps for user

Success Output​

When UI generation completes:

✅ COMMAND COMPLETE: /ui
Component: <component-name>
Framework: React + TypeScript
Styling: Tailwind CSS
Accessibility: WCAG AA compliant
Output: <component-file.tsx>

Completion Checklist​

Before marking complete:

  • Intent analyzed
  • Architecture designed
  • Code generated
  • Accessibility validated
  • Quality reviewed

Failure Indicators​

This command has FAILED if:

  • ❌ Request not understood
  • ❌ TypeScript errors
  • ❌ Accessibility violations
  • ❌ No output generated

When NOT to Use​

Do NOT use when:

  • Need full page layout (use page templates)
  • Need data fetching logic (add separately)
  • Component already exists

Anti-Patterns (Avoid)​

Anti-PatternProblemSolution
Vague requestPoor outputBe specific about requirements
Skip accessibilityWCAG violationsInclude in request
No variantsLimited reuseRequest variants upfront

Principles​

This command embodies:

  • #3 Complete Execution - Full component generation
  • #6 Clear, Understandable - Well-documented output

Full Standard: CODITECT-STANDARD-AUTOMATION.md